From 4800f8fb706a092a38255ee70904227238b2a6f6 Mon Sep 17 00:00:00 2001
From: lolka1333 <xtrafcyz@gmail.com>
Date: Mon, 5 Jan 2026 05:50:40 +0100
Subject: feat: Real-time Outbound Traffic, UI Improvements & Fix (#3629)

* Refactor HTML and JavaScript for improved UI and functionality

- Cleaned up JavaScript methods in subscription.js for better readability.
- Updated inbounds.html to clarify traffic update handling and removed unnecessary comments.
- Enhanced xray.html by correcting casing in routingDomainStrategies.
- Added mobile touch scrolling styles in page.html for better tab navigation on small screens.
- Streamlined vless.html by removing redundant line breaks and improving form layout.
- Refined subscription subpage.html for better structure and user experience.
- Adjusted outbounds.html to improve button visibility and functionality.
- Updated xray_traffic_job.go to ensure accurate traffic updates and real-time UI refresh.

* Refactor client traffic handling in InboundService

- Updated addClientTraffic method to initialize onlineClients as an empty slice instead of nil.
- Improved clarity and consistency in handling empty onlineUsers scenario.

* Add WebSocket support for outbounds traffic updates

- Implemented WebSocket connection in xray.html to handle real-time updates for outbounds traffic.
- Enhanced xray_traffic_job.go to retrieve and broadcast outbounds traffic updates.
- Introduced MessageTypeOutbounds in hub.go for managing outbounds messages.
- Added BroadcastOutbounds function in notifier.go to facilitate broadcasting outbounds updates to connected clients.

---------

Co-authored-by: lolka1333 <test123@gmail.com>
---
 web/html/settings/panel/subscription/subpage.html | 167 +++++++++-------------
 web/html/settings/xray/outbounds.html             |   4 +-
 2 files changed, 73 insertions(+), 98 deletions(-)

(limited to 'web/html/settings')

diff --git a/web/html/settings/panel/subscription/subpage.html b/web/html/settings/panel/subscription/subpage.html
index 0043d0d2..222352ff 100644
--- a/web/html/settings/panel/subscription/subpage.html
+++ b/web/html/settings/panel/subscription/subpage.html
@@ -20,28 +20,20 @@
                         </a-space>
                     </template>
                     <template #extra>
-                        <a-popover
-                            :overlay-class-name="themeSwitcher.currentTheme"
-                            title='{{ i18n "menu.settings" }}'
+                        <a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}'
                             placement="bottomRight" trigger="click">
                             <template #content>
                                 <a-space direction="vertical" :size="10">
                                     <a-theme-switch-login></a-theme-switch-login>
                                     <span>{{ i18n "pages.settings.language"
                                         }}</span>
-                                    <a-select ref="selectLang" class="w-100"
-                                        v-model="lang"
+                                    <a-select ref="selectLang" class="w-100" v-model="lang"
                                         @change="LanguageManager.setLanguage(lang)"
                                         :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="l.value"
-                                            label="English"
-                                            v-for="l in LanguageManager.supportedLanguages"
-                                            :key="l.value">
-                                            <span role="img"
-                                                :aria-label="l.name"
-                                                v-text="l.icon"></span>
-                                            &nbsp;&nbsp;<span
-                                                v-text="l.name"></span>
+                                        <a-select-option :value="l.value" label="English"
+                                            v-for="l in LanguageManager.supportedLanguages" :key="l.value">
+                                            <span role="img" :aria-label="l.name" v-text="l.icon"></span>
+                                            &nbsp;&nbsp;<span v-text="l.name"></span>
                                         </a-select-option>
                                     </a-select>
                                 </a-space>
@@ -53,42 +45,31 @@
                     <a-form layout="vertical">
                         <a-form-item>
                             <a-space direction="vertical" align="center">
-                                <a-row type="flex" :gutter="[8,8]"
-                                    justify="center" style="width:100%">
-                                    <a-col :xs="24" :sm="app.subJsonUrl ? 12 : 24"
-                                        style="text-align:center;">
+                                <a-row type="flex" :gutter="[8,8]" justify="center" style="width:100%">
+                                    <a-col :xs="24" :sm="app.subJsonUrl ? 12 : 24" style="text-align:center;">
                                         <tr-qr-box class="qr-box">
-                                            <a-tag color="purple"
-                                                class="qr-tag">
+                                            <a-tag color="purple" class="qr-tag">
                                                 <span>{{ i18n
                                                     "pages.settings.subSettings"}}</span>
                                             </a-tag>
                                             <tr-qr-bg class="qr-bg-sub">
