mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-07-23 04:56:07 +00:00
ws/inbounds: realtime fixes + perf for 10k+ client inbounds (#4123)
* 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>
This commit is contained in:
lolka1333
@@ -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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="address" slot-scope="text, outbound, index">
|
||||
<p :style="{ margin: '0 5px' }" v-for="addr in findOutboundAddress(outbound)">[[ addr ]]</p>
|
||||
<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="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>
|
||||
<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 ]] 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}}
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user