From 8177f6dc667f2edca66073e433baf5cff36cda41 Mon Sep 17 00:00:00 2001
From: lolka1333 <xtrafcyz@gmail.com>
Date: Tue, 5 May 2026 18:27:49 +0300
Subject: ws/inbounds: realtime fixes + perf for 10k+ client inbounds (#4123)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ws/inbounds: realtime fixes + perf for 10k+ client inbounds

- hub: dedup, throttle, panic-restart, deadlock fix, race tests
- client: backoff cap + slow-retry instead of giving up
- broadcast: delta-only payload, count-based invalidate fallback
- filter: fix empty online list (Inbound has no .id, use dbInbound.toInbound)
- perf: O(N²)→O(N) traffic merge, bulk delete, /setEnable endpoint
- traffic: monotonic all_time + UI clamp + propagate in delta handler
- session: persist on update/logout (fixes logout-after-password-change)
- ui: protocol tags flex, traffic bar normalize

* Remove hub_test.go file

* fix: ws hub, inbound service, and frontend correctness

- propagate DelInbound error on disable path in SetInboundEnable
- skip empty emails in updateClientTraffics to avoid constraint violations
- use consistent IN ? clause, drop redundant ErrRecordNotFound guards
- Hub.Unregister: direct removeClient fallback when channel is full
- applyClientStatsDelta: O(1) email lookup via per-inbound Map cache
- WS payload size check: Blob.size instead of .length for real byte count

* fix: chunk large IN ? queries and fix IPv6 same-origin check

* fix: chunk large IN ? queries and fix IPv6 same-origin check

* fix: unify clientStats cache, throttle clarity, hub constants

* fix(ui): align traffic/expiry cell columns across all rows

* style(ui): redesign outbounds table for visual consistency

* style(ui): redesign routing table for visual consistency

* fix:

* fix:

* fix:

* fix:

* fix:

* fix: font

* refactor: simplify outbound tone functions for consistency and maintainability

---------

Co-authored-by: lolka1333 <test123@gmail.com>
---
 web/html/settings/xray/outbounds.html | 183 +++++++++++++++++++++-------------
 1 file changed, 116 insertions(+), 67 deletions(-)

(limited to 'web/html/settings/xray/outbounds.html')

diff --git a/web/html/settings/xray/outbounds.html b/web/html/settings/xray/outbounds.html
index f5e83a99..6a5dd40c 100644
--- a/web/html/settings/xray/outbounds.html
+++ b/web/html/settings/xray/outbounds.html
@@ -1,8 +1,8 @@
 {{define "settings/xray/outbounds"}}
-<a-space direction="vertical" size="middle">
-    <a-row>
-        <a-col :xs="12" :sm="12" :lg="12">
-            <a-space direction="horizontal" size="small">
+<a-space direction="vertical" size="middle" class="outbounds-modern">
+    <a-row :gutter="[12, 12]" align="middle" justify="space-between">
+        <a-col :xs="24" :sm="14" :lg="14">
+            <a-space direction="horizontal" size="small" class="outbounds-toolbar">
                 <a-button type="primary" icon="plus" @click="addOutbound">
                     <span v-if="!isMobile">{{ i18n
                         "pages.xray.outbound.addOutbound" }}</span>
@@ -11,7 +11,7 @@
                 <a-button type="primary" icon="api" @click="showNord()">NordVPN</a-button>
             </a-space>
         </a-col>
-        <a-col :xs="12" :sm="12" :lg="12" :style="{ textAlign: 'right' }">
+        <a-col :xs="24" :sm="10" :lg="10" class="outbounds-toolbar-right">
             <a-button-group>
                 <a-button icon="sync" @click="refreshOutboundTraffic()" :loading="refreshing"></a-button>
                 <a-popconfirm placement="topRight" @confirm="resetOutboundTraffic(-1)"
@@ -19,92 +19,141 @@
                     :overlay-class-name="themeSwitcher.currentTheme" ok-text='{{ i18n "reset"}}'
                     cancel-text='{{ i18n "cancel"}}'>
                     <a-icon slot="icon" type="question-circle-o"
-                        :style="{ color: themeSwitcher.isDarkTheme ? '#008771' : '#008771' }"></a-icon>
+                        :style="{ color: '#008771' }"></a-icon>
                     <a-button icon="retweet"></a-button>
                 </a-popconfirm>
             </a-button-group>
         </a-col>
     </a-row>
-    <a-table :columns="outboundColumns" bordered :row-key="r => r.key" :data-source="outboundData"
-        :scroll="isMobile ? {} : { x: 800 }" :pagination="false" :indent-size="0"
+    <a-table :columns="outboundColumns" :row-key="r => r.key"
+        :data-source="outboundData"
+        :scroll="isMobile ? { x: 720 } : {}"
+        :pagination="false"
+        :indent-size="0"
+        class="outbounds-table"
         :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}` }'>
         <template slot="action" slot-scope="text, outbound, index">
-            <span>[[ index+1 ]]</span>
-            <a-dropdown :trigger="['click']">
-                <a-icon @click="e => e.preventDefault()" type="more"
-                    :style="{ fontSize: '16px', textDecoration: 'bold' }"></a-icon>
-                <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
-                    <a-menu-item v-if="index>0" @click="setFirstOutbound(index)">
-                        <a-icon type="vertical-align-top"></a-icon>
-                        <span>{{ i18n "pages.xray.rules.first"}}</span>
-                    </a-menu-item>
-                    <a-menu-item @click="editOutbound(index)">
-                        <a-icon type="edit"></a-icon>
-                        <span>{{ i18n "edit" }}</span>
-                    </a-menu-item>
-                    <a-menu-item @click="resetOutboundTraffic(index)">
-                        <span>
+            <div class="outbound-action-cell">
+                <span class="outbound-index">[[ index+1 ]]</span>
+                <a-dropdown :trigger="['click']">
+                    <a-button shape="circle" size="small" class="outbound-action-btn"
+                        @click="e => e.preventDefault()">
+                        <a-icon type="more"></a-icon>
+                    </a-button>
+                    <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
+                        <a-menu-item v-if="index>0"
+                            @click="setFirstOutbound(index)">
+                            <a-icon type="vertical-align-top"></a-icon>
+                            <span>{{ i18n "pages.xray.rules.first"}}</span>
+                        </a-menu-item>
+                        <a-menu-item @click="editOutbound(index)">
+                            <a-icon type="edit"></a-icon>
+                            <span>{{ i18n "edit" }}</span>
+                        </a-menu-item>
+                        <a-menu-item @click="resetOutboundTraffic(index)">
                             <a-icon type="retweet"></a-icon>
                             <span>{{ i18n "pages.inbounds.resetTraffic"}}</span>
+                        </a-menu-item>
+                        <a-menu-item @click="deleteOutbound(index)">
+                            <span :style="{ color: '#FF4D4F' }">
+                                <a-icon type="delete"></a-icon>
+                                <span>{{ i18n "delete"}}</span>
+                            </span>
+                        </a-menu-item>
+                    </a-menu>
+                </a-dropdown>
+            </div>
+        </template>
+        <template slot="identity" slot-scope="text, outbound">
+            <div class="outbound-identity-cell">
+                <a-tooltip :title="outbound.tag" :overlay-class-name="themeSwitcher.currentTheme">
+                    <span class="outbound-tag">[[ outbound.tag ]]</span>
+                </a-tooltip>
+                <div class="outbound-protocol-cell">
+                    <span class="outbound-pill"
+                        :class="outboundProtocolTone(outbound.protocol)">
+                        [[ outbound.protocol ]]
+                    </span>
+                    <template
+                        v-if="[Protocols.VMess, Protocols.VLESS, Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
+                        <span class="outbound-pill"
+                            :class="outboundNetworkTone(outbound.streamSettings.network)">
+                            [[ outbound.streamSettings.network ]]
                         </span>
-                    </a-menu-item>
-                    <a-menu-item @click="deleteOutbound(index)">
-                        <span :style="{ color: '#FF4D4F' }">
-                            <a-icon type="delete"></a-icon>
-                            <span>{{ i18n "delete"}}</span>
+                        <span class="outbound-pill"
+                            :class="outboundSecurityTone(outbound.streamSettings.security)"
+                            v-if="isOutboundSecurityVisible(outbound.streamSettings.security)">
+                            [[ outbound.streamSettings.security ]]
                         </span>
-                    </a-menu-item>
-                </a-menu>
-            </a-dropdown>
-        </template>
-        <template slot="address" slot-scope="text, outbound, index">
-            <p :style="{ margin: '0 5px' }" v-for="addr in findOutboundAddress(outbound)">[[ addr ]]</p>
+                    </template>
+                </div>
+            </div>
         </template>
-        <template slot="protocol" slot-scope="text, outbound, index">
-            <a-tag :style="{ margin: '0' }" color="purple">[[ outbound.protocol
-                ]]</a-tag>
-            <template
-                v-if="[Protocols.VMess, Protocols.VLESS, Protocols.Trojan, Protocols.Shadowsocks].includes(outbound.protocol)">
-                <a-tag :style="{ margin: '0' }" color="blue">[[
-                    outbound.streamSettings.network ]]</a-tag>
-                <a-tag :style="{ margin: '0' }" v-if="outbound.streamSettings.security=='tls'" color="green">tls</a-tag>
-                <a-tag :style="{ margin: '0' }" v-if="outbound.streamSettings.security=='reality'"
-                    color="green">reality</a-tag>
-            </template>
+        <template slot="address" slot-scope="text, outbound">
+            <div class="outbound-address-list">
+                <a-tooltip
+                    v-for="addr in outboundAddresses(outbound)"
+                    :key="addr"
+                    :title="addr"
+                    :overlay-class-name="themeSwitcher.currentTheme">
+                    <span class="outbound-address-pill">[[ addr ]]</span>
+                </a-tooltip>
+                <span class="outbound-address-empty"
+                    v-if="outboundAddresses(outbound).length === 0">—</span>
+            </div>
         </template>
-        <template slot="traffic" slot-scope="text, outbound, index">
-            <a-tag color="green">[[ findOutboundTraffic(outbound) ]]</a-tag>
+        <template slot="traffic" slot-scope="text, outbound">
+            <div class="outbound-traffic-cell">
+                <span class="outbound-traffic-up" :title='`{{ i18n "pages.index.upload" }}`'>
+                    <a-icon type="arrow-up"></a-icon>
+                    [[ SizeFormatter.sizeFormat(findOutboundUp(outbound)) ]]
+                </span>
+                <span class="outbound-traffic-sep" aria-hidden="true"></span>
+                <span class="outbound-traffic-down" :title='`{{ i18n "pages.index.download" }}`'>
+                    <a-icon type="arrow-down"></a-icon>
+                    [[ SizeFormatter.sizeFormat(findOutboundDown(outbound)) ]]
+                </span>
+            </div>
         </template>
         <template slot="test" slot-scope="text, outbound, index">
             <a-tooltip>
-                <template slot="title">{{ i18n "pages.xray.outbound.test"
-                    }}</template>
-                <a-button type="primary" shape="circle" icon="thunderbolt"
-                    :loading="outboundTestStates[index] && outboundTestStates[index].testing"
+                <template slot="title">{{ i18n "pages.xray.outbound.test" }}</template>
+                <a-button
+                    type="primary"
+                    shape="circle"
+                    icon="thunderbolt"
+                    class="outbound-test-btn"
+                    :loading="isOutboundTesting(index)"
                     @click="testOutbound(index)"
-                    :disabled="(outbound.protocol === 'blackhole' || outbound.tag === 'blocked') || (outboundTestStates[index] && outboundTestStates[index].testing)">
+                    :disabled="isOutboundUntestable(outbound) || isOutboundTesting(index)">
                 </a-button>
             </a-tooltip>
         </template>
         <template slot="testResult" slot-scope="text, outbound, index">
-            <div v-if="outboundTestStates[index] && outboundTestStates[index].result">
-                <a-tag v-if="outboundTestStates[index].result.success" color="green">
-                    [[ outboundTestStates[index].result.delay ]]ms
-                    <span v-if="outboundTestStates[index].result.statusCode">
-                        ([[ outboundTestStates[index].result.statusCode
-                        ]])</span>
-                </a-tag>
-                <a-tooltip v-else :title="outboundTestStates[index].result.error">
-                    <a-tag color="red">
-                        Failed
-                    </a-tag>
+            <div class="outbound-result-cell" v-if="outboundTestResult(index)">
+                <span v-if="outboundTestResult(index).success"
+                    class="outbound-result-pill outbound-result-ok">
+                    <a-icon type="check-circle" theme="filled"></a-icon>
+                    [[ outboundTestResult(index).delay ]]&nbsp;ms
+                    <span class="outbound-result-status"
+                        v-if="outboundTestResult(index).statusCode">
+                        · [[ outboundTestResult(index).statusCode ]]
+                    </span>
+                </span>
+                <a-tooltip v-else
+                    :title="outboundTestResult(index).error"
+                    :overlay-class-name="themeSwitcher.currentTheme">
+                    <span class="outbound-result-pill outbound-result-fail">
+                        <a-icon type="close-circle" theme="filled"></a-icon>
+                        {{ i18n "pages.xray.outbound.testFailed" }}
+                    </span>
                 </a-tooltip>
             </div>
-            <span v-else-if="outboundTestStates[index] && outboundTestStates[index].testing">
-                <a-icon type="loading" />
+            <span class="outbound-result-loading" v-else-if="isOutboundTesting(index)">
+                <a-icon type="loading"></a-icon>
             </span>
-            <span v-else>-</span>
+            <span class="outbound-result-idle" v-else>—</span>
         </template>
     </a-table>
 </a-space>
-{{end}}
\ No newline at end of file
+{{end}}
-- 
cgit v1.2.3