-                                                <tr-qr-bg-inner
-                                                    class="qr-bg-sub-inner">
-                                                    <canvas id="qrcode"
-                                                        class="qr-cv"
-                                                        title='{{ i18n "copy" }}'
+                                                <tr-qr-bg-inner class="qr-bg-sub-inner">
+                                                    <canvas id="qrcode" class="qr-cv" title='{{ i18n "copy" }}'
                                                         @click="copy(app.subUrl)"></canvas>
                                                 </tr-qr-bg-inner>
                                             </tr-qr-bg>
                                         </tr-qr-box>
                                     </a-col>
-                                    <a-col v-if="app.subJsonUrl" :xs="24" :sm="12"
-                                        style="text-align:center;">
+                                    <a-col v-if="app.subJsonUrl" :xs="24" :sm="12" style="text-align:center;">
                                         <tr-qr-box class="qr-box">
-                                            <a-tag color="purple"
-                                                class="qr-tag">
+                                            <a-tag color="purple" class="qr-tag">
                                                 <span>{{ i18n
                                                     "pages.settings.subSettings"}}
                                                     Json</span>
                                             </a-tag>
                                             <tr-qr-bg class="qr-bg-sub">
-                                                <tr-qr-bg-inner
-                                                    class="qr-bg-sub-inner">
-                                                    <canvas id="qrcode-subjson"
-                                                        class="qr-cv"
-                                                        title='{{ i18n "copy" }}'
+                                                <tr-qr-bg-inner class="qr-bg-sub-inner">
+                                                    <canvas id="qrcode-subjson" class="qr-cv" title='{{ i18n "copy" }}'
                                                         @click="copy(app.subJsonUrl)"></canvas>
                                                 </tr-qr-bg-inner>
                                             </tr-qr-bg>
@@ -100,45 +81,36 @@
 
                         <a-form-item>
                             <a-descriptions bordered :column="1" size="small">
