Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 21:24:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refactor: simplify outbound tone functions for consistency and maintainability

Browse source
This commit is contained in:
lolka1333 2026-05-05 16:26:14 +02:00
parent a9fe989b1f
commit 4918f0c73c
1 changed files with 12 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
web/html/xray.html
View file

@ -767,47 +767,14 @@
}, },
findOutboundUp(o) { return this.outboundTrafficFor(o).up; }, findOutboundUp(o) { return this.outboundTrafficFor(o).up; },
findOutboundDown(o) { return this.outboundTrafficFor(o).down; }, findOutboundDown(o) { return this.outboundTrafficFor(o).down; },
// Visual class for the protocol pill — keeps the colour palette consistent // One tone per category instead of per-value. Adding a new protocol or
// across rows and matches the tone used elsewhere in the panel. // transport inherits the category colour — no styling work required.
outboundProtocolTone(protocol) { // Hierarchy: emerald (protocol — primary identity, matches brand) →
switch ((protocol || '').toLowerCase()) { // slate (network — transport is plumbing, sits back) → violet (security —
case 'freedom': return 'tone-emerald'; // accent, only rendered for tls/reality so a stand-out hue is earned).
case 'blackhole': return 'tone-violet'; outboundProtocolTone() { return 'tone-emerald'; },
case 'wireguard': return 'tone-cyan'; outboundNetworkTone() { return 'tone-slate'; },
case 'vmess': return 'tone-blue'; outboundSecurityTone() { return 'tone-violet'; },
case 'vless': return 'tone-sky';
case 'trojan': return 'tone-amber';
case 'shadowsocks': return 'tone-pink';
case 'http':
case 'socks': return 'tone-slate';
case 'dns': return 'tone-indigo';
default: return 'tone-slate';
}
},
// Distinct palette for the transport (network) pill so it never collides
// with the protocol tone in the same row.
outboundNetworkTone(network) {
switch ((network || '').toLowerCase()) {
case 'tcp': return 'tone-slate';
case 'ws': return 'tone-cyan';
case 'xhttp': return 'tone-amber';
case 'h2':
case 'http': return 'tone-indigo';
case 'grpc': return 'tone-pink';
case 'quic': return 'tone-violet';
case 'kcp': return 'tone-emerald';
case 'httpupgrade': return 'tone-rose';
default: return 'tone-slate';
}
},
// TLS / reality / none tone — visually tied to the security model used.
outboundSecurityTone(security) {
switch ((security || '').toLowerCase()) {
case 'tls': return 'tone-emerald';
case 'reality': return 'tone-mint';
default: return 'tone-slate';
}
},
// Whether the security label is one we render as a pill in the table. // Whether the security label is one we render as a pill in the table.
isOutboundSecurityVisible(security) { isOutboundSecurityVisible(security) {
return security === 'tls' || security === 'reality'; return security === 'tls' || security === 'reality';
@ -2230,17 +2197,12 @@
white-space: nowrap; white-space: nowrap;
flex: 0 0 auto; flex: 0 0 auto;
} }
/* Outbound pill tones: emerald = protocol, slate = network, violet = security.
tone-emerald and tone-violet are also consumed by routing.html for the
outboundTag / balancerTag pills. */
.xray-page .outbound-pill.tone-emerald { background: rgba(0, 191, 165, 0.14); color: #4dd4be; border-color: rgba(0, 191, 165, 0.28); } .xray-page .outbound-pill.tone-emerald { background: rgba(0, 191, 165, 0.14); color: #4dd4be; border-color: rgba(0, 191, 165, 0.28); }
.xray-page .outbound-pill.tone-mint { background: rgba(72, 222, 128, 0.14); color: #7ee2a4; border-color: rgba(72, 222, 128, 0.30); }
.xray-page .outbound-pill.tone-violet { background: rgba(155, 89, 219, 0.16); color: #b489e8; border-color: rgba(155, 89, 219, 0.32); }
.xray-page .outbound-pill.tone-cyan { background: rgba(34, 184, 207, 0.16); color: #6ed3e3; border-color: rgba(34, 184, 207, 0.32); }
.xray-page .outbound-pill.tone-sky { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.32); }
.xray-page .outbound-pill.tone-blue { background: rgba(56, 116, 230, 0.16); color: #82a7ee; border-color: rgba(56, 116, 230, 0.32); }
.xray-page .outbound-pill.tone-amber { background: rgba(231, 154, 47, 0.16); color: #f0b56a; border-color: rgba(231, 154, 47, 0.32); }
.xray-page .outbound-pill.tone-pink { background: rgba(225, 79, 153, 0.16); color: #ec85b6; border-color: rgba(225, 79, 153, 0.32); }
.xray-page .outbound-pill.tone-rose { background: rgba(244, 63, 94, 0.14); color: #fb7185; border-color: rgba(244, 63, 94, 0.30); }
.xray-page .outbound-pill.tone-slate { background: rgba(160, 174, 192, 0.14); color: #b8c2d0; border-color: rgba(160, 174, 192, 0.26); } .xray-page .outbound-pill.tone-slate { background: rgba(160, 174, 192, 0.14); color: #b8c2d0; border-color: rgba(160, 174, 192, 0.26); }
.xray-page .outbound-pill.tone-indigo { background: rgba(99, 102, 241, 0.16); color: #9ea0ee; border-color: rgba(99, 102, 241, 0.32); } .xray-page .outbound-pill.tone-violet { background: rgba(155, 89, 219, 0.16); color: #b489e8; border-color: rgba(155, 89, 219, 0.32); }
/* Traffic — dual arrow widget, fixed columns so all rows align */ /* Traffic — dual arrow widget, fixed columns so all rows align */
.xray-page .outbound-traffic-cell { .xray-page .outbound-traffic-cell {