-                                <a-descriptions-item
-                                    label='{{ i18n "subscription.subId" }}'>[[
+                                <a-descriptions-item label='{{ i18n "subscription.subId" }}'>[[
                                     app.sId
                                     ]]</a-descriptions-item>
-                                <a-descriptions-item
-                                    label='{{ i18n "subscription.status" }}'>
+                                <a-descriptions-item label='{{ i18n "subscription.status" }}'>
                                     <template v-if="isUnlimited">
                                         <a-tag color="purple">{{ i18n
                                             "subscription.unlimited" }}</a-tag>
                                     </template>
                                     <template v-else>
-                                        <a-tag
-                                            :color="isActive ? 'green' : 'red'">[[
+                                        <a-tag :color="isActive ? 'green' : 'red'">[[
                                             isActive ? '{{ i18n
                                             "subscription.active" }}' : '{{ i18n
                                             "subscription.inactive" }}'
                                             ]]</a-tag>
                                     </template>
                                 </a-descriptions-item>
-                                <a-descriptions-item
-                                    label='{{ i18n "subscription.downloaded" }}'>[[
+                                <a-descriptions-item label='{{ i18n "subscription.downloaded" }}'>[[
                                     app.download
                                     ]]</a-descriptions-item>
-                                <a-descriptions-item
-                                    label='{{ i18n "subscription.uploaded" }}'>[[
+                                <a-descriptions-item label='{{ i18n "subscription.uploaded" }}'>[[
                                     app.upload
                                     ]]</a-descriptions-item>
-                                <a-descriptions-item
-                                    label='{{ i18n "usage" }}'>[[ app.used
+                                <a-descriptions-item label='{{ i18n "usage" }}'>[[ app.used
                                     ]]</a-descriptions-item>
-                                <a-descriptions-item
-                                    label='{{ i18n "subscription.totalQuota" }}'>[[
+                                <a-descriptions-item label='{{ i18n "subscription.totalQuota" }}'>[[
                                     app.total
                                     ]]</a-descriptions-item>
-                                <a-descriptions-item v-if="app.totalByte > 0"
-                                    label='{{ i18n "remained" }}'>[[
+                                <a-descriptions-item v-if="app.totalByte > 0" label='{{ i18n "remained" }}'>[[
                                     app.remained ]]</a-descriptions-item>
-                                <a-descriptions-item
-                                    label='{{ i18n "lastOnline" }}'>
+                                <a-descriptions-item label='{{ i18n "lastOnline" }}'>
                                     <template v-if="app.lastOnlineMs > 0">
                                         [[ IntlUtil.formatDate(app.lastOnlineMs) ]]
                                     </template>
@@ -146,8 +118,7 @@
                                         <span>-</span>
                                     </template>
                                 </a-descriptions-item>
-                                <a-descriptions-item
-                                    label='{{ i18n "subscription.expiry" }}'>
+                                <a-descriptions-item label='{{ i18n "subscription.expiry" }}'>
                                     <template v-if="app.expireMs === 0">
                                         {{ i18n "subscription.noExpiry" }}
                                     </template>
@@ -160,32 +131,48 @@
                     </a-form>
 
                     <br />
-                    <a-list bordered>
-                        <a-list-item v-for="(link, idx) in links" :key="link">
-                            <div style="width:100%; text-align:center;">
-                                <a-button type="primary" :block="isMobile"
-                                    @click="copy(link)">[[ linkName(link, idx)
-                                    ]]</a-button>
+                    <div v-for="(link, idx) in links" :key="link"
+                        style="position: relative; margin-bottom: 20px; text-align: center;">
+                        <div class="qr-box" style="display: inline-block; width: 100%; max-width: 100%;">
+                            <a-tag color="purple"
+                                style="margin-bottom: -10px; position: relative; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
+                                <span>[[ linkName(link, idx) ]]</span>
+                            </a-tag>
+                            <div @click="copy(link)" style="
+                                cursor: pointer;
+                                background: rgba(0, 0, 0, 0.2);
+                                border: 1px solid rgba(255, 255, 255, 0.1);
+                                border-radius: 12px;
+                                padding: 25px 20px 15px 20px;
+                                margin-top: -12px;
+                                word-break: break-all;
+                                color: #fff;
+                                font-size: 13px;
+                                line-height: 1.5;
+                                text-align: left;
+                                font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+                                transition: all 0.3s;
+                                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+                            " onmouseover="this.style.background='rgba(0, 0, 0, 0.3)'; this.style.borderColor='rgba(255, 255, 255, 0.2)'"
+                                onmouseout="this.style.background='rgba(0, 0, 0, 0.2)'; this.style.borderColor='rgba(255, 255, 255, 0.1)'">
+                                [[ link ]]
                             </div>
-                        </a-list-item>
-                    </a-list>
+                        </div>
+                    </div>
+                    </div>
                     <br />
 
                     <a-form layout="vertical">
                         <a-form-item>
-                            <a-row type="flex" justify="center" :gutter="[8,8]"
-                                style="width:100%">
-                                <a-col :xs="24" :sm="12"
-                                    style="text-align:center;">
+                            <a-row type="flex" justify="center" :gutter="[8,8]" style="width:100%">
+                                <a-col :xs="24" :sm="12" style="text-align:center;">
                                     <!-- Android dropdown -->
                                     <a-dropdown :trigger="['click']">
                                         <a-button icon="android" :block="isMobile"
-                                            :style="{ marginTop: isMobile ? '6px' : 0 }"
-                                            size="large" type="primary">
+                                            :style="{ marginTop: isMobile ? '6px' : 0 }" size="large" type="primary">
                                             Android <a-icon type="down" />
                                         </a-button>
-                                        <a-menu slot="overlay"
-                                            :class="themeSwitcher.currentTheme">
+                                        <a-menu slot="overlay" :class="themeSwitcher.currentTheme">
                                             <a-menu-item key="android-v2box"
                                                 @click="open('v2box://install-sub?url=' + encodeURIComponent(app.subUrl) + '&name=' + encodeURIComponent(app.sId))">V2Box</a-menu-item>
                                             <a-menu-item key="android-v2rayng"
@@ -194,39 +181,32 @@
                                                 @click="copy(app.subUrl)">Sing-box</a-menu-item>
                                             <a-menu-item key="android-v2raytun"
                                                 @click="copy(app.subUrl)">V2RayTun</a-menu-item>
-                                            <a-menu-item key="android-npvtunnel"
-                                                @click="copy(app.subUrl)">NPV
+                                            <a-menu-item key="android-npvtunnel" @click="copy(app.subUrl)">NPV
                                                 Tunnel</a-menu-item>
-											<a-menu-item key="android-happ"
-                                                @click="open('happ://add/' + encodeURIComponent(app.subUrl))">Happ</a-menu-item>	
+                                            <a-menu-item key="android-happ"
+                                                @click="open('happ://add/' + encodeURIComponent(app.subUrl))">Happ</a-menu-item>
                                         </a-menu>
                                     </a-dropdown>
                                 </a-col>
-                                <a-col :xs="24" :sm="12"
-                                    style="text-align:center;">
+                                <a-col :xs="24" :sm="12" style="text-align:center;">
                                     <!-- iOS dropdown -->
                                     <a-dropdown :trigger="['click']">
                                         <a-button icon="apple" :block="isMobile"
-                                            :style="{ marginTop: isMobile ? '6px' : 0 }"
-                                            size="large" type="primary">
+                                            :style="{ marginTop: isMobile ? '6px' : 0 }" size="large" type="primary">
                                             iOS <a-icon type="down" />
                                         </a-button>
-                                        <a-menu slot="overlay"
-                                            :class="themeSwitcher.currentTheme">
+                                        <a-menu slot="overlay" :class="themeSwitcher.currentTheme">
                                             <a-menu-item key="ios-shadowrocket"
                                                 @click="open(shadowrocketUrl)">Shadowrocket</a-menu-item>
-                                            <a-menu-item key="ios-v2box"
-                                                @click="open(v2boxUrl)">V2Box</a-menu-item>
+                                            <a-menu-item key="ios-v2box" @click="open(v2boxUrl)">V2Box</a-menu-item>
                                             <a-menu-item key="ios-streisand"
                                                 @click="open(streisandUrl)">Streisand</a-menu-item>
                                             <a-menu-item key="ios-v2raytun"
                                                 @click="copy(v2raytunUrl)">V2RayTun</a-menu-item>
-                                            <a-menu-item key="ios-npvtunnel"
-                                                @click="copy(npvtunUrl)">NPV
+                                            <a-menu-item key="ios-npvtunnel" @click="copy(npvtunUrl)">NPV
                                                 Tunnel
                                             </a-menu-item>
-											<a-menu-item key="ios-happ"
-                                                @click="open(happUrl)">Happ</a-menu-item>
+                                            <a-menu-item key="ios-happ" @click="open(happUrl)">Happ</a-menu-item>
                                         </a-menu>
                                     </a-dropdown>
                                 </a-col>
@@ -240,17 +220,12 @@
 </a-layout>
 
 <!-- Bootstrap data for external JS -->
-<template id="subscription-data" data-sid="{{ .sId }}"
-    data-sub-url="{{ .subUrl }}" data-subjson-url="{{ .subJsonUrl }}"
-    data-download="{{ .download }}"
-    data-upload="{{ .upload }}" data-used="{{ .used }}"
-    data-total="{{ .total }}" data-remained="{{ .remained }}"
-    data-expire="{{ .expire }}" data-lastonline="{{ .lastOnline }}"
-    data-downloadbyte="{{ .downloadByte }}"
-    data-uploadbyte="{{ .uploadByte }}" data-totalbyte="{{ .totalByte }}"
+<template id="subscription-data" data-sid="{{ .sId }}" data-sub-url="{{ .subUrl }}" data-subjson-url="{{ .subJsonUrl }}"
+    data-download="{{ .download }}" data-upload="{{ .upload }}" data-used="{{ .used }}" data-total="{{ .total }}"
+    data-remained="{{ .remained }}" data-expire="{{ .expire }}" data-lastonline="{{ .lastOnline }}"
+    data-downloadbyte="{{ .downloadByte }}" data-uploadbyte="{{ .uploadByte }}" data-totalbyte="{{ .totalByte }}"
     data-datepicker="{{ .datepicker }}"></template>
-<textarea id="subscription-links"
-    style="display:none">{{ range .result }}{{ . }}
+<textarea id="subscription-links" style="display:none">{{ range .result }}{{ . }}
 {{ end }}</textarea>
 
 {{template "component/aThemeSwitch" .}}
diff --git a/web/html/settings/xray/outbounds.html b/web/html/settings/xray/outbounds.html
index a5211fca..1c099308 100644
--- a/web/html/settings/xray/outbounds.html
+++ b/web/html/settings/xray/outbounds.html
@@ -3,8 +3,8 @@
     <a-row>
         <a-col :xs="12" :sm="12" :lg="12">
             <a-space direction="horizontal" size="small">
-                <a-button type="primary" icon="plus" @click="addOutbound()">
-                    {{ i18n "pages.xray.outbound.addOutbound" }}
+                <a-button type="primary" icon="plus" @click="addOutbound">
+                    <span v-if="!isMobile">{{ i18n "pages.xray.outbound.addOutbound" }}</span>
                 </a-button>
                 <a-button type="primary" icon="cloud" @click="showWarp()">WARP</a-button>
             </a-space>
-- 
cgit v1.2.3