From 2e6faf69e62274a35611eb20b0e0a05251c4a8cd Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Fri, 20 Jun 2025 19:30:46 +0700
Subject: [PATCH 1/8] fix: generate correct keys for shadowsocks inbounds

---
 web/assets/js/model/inbound.js          |  4 ++--
 web/assets/js/util/index.js             | 10 ++++++++--
 web/html/form/client.html               |  2 +-
 web/html/form/protocol/shadowsocks.html |  2 +-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/assets/js/model/inbound.js b/web/assets/js/model/inbound.js
index 2a5fb6d6..5228001c 100644
--- a/web/assets/js/model/inbound.js
+++ b/web/assets/js/model/inbound.js
@@ -2150,7 +2150,7 @@ Inbound.TrojanSettings.Fallback = class extends XrayCommonClass {
 Inbound.ShadowsocksSettings = class extends Inbound.Settings {
     constructor(protocol,
         method = SSMethods.BLAKE3_AES_256_GCM,
-        password = RandomUtil.randomShadowsocksPassword(),
+        password = '',
         network = 'tcp,udp',
         shadowsockses = [new Inbound.ShadowsocksSettings.Shadowsocks()],
         ivCheck = false,
@@ -2188,7 +2188,7 @@ Inbound.ShadowsocksSettings = class extends Inbound.Settings {
 Inbound.ShadowsocksSettings.Shadowsocks = class extends XrayCommonClass {
     constructor(
         method = '',
-        password = RandomUtil.randomShadowsocksPassword(),
+        password = '',
         email = RandomUtil.randomLowerAndNum(8),
         limitIp = 0,
         totalGB = 0,
diff --git a/web/assets/js/util/index.js b/web/assets/js/util/index.js
index 0d869af6..c40e02c4 100644
--- a/web/assets/js/util/index.js
+++ b/web/assets/js/util/index.js
@@ -138,8 +138,14 @@ class RandomUtil {
         }
     }
 
-    static randomShadowsocksPassword() {
-        const array = new Uint8Array(32);
+    static randomShadowsocksPassword(method = SSMethods.BLAKE3_AES_256_GCM) {
+        let length = 32;
+
+        if ([SSMethods.BLAKE3_AES_128_GCM].includes(method)) {
+            length = 16; 
+        }
+
+        const array = new Uint8Array(length);
 
         window.crypto.getRandomValues(array);
 
diff --git a/web/html/form/client.html b/web/html/form/client.html
index c67f1470..846bbd13 100644
--- a/web/html/form/client.html
+++ b/web/html/form/client.html
@@ -22,7 +22,7 @@
                     <span>{{ i18n "reset" }}</span>
                 </template>
                 {{ i18n "password" }}
-                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS"@click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
+                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword(inbound.settings.method)" type="sync"></a-icon>
                 <a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
             </a-tooltip>
         </template>
diff --git a/web/html/form/protocol/shadowsocks.html b/web/html/form/protocol/shadowsocks.html
index b9813afb..06e12075 100644
--- a/web/html/form/protocol/shadowsocks.html
+++ b/web/html/form/protocol/shadowsocks.html
@@ -31,7 +31,7 @@
             <a-tooltip>
                 <template slot="title">
                     <span>{{ i18n "reset" }}</span>
-                </template> Password <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
+                </template> Password <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword(inbound.settings.method)" type="sync"></a-icon>
             </a-tooltip>
         </template>
         <a-input v-model.trim="inbound.settings.password"></a-input>

From 5c10035bd964b41ce466ef16ca5ef8bb9a4507f6 Mon Sep 17 00:00:00 2001
From: Vadim Iskuchekov <egregors@pm.me>
Date: Sat, 21 Jun 2025 09:55:35 +0200
Subject: [PATCH 2/8] feat: add comments under client id (#3131)

---
 web/html/component/aClientTable.html    | 39 ++++++++--
 web/html/form/protocol/shadowsocks.html |  7 +-
 web/html/form/protocol/trojan.html      |  7 +-
 web/html/form/protocol/vless.html       |  7 +-
 web/html/form/protocol/vmess.html       |  7 +-
 web/html/inbounds.html                  | 99 +++++++++++++++++++++++--
 6 files changed, 146 insertions(+), 20 deletions(-)

diff --git a/web/html/component/aClientTable.html b/web/html/component/aClientTable.html
index 868112d9..8ab08679 100644
--- a/web/html/component/aClientTable.html
+++ b/web/html/component/aClientTable.html
@@ -41,14 +41,28 @@
   </template>
 </template>
 <template slot="client" slot-scope="text, client">
-  <a-tooltip>
-    <template slot="title">
-      <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
-      <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
-      <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
-    </template>
-    <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
-  </a-tooltip> [[ client.email ]]
+  <div class="client-cell">
+    <div class="client-info-row">
+      <a-tooltip>
+        <template slot="title">
+          <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
+          <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
+          <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
+        </template>
+        <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
+      </a-tooltip>
+      <span class="client-email">[[ client.email ]]</span>
+    </div>
+    <div v-if="client.comment && client.comment.trim()" style="margin-left: 18px;">
+      <a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
+        <template slot="title">
+          [[ client.comment ]]
+        </template>
+        <span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
+      </a-tooltip>
+      <span v-else class="client-comment">[[ client.comment ]]</span>
+    </div>
+  </div>
 </template>
 <template slot="traffic" slot-scope="text, client">
   <a-popover :overlay-class-name="themeSwitcher.currentTheme">
@@ -168,6 +182,15 @@
   <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
     <template slot="content">
       <table>
+        <tr v-if="client.comment && client.comment.trim()">
+          <td colspan="3" :style="{ textAlign: 'left', borderBottom: '1px solid #f0f0f0', paddingBottom: '8px', marginBottom: '8px' }">
+            <div :style="{ fontSize: '0.9em', fontWeight: '500', marginBottom: '4px' }">[[ client.email ]]</div>
+            <div :style="{ fontSize: '0.85em', color: '#666', fontStyle: 'italic', wordBreak: 'break-word', maxWidth: '250px' }">[[ client.comment ]]</div>
+          </td>
+        </tr>
+        <tr v-else>
+          <td colspan="3" :style="{ textAlign: 'center', fontWeight: '500', paddingBottom: '8px' }">[[ client.email ]]</td>
+        </tr>
         <tr>
           <td colspan="3" :style="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
         </tr>
diff --git a/web/html/form/protocol/shadowsocks.html b/web/html/form/protocol/shadowsocks.html
index 06e12075..04cd9399 100644
--- a/web/html/form/protocol/shadowsocks.html
+++ b/web/html/form/protocol/shadowsocks.html
@@ -13,7 +13,12 @@
                     <th>Password</th>
                 </tr>
                 <tr v-for="(client, index) in inbound.settings.shadowsockses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td>[[ client.email ]]</td>
+                    <td>
+                      <div class="client-cell">
+                        <div class="client-email">[[ client.email ]]</div>
+                        <div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
+                      </div>
+                    </td>
                     <td>[[ client.password ]]</td>
                 </tr>
             </table>
diff --git a/web/html/form/protocol/trojan.html b/web/html/form/protocol/trojan.html
index fc327721..6c7b3773 100644
--- a/web/html/form/protocol/trojan.html
+++ b/web/html/form/protocol/trojan.html
@@ -12,7 +12,12 @@
         <th>Password</th>
       </tr>
       <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-        <td>[[ client.email ]]</td>
+        <td>
+          <div class="client-cell">
+            <div class="client-email">[[ client.email ]]</div>
+            <div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
+          </div>
+        </td>
         <td>[[ client.password ]]</td>
       </tr>
     </table>
diff --git a/web/html/form/protocol/vless.html b/web/html/form/protocol/vless.html
index 3cebda6e..88274f71 100644
--- a/web/html/form/protocol/vless.html
+++ b/web/html/form/protocol/vless.html
@@ -12,7 +12,12 @@
         <th>ID</th>
       </tr>
       <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-        <td>[[ client.email ]]</td>
+        <td>
+          <div class="client-cell">
+            <div class="client-email">[[ client.email ]]</div>
+            <div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
+          </div>
+        </td>
         <td>[[ client.id ]]</td>
       </tr>
     </table>
diff --git a/web/html/form/protocol/vmess.html b/web/html/form/protocol/vmess.html
index 3c5200ac..94a0cc58 100644
--- a/web/html/form/protocol/vmess.html
+++ b/web/html/form/protocol/vmess.html
@@ -13,7 +13,12 @@
                 <th>{{ i18n "security" }}</th>
             </tr>
             <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                <td>[[ client.email ]]</td>
+                <td>
+                  <div class="client-cell">
+                    <div class="client-email">[[ client.email ]]</div>
+                    <div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
+                  </div>
+                </td>
                 <td>[[ client.id ]]</td>
                 <td>[[ client.security ]]</td>
             </tr>
diff --git a/web/html/inbounds.html b/web/html/inbounds.html
index 29e6b00f..1750aa44 100644
--- a/web/html/inbounds.html
+++ b/web/html/inbounds.html
@@ -79,6 +79,54 @@
     max-width: 200px;
     overflow: hidden;
   }
+  .client-comment {
+    font-size: 12px;
+    color: #888;
+    font-style: italic;
+    line-height: 1.2;
+  }
+  .dark .client-comment {
+    color: #bbb;
+  }
+  .client-email {
+    font-weight: 500;
+  }
+  .client-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .client-info-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .client-popup-item {
+    margin-bottom: 8px;
+    padding: 4px 0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  .dark .client-popup-item {
+    border-bottom: 1px solid #333;
+  }
+  .client-popup-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+  .client-popup-email {
+    font-weight: 500;
+    margin-bottom: 2px;
+  }
+  .client-popup-comment {
+    font-size: 11px;
+    color: #666;
+    font-style: italic;
+    max-width: 200px;
+    word-break: break-word;
+  }
+  .dark .client-popup-comment {
+    color: #aaa;
+  }
   .online-animation .ant-badge-status-dot {
     animation: onlineAnimation 1.2s linear infinite;
   }
@@ -382,25 +430,37 @@
                     <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
                     <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].deactive"><span>[[ clientEmail ]]</span></div>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                          <div class="client-popup-email">[[ clientEmail ]]</div>
+                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                        </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                     </a-popover>
                     <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].depleted"><span>[[ clientEmail ]]</span></div>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                          <div class="client-popup-email">[[ clientEmail ]]</div>
+                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                        </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                     </a-popover>
                     <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].expiring"><span>[[ clientEmail ]]</span></div>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                          <div class="client-popup-email">[[ clientEmail ]]</div>
+                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                        </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
                     </a-popover>
                     <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].online"><span>[[ clientEmail ]]</span></div>
+                        <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                          <div class="client-popup-email">[[ clientEmail ]]</div>
+                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                        </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
                     </a-popover>
@@ -479,25 +539,37 @@
                             <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
                             <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
-                                <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
+                                <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                                  <div class="client-popup-email">[[ clientEmail ]]</div>
+                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                             </a-popover>
                             <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
-                                <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
+                                <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                                  <div class="client-popup-email">[[ clientEmail ]]</div>
+                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                             </a-popover>
                             <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
-                                <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
+                                <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                                  <div class="client-popup-email">[[ clientEmail ]]</div>
+                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
                             </a-popover>
                             <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
-                                <p v-for="clientEmail in clientCount[dbInbound.id].online">[[ clientEmail ]]</p>
+                                <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                                  <div class="client-popup-email">[[ clientEmail ]]</div>
+                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
                             </a-popover>
@@ -716,6 +788,17 @@
             loading(spinning = true) {
                 this.spinning = spinning;
             },
+            getClientWithComment(email, inboundId) {
+                const dbInbound = this.dbInbounds.find(inbound => inbound.id === inboundId);
+                if (!dbInbound) return { email, comment: '' };
+                
+                const inboundSettings = JSON.parse(dbInbound.settings);
+                if (inboundSettings.clients) {
+                    const client = inboundSettings.clients.find(c => c.email === email);
+                    return client ? { email: client.email, comment: client.comment || '' } : { email, comment: '' };
+                }
+                return { email, comment: '' };
+            },
             async getDBInbounds() {
                 this.refreshing = true;
                 const msg = await HttpUtil.post('/panel/inbound/list');

From 1644904755983ae76fca5bc7466a5da530c37013 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Sat, 21 Jun 2025 15:24:52 +0700
Subject: [PATCH 3/8] chore: clients comment improvement

- use default ant components instead custom styles
- remove comments in inbound info modal (duplicates information)
- enhance tooltip usage
---
 web/html/component/aClientTable.html    |  51 +++++------
 web/html/form/protocol/shadowsocks.html |   7 +-
 web/html/form/protocol/trojan.html      |   7 +-
 web/html/form/protocol/vless.html       |   7 +-
 web/html/form/protocol/vmess.html       |   7 +-
 web/html/inbounds.html                  | 115 ++++++++++++------------
 6 files changed, 85 insertions(+), 109 deletions(-)

diff --git a/web/html/component/aClientTable.html b/web/html/component/aClientTable.html
index 8ab08679..96bd502f 100644
--- a/web/html/component/aClientTable.html
+++ b/web/html/component/aClientTable.html
@@ -41,28 +41,28 @@
   </template>
 </template>
 <template slot="client" slot-scope="text, client">
-  <div class="client-cell">
-    <div class="client-info-row">
-      <a-tooltip>
-        <template slot="title">
-          <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
-          <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
-          <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
-        </template>
-        <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
-      </a-tooltip>
+  <a-space direction="horizontal" :size="2">
+    <a-tooltip>
+      <template slot="title">
+        <template v-if="!isClientEnabled(record, client.email)">{{ i18n "depleted" }}</template>
+        <template v-else-if="!client.enable">{{ i18n "disabled" }}</template>
+        <template v-else-if="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
+      </template>
+      <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
+    </a-tooltip>
+    <a-space direction="vertical" :size="2">
       <span class="client-email">[[ client.email ]]</span>
-    </div>
-    <div v-if="client.comment && client.comment.trim()" style="margin-left: 18px;">
-      <a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
-        <template slot="title">
-          [[ client.comment ]]
-        </template>
-        <span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
-      </a-tooltip>
-      <span v-else class="client-comment">[[ client.comment ]]</span>
-    </div>
-  </div>
+      <template v-if="client.comment && client.comment.trim()">
+        <a-tooltip v-if="client.comment.length > 50" :overlay-class-name="themeSwitcher.currentTheme">
+          <template slot="title">
+            [[ client.comment ]]
+          </template>
+          <span class="client-comment">[[ client.comment.substring(0, 47) + '...' ]]</span>
+        </a-tooltip>
+        <span v-else class="client-comment">[[ client.comment ]]</span>
+      </template>
+    </a-space>
+  </a-space>
 </template>
 <template slot="traffic" slot-scope="text, client">
   <a-popover :overlay-class-name="themeSwitcher.currentTheme">
@@ -182,15 +182,6 @@
   <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
     <template slot="content">
       <table>
-        <tr v-if="client.comment && client.comment.trim()">
-          <td colspan="3" :style="{ textAlign: 'left', borderBottom: '1px solid #f0f0f0', paddingBottom: '8px', marginBottom: '8px' }">
-            <div :style="{ fontSize: '0.9em', fontWeight: '500', marginBottom: '4px' }">[[ client.email ]]</div>
-            <div :style="{ fontSize: '0.85em', color: '#666', fontStyle: 'italic', wordBreak: 'break-word', maxWidth: '250px' }">[[ client.comment ]]</div>
-          </td>
-        </tr>
-        <tr v-else>
-          <td colspan="3" :style="{ textAlign: 'center', fontWeight: '500', paddingBottom: '8px' }">[[ client.email ]]</td>
-        </tr>
         <tr>
           <td colspan="3" :style="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
         </tr>
diff --git a/web/html/form/protocol/shadowsocks.html b/web/html/form/protocol/shadowsocks.html
index 04cd9399..06e12075 100644
--- a/web/html/form/protocol/shadowsocks.html
+++ b/web/html/form/protocol/shadowsocks.html
@@ -13,12 +13,7 @@
                     <th>Password</th>
                 </tr>
                 <tr v-for="(client, index) in inbound.settings.shadowsockses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td>
-                      <div class="client-cell">
-                        <div class="client-email">[[ client.email ]]</div>
-                        <div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
-                      </div>
-                    </td>
+                    <td>[[ client.email ]]</td>
                     <td>[[ client.password ]]</td>
                 </tr>
             </table>
diff --git a/web/html/form/protocol/trojan.html b/web/html/form/protocol/trojan.html
index 6c7b3773..fc327721 100644
--- a/web/html/form/protocol/trojan.html
+++ b/web/html/form/protocol/trojan.html
@@ -12,12 +12,7 @@
         <th>Password</th>
       </tr>
       <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-        <td>
-          <div class="client-cell">
-            <div class="client-email">[[ client.email ]]</div>
-            <div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
-          </div>
-        </td>
+        <td>[[ client.email ]]</td>
         <td>[[ client.password ]]</td>
       </tr>
     </table>
diff --git a/web/html/form/protocol/vless.html b/web/html/form/protocol/vless.html
index 88274f71..3cebda6e 100644
--- a/web/html/form/protocol/vless.html
+++ b/web/html/form/protocol/vless.html
@@ -12,12 +12,7 @@
         <th>ID</th>
       </tr>
       <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-        <td>
-          <div class="client-cell">
-            <div class="client-email">[[ client.email ]]</div>
-            <div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
-          </div>
-        </td>
+        <td>[[ client.email ]]</td>
         <td>[[ client.id ]]</td>
       </tr>
     </table>
diff --git a/web/html/form/protocol/vmess.html b/web/html/form/protocol/vmess.html
index 94a0cc58..3c5200ac 100644
--- a/web/html/form/protocol/vmess.html
+++ b/web/html/form/protocol/vmess.html
@@ -13,12 +13,7 @@
                 <th>{{ i18n "security" }}</th>
             </tr>
             <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                <td>
-                  <div class="client-cell">
-                    <div class="client-email">[[ client.email ]]</div>
-                    <div v-if="client.comment && client.comment.trim()" class="client-comment">[[ client.comment ]]</div>
-                  </div>
-                </td>
+                <td>[[ client.email ]]</td>
                 <td>[[ client.id ]]</td>
                 <td>[[ client.security ]]</td>
             </tr>
diff --git a/web/html/inbounds.html b/web/html/inbounds.html
index 1750aa44..5ee541df 100644
--- a/web/html/inbounds.html
+++ b/web/html/inbounds.html
@@ -81,51 +81,16 @@
   }
   .client-comment {
     font-size: 12px;
-    color: #888;
-    font-style: italic;
-    line-height: 1.2;
-  }
-  .dark .client-comment {
-    color: #bbb;
+    opacity: 0.75;
+    cursor: help;
   }
   .client-email {
     font-weight: 500;
   }
-  .client-cell {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .client-info-row {
+  .client-popup-item {
     display: flex;
     align-items: center;
-    gap: 6px;
-  }
-  .client-popup-item {
-    margin-bottom: 8px;
-    padding: 4px 0;
-    border-bottom: 1px solid #f0f0f0;
-  }
-  .dark .client-popup-item {
-    border-bottom: 1px solid #333;
-  }
-  .client-popup-item:last-child {
-    border-bottom: none;
-    margin-bottom: 0;
-  }
-  .client-popup-email {
-    font-weight: 500;
-    margin-bottom: 2px;
-  }
-  .client-popup-comment {
-    font-size: 11px;
-    color: #666;
-    font-style: italic;
-    max-width: 200px;
-    word-break: break-word;
-  }
-  .dark .client-popup-comment {
-    color: #aaa;
+    gap: 5px;
   }
   .online-animation .ant-badge-status-dot {
     animation: onlineAnimation 1.2s linear infinite;
@@ -431,8 +396,13 @@
                     <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
                         <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
-                          <div class="client-popup-email">[[ clientEmail ]]</div>
-                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                          <span>[[ clientEmail ]]</span>
+                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                            <template #title>
+                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                            </template>
+                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                          </a-tooltip>
                         </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
@@ -440,8 +410,13 @@
                     <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
                         <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
-                          <div class="client-popup-email">[[ clientEmail ]]</div>
-                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                          <span>[[ clientEmail ]]</span>
+                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                            <template #title>
+                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                            </template>
+                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                          </a-tooltip>
                         </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
@@ -449,8 +424,13 @@
                     <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
                         <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
-                          <div class="client-popup-email">[[ clientEmail ]]</div>
-                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                          <span>[[ clientEmail ]]</span>
+                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                            <template #title>
+                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                            </template>
+                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                          </a-tooltip>
                         </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
@@ -458,8 +438,13 @@
                     <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                       <template slot="content">
                         <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
-                          <div class="client-popup-email">[[ clientEmail ]]</div>
-                          <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                          <span>[[ clientEmail ]]</span>
+                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                            <template #title>
+                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                            </template>
+                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                          </a-tooltip>
                         </div>
                       </template>
                       <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
@@ -540,8 +525,13 @@
                             <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
                                 <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
-                                  <div class="client-popup-email">[[ clientEmail ]]</div>
-                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                  <span>[[ clientEmail ]]</span>
+                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                    <template #title>
+                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                    </template>
+                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                  </a-tooltip>
                                 </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
@@ -549,8 +539,13 @@
                             <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
                                 <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
-                                  <div class="client-popup-email">[[ clientEmail ]]</div>
-                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                  <span>[[ clientEmail ]]</span>
+                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                    <template #title>
+                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                    </template>
+                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                  </a-tooltip>
                                 </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
@@ -558,8 +553,13 @@
                             <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
                                 <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
-                                  <div class="client-popup-email">[[ clientEmail ]]</div>
-                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                  <span>[[ clientEmail ]]</span>
+                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                    <template #title>
+                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                    </template>
+                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                  </a-tooltip>
                                 </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
@@ -567,8 +567,13 @@
                             <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
                               <template slot="content">
                                 <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
-                                  <div class="client-popup-email">[[ clientEmail ]]</div>
-                                  <div v-if="getClientWithComment(clientEmail, dbInbound.id).comment" class="client-popup-comment">[[ getClientWithComment(clientEmail, dbInbound.id).comment ]]</div>
+                                  <span>[[ clientEmail ]]</span>
+                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                    <template #title>
+                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                    </template>
+                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                  </a-tooltip>
                                 </div>
                               </template>
                               <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>

From d642774a4493912e76dbc294dce834cf5b635324 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Sat, 21 Jun 2025 15:38:43 +0700
Subject: [PATCH 4/8] refactor: use new page templates

---
 web/html/common/head.html |  31 --
 web/html/common/js.html   |  14 -
 web/html/common/page.html |  58 +++
 web/html/inbounds.html    |  27 +-
 web/html/index.html       | 744 +++++++++++++++++++-------------------
 web/html/login.html       | 326 +++++++++--------
 web/html/settings.html    | 131 ++++---
 web/html/xray.html        | 178 +++++----
 8 files changed, 756 insertions(+), 753 deletions(-)
 delete mode 100644 web/html/common/head.html
 delete mode 100644 web/html/common/js.html
 create mode 100644 web/html/common/page.html

diff --git a/web/html/common/head.html b/web/html/common/head.html
deleted file mode 100644
index 35901769..00000000
--- a/web/html/common/head.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{{define "head"}}
-<head>
-  <meta charset="UTF-8">
-  <meta name="renderer" content="webkit">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="robots" content="noindex,nofollow">
-  <link rel="stylesheet" href="{{ .base_path }}assets/ant-design-vue/antd.min.css">
-  <link rel="stylesheet" href="{{ .base_path }}assets/css/custom.min.css?{{ .cur_ver }}">
-  <style>
-    [v-cloak] {
-      display: none;
-    }
-    /* vazirmatn-regular - arabic_latin_latin-ext */
-    @font-face {
-      font-display: swap;
-      font-family: 'Vazirmatn';
-      font-style: normal;
-      font-weight: 400;
-      src: url('{{ .base_path }}assets/Vazirmatn-UI-NL-Regular.woff2') format('woff2');
-      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Vazirmatn', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
-        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
-        'Segoe UI Emoji', 'Segoe UI Symbol';
-    }
-  </style>
-  <title>{{ .host }} – {{ i18n .title}}</title>
-</head>
-<div id="message"></div>
-{{end}}
\ No newline at end of file
diff --git a/web/html/common/js.html b/web/html/common/js.html
deleted file mode 100644
index 1c2d64b3..00000000
--- a/web/html/common/js.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{{define "js"}}
-<script src="{{ .base_path }}assets/vue/vue.min.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/moment/moment.min.js"></script>
-<script src="{{ .base_path }}assets/ant-design-vue/antd.min.js"></script>
-<script src="{{ .base_path }}assets/axios/axios.min.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/qs/qs.min.js"></script>
-<script src="{{ .base_path }}assets/js/axios-init.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/js/util/date-util.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
-<script>
-    const basePath = '{{ .base_path }}';
-    axios.defaults.baseURL = basePath;
-</script>
-{{end}}
\ No newline at end of file
diff --git a/web/html/common/page.html b/web/html/common/page.html
new file mode 100644
index 00000000..f1c58fe1
--- /dev/null
+++ b/web/html/common/page.html
@@ -0,0 +1,58 @@
+{{ define "page/head_start" }}
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="renderer" content="webkit">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="robots" content="noindex,nofollow">
+  <link rel="stylesheet" href="{{ .base_path }}assets/ant-design-vue/antd.min.css">
+  <link rel="stylesheet" href="{{ .base_path }}assets/css/custom.min.css?{{ .cur_ver }}">
+  <style>
+    [v-cloak] {
+      display: none;
+    }
+    /* vazirmatn-regular - arabic_latin_latin-ext */
+    @font-face {
+      font-display: swap;
+      font-family: 'Vazirmatn';
+      font-style: normal;
+      font-weight: 400;
+      src: url('{{ .base_path }}assets/Vazirmatn-UI-NL-Regular.woff2') format('woff2');
+      unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC, U+0030-0039;
+    }
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Vazirmatn', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
+  </style>
+  <title>{{ .host }} – {{ i18n .title}}</title>
+{{ end }}
+
+{{ define "page/head_end" }}
+</head>
+{{ end }}
+
+{{ define "page/body_start" }}
+<body>
+  <div id="message"></div>
+{{ end }}
+
+{{ define "page/body_scripts" }}
+<script src="{{ .base_path }}assets/vue/vue.min.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/moment/moment.min.js"></script>
+<script src="{{ .base_path }}assets/ant-design-vue/antd.min.js"></script>
+<script src="{{ .base_path }}assets/axios/axios.min.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/qs/qs.min.js"></script>
+<script src="{{ .base_path }}assets/js/axios-init.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/js/util/date-util.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
+<script>
+  const basePath = '{{ .base_path }}';
+  axios.defaults.baseURL = basePath;
+</script>
+{{ end }}
+  
+{{ define "page/body_end" }}
+</body>
+</html>
+{{ end }}
\ No newline at end of file
diff --git a/web/html/inbounds.html b/web/html/inbounds.html
index 5ee541df..7b00ae5e 100644
--- a/web/html/inbounds.html
+++ b/web/html/inbounds.html
@@ -1,6 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-{{template "head" .}}
+{{ template "page/head_start" .}}
 <style>
   .ant-table:not(.ant-table-expanded-row .ant-table) {
     outline: 1px solid #f0f0f0;
@@ -143,8 +141,9 @@
     padding: 12px 2px;
   }
 </style>
+{{ template "page/head_end" .}}
 
-<body>
+{{ template "page/body_start" .}}
 <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
@@ -657,7 +656,7 @@
     </a-layout-content>
   </a-layout>
 </a-layout>
-{{template "js" .}}
+{{template "page/body_scripts" .}}
 <script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/uri/URI.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/inbound.js?{{ .cur_ver }}"></script>
@@ -666,6 +665,13 @@
 {{template "component/aThemeSwitch" .}}
 {{template "component/aCustomStatistic" .}}
 {{template "component/aPersianDatepicker" .}}
+{{template "modals/inboundModal"}}
+{{template "modals/promptModal"}}
+{{template "modals/qrcodeModal"}}
+{{template "modals/textModal"}}
+{{template "modals/inboundInfoModal"}}
+{{template "modals/clientsModal"}}
+{{template "modals/clientsBulkModal"}}
 <script>
     const columns = [{
         title: "ID",
@@ -1607,13 +1613,4 @@
         },
     });
 </script>
-
-{{template "modals/inboundModal"}}
-{{template "modals/promptModal"}}
-{{template "modals/qrcodeModal"}}
-{{template "modals/textModal"}}
-{{template "modals/inboundInfoModal"}}
-{{template "modals/clientsModal"}}
-{{template "modals/clientsBulkModal"}}
-</body>
-</html>
+{{ template "page/body_end" .}}
\ No newline at end of file
diff --git a/web/html/index.html b/web/html/index.html
index 2a6fb0ad..61e3947f 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -1,6 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-{{template "head" .}}
+{{ template "page/head_start" .}}
 <style>
   @media (min-width: 769px) {
     .ant-layout-content {
@@ -79,384 +77,385 @@
     }
   }
 </style>
+{{ template "page/head_end" .}}
 
-<body>
-  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-    <a-sidebar></a-sidebar>
-    <a-layout id="content-layout">
-      <a-layout-content>
-        <a-spin :spinning="spinning" :delay="200" :tip="loadingTip">
-          <transition name="list" appear>
-            <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
-              message='{{ i18n "secAlertTitle" }}'
-              color="red"
-              description='{{ i18n "secAlertSsl" }}'
-              show-icon closable>
-            </a-alert>
-          </transition>
-          <transition name="list" appear>
-            <template>
-              <a-row v-if="!status.isLoaded">
-                <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
-                  <a-spin tip='{{ i18n "loading" }}'></a-spin>
+{{ template "page/body_start" .}}
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+  <a-sidebar></a-sidebar>
+  <a-layout id="content-layout">
+    <a-layout-content>
+      <a-spin :spinning="spinning" :delay="200" :tip="loadingTip">
+        <transition name="list" appear>
+          <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
+            message='{{ i18n "secAlertTitle" }}'
+            color="red"
+            description='{{ i18n "secAlertSsl" }}'
+            show-icon closable>
+          </a-alert>
+        </transition>
+        <transition name="list" appear>
+          <template>
+            <a-row v-if="!status.isLoaded">
+              <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+                <a-spin tip='{{ i18n "loading" }}'></a-spin>
+              </a-card>
+            </a-row>
+            <a-row v-else>
+              <a-row>
+                <a-card hoverable>
+                  <a-row>
+                    <a-col :sm="24" :md="12">
+                      <a-row>
+                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                          <a-progress type="dashboard" status="normal"
+                            :stroke-color="status.cpu.color"
+                            :percent="status.cpu.percent"></a-progress>
+                          <div>
+                            <b>{{ i18n "pages.index.cpu" }}:</b> [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]] 
+                            <a-tooltip>
+                              <a-icon type="area-chart"></a-icon> 
+                              <template slot="title">
+                                <div><b>{{ i18n "pages.index.logicalProcessors" }}:</b> [[ (status.logicalPro) ]]</div>
+                                <div><b>{{ i18n "pages.index.frequency" }}:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
+                              </template>
+                            </a-tooltip>
+                          </div>
+                        </a-col>
+                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                          <a-progress type="dashboard" status="normal"
+                            :stroke-color="status.mem.color"
+                            :percent="status.mem.percent"></a-progress>
+                          <div>
+                            <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]]
+                          </div>
+                        </a-col>
+                      </a-row>
+                    </a-col>
+                    <a-col :sm="24" :md="12">
+                      <a-row>
+                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                          <a-progress type="dashboard" status="normal"
+                            :stroke-color="status.swap.color"
+                            :percent="status.swap.percent"></a-progress>
+                          <div>
+                            <b>{{ i18n "pages.index.swap" }}:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
+                          </div>
+                        </a-col>
+                        <a-col :span="12" :style="{ textAlign: 'center' }">
+                          <a-progress type="dashboard" status="normal"
+                            :stroke-color="status.disk.color"
+                            :percent="status.disk.percent"></a-progress>
+                          <div>
+                            <b>{{ i18n "pages.index.storage"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
+                          </div>
+                        </a-col>
+                      </a-row>
+                    </a-col>
+                  </a-row>
                 </a-card>
               </a-row>
-              <a-row v-else>
-                <a-row>
-                  <a-card hoverable>
-                    <a-row>
-                      <a-col :sm="24" :md="12">
-                        <a-row>
-                          <a-col :span="12" :style="{ textAlign: 'center' }">
-                            <a-progress type="dashboard" status="normal"
-                              :stroke-color="status.cpu.color"
-                              :percent="status.cpu.percent"></a-progress>
-                            <div>
-                              <b>{{ i18n "pages.index.cpu" }}:</b> [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]] 
-                              <a-tooltip>
-                                <a-icon type="area-chart"></a-icon> 
-                                <template slot="title">
-                                  <div><b>{{ i18n "pages.index.logicalProcessors" }}:</b> [[ (status.logicalPro) ]]</div>
-                                  <div><b>{{ i18n "pages.index.frequency" }}:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
-                                </template>
-                              </a-tooltip>
-                            </div>
-                          </a-col>
-                          <a-col :span="12" :style="{ textAlign: 'center' }">
-                            <a-progress type="dashboard" status="normal"
-                              :stroke-color="status.mem.color"
-                              :percent="status.mem.percent"></a-progress>
-                            <div>
-                              <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]]
-                            </div>
-                          </a-col>
-                        </a-row>
-                      </a-col>
-                      <a-col :sm="24" :md="12">
-                        <a-row>
-                          <a-col :span="12" :style="{ textAlign: 'center' }">
-                            <a-progress type="dashboard" status="normal"
-                              :stroke-color="status.swap.color"
-                              :percent="status.swap.percent"></a-progress>
-                            <div>
-                              <b>{{ i18n "pages.index.swap" }}:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
-                            </div>
-                          </a-col>
-                          <a-col :span="12" :style="{ textAlign: 'center' }">
-                            <a-progress type="dashboard" status="normal"
-                              :stroke-color="status.disk.color"
-                              :percent="status.disk.percent"></a-progress>
-                            <div>
-                              <b>{{ i18n "pages.index.storage"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
-                            </div>
-                          </a-col>
-                        </a-row>
-                      </a-col>
-                    </a-row>
-                  </a-card>
-                </a-row>
-                <a-col :sm="24" :lg="12">
-                  <a-card hoverable>
-                    <template #title>
-                      <a-space direction="horizontal">
-                        <span>{{ i18n "pages.index.xrayStatus" }}</span>
-                        <a-tag v-if="isMobile && status.xray.version != 'Unknown'" color="green">
-                          v[[ status.xray.version ]]
-                        </a-tag>
-                      </a-space>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <template #title>
+                    <a-space direction="horizontal">
+                      <span>{{ i18n "pages.index.xrayStatus" }}</span>
+                      <a-tag v-if="isMobile && status.xray.version != 'Unknown'" color="green">
+                        v[[ status.xray.version ]]
+                      </a-tag>
+                    </a-space>
+                  </template>
+                  <template #extra>
+                    <template v-if="status.xray.state != 'error'">
+                      <a-badge status="processing" class="running-animation" :text="status.xray.stateMsg" :color="status.xray.color"/>
                     </template>
-                    <template #extra>
-                      <template v-if="status.xray.state != 'error'">
-                        <a-badge status="processing" class="running-animation" :text="status.xray.stateMsg" :color="status.xray.color"/>
-                      </template>
-                      <template v-else>
-                        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                          <span slot="title">
-                            <a-row type="flex" align="middle" justify="space-between">
-                              <a-col>
-                                <span>{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
-                              </a-col>
-                              <a-col>
-                                <a-icon type="bars" :style="{ cursor: 'pointer', float: 'right' }" @click="openLogs()"></a-tag>
-                              </a-col>
-                            </a-row>
-                          </span>
-                          <template slot="content">
-                            <span :style="{ maxWidth: '400px' }" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
-                          </template>
-                          <a-badge :text="status.xray.stateMsg" :color="status.xray.color"/>
-                        </a-popover>
-                      </template>
-                    </template>
-                    <template #actions>
-                      <a-space direction="horizontal" @click="stopXrayService" :style="{ justifyContent: 'center' }">
-                        <a-icon type="poweroff"></a-icon>
-                        <span v-if="!isMobile">{{ i18n "pages.index.stopXray" }}</span>
-                      </a-space>
-                      <a-space direction="horizontal" @click="restartXrayService" :style="{ justifyContent: 'center' }">
-                        <a-icon type="reload"></a-icon>
-                        <span v-if="!isMobile">{{ i18n "pages.index.restartXray" }}</span>
-                      </a-space>
-                      <a-space direction="horizontal" @click="openSelectV2rayVersion" :style="{ justifyContent: 'center' }">
-                        <a-icon type="tool"></a-icon>
-                        <span v-if="!isMobile">
-                          [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n "pages.index.xraySwitch" }}' ]]
+                    <template v-else>
+                      <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                        <span slot="title">
+                          <a-row type="flex" align="middle" justify="space-between">
+                            <a-col>
+                              <span>{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
+                            </a-col>
+                            <a-col>
+                              <a-icon type="bars" :style="{ cursor: 'pointer', float: 'right' }" @click="openLogs()"></a-tag>
+                            </a-col>
+                          </a-row>
                         </span>
-                      </a-space>
+                        <template slot="content">
+                          <span :style="{ maxWidth: '400px' }" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</span>
+                        </template>
+                        <a-badge :text="status.xray.stateMsg" :color="status.xray.color"/>
+                      </a-popover>
                     </template>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "menu.link" }}' hoverable>
-                    <template #actions>
-                      <a-space direction="horizontal" @click="openLogs()" :style="{ justifyContent: 'center' }">
-                        <a-icon type="bars"></a-icon>
-                        <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
-                      </a-space>
-                      <a-space direction="horizontal" @click="openConfig" :style="{ justifyContent: 'center' }">
-                        <a-icon type="control"></a-icon>
-                        <span v-if="!isMobile">{{ i18n "pages.index.config" }}</span>
-                      </a-space>
-                      <a-space direction="horizontal" @click="openBackup" :style="{ justifyContent: 'center' }">
-                        <a-icon type="cloud-server"></a-icon>
-                        <span v-if="!isMobile">{{ i18n "pages.index.backup" }}</span>
-                      </a-space>
-                    </template>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='3X-UI' hoverable>
-                    <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank">
-                      <a-tag color="green">
-                        <span>v{{ .cur_ver }}</span>
-                      </a-tag>
-                    </a>
-                    <a rel="noopener" href="https://t.me/XrayUI" target="_blank">
-                      <a-tag color="green">
-                        <span>@XrayUI</span>
-                      </a-tag>
-                    </a>
-                    <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/wiki" target="_blank">
-                      <a-tag>
-                        <span>{{ i18n "pages.index.documentation" }}</span>
-                      </a-tag>
-                    </a>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.operationHours" }}' hoverable>
-                    <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]]</a-tag>
-                    <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.systemLoad" }}' hoverable>
+                  </template>
+                  <template #actions>
+                    <a-space direction="horizontal" @click="stopXrayService" :style="{ justifyContent: 'center' }">
+                      <a-icon type="poweroff"></a-icon>
+                      <span v-if="!isMobile">{{ i18n "pages.index.stopXray" }}</span>
+                    </a-space>
+                    <a-space direction="horizontal" @click="restartXrayService" :style="{ justifyContent: 'center' }">
+                      <a-icon type="reload"></a-icon>
+                      <span v-if="!isMobile">{{ i18n "pages.index.restartXray" }}</span>
+                    </a-space>
+                    <a-space direction="horizontal" @click="openSelectV2rayVersion" :style="{ justifyContent: 'center' }">
+                      <a-icon type="tool"></a-icon>
+                      <span v-if="!isMobile">
+                        [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n "pages.index.xraySwitch" }}' ]]
+                      </span>
+                    </a-space>
+                  </template>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='{{ i18n "menu.link" }}' hoverable>
+                  <template #actions>
+                    <a-space direction="horizontal" @click="openLogs()" :style="{ justifyContent: 'center' }">
+                      <a-icon type="bars"></a-icon>
+                      <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
+                    </a-space>
+                    <a-space direction="horizontal" @click="openConfig" :style="{ justifyContent: 'center' }">
+                      <a-icon type="control"></a-icon>
+                      <span v-if="!isMobile">{{ i18n "pages.index.config" }}</span>
+                    </a-space>
+                    <a-space direction="horizontal" @click="openBackup" :style="{ justifyContent: 'center' }">
+                      <a-icon type="cloud-server"></a-icon>
+                      <span v-if="!isMobile">{{ i18n "pages.index.backup" }}</span>
+                    </a-space>
+                  </template>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='3X-UI' hoverable>
+                  <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank">
                     <a-tag color="green">
-                      <a-tooltip>
-                        [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
-                        <template slot="title">
-                          {{ i18n "pages.index.systemLoadDesc" }}
-                        </template>
-                      </a-tooltip>
+                      <span>v{{ .cur_ver }}</span>
                     </a-tag>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "usage"}}' hoverable>
-                    <a-tag color="green"> {{ i18n "pages.index.memory" }}: [[ SizeFormatter.sizeFormat(status.appStats.mem) ]] </a-tag>
-                    <a-tag color="green"> {{ i18n "pages.index.threads" }}: [[ status.appStats.threads ]] </a-tag>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
-                    <a-row :gutter="isMobile ? [8,8] : 0">
-                      <a-col :span="12">
-                        <a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
-                          <template #prefix>
-                            <a-icon type="arrow-up" />
-                          </template>
-                          <template #suffix>
-                            /s
-                          </template>
-                        </a-custom-statistic>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
-                          <template #prefix>
-                            <a-icon type="arrow-down" />
-                          </template>
-                          <template #suffix>
-                            /s
-                          </template>
-                        </a-custom-statistic>
-                      </a-col>
-                    </a-row>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
-                    <a-row :gutter="isMobile ? [8,8] : 0">
-                      <a-col :span="12">
-                        <a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
-                          <template #prefix>
-                            <a-icon type="cloud-upload" />
-                          </template>
-                        </a-custom-statistic>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
-                          <template #prefix>
-                            <a-icon type="cloud-download" />
-                          </template>
-                        </a-custom-statistic>
-                      </a-col>
-                    </a-row>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
-                    <template #extra>
-                      <a-tooltip :placement="isMobile ? 'topRight' : 'top'">
-                        <template #title>
-                          {{ i18n "pages.index.toggleIpVisibility" }}
+                  </a>
+                  <a rel="noopener" href="https://t.me/XrayUI" target="_blank">
+                    <a-tag color="green">
+                      <span>@XrayUI</span>
+                    </a-tag>
+                  </a>
+                  <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/wiki" target="_blank">
+                    <a-tag color="purple">
+                      <span>{{ i18n "pages.index.documentation" }}</span>
+                    </a-tag>
+                  </a>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='{{ i18n "pages.index.operationHours" }}' hoverable>
+                  <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]]</a-tag>
+                  <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='{{ i18n "pages.index.systemLoad" }}' hoverable>
+                  <a-tag color="green">
+                    <a-tooltip>
+                      [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
+                      <template slot="title">
+                        {{ i18n "pages.index.systemLoadDesc" }}
+                      </template>
+                    </a-tooltip>
+                  </a-tag>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='{{ i18n "usage"}}' hoverable>
+                  <a-tag color="green"> {{ i18n "pages.index.memory" }}: [[ SizeFormatter.sizeFormat(status.appStats.mem) ]] </a-tag>
+                  <a-tag color="green"> {{ i18n "pages.index.threads" }}: [[ status.appStats.threads ]] </a-tag>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
+                  <a-row :gutter="isMobile ? [8,8] : 0">
+                    <a-col :span="12">
+                      <a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
+                        <template #prefix>
+                          <a-icon type="arrow-up" />
                         </template>
-                        <a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
-                      </a-tooltip>
-                    </template>
-                    <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'" :gutter="isMobile ? [8,8] : 0">
-                      <a-col :span="isMobile ? 24 : 12">
-                        <a-custom-statistic title="IPv4" :value="status.publicIP.ipv4">
-                          <template #prefix>
-                            <a-icon type="global" />
-                          </template>
-                        </a-custom-statistic>
-                      </a-col>
-                      <a-col :span="isMobile ? 24 : 12">
-                        <a-custom-statistic title="IPv6" :value="status.publicIP.ipv6">
-                          <template #prefix>
-                            <a-icon type="global" />
-                          </template>
-                        </a-custom-statistic>
-                      </a-col>
-                    </a-row>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
-                    <a-row :gutter="isMobile ? [8,8] : 0">
-                      <a-col :span="12">
-                        <a-custom-statistic title="TCP" :value="status.tcpCount">
-                          <template #prefix>
-                            <a-icon type="swap" />
-                          </template>
-                        </a-custom-statistic>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-custom-statistic title="UDP" :value="status.udpCount">
-                          <template #prefix>
-                            <a-icon type="swap" />
-                          </template>
-                        </a-custom-statistic>
-                      </a-col>
-                    </a-row>
-                  </a-card>
-                </a-col>
-              </a-row>
-            </template>
-          </transition>
-        </a-spin>
-      </a-layout-content>
-    </a-layout>
-    <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
-        @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
-      <a-collapse default-active-key="1">
-        <a-collapse-panel key="1" header='Xray'>
-          <a-alert type="warning" :style="{ marginBottom: '12px', width: '100%' }" message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
-          <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
-            <a-list-item class="ant-version-list-item" v-for="version, index in versionModal.versions">
-              <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
-              <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
-            </a-list-item>
-          </a-list>
-        </a-collapse-panel>
-        <a-collapse-panel key="2" header='Geofiles'>
-          <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
-            <a-list-item class="ant-version-list-item" v-for="file, index in ['geosite.dat', 'geoip.dat', 'geosite_IR.dat', 'geoip_IR.dat', 'geosite_RU.dat', 'geoip_RU.dat']">
-              <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ file ]]</a-tag>
-              <a-icon type="reload" @click="updateGeofile(file)" :style="{ marginRight: '8px' }"/>
-            </a-list-item>
-          </a-list>
-        </a-collapse-panel>
-      </a-collapse>
-    </a-modal>
-    <a-modal id="log-modal" v-model="logModal.visible"
-        :closable="true" @cancel="() => logModal.visible = false"
-        :class="themeSwitcher.currentTheme"
-        width="800px" footer="">
-      <template slot="title">
-        {{ i18n "pages.index.logs" }}
-        <a-icon :spin="logModal.loading"
-          type="sync"
-          :style="{ verticalAlign: 'middle', marginLeft: '10px' }"
-          :disabled="logModal.loading"
-          @click="openLogs()">
-        </a-icon>
-      </template>
-      <a-form layout="inline">
-        <a-form-item :style="{ marginRight: '0.5rem' }">
-          <a-input-group compact>
-            <a-select size="small" v-model="logModal.rows" :style="{ width: '70px' }"
-                @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
-              <a-select-option value="10">10</a-select-option>
-              <a-select-option value="20">20</a-select-option>
-              <a-select-option value="50">50</a-select-option>
-              <a-select-option value="100">100</a-select-option>
-              <a-select-option value="500">500</a-select-option>
-            </a-select>
-            <a-select size="small" v-model="logModal.level" :style="{ width: '95px' }"
-                @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
-              <a-select-option value="debug">Debug</a-select-option>
-              <a-select-option value="info">Info</a-select-option>
-              <a-select-option value="notice">Notice</a-select-option>
-              <a-select-option value="warning">Warning</a-select-option>
-              <a-select-option value="err">Error</a-select-option>
-            </a-select>
-          </a-input-group>
-        </a-form-item>
-        <a-form-item>
-          <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
-        </a-form-item>
-        <a-form-item :style="{ float: 'right' }">
-          <a-button type="primary" icon="download" @click="FileManager.downloadTextFile(logModal.logs?.join('\n'), 'x-ui.log')"></a-button>
-        </a-form-item>
-      </a-form>
-      <div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="logModal.formattedLogs"></div>
-    </a-modal>
-    <a-modal id="backup-modal" 
-        v-model="backupModal.visible" 
-        title='{{ i18n "pages.index.backupTitle" }}'
-        :closable="true"
-        footer=""
-        :class="themeSwitcher.currentTheme">
-      <a-list class="ant-backup-list" bordered :style="{ width: '100%' }">
-        <a-list-item class="ant-backup-list-item">
-          <a-list-item-meta>
-            <template #title>{{ i18n "pages.index.exportDatabase" }}</template>
-            <template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
-          </a-list-item-meta>
-          <a-button @click="exportDatabase()" type="primary" icon="download"/>
-        </a-list-item>
-        <a-list-item class="ant-backup-list-item">
-          <a-list-item-meta>
-            <template #title>{{ i18n "pages.index.importDatabase" }}</template>
-            <template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template>
-          </a-list-item-meta>
-          <a-button @click="importDatabase()" type="primary" icon="upload" />
-        </a-list-item>
-      </a-list>
-    </a-modal>
+                        <template #suffix>
+                          /s
+                        </template>
+                      </a-custom-statistic>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
+                        <template #prefix>
+                          <a-icon type="arrow-down" />
+                        </template>
+                        <template #suffix>
+                          /s
+                        </template>
+                      </a-custom-statistic>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
+                  <a-row :gutter="isMobile ? [8,8] : 0">
+                    <a-col :span="12">
+                      <a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
+                        <template #prefix>
+                          <a-icon type="cloud-upload" />
+                        </template>
+                      </a-custom-statistic>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
+                        <template #prefix>
+                          <a-icon type="cloud-download" />
+                        </template>
+                      </a-custom-statistic>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
+                  <template #extra>
+                    <a-tooltip :placement="isMobile ? 'topRight' : 'top'">
+                      <template #title>
+                        {{ i18n "pages.index.toggleIpVisibility" }}
+                      </template>
+                      <a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
+                    </a-tooltip>
+                  </template>
+                  <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'" :gutter="isMobile ? [8,8] : 0">
+                    <a-col :span="isMobile ? 24 : 12">
+                      <a-custom-statistic title="IPv4" :value="status.publicIP.ipv4">
+                        <template #prefix>
+                          <a-icon type="global" />
+                        </template>
+                      </a-custom-statistic>
+                    </a-col>
+                    <a-col :span="isMobile ? 24 : 12">
+                      <a-custom-statistic title="IPv6" :value="status.publicIP.ipv6">
+                        <template #prefix>
+                          <a-icon type="global" />
+                        </template>
+                      </a-custom-statistic>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
+                  <a-row :gutter="isMobile ? [8,8] : 0">
+                    <a-col :span="12">
+                      <a-custom-statistic title="TCP" :value="status.tcpCount">
+                        <template #prefix>
+                          <a-icon type="swap" />
+                        </template>
+                      </a-custom-statistic>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-custom-statistic title="UDP" :value="status.udpCount">
+                        <template #prefix>
+                          <a-icon type="swap" />
+                        </template>
+                      </a-custom-statistic>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+            </a-row>
+          </template>
+        </transition>
+      </a-spin>
+    </a-layout-content>
   </a-layout>
-{{template "js" .}}
+  <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"
+      @ok="() => versionModal.visible = false" :class="themeSwitcher.currentTheme" footer="">
+    <a-collapse default-active-key="1">
+      <a-collapse-panel key="1" header='Xray'>
+        <a-alert type="warning" :style="{ marginBottom: '12px', width: '100%' }" message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
+        <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
+          <a-list-item class="ant-version-list-item" v-for="version, index in versionModal.versions">
+            <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
+            <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
+          </a-list-item>
+        </a-list>
+      </a-collapse-panel>
+      <a-collapse-panel key="2" header='Geofiles'>
+        <a-list class="ant-version-list" bordered :style="{ width: '100%' }">
+          <a-list-item class="ant-version-list-item" v-for="file, index in ['geosite.dat', 'geoip.dat', 'geosite_IR.dat', 'geoip_IR.dat', 'geosite_RU.dat', 'geoip_RU.dat']">
+            <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ file ]]</a-tag>
+            <a-icon type="reload" @click="updateGeofile(file)" :style="{ marginRight: '8px' }"/>
+          </a-list-item>
+        </a-list>
+      </a-collapse-panel>
+    </a-collapse>
+  </a-modal>
+  <a-modal id="log-modal" v-model="logModal.visible"
+      :closable="true" @cancel="() => logModal.visible = false"
+      :class="themeSwitcher.currentTheme"
+      width="800px" footer="">
+    <template slot="title">
+      {{ i18n "pages.index.logs" }}
+      <a-icon :spin="logModal.loading"
+        type="sync"
+        :style="{ verticalAlign: 'middle', marginLeft: '10px' }"
+        :disabled="logModal.loading"
+        @click="openLogs()">
+      </a-icon>
+    </template>
+    <a-form layout="inline">
+      <a-form-item :style="{ marginRight: '0.5rem' }">
+        <a-input-group compact>
+          <a-select size="small" v-model="logModal.rows" :style="{ width: '70px' }"
+              @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="10">10</a-select-option>
+            <a-select-option value="20">20</a-select-option>
+            <a-select-option value="50">50</a-select-option>
+            <a-select-option value="100">100</a-select-option>
+            <a-select-option value="500">500</a-select-option>
+          </a-select>
+          <a-select size="small" v-model="logModal.level" :style="{ width: '95px' }"
+              @change="openLogs()" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="debug">Debug</a-select-option>
+            <a-select-option value="info">Info</a-select-option>
+            <a-select-option value="notice">Notice</a-select-option>
+            <a-select-option value="warning">Warning</a-select-option>
+            <a-select-option value="err">Error</a-select-option>
+          </a-select>
+        </a-input-group>
+      </a-form-item>
+      <a-form-item>
+        <a-checkbox v-model="logModal.syslog" @change="openLogs()">SysLog</a-checkbox>
+      </a-form-item>
+      <a-form-item :style="{ float: 'right' }">
+        <a-button type="primary" icon="download" @click="FileManager.downloadTextFile(logModal.logs?.join('\n'), 'x-ui.log')"></a-button>
+      </a-form-item>
+    </a-form>
+    <div class="ant-input" :style="{ height: 'auto', maxHeight: '500px', overflow: 'auto', marginTop: '0.5rem' }" v-html="logModal.formattedLogs"></div>
+  </a-modal>
+  <a-modal id="backup-modal" 
+      v-model="backupModal.visible" 
+      title='{{ i18n "pages.index.backupTitle" }}'
+      :closable="true"
+      footer=""
+      :class="themeSwitcher.currentTheme">
+    <a-list class="ant-backup-list" bordered :style="{ width: '100%' }">
+      <a-list-item class="ant-backup-list-item">
+        <a-list-item-meta>
+          <template #title>{{ i18n "pages.index.exportDatabase" }}</template>
+          <template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
+        </a-list-item-meta>
+        <a-button @click="exportDatabase()" type="primary" icon="download"/>
+      </a-list-item>
+      <a-list-item class="ant-backup-list-item">
+        <a-list-item-meta>
+          <template #title>{{ i18n "pages.index.importDatabase" }}</template>
+          <template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template>
+        </a-list-item-meta>
+        <a-button @click="importDatabase()" type="primary" icon="upload" />
+      </a-list-item>
+    </a-list>
+  </a-modal>
+</a-layout>
+{{template "page/body_scripts" .}}
 {{template "component/aSidebar" .}}
 {{template "component/aThemeSwitch" .}}
 {{template "component/aCustomStatistic" .}}
@@ -788,5 +787,4 @@
         },
     });
 </script>
-</body>
-</html>
+{{ template "page/body_end" .}}
\ No newline at end of file
diff --git a/web/html/login.html b/web/html/login.html
index 68e849f5..be6b9585 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -1,6 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-{{template "head" .}}
+{{ template "page/head_start" .}}
 <style>
   html * {
     -webkit-font-smoothing: antialiased;
@@ -453,174 +451,174 @@
     margin: 2px 0 4px;
   }
 </style>
+{{ template "page/head_end" .}}
 
-<body>
-  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-    <transition name="list" appear>
-      <a-layout-content class="under" :style="{ minHeight: '0' }">
-        <div class="waves-header">
-          <div class="waves-inner-header"></div>
-          <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
-            <defs>
-              <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
-            </defs>
-            <g class="parallax">
-              <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
-              <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
-              <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
-              <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
-            </g>
-          </svg>
-        </div>
-        <a-row type="flex" justify="center" align="middle" :style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
-          <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
-            <div class="setting-section">
-              <a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}' placement="bottomRight" trigger="click">
-                <template slot="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" :style="{ width: '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">
-                        <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>
-                </template>
-                <a-button shape="circle" icon="setting"></a-button>
-              </a-popover>
-            </div>
-            <a-row type="flex" justify="center">
-              <a-col :style="{ width: '100%' }">
-                <h2 class="title headline zoom">
-                  <span class="words-wrapper">
-                    <b class="is-visible">{{ i18n "pages.login.hello" }}</b>
-                    <b>{{ i18n "pages.login.title" }}</b>
-                  </span>
-                </h2>
-              </a-col>
-            </a-row>
-            <a-row type="flex" justify="center">
-              <a-col span="24">
-                <a-form>
-                  <a-space direction="vertical" size="middle">
-                    <a-form-item>
-                      <a-input autocomplete="username" name="username" v-model.trim="user.username"
-                        placeholder='{{ i18n "username" }}' @keydown.enter.native="login" autofocus>
-                        <a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
-                      </a-input>
-                    </a-form-item>
-                    <a-form-item>
-                      <a-input-password autocomplete="password" name="password" v-model.trim="user.password"
-                        placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                        <a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
-                      </a-input-password>
-                    </a-form-item>
-                    <a-form-item v-if="twoFactorEnable">
-                      <a-input autocomplete="totp" name="twoFactorCode" v-model.trim="user.twoFactorCode"
-                        placeholder='{{ i18n "twoFactorCode" }}' @keydown.enter.native="login">
-                        <a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
-                      </a-input>
-                    </a-form-item>
-                    <a-form-item>
-                      <a-row justify="center" class="centered">
-                        <div :style="{ height: '50px', marginTop: '1rem', ...loading ? { width: '52px' } : { display: 'inline-block' } }" class="wave-btn-bg wave-btn-bg-cl">
-                          <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login"
-                            :icon="loading ? 'poweroff' : undefined">
-                            [[ loading ? '' : '{{ i18n "login" }}' ]]
-                          </a-button>
-                        </div>
-                      </a-row>
-                    </a-form-item>
-                  </a-space>
-                </a-form>
-              </a-col>
-            </a-row>
-          </a-col>
-        </a-row>
-      </a-layout-content>
-    </transition>
-  </a-layout>
-  {{template "js" .}}
-  {{template "component/aThemeSwitch" .}}
-  <script>
-    const app = new Vue({
-      delimiters: ['[[', ']]'],
-      el: '#app',
-      data: {
-        themeSwitcher,
-        loading: false,
-        user: {
-          username: "",
-          password: "",
-          twoFactorCode: ""
-        },
-        twoFactorEnable: false,
-        lang: ""
+{{ template "page/body_start" .}}
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+  <transition name="list" appear>
+    <a-layout-content class="under" :style="{ minHeight: '0' }">
+      <div class="waves-header">
+        <div class="waves-inner-header"></div>
+        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+          <defs>
+            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+          </defs>
+          <g class="parallax">
+            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" />
+            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
+            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
+            <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" />
+          </g>
+        </svg>
+      </div>
+      <a-row type="flex" justify="center" align="middle" :style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
+        <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
+          <div class="setting-section">
+            <a-popover :overlay-class-name="themeSwitcher.currentTheme" title='{{ i18n "menu.settings" }}' placement="bottomRight" trigger="click">
+              <template slot="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" :style="{ width: '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">
+                      <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>
+              </template>
+              <a-button shape="circle" icon="setting"></a-button>
+            </a-popover>
+          </div>
+          <a-row type="flex" justify="center">
+            <a-col :style="{ width: '100%' }">
+              <h2 class="title headline zoom">
+                <span class="words-wrapper">
+                  <b class="is-visible">{{ i18n "pages.login.hello" }}</b>
+                  <b>{{ i18n "pages.login.title" }}</b>
+                </span>
+              </h2>
+            </a-col>
+          </a-row>
+          <a-row type="flex" justify="center">
+            <a-col span="24">
+              <a-form>
+                <a-space direction="vertical" size="middle">
+                  <a-form-item>
+                    <a-input autocomplete="username" name="username" v-model.trim="user.username"
+                      placeholder='{{ i18n "username" }}' @keydown.enter.native="login" autofocus>
+                      <a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
+                    </a-input>
+                  </a-form-item>
+                  <a-form-item>
+                    <a-input-password autocomplete="password" name="password" v-model.trim="user.password"
+                      placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
+                      <a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
+                    </a-input-password>
+                  </a-form-item>
+                  <a-form-item v-if="twoFactorEnable">
+                    <a-input autocomplete="totp" name="twoFactorCode" v-model.trim="user.twoFactorCode"
+                      placeholder='{{ i18n "twoFactorCode" }}' @keydown.enter.native="login">
+                      <a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
+                    </a-input>
+                  </a-form-item>
+                  <a-form-item>
+                    <a-row justify="center" class="centered">
+                      <div :style="{ height: '50px', marginTop: '1rem', ...loading ? { width: '52px' } : { display: 'inline-block' } }" class="wave-btn-bg wave-btn-bg-cl">
+                        <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login"
+                          :icon="loading ? 'poweroff' : undefined">
+                          [[ loading ? '' : '{{ i18n "login" }}' ]]
+                        </a-button>
+                      </div>
+                    </a-row>
+                  </a-form-item>
+                </a-space>
+              </a-form>
+            </a-col>
+          </a-row>
+        </a-col>
+      </a-row>
+    </a-layout-content>
+  </transition>
+</a-layout>
+{{template "page/body_scripts" .}}
+{{template "component/aThemeSwitch" .}}
+<script>
+  const app = new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#app',
+    data: {
+      themeSwitcher,
+      loading: false,
+      user: {
+        username: "",
+        password: "",
+        twoFactorCode: ""
       },
-      async mounted() {
-        this.lang = LanguageManager.getLanguage();
-        this.twoFactorEnable = await this.getTwoFactorEnable();
+      twoFactorEnable: false,
+      lang: ""
+    },
+    async mounted() {
+      this.lang = LanguageManager.getLanguage();
+      this.twoFactorEnable = await this.getTwoFactorEnable();
+    },
+    methods: {
+      async login() {
+        this.loading = true;
+        const msg = await HttpUtil.post('/login', this.user);
+        this.loading = false;
+        if (msg.success) {
+          location.href = basePath + 'panel/';
+        }
       },
-      methods: {
-        async login() {
-          this.loading = true;
-          const msg = await HttpUtil.post('/login', this.user);
-          this.loading = false;
-          if (msg.success) {
-            location.href = basePath + 'panel/';
-          }
-        },
-        async getTwoFactorEnable() {
-          this.loading = true;
-          const msg = await HttpUtil.post('/getTwoFactorEnable');
-          this.loading = false;
-          if (msg.success) {
-            this.twoFactorEnable = msg.obj;
-            return msg.obj;
-          }
-        },
+      async getTwoFactorEnable() {
+        this.loading = true;
+        const msg = await HttpUtil.post('/getTwoFactorEnable');
+        this.loading = false;
+        if (msg.success) {
+          this.twoFactorEnable = msg.obj;
+          return msg.obj;
+        }
       },
-    });
+    },
+  });
 
-    document.addEventListener("DOMContentLoaded", function () {
-      var animationDelay = 2000;
-      initHeadline();
+  document.addEventListener("DOMContentLoaded", function () {
+    var animationDelay = 2000;
+    initHeadline();
 
-      function initHeadline() {
-        animateHeadline(document.querySelectorAll('.headline'));
-      }
+    function initHeadline() {
+      animateHeadline(document.querySelectorAll('.headline'));
+    }
 
-      function animateHeadline(headlines) {
-        var duration = animationDelay;
-        headlines.forEach(function (headline) {
-          setTimeout(function () {
-            hideWord(headline.querySelector('.is-visible'));
-          }, duration);
-        });
-      }
-
-      function hideWord(word) {
-        var nextWord = takeNext(word);
-        switchWord(word, nextWord);
+    function animateHeadline(headlines) {
+      var duration = animationDelay;
+      headlines.forEach(function (headline) {
         setTimeout(function () {
-          hideWord(nextWord);
-        }, animationDelay);
-      }
+          hideWord(headline.querySelector('.is-visible'));
+        }, duration);
+      });
+    }
 
-      function takeNext(word) {
-        return word.nextElementSibling ? word.nextElementSibling : word.parentElement.firstElementChild;
-      }
+    function hideWord(word) {
+      var nextWord = takeNext(word);
+      switchWord(word, nextWord);
+      setTimeout(function () {
+        hideWord(nextWord);
+      }, animationDelay);
+    }
 
-      function switchWord(oldWord, newWord) {
-        oldWord.classList.remove('is-visible');
-        oldWord.classList.add('is-hidden');
-        newWord.classList.remove('is-hidden');
-        newWord.classList.add('is-visible');
-      }
-    });
-  </script>
-</body>
-</html>
+    function takeNext(word) {
+      return word.nextElementSibling ? word.nextElementSibling : word.parentElement.firstElementChild;
+    }
+
+    function switchWord(oldWord, newWord) {
+      oldWord.classList.remove('is-visible');
+      oldWord.classList.add('is-hidden');
+      newWord.classList.remove('is-hidden');
+      newWord.classList.add('is-visible');
+    }
+  });
+</script>
+{{ template "page/body_end" .}}
\ No newline at end of file
diff --git a/web/html/settings.html b/web/html/settings.html
index dec40de7..18e0d6a8 100644
--- a/web/html/settings.html
+++ b/web/html/settings.html
@@ -1,6 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-{{template "head" .}}
+{{ template "page/head_start" .}}
 <style>
   @media (min-width: 769px) {
     .ant-layout-content {
@@ -60,68 +58,70 @@
     margin-block-end: 12px;
   }
 </style>
-<body>
-  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-    <a-sidebar></a-sidebar>
-    <a-layout id="content-layout">
-      <a-layout-content>
-        <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
-          <transition name="list" appear>
-            <a-alert type="error" v-if="confAlerts.length>0" :style="{ marginBottom: '10px' }"
-                message='{{ i18n "secAlertTitle" }}'
-                color="red"
-                show-icon closable>
-              <template slot="description">
-                <b>{{ i18n "secAlertConf" }}</b>
-                <ul><li v-for="a in confAlerts">[[ a ]]</li></ul>
-              </template>
-            </a-alert>
-          </transition>
-          <a-space direction="vertical">
-            <a-card hoverable :style="{ marginBottom: '.5rem', overflowX: 'hidden' }">
-              <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
-                <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
-                  <a-space direction="horizontal">
-                    <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
-                    <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
-                  </a-space>
-                </a-col>
-                <a-col :xs="24" :sm="14">
-                  <template>
-                    <div>
-                      <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                      <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
-                        message='{{ i18n "pages.settings.infoDesc" }}'
-                        show-icon>
-                      </a-alert>
-                    </div>
-                  </template>
-                </a-col>
-              </a-row>
-            </a-card>
-            <a-tabs default-active-key="1">
-              <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings" }}' :style="{ paddingTop: '20px' }">
-                {{ template "settings/panel/general" . }}
-              </a-tab-pane>
-              <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings" }}' :style="{ paddingTop: '20px' }">
-                {{ template "settings/panel/security" . }}
-              </a-tab-pane>
-              <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings" }}' :style="{ paddingTop: '20px' }">
-                {{ template "settings/panel/telegram" . }}
-              </a-tab-pane>
-              <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}' :style="{ paddingTop: '20px' }">
-                {{ template "settings/panel/subscription/general" . }}
-              </a-tab-pane>
-              <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
-                {{ template "settings/panel/subscription/json" . }}
-              </a-tab-pane>
-            </a-tabs>
-          </a-space>
-        </a-spin>
-      </a-layout-content>
-    </a-layout>
+{{ template "page/head_end" .}}
+
+{{ template "page/body_start" .}}
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+  <a-sidebar></a-sidebar>
+  <a-layout id="content-layout">
+    <a-layout-content>
+      <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+        <transition name="list" appear>
+          <a-alert type="error" v-if="confAlerts.length>0" :style="{ marginBottom: '10px' }"
+              message='{{ i18n "secAlertTitle" }}'
+              color="red"
+              show-icon closable>
+            <template slot="description">
+              <b>{{ i18n "secAlertConf" }}</b>
+              <ul><li v-for="a in confAlerts">[[ a ]]</li></ul>
+            </template>
+          </a-alert>
+        </transition>
+        <a-space direction="vertical">
+          <a-card hoverable :style="{ marginBottom: '.5rem', overflowX: 'hidden' }">
+            <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
+              <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
+                <a-space direction="horizontal">
+                  <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
+                  <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
+                </a-space>
+              </a-col>
+              <a-col :xs="24" :sm="14">
+                <template>
+                  <div>
+                    <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
+                    <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
+                      message='{{ i18n "pages.settings.infoDesc" }}'
+                      show-icon>
+                    </a-alert>
+                  </div>
+                </template>
+              </a-col>
+            </a-row>
+          </a-card>
+          <a-tabs default-active-key="1">
+            <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings" }}' :style="{ paddingTop: '20px' }">
+              {{ template "settings/panel/general" . }}
+            </a-tab-pane>
+            <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings" }}' :style="{ paddingTop: '20px' }">
+              {{ template "settings/panel/security" . }}
+            </a-tab-pane>
+            <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings" }}' :style="{ paddingTop: '20px' }">
+              {{ template "settings/panel/telegram" . }}
+            </a-tab-pane>
+            <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}' :style="{ paddingTop: '20px' }">
+              {{ template "settings/panel/subscription/general" . }}
+            </a-tab-pane>
+            <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
+              {{ template "settings/panel/subscription/json" . }}
+            </a-tab-pane>
+          </a-tabs>
+        </a-space>
+      </a-spin>
+    </a-layout-content>
   </a-layout>
-{{template "js" .}}
+</a-layout>
+{{template "page/body_scripts" .}}
 <script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/otpauth/otpauth.umd.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
@@ -531,5 +531,4 @@
     }
   });
 </script>
-</body>
-</html>
\ No newline at end of file
+{{ template "page/body_end" .}}
\ No newline at end of file
diff --git a/web/html/xray.html b/web/html/xray.html
index eb99b794..8a60dafe 100644
--- a/web/html/xray.html
+++ b/web/html/xray.html
@@ -1,22 +1,8 @@
-<!DOCTYPE html>
-<html lang="en">
-{{template "head" .}}
+{{ template "page/head_start" .}}
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/codemirror.min.css?{{ .cur_ver }}">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/fold/foldgutter.css">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.min.css?{{ .cur_ver }}">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/lint/lint.css">
-
-<script src="{{ .base_path }}assets/js/model/outbound.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/codemirror/codemirror.min.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/codemirror/javascript.js"></script>
-<script src="{{ .base_path }}assets/codemirror/jshint.js"></script>
-<script src="{{ .base_path }}assets/codemirror/jsonlint.js"></script>
-<script src="{{ .base_path }}assets/codemirror/lint/lint.js"></script>
-<script src="{{ .base_path }}assets/codemirror/lint/javascript-lint.js"></script>
-<script src="{{ .base_path }}assets/codemirror/hint/javascript-hint.js"></script>
-<script src="{{ .base_path }}assets/codemirror/fold/foldcode.js"></script>
-<script src="{{ .base_path }}assets/codemirror/fold/foldgutter.js"></script>
-<script src="{{ .base_path }}assets/codemirror/fold/brace-fold.js"></script>
 <style>
   @media (min-width: 769px) {
     .ant-layout-content {
@@ -46,79 +32,92 @@
     margin-block-end: 12px;
 }
 </style>
-<body>
-  <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-    <a-sidebar></a-sidebar>
-    <a-layout id="content-layout">
-      <a-layout-content>
-        <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
-          <transition name="list" appear>
-            <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
-              message='{{ i18n "secAlertTitle" }}'
-              color="red"
-              description='{{ i18n "secAlertSsl" }}'
-              show-icon closable>
-            </a-alert>
-          </transition>
-          <a-space direction="vertical">
-            <a-card hoverable :style="{ marginBottom: '.5rem' }">
-              <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
-                <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
-                  <a-space direction="horizontal">
-                    <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">{{ i18n "pages.xray.save" }}</a-button>
-                    <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">{{ i18n "pages.xray.restart" }}</a-button>
-                    <a-popover v-if="restartResult"
-                        :overlay-class-name="themeSwitcher.currentTheme">
-                      <span slot="title">{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
-                      <template slot="content">
-                        <span :style="{ maxWidth: '400px' }" v-for="line in restartResult.split('\n')">[[ line ]]</span>
-                      </template>
-                      <a-icon type="question-circle"></a-icon>
-                    </a-popover>
-                  </a-space>
-                </a-col>
-                <a-col :xs="24" :sm="14">
-                  <template>
-                    <div>
-                      <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                      <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }" message='{{ i18n "pages.settings.infoDesc" }}' show-icon>
-                      </a-alert>
-                    </div>
-                  </template>
-                </a-col>
-              </a-row>
-            </a-card>
-            <a-tabs class="ant-card-dark-box-nohover" default-active-key="1"
-                @change="(activeKey) => { this.changePage(activeKey); }"
-                :class="themeSwitcher.currentTheme">
-              <a-tab-pane key="tpl-basic" tab='{{ i18n "pages.xray.basicTemplate"}}' :style="{ paddingTop: '20px' }">
-                {{ template "settings/xray/basics" . }}
-              </a-tab-pane>
-              <a-tab-pane key="tpl-routing" tab='{{ i18n "pages.xray.Routings"}}' :style="{ paddingTop: '20px' }">
-                {{ template "settings/xray/routing" . }}
-              </a-tab-pane>
-              <a-tab-pane key="tpl-outbound" tab='{{ i18n "pages.xray.Outbounds"}}' force-render="true">
-                {{ template "settings/xray/outbounds" . }}
-              </a-tab-pane>
-              <a-tab-pane key="tpl-reverse" tab='{{ i18n "pages.xray.outbound.reverse"}}' :style="{ paddingTop: '20px' }" force-render="true">
-                {{ template "settings/xray/reverse" . }}
-              </a-tab-pane>
-              <a-tab-pane key="tpl-balancer" tab='{{ i18n "pages.xray.Balancers"}}' :style="{ paddingTop: '20px' }" force-render="true">
-                {{ template "settings/xray/balancers" . }}
-              </a-tab-pane>
-              <a-tab-pane key="tpl-dns" tab='DNS' :style="{ paddingTop: '20px' }" force-render="true">
-                {{ template "settings/xray/dns" . }}
-              </a-tab-pane>
-              <a-tab-pane key="tpl-advanced" tab='{{ i18n "pages.xray.advancedTemplate"}}' :style="{ paddingTop: '20px' }" force-render="true">
-                {{ template "settings/xray/advanced" . }}
-              </a-tab-pane>
-            </a-tabs>
-          </a-space>
-        </a-spin>
-      </a-layout-content>
-    </a-layout>
-  </a-layout>
-{{template "js" .}}
+{{ template "page/head_end" .}}
+
+{{ template "page/body_start" .}}
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-sidebar></a-sidebar>
+<a-layout id="content-layout">
+    <a-layout-content>
+    <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+        <transition name="list" appear>
+        <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
+            message='{{ i18n "secAlertTitle" }}'
+            color="red"
+            description='{{ i18n "secAlertSsl" }}'
+            show-icon closable>
+        </a-alert>
+        </transition>
+        <a-space direction="vertical">
+        <a-card hoverable :style="{ marginBottom: '.5rem' }">
+            <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
+            <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
+                <a-space direction="horizontal">
+                <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">{{ i18n "pages.xray.save" }}</a-button>
+                <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">{{ i18n "pages.xray.restart" }}</a-button>
+                <a-popover v-if="restartResult"
+                    :overlay-class-name="themeSwitcher.currentTheme">
+                    <span slot="title">{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
+                    <template slot="content">
+                    <span :style="{ maxWidth: '400px' }" v-for="line in restartResult.split('\n')">[[ line ]]</span>
+                    </template>
+                    <a-icon type="question-circle"></a-icon>
+                </a-popover>
+                </a-space>
+            </a-col>
+            <a-col :xs="24" :sm="14">
+                <template>
+                <div>
+                    <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
+                    <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }" message='{{ i18n "pages.settings.infoDesc" }}' show-icon>
+                    </a-alert>
+                </div>
+                </template>
+            </a-col>
+            </a-row>
+        </a-card>
+        <a-tabs class="ant-card-dark-box-nohover" default-active-key="1"
+            @change="(activeKey) => { this.changePage(activeKey); }"
+            :class="themeSwitcher.currentTheme">
+            <a-tab-pane key="tpl-basic" tab='{{ i18n "pages.xray.basicTemplate"}}' :style="{ paddingTop: '20px' }">
+            {{ template "settings/xray/basics" . }}
+            </a-tab-pane>
+            <a-tab-pane key="tpl-routing" tab='{{ i18n "pages.xray.Routings"}}' :style="{ paddingTop: '20px' }">
+            {{ template "settings/xray/routing" . }}
+            </a-tab-pane>
+            <a-tab-pane key="tpl-outbound" tab='{{ i18n "pages.xray.Outbounds"}}' force-render="true">
+            {{ template "settings/xray/outbounds" . }}
+            </a-tab-pane>
+            <a-tab-pane key="tpl-reverse" tab='{{ i18n "pages.xray.outbound.reverse"}}' :style="{ paddingTop: '20px' }" force-render="true">
+            {{ template "settings/xray/reverse" . }}
+            </a-tab-pane>
+            <a-tab-pane key="tpl-balancer" tab='{{ i18n "pages.xray.Balancers"}}' :style="{ paddingTop: '20px' }" force-render="true">
+            {{ template "settings/xray/balancers" . }}
+            </a-tab-pane>
+            <a-tab-pane key="tpl-dns" tab='DNS' :style="{ paddingTop: '20px' }" force-render="true">
+            {{ template "settings/xray/dns" . }}
+            </a-tab-pane>
+            <a-tab-pane key="tpl-advanced" tab='{{ i18n "pages.xray.advancedTemplate"}}' :style="{ paddingTop: '20px' }" force-render="true">
+            {{ template "settings/xray/advanced" . }}
+            </a-tab-pane>
+        </a-tabs>
+        </a-space>
+    </a-spin>
+    </a-layout-content>
+</a-layout>
+</a-layout>
+{{template "page/body_scripts" .}}
+<script src="{{ .base_path }}assets/js/model/outbound.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/codemirror/codemirror.min.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/codemirror/javascript.js"></script>
+<script src="{{ .base_path }}assets/codemirror/jshint.js"></script>
+<script src="{{ .base_path }}assets/codemirror/jsonlint.js"></script>
+<script src="{{ .base_path }}assets/codemirror/lint/lint.js"></script>
+<script src="{{ .base_path }}assets/codemirror/lint/javascript-lint.js"></script>
+<script src="{{ .base_path }}assets/codemirror/hint/javascript-hint.js"></script>
+<script src="{{ .base_path }}assets/codemirror/fold/foldcode.js"></script>
+<script src="{{ .base_path }}assets/codemirror/fold/foldgutter.js"></script>
+<script src="{{ .base_path }}assets/codemirror/fold/brace-fold.js"></script>
 {{template "component/aSidebar" .}}
 {{template "component/aThemeSwitch" .}}
 {{template "component/aTableSortable" .}}
@@ -1410,5 +1409,4 @@
         },
     });
 </script>
-</body>
-</html>
+{{ template "page/body_end" .}}
\ No newline at end of file

From 4b20f16024769a072fa7c665d605e38134ef2920 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Sun, 22 Jun 2025 00:27:09 +0700
Subject: [PATCH 5/8] refactor: new loading logic, icons for tabs

---
 web/html/inbounds.html               |  964 ++++-----
 web/html/index.html                  |   41 +-
 web/html/settings.html               |  126 +-
 web/html/settings/xray/advanced.html |    2 +-
 web/html/xray.html                   | 2712 +++++++++++++-------------
 5 files changed, 1979 insertions(+), 1866 deletions(-)

diff --git a/web/html/inbounds.html b/web/html/inbounds.html
index 7b00ae5e..e1267190 100644
--- a/web/html/inbounds.html
+++ b/web/html/inbounds.html
@@ -148,9 +148,9 @@
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
-      <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+      <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
         <transition name="list" appear>
-          <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }"
             message='{{ i18n "secAlertTitle" }}'
             color="red"
             description='{{ i18n "secAlertSsl" }}'
@@ -158,499 +158,508 @@
           </a-alert>
         </transition>
         <transition name="list" appear>
-          <a-card size="small" :style="{ padding: '16px' }" hoverable>
-            <a-row>
-              <a-col :sm="12" :md="6">
-                <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}' :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`">
-                  <template #prefix>
-                    <a-icon type="swap"></a-icon>
-                  </template>
-                </a-custom-statistic>
-              </a-col>
-              <a-col :sm="12" :md="6">
-                <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}' :value="SizeFormatter.sizeFormat(total.up + total.down)" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                  <template #prefix>
-                    <a-icon type="pie-chart"></a-icon>
-                  </template>
-                </a-custom-statistic>
-              </a-col>
-              <a-col :sm="12" :md="6">
-                <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                  <template #prefix>
-                    <a-icon type="bars"></a-icon>
-                  </template>
-                </a-custom-statistic>
-              </a-col>
-              <a-col :sm="12" :md="6">
-                <a-custom-statistic title='{{ i18n "clients" }}' value=" " :style="{ marginTop: isMobile ? '10px' : 0 }">
-                  <template #prefix>
-                    <a-space direction="horizontal">
-                      <a-icon type="team"></a-icon>
-                      <div>
-                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                        <a-tag color="green">[[ total.clients ]]</a-tag>
-                        <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                          <template slot="content">
-                            <div v-for="clientEmail in total.deactive"><span>[[ clientEmail ]]</span></div>
-                          </template>
-                          <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
-                        </a-popover>
-                        <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                          <template slot="content">
-                            <div v-for="clientEmail in total.depleted"><span>[[ clientEmail ]]</span></div>
-                          </template>
-                          <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
-                        </a-popover>
-                        <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                          <template slot="content">
-                            <div v-for="clientEmail in total.expiring"><span>[[ clientEmail ]]</span></div>
-                          </template>
-                          <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
-                        </a-popover>
-                        <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                          <template slot="content">
-                            <div v-for="clientEmail in onlineClients"><span>[[ clientEmail ]]</span></div>
-                          </template>
-                          <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
-                        </a-popover>
-                      </div>
-                    </a-space>
-                  </template>
-                </a-custom-statistic>
-              </a-col>
-            </a-row>
-          </a-card>
-        </transition>
-        <transition name="list" appear>
-          <a-card hoverable>
-            <template #title>
-              <a-space direction="horizontal">
-                <a-button type="primary" icon="plus" @click="openAddInbound">
-                  <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template>
-                </a-button>
-                <a-dropdown :trigger="['click']">
-                  <a-button type="primary" icon="menu">
-                    <template v-if="!isMobile">{{ i18n "pages.inbounds.generalActions" }}</template>
-                  </a-button>
-                  <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
-                    <a-menu-item key="import">
-                      <a-icon type="import"></a-icon>
-                      {{ i18n "pages.inbounds.importInbound" }}
-                    </a-menu-item>
-                    <a-menu-item key="export">
-                      <a-icon type="export"></a-icon>
-                      {{ i18n "pages.inbounds.export" }}
-                    </a-menu-item>
-                    <a-menu-item key="subs" v-if="subSettings.enable">
-                      <a-icon type="export"></a-icon>
-                      {{ i18n "pages.inbounds.export" }} - {{ i18n "pages.settings.subSettings" }}
-                    </a-menu-item>
-                    <a-menu-item key="resetInbounds">
-                      <a-icon type="reload"></a-icon>
-                      {{ i18n "pages.inbounds.resetAllTraffic" }}
-                    </a-menu-item>
-                    <a-menu-item key="resetClients">
-                      <a-icon type="file-done"></a-icon>
-                      {{ i18n "pages.inbounds.resetAllClientTraffics" }}
-                    </a-menu-item>
-                    <a-menu-item key="delDepletedClients" :style="{ color: '#FF4D4F' }">
-                      <a-icon type="rest"></a-icon>
-                      {{ i18n "pages.inbounds.delDepletedClients" }}
-                    </a-menu-item>
-                  </a-menu>
-                </a-dropdown>
-              </a-space>
-            </template>
-            <template #extra>
-              <a-button-group>
-                <a-button icon="sync" @click="manualRefresh" :loading="refreshing"></a-button>
-                <a-popover placement="bottomRight" trigger="click" :overlay-class-name="themeSwitcher.currentTheme"> 
-                  <template #title>
-                    <div class="ant-custom-popover-title">
-                      <a-switch v-model="isRefreshEnabled" @change="toggleRefresh" size="small"></a-switch>
-                      <span>{{ i18n "pages.inbounds.autoRefresh" }}</span>
-                    </div>
-                  </template>
-                  <template #content>
-                    <a-space direction="vertical">
-                      <span>{{ i18n "pages.inbounds.autoRefreshInterval" }}</span>
-                      <a-select v-model="refreshInterval"
-                          :disabled="!isRefreshEnabled"
-                          :style="{ width: '100%' }"
-                          @change="changeRefreshInterval"
-                          :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
-                      </a-select>
-                    </a-space>
-                  </template>
-                  <a-button icon="down"></a-button>
-                </a-popover>
-              </a-button-group>
-            </template>
-            <a-space direction="vertical">
-              <div :style="isMobile ? {} : { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }">
-                <a-switch v-model="enableFilter"
-                    :style="isMobile ? { marginBottom: '.5rem', display: 'flex' } : { marginRight: '.5rem' }"
-                    @change="toggleFilter">
-                  <a-icon slot="checkedChildren" type="search"></a-icon>
-                  <a-icon slot="unCheckedChildren" type="filter"></a-icon>
-                </a-switch>
-                <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus :style="{ maxWidth: '300px' }" :size="isMobile ? 'small' : ''"></a-input>
-                <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''">
-                  <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
-                  <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
-                  <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
-                  <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button>
-                  <a-radio-button value="online">{{ i18n "online" }}</a-radio-button>
-                </a-radio-group>
-              </div>
-              <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
-                  :data-source="searchedInbounds"
-                  :scroll="isMobile ? {} : { x: 1000 }"
-                  :pagination=pagination(searchedInbounds)
-                  :expand-icon-as-cell="false"
-                  :expand-row-by-click="false"
-                  :expand-icon-column-index="0"
-                  :indent-size="0"
-                  :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
-                  :style="{ marginTop: '10px' }"
-                  :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}`, emptyText: `{{ i18n "noData" }}` }'>
-                <template slot="action" slot-scope="text, dbInbound">
-                  <a-dropdown :trigger="['click']">
-                    <a-icon @click="e => e.preventDefault()" type="more" :style="{ fontSize: '20px', textDecoration: 'solid' }"></a-icon>
-                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
-                      <a-menu-item key="edit">
-                        <a-icon type="edit"></a-icon>
-                        {{ i18n "edit" }}
-                      </a-menu-item>
-                      <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
-                        <a-icon type="qrcode"></a-icon>
-                        {{ i18n "qrCode" }}
-                      </a-menu-item>
-                      <template v-if="dbInbound.isMultiUser()">
-                        <a-menu-item key="addClient">
-                          <a-icon type="user-add"></a-icon>
-                          {{ i18n "pages.client.add"}}
-                        </a-menu-item>
-                        <a-menu-item key="addBulkClient">
-                          <a-icon type="usergroup-add"></a-icon>
-                          {{ i18n "pages.client.bulk"}}
-                        </a-menu-item>
-                        <a-menu-item key="resetClients">
-                          <a-icon type="file-done"></a-icon>
-                          {{ i18n "pages.inbounds.resetInboundClientTraffics"}}
+          <a-row v-if="!loadingStates.fetched">
+            <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+              <a-spin tip='{{ i18n "loading" }}'></a-spin>
+            </a-card>
+          </a-row>
+          <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+            <a-col>
+              <a-card size="small" :style="{ padding: '16px' }" hoverable>
+                <a-row>
+                  <a-col :sm="12" :md="6">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.totalDownUp" }}' :value="`${SizeFormatter.sizeFormat(total.up)} / ${SizeFormatter.sizeFormat(total.down)}`">
+                      <template #prefix>
+                        <a-icon type="swap"></a-icon>
+                      </template>
+                    </a-custom-statistic>
+                  </a-col>
+                  <a-col :sm="12" :md="6">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.totalUsage" }}' :value="SizeFormatter.sizeFormat(total.up + total.down)" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                      <template #prefix>
+                        <a-icon type="pie-chart"></a-icon>
+                      </template>
+                    </a-custom-statistic>
+                  </a-col>
+                  <a-col :sm="12" :md="6">
+                    <a-custom-statistic title='{{ i18n "pages.inbounds.inboundCount" }}' :value="dbInbounds.length" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                      <template #prefix>
+                        <a-icon type="bars"></a-icon>
+                      </template>
+                    </a-custom-statistic>
+                  </a-col>
+                  <a-col :sm="12" :md="6">
+                    <a-custom-statistic title='{{ i18n "clients" }}' value=" " :style="{ marginTop: isMobile ? '10px' : 0 }">
+                      <template #prefix>
+                        <a-space direction="horizontal">
+                          <a-icon type="team"></a-icon>
+                          <div>
+                            <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
+                            <a-tag color="green">[[ total.clients ]]</a-tag>
+                            <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                              <template slot="content">
+                                <div v-for="clientEmail in total.deactive"><span>[[ clientEmail ]]</span></div>
+                              </template>
+                              <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
+                            </a-popover>
+                            <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                              <template slot="content">
+                                <div v-for="clientEmail in total.depleted"><span>[[ clientEmail ]]</span></div>
+                              </template>
+                              <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
+                            </a-popover>
+                            <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                              <template slot="content">
+                                <div v-for="clientEmail in total.expiring"><span>[[ clientEmail ]]</span></div>
+                              </template>
+                              <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
+                            </a-popover>
+                            <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                              <template slot="content">
+                                <div v-for="clientEmail in onlineClients"><span>[[ clientEmail ]]</span></div>
+                              </template>
+                              <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
+                            </a-popover>
+                          </div>
+                        </a-space>
+                      </template>
+                    </a-custom-statistic>
+                  </a-col>
+                </a-row>
+              </a-card>
+            </a-col>
+            <a-col>
+              <a-card hoverable>
+                <template #title>
+                  <a-space direction="horizontal">
+                    <a-button type="primary" icon="plus" @click="openAddInbound">
+                      <template v-if="!isMobile">{{ i18n "pages.inbounds.addInbound" }}</template>
+                    </a-button>
+                    <a-dropdown :trigger="['click']">
+                      <a-button type="primary" icon="menu">
+                        <template v-if="!isMobile">{{ i18n "pages.inbounds.generalActions" }}</template>
+                      </a-button>
+                      <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
+                        <a-menu-item key="import">
+                          <a-icon type="import"></a-icon>
+                          {{ i18n "pages.inbounds.importInbound" }}
                         </a-menu-item>
                         <a-menu-item key="export">
                           <a-icon type="export"></a-icon>
-                          {{ i18n "pages.inbounds.export"}}
+                          {{ i18n "pages.inbounds.export" }}
                         </a-menu-item>
                         <a-menu-item key="subs" v-if="subSettings.enable">
                           <a-icon type="export"></a-icon>
-                          {{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}
+                          {{ i18n "pages.inbounds.export" }} - {{ i18n "pages.settings.subSettings" }}
+                        </a-menu-item>
+                        <a-menu-item key="resetInbounds">
+                          <a-icon type="reload"></a-icon>
+                          {{ i18n "pages.inbounds.resetAllTraffic" }}
+                        </a-menu-item>
+                        <a-menu-item key="resetClients">
+                          <a-icon type="file-done"></a-icon>
+                          {{ i18n "pages.inbounds.resetAllClientTraffics" }}
                         </a-menu-item>
                         <a-menu-item key="delDepletedClients" :style="{ color: '#FF4D4F' }">
                           <a-icon type="rest"></a-icon>
                           {{ i18n "pages.inbounds.delDepletedClients" }}
                         </a-menu-item>
-                      </template>
-                      <template v-else>
-                        <a-menu-item key="showInfo">
-                          <a-icon type="info-circle"></a-icon>
-                          {{ i18n "info"}}
-                        </a-menu-item>
-                      </template>
-                      <a-menu-item key="clipboard">
-                        <a-icon type="copy"></a-icon>
-                        {{ i18n "pages.inbounds.exportInbound" }}
-                      </a-menu-item>
-                      <a-menu-item key="resetTraffic">
-                        <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
-                      </a-menu-item>
-                      <a-menu-item key="clone">
-                        <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}}
-                      </a-menu-item>
-                      <a-menu-item key="delete">
-                        <span :style="{ color: '#FF4D4F' }">
-                          <a-icon type="delete"></a-icon> {{ i18n "delete"}}
-                        </span>
-                      </a-menu-item>
-                      <a-menu-item v-if="isMobile">
-                        <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
-                        {{ i18n "pages.inbounds.enable" }}
-                      </a-menu-item>
-                    </a-menu>
-                  </a-dropdown>
+                      </a-menu>
+                    </a-dropdown>
+                  </a-space>
                 </template>
-                <template slot="protocol" slot-scope="text, dbInbound">
-                  <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
-                  <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                    <a-tag :style="{ margin: '0' }" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
-                    <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag>
-                    <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
-                  </template>
+                <template #extra>
+                  <a-button-group>
+                    <a-button icon="sync" @click="manualRefresh" :loading="refreshing"></a-button>
+                    <a-popover placement="bottomRight" trigger="click" :overlay-class-name="themeSwitcher.currentTheme"> 
+                      <template #title>
+                        <div class="ant-custom-popover-title">
+                          <a-switch v-model="isRefreshEnabled" @change="toggleRefresh" size="small"></a-switch>
+                          <span>{{ i18n "pages.inbounds.autoRefresh" }}</span>
+                        </div>
+                      </template>
+                      <template #content>
+                        <a-space direction="vertical">
+                          <span>{{ i18n "pages.inbounds.autoRefreshInterval" }}</span>
+                          <a-select v-model="refreshInterval"
+                              :disabled="!isRefreshEnabled"
+                              :style="{ width: '100%' }"
+                              @change="changeRefreshInterval"
+                              :dropdown-class-name="themeSwitcher.currentTheme">
+                            <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
+                          </a-select>
+                        </a-space>
+                      </template>
+                      <a-button icon="down"></a-button>
+                    </a-popover>
+                  </a-button-group>
                 </template>
-                <template slot="clients" slot-scope="text, dbInbound">
-                  <template v-if="clientCount[dbInbound.id]">
-                    <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
-                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                      <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
-                          <span>[[ clientEmail ]]</span>
-                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                            <template #title>
-                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                            </template>
-                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                          </a-tooltip>
-                        </div>
-                      </template>
-                      <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
-                    </a-popover>
-                    <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                      <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
-                          <span>[[ clientEmail ]]</span>
-                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                            <template #title>
-                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                            </template>
-                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                          </a-tooltip>
-                        </div>
-                      </template>
-                      <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
-                    </a-popover>
-                    <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                      <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
-                          <span>[[ clientEmail ]]</span>
-                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                            <template #title>
-                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                            </template>
-                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                          </a-tooltip>
-                        </div>
-                      </template>
-                      <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
-                    </a-popover>
-                    <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                      <template slot="content">
-                        <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
-                          <span>[[ clientEmail ]]</span>
-                          <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                            <template #title>
-                              [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                            </template>
-                            <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                          </a-tooltip>
-                        </div>
-                      </template>
-                      <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
-                    </a-popover>
-                  </template>
-                </template>
-                <template slot="traffic" slot-scope="text, dbInbound">
-                  <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                    <template slot="content">
-                      <table cellpadding="2" width="100%">
-                        <tr>
-                          <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
-                          <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
-                        </tr>
-                        <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
-                          <td>{{ i18n "remained" }}</td>
-                          <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
-                        </tr>
-                      </table>
+                <a-space direction="vertical">
+                  <div :style="isMobile ? {} : { display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }">
+                    <a-switch v-model="enableFilter"
+                        :style="isMobile ? { marginBottom: '.5rem', display: 'flex' } : { marginRight: '.5rem' }"
+                        @change="toggleFilter">
+                      <a-icon slot="checkedChildren" type="search"></a-icon>
+                      <a-icon slot="unCheckedChildren" type="filter"></a-icon>
+                    </a-switch>
+                    <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus :style="{ maxWidth: '300px' }" :size="isMobile ? 'small' : ''"></a-input>
+                    <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid" :size="isMobile ? 'small' : ''">
+                      <a-radio-button value="">{{ i18n "none" }}</a-radio-button>
+                      <a-radio-button value="deactive">{{ i18n "disabled" }}</a-radio-button>
+                      <a-radio-button value="depleted">{{ i18n "depleted" }}</a-radio-button>
+                      <a-radio-button value="expiring">{{ i18n "depletingSoon" }}</a-radio-button>
+                      <a-radio-button value="online">{{ i18n "online" }}</a-radio-button>
+                    </a-radio-group>
+                  </div>
+                  <a-table :columns="isMobile ? mobileColumns : columns" :row-key="dbInbound => dbInbound.id"
+                      :data-source="searchedInbounds"
+                      :scroll="isMobile ? {} : { x: 1000 }"
+                      :pagination=pagination(searchedInbounds)
+                      :expand-icon-as-cell="false"
+                      :expand-row-by-click="false"
+                      :expand-icon-column-index="0"
+                      :indent-size="0"
+                      :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
+                      :style="{ marginTop: '10px' }"
+                      :locale='{ filterConfirm: `{{ i18n "confirm" }}`, filterReset: `{{ i18n "reset" }}`, emptyText: `{{ i18n "noData" }}` }'>
+                    <template slot="action" slot-scope="text, dbInbound">
+                      <a-dropdown :trigger="['click']">
+                        <a-icon @click="e => e.preventDefault()" type="more" :style="{ fontSize: '20px', textDecoration: 'solid' }"></a-icon>
+                        <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
+                          <a-menu-item key="edit">
+                            <a-icon type="edit"></a-icon>
+                            {{ i18n "edit" }}
+                          </a-menu-item>
+                          <a-menu-item key="qrcode" v-if="(dbInbound.isSS && !dbInbound.toInbound().isSSMultiUser) || dbInbound.isWireguard">
+                            <a-icon type="qrcode"></a-icon>
+                            {{ i18n "qrCode" }}
+                          </a-menu-item>
+                          <template v-if="dbInbound.isMultiUser()">
+                            <a-menu-item key="addClient">
+                              <a-icon type="user-add"></a-icon>
+                              {{ i18n "pages.client.add"}}
+                            </a-menu-item>
+                            <a-menu-item key="addBulkClient">
+                              <a-icon type="usergroup-add"></a-icon>
+                              {{ i18n "pages.client.bulk"}}
+                            </a-menu-item>
+                            <a-menu-item key="resetClients">
+                              <a-icon type="file-done"></a-icon>
+                              {{ i18n "pages.inbounds.resetInboundClientTraffics"}}
+                            </a-menu-item>
+                            <a-menu-item key="export">
+                              <a-icon type="export"></a-icon>
+                              {{ i18n "pages.inbounds.export"}}
+                            </a-menu-item>
+                            <a-menu-item key="subs" v-if="subSettings.enable">
+                              <a-icon type="export"></a-icon>
+                              {{ i18n "pages.inbounds.export"}} - {{ i18n "pages.settings.subSettings" }}
+                            </a-menu-item>
+                            <a-menu-item key="delDepletedClients" :style="{ color: '#FF4D4F' }">
+                              <a-icon type="rest"></a-icon>
+                              {{ i18n "pages.inbounds.delDepletedClients" }}
+                            </a-menu-item>
+                          </template>
+                          <template v-else>
+                            <a-menu-item key="showInfo">
+                              <a-icon type="info-circle"></a-icon>
+                              {{ i18n "info"}}
+                            </a-menu-item>
+                          </template>
+                          <a-menu-item key="clipboard">
+                            <a-icon type="copy"></a-icon>
+                            {{ i18n "pages.inbounds.exportInbound" }}
+                          </a-menu-item>
+                          <a-menu-item key="resetTraffic">
+                            <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
+                          </a-menu-item>
+                          <a-menu-item key="clone">
+                            <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}}
+                          </a-menu-item>
+                          <a-menu-item key="delete">
+                            <span :style="{ color: '#FF4D4F' }">
+                              <a-icon type="delete"></a-icon> {{ i18n "delete"}}
+                            </span>
+                          </a-menu-item>
+                          <a-menu-item v-if="isMobile">
+                            <a-switch size="small" v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
+                            {{ i18n "pages.inbounds.enable" }}
+                          </a-menu-item>
+                        </a-menu>
+                      </a-dropdown>
                     </template>
-                    <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
-                      [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
-                      <template v-if="dbInbound.total > 0">
-                          [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
+                    <template slot="protocol" slot-scope="text, dbInbound">
+                      <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
+                      <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+                        <a-tag :style="{ margin: '0' }" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
+                        <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="blue">TLS</a-tag>
+                        <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
                       </template>
-                      <template v-else>
+                    </template>
+                    <template slot="clients" slot-scope="text, dbInbound">
+                      <template v-if="clientCount[dbInbound.id]">
+                        <a-tag :style="{ margin: '0' }" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
+                        <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                          <template slot="content">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                              <span>[[ clientEmail ]]</span>
+                              <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                <template #title>
+                                  [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                </template>
+                                <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                              </a-tooltip>
+                            </div>
+                          </template>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
+                        </a-popover>
+                        <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                          <template slot="content">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                              <span>[[ clientEmail ]]</span>
+                              <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                <template #title>
+                                  [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                </template>
+                                <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                              </a-tooltip>
+                            </div>
+                          </template>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
+                        </a-popover>
+                        <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                          <template slot="content">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                              <span>[[ clientEmail ]]</span>
+                              <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                <template #title>
+                                  [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                </template>
+                                <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                              </a-tooltip>
+                            </div>
+                          </template>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
+                        </a-popover>
+                        <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                          <template slot="content">
+                            <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                              <span>[[ clientEmail ]]</span>
+                              <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                <template #title>
+                                  [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                </template>
+                                <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                              </a-tooltip>
+                            </div>
+                          </template>
+                          <a-tag :style="{ margin: '0', padding: '0 2px' }" color="blue" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
+                        </a-popover>
+                      </template>
+                    </template>
+                    <template slot="traffic" slot-scope="text, dbInbound">
+                      <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                        <template slot="content">
+                          <table cellpadding="2" width="100%">
+                            <tr>
+                              <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
+                              <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
+                            </tr>
+                            <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
+                              <td>{{ i18n "remained" }}</td>
+                              <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                            </tr>
+                          </table>
+                        </template>
+                        <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                          [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
+                          <template v-if="dbInbound.total > 0">
+                              [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
+                          </template>
+                          <template v-else>
+                            <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+                              <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                            </svg>
+                          </template>
+                        </a-tag>
+                      </a-popover>
+                    </template>
+                    <template slot="enable" slot-scope="text, dbInbound">
+                      <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
+                    </template>
+                    <template slot="expiryTime" slot-scope="text, dbInbound">
+                      <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
+                        <template slot="content" v-if="app.datepicker === 'gregorian'">
+                          [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
+                        </template>
+                        <template v-else slot="content">
+                          [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
+                        </template>
+                        <a-tag :style="{ minWidth: '50px' }" :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
+                          [[ remainedDays(dbInbound._expiryTime) ]]
+                        </a-tag>
+                      </a-popover>
+                      <a-tag v-else color="purple" class="infinite-tag">
                         <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
                           <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
                         </svg>
-                      </template>
-                    </a-tag>
-                  </a-popover>
-                </template>
-                <template slot="enable" slot-scope="text, dbInbound">
-                  <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id,dbInbound.enable)"></a-switch>
-                </template>
-                <template slot="expiryTime" slot-scope="text, dbInbound">
-                  <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
-                    <template slot="content" v-if="app.datepicker === 'gregorian'">
-                      [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
+                      </a-tag>
                     </template>
-                    <template v-else slot="content">
-                      [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
-                    </template>
-                    <a-tag :style="{ minWidth: '50px' }" :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
-                      [[ remainedDays(dbInbound._expiryTime) ]]
-                    </a-tag>
-                  </a-popover>
-                  <a-tag v-else color="purple" class="infinite-tag">
-                    <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                      <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
-                    </svg>
-                  </a-tag>
-                </template>
-                <template slot="info" slot-scope="text, dbInbound">
-                  <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
-                    <template slot="content">
-                      <table cellpadding="2">
-                        <tr>
-                          <td>{{ i18n "pages.inbounds.protocol" }}</td>
-                          <td>
-                            <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
-                            <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                              <a-tag :style="{ margin: '0' }" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag>
-                              <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag>
-                              <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag>
-                            </template>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{{ i18n "pages.inbounds.port" }}</td>
-                          <td><a-tag>[[ dbInbound.port ]]</a-tag></td>
-                        </tr>
-                        <tr v-if="clientCount[dbInbound.id]">
-                          <td>{{ i18n "clients" }}</td>
-                          <td>
-                            <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
-                            <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
-                                  <span>[[ clientEmail ]]</span>
-                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                                    <template #title>
-                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                                    </template>
-                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                                  </a-tooltip>
-                                </div>
-                              </template>
-                              <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
-                            </a-popover>
-                            <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
-                                  <span>[[ clientEmail ]]</span>
-                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                                    <template #title>
-                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                                    </template>
-                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                                  </a-tooltip>
-                                </div>
-                              </template>
-                              <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
-                            </a-popover>
-                            <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
-                                  <span>[[ clientEmail ]]</span>
-                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                                    <template #title>
-                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                                    </template>
-                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                                  </a-tooltip>
-                                </div>
-                              </template>
-                              <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
-                            </a-popover>
-                            <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
-                                  <span>[[ clientEmail ]]</span>
-                                  <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
-                                    <template #title>
-                                      [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
-                                    </template>
-                                    <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
-                                  </a-tooltip>
-                                </div>
-                              </template>
-                              <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
-                            </a-popover>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{{ i18n "pages.inbounds.traffic" }}</td>
-                          <td>
-                            <a-popover :overlay-class-name="themeSwitcher.currentTheme">
-                              <template slot="content">
-                                <table cellpadding="2" width="100%">
-                                  <tr>
-                                    <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
-                                    <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
-                                  </tr>
-                                  <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
-                                    <td>{{ i18n "remained" }}</td>
-                                    <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
-                                  </tr>
-                                </table>
-                              </template>
-                              <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
-                                  [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
-                                  <template v-if="dbInbound.total > 0">
-                                      [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
+                    <template slot="info" slot-scope="text, dbInbound">
+                      <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
+                        <template slot="content">
+                          <table cellpadding="2">
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.protocol" }}</td>
+                              <td>
+                                <a-tag :style="{ margin: '0' }" color="purple">[[ dbInbound.protocol ]]</a-tag>
+                                <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+                                  <a-tag :style="{ margin: '0' }" color="blue">[[ dbInbound.toInbound().stream.network ]]</a-tag>
+                                  <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isTls" color="green">tls</a-tag>
+                                  <a-tag :style="{ margin: '0' }" v-if="dbInbound.toInbound().stream.isReality" color="green">reality</a-tag>
+                                </template>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.port" }}</td>
+                              <td><a-tag>[[ dbInbound.port ]]</a-tag></td>
+                            </tr>
+                            <tr v-if="clientCount[dbInbound.id]">
+                              <td>{{ i18n "clients" }}</td>
+                              <td>
+                                <a-tag :style="{ margin: '0' }" color="blue">[[ clientCount[dbInbound.id].clients ]]</a-tag>
+                                <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].deactive" :key="clientEmail" class="client-popup-item">
+                                      <span>[[ clientEmail ]]</span>
+                                      <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template #title>
+                                          [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                        </template>
+                                        <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                      </a-tooltip>
+                                    </div>
                                   </template>
-                                <template v-else>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
+                                </a-popover>
+                                <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].depleted" :key="clientEmail" class="client-popup-item">
+                                      <span>[[ clientEmail ]]</span>
+                                      <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template #title>
+                                          [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                        </template>
+                                        <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                      </a-tooltip>
+                                    </div>
+                                  </template>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
+                                </a-popover>
+                                <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].expiring" :key="clientEmail" class="client-popup-item">
+                                      <span>[[ clientEmail ]]</span>
+                                      <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template #title>
+                                          [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                        </template>
+                                        <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                      </a-tooltip>
+                                    </div>
+                                  </template>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
+                                </a-popover>
+                                <a-popover title='{{ i18n "online" }}' :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <div v-for="clientEmail in clientCount[dbInbound.id].online" :key="clientEmail" class="client-popup-item">
+                                      <span>[[ clientEmail ]]</span>
+                                      <a-tooltip :overlay-class-name="themeSwitcher.currentTheme">
+                                        <template #title>
+                                          [[ getClientWithComment(clientEmail, dbInbound.id).comment ]]
+                                        </template>
+                                        <a-icon type="message" v-if="getClientWithComment(clientEmail, dbInbound.id).comment"></a-icon>
+                                      </a-tooltip>
+                                    </div>
+                                  </template>
+                                  <a-tag :style="{ margin: '0', padding: '0 2px' }" color="green" v-if="clientCount[dbInbound.id].online.length">[[ clientCount[dbInbound.id].online.length ]]</a-tag>
+                                </a-popover>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.traffic" }}</td>
+                              <td>
+                                <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                                  <template slot="content">
+                                    <table cellpadding="2" width="100%">
+                                      <tr>
+                                        <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
+                                        <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
+                                      </tr>
+                                      <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
+                                        <td>{{ i18n "remained" }}</td>
+                                        <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                                      </tr>
+                                    </table>
+                                  </template>
+                                  <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                                      [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
+                                      <template v-if="dbInbound.total > 0">
+                                          [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
+                                      </template>
+                                    <template v-else>
+                                      <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+                                        <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                                      </svg>
+                                    </template>
+                                  </a-tag>
+                                </a-popover>
+                              </td>
+                            </tr>
+                            <tr>
+                              <td>{{ i18n "pages.inbounds.expireDate" }}</td>
+                              <td>
+                                <a-tag :style="{ minWidth: '50px', textAlign: 'center' }" v-if="dbInbound.expiryTime > 0"
+                                  :color="dbInbound.isExpiry? 'red': 'blue'">
+                                  <template v-if="app.datepicker === 'gregorian'">
+                                    [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
+                                  </template>
+                                  <template v-else>
+                                    [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
+                                  </template>
+                                </a-tag>
+                                <a-tag v-else :style="{ textAlign: 'center' }" color="purple" class="infinite-tag">
                                   <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
                                     <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
                                   </svg>
-                                </template>
-                              </a-tag>
-                            </a-popover>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{{ i18n "pages.inbounds.expireDate" }}</td>
-                          <td>
-                            <a-tag :style="{ minWidth: '50px', textAlign: 'center' }" v-if="dbInbound.expiryTime > 0"
-                              :color="dbInbound.isExpiry? 'red': 'blue'">
-                              <template v-if="app.datepicker === 'gregorian'">
-                                [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
-                              </template>
-                              <template v-else>
-                                [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
-                              </template>
-                            </a-tag>
-                            <a-tag v-else :style="{ textAlign: 'center' }" color="purple" class="infinite-tag">
-                              <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
-                                <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
-                              </svg>
-                            </a-tag>
-                          </td>
-                        </tr>
-                      </table>
+                                </a-tag>
+                              </td>
+                            </tr>
+                          </table>
+                        </template>
+                        <a-badge>
+                          <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
+                          <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
+                            <a-icon type="info"></a-icon>
+                          </a-button>
+                        </a-badge>
+                      </a-popover>
+                    </template>
+                    <template slot="expandedRowRender" slot-scope="record">
+                      <a-table
+                        :row-key="client => client.id"
+                        :columns="isMobile ? innerMobileColumns : innerColumns"
+                        :data-source="getInboundClients(record)"
+                        :pagination=pagination(getInboundClients(record))
+                        :style="{ margin: `-10px ${isMobile ? '2px' : '22px'} -11px` }">
+                        {{template "component/aClientTable"}}
+                      </a-table>
                     </template>
-                    <a-badge>
-                      <a-icon v-if="!dbInbound.enable" slot="count" type="pause-circle" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
-                      <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
-                        <a-icon type="info"></a-icon>
-                      </a-button>
-                    </a-badge>
-                  </a-popover>
-                </template>
-                <template slot="expandedRowRender" slot-scope="record">
-                  <a-table
-                    :row-key="client => client.id"
-                    :columns="isMobile ? innerMobileColumns : innerColumns"
-                    :data-source="getInboundClients(record)"
-                    :pagination=pagination(getInboundClients(record))
-                    :style="{ margin: `-10px ${isMobile ? '2px' : '22px'} -11px` }">
-                    {{template "component/aClientTable"}}
                   </a-table>
-                </template>
-              </a-table>
-            </a-space>
-          </a-card>
+                </a-space>
+              </a-card> 
+            </a-col>
+          </a-row>
         </transition>
       </a-spin>
     </a-layout-content>
@@ -766,7 +775,10 @@
         data: {
             themeSwitcher,
             persianDatepicker,
-            spinning: false,
+            loadingStates: {
+              fetched: false,
+              spinning: false
+            },
             inbounds: [],
             dbInbounds: [],
             searchKey: '',
@@ -797,7 +809,7 @@
         },
         methods: {
             loading(spinning = true) {
-                this.spinning = spinning;
+                this.loadingStates.spinning = spinning;
             },
             getClientWithComment(email, inboundId) {
                 const dbInbound = this.dbInbounds.find(inbound => inbound.id === inboundId);
@@ -819,6 +831,7 @@
                 }
 
                 await this.getOnlineUsers();
+                
                 this.setInbounds(msg.obj);
                 setTimeout(() => {
                     this.refreshing = false;
@@ -870,6 +883,9 @@
                         this.clientCount[inbound.id] = this.getClientCounts(inbound, to_inbound);
                     }
                 }
+                if (!this.loadingStates.fetched) {
+                    this.loadingStates.fetched = true
+                }
                 if(this.enableFilter){
                     this.filterInbounds();
                 } else {
@@ -1541,9 +1557,9 @@
             },
             async manualRefresh() {
                 if (!this.refreshing) {
-                    this.spinning = true;
+                    this.loadingStates.spinning = true;
                     await this.getDBInbounds();
-                    this.spinning = false;
+                    this.loadingStates.spinning = false;
                 }
             },
             pagination(obj){
diff --git a/web/html/index.html b/web/html/index.html
index 61e3947f..db678cd6 100644
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -4,15 +4,6 @@
     .ant-layout-content {
       margin: 24px 16px;
     }
-    .ant-card-hoverable {
-      margin-inline: 0.3rem;
-    }
-    .ant-alert-error {
-      margin-inline: 0.3rem;
-    }
-  }
-  .ant-col-sm-24 {
-    margin-top: 10px;
   }
   .ant-card-dark h2 {
     color: var(--dark-color-text-primary);
@@ -84,9 +75,9 @@
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
-      <a-spin :spinning="spinning" :delay="200" :tip="loadingTip">
+      <a-spin :spinning="loadingStates.spinning" :delay="200" :tip="loadingTip">
         <transition name="list" appear>
-          <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }"
             message='{{ i18n "secAlertTitle" }}'
             color="red"
             description='{{ i18n "secAlertSsl" }}'
@@ -95,15 +86,15 @@
         </transition>
         <transition name="list" appear>
           <template>
-            <a-row v-if="!status.isLoaded">
+            <a-row v-if="!loadingStates.fetched">
               <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
                 <a-spin tip='{{ i18n "loading" }}'></a-spin>
               </a-card>
             </a-row>
-            <a-row v-else>
-              <a-row>
+            <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+              <a-col>
                 <a-card hoverable>
-                  <a-row>
+                  <a-row :gutter="[0, isMobile ? 16 : 0]">
                     <a-col :sm="24" :md="12">
                       <a-row>
                         <a-col :span="12" :style="{ textAlign: 'center' }">
@@ -153,7 +144,7 @@
                     </a-col>
                   </a-row>
                 </a-card>
-              </a-row>
+              </a-col>
               <a-col :sm="24" :lg="12">
                 <a-card hoverable>
                   <template #title>
@@ -488,7 +479,7 @@
     }
 
     class Status {
-        constructor(data, isLoaded = false) {
+        constructor(data) {
             this.cpu = new CurTotal(0, 0);
             this.cpuCores = 0;
             this.logicalPro = 0;
@@ -512,7 +503,6 @@
               return;
             }
 
-            this.isLoaded = isLoaded;
             this.cpu = new CurTotal(data.cpu, 100);
             this.cpuCores = data.cpuCores;
             this.logicalPro = data.logicalPro;
@@ -632,32 +622,39 @@
         mixins: [MediaQueryMixin],
         data: {
             themeSwitcher,
+            loadingStates: {
+              fetched: false,
+              spinning: false
+            },
             status: new Status(),
             versionModal,
             logModal,
             backupModal,
-            spinning: false,
             loadingTip: '{{ i18n "loading"}}',
             showAlert: false,
             showIp: false
         },
         methods: {
             loading(spinning, tip = '{{ i18n "loading"}}') {
-                this.spinning = spinning;
+                this.loadingStates.spinning = spinning;
                 this.loadingTip = tip;
             },
             async getStatus() {
                 try {
                     const msg = await HttpUtil.post('/server/status');
                     if (msg.success) {
+                        if (!this.loadingStates.fetched) {
+                            this.loadingStates.fetched = true;
+                        }
+
                         this.setStatus(msg.obj, true);
                     }
                 } catch (e) {
                     console.error("Failed to get status:", e);
                 }
             },
-            setStatus(data, isLoaded = false) {
-              this.status = new Status(data, isLoaded);
+            setStatus(data) {
+                this.status = new Status(data);
             },
             async openSelectV2rayVersion() {
                 this.loading(true);
diff --git a/web/html/settings.html b/web/html/settings.html
index 18e0d6a8..840778f5 100644
--- a/web/html/settings.html
+++ b/web/html/settings.html
@@ -65,9 +65,9 @@
   <a-sidebar></a-sidebar>
   <a-layout id="content-layout">
     <a-layout-content>
-      <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+      <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
         <transition name="list" appear>
-          <a-alert type="error" v-if="confAlerts.length>0" :style="{ marginBottom: '10px' }"
+          <a-alert type="error" v-if="confAlerts.length>0 && loadingStates.fetched" :style="{ marginBottom: '10px' }"
               message='{{ i18n "secAlertTitle" }}'
               color="red"
               show-icon closable>
@@ -77,46 +77,79 @@
             </template>
           </a-alert>
         </transition>
-        <a-space direction="vertical">
-          <a-card hoverable :style="{ marginBottom: '.5rem', overflowX: 'hidden' }">
-            <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
-              <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
-                <a-space direction="horizontal">
-                  <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
-                  <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
-                </a-space>
+        <transition name="list" appear>
+          <template>
+            <a-row v-if="!loadingStates.fetched">
+              <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+                <a-spin tip='{{ i18n "loading" }}'></a-spin>
+              </a-card>
+            </a-row>
+            <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+              <a-col>
+                <a-card hoverable>
+                  <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
+                    <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
+                      <a-space direction="horizontal">
+                        <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
+                        <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
+                      </a-space>
+                    </a-col>
+                    <a-col :xs="24" :sm="14">
+                      <template>
+                        <div>
+                          <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
+                          <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
+                            message='{{ i18n "pages.settings.infoDesc" }}'
+                            show-icon>
+                          </a-alert>
+                        </div>
+                      </template>
+                    </a-col>
+                  </a-row>
+                </a-card>
               </a-col>
-              <a-col :xs="24" :sm="14">
-                <template>
-                  <div>
-                    <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                    <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
-                      message='{{ i18n "pages.settings.infoDesc" }}'
-                      show-icon>
-                    </a-alert>
-                  </div>
-                </template>
+              <a-col>
+                <a-tabs default-active-key="1">
+                  <a-tab-pane key="1" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="setting"></a-icon>
+                      <span>{{ i18n "pages.settings.panelSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/general" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="2" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="safety"></a-icon>
+                      <span>{{ i18n "pages.settings.securitySettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/security" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="3" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="message"></a-icon>
+                      <span>{{ i18n "pages.settings.TGBotSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/telegram" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="4" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="cloud-server"></a-icon>
+                      <span>{{ i18n "pages.settings.subSettings" }}</span>
+                    </template>
+                    {{ template "settings/panel/subscription/general" . }}
+                  </a-tab-pane>
+                  <a-tab-pane key="5" v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
+                    <template #tab>
+                      <a-icon type="code"></a-icon>
+                      <span>{{ i18n "pages.settings.subSettings" }} (JSON)</span>
+                    </template>
+                    {{ template "settings/panel/subscription/json" . }}
+                  </a-tab-pane>
+                </a-tabs>
               </a-col>
             </a-row>
-          </a-card>
-          <a-tabs default-active-key="1">
-            <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/general" . }}
-            </a-tab-pane>
-            <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/security" . }}
-            </a-tab-pane>
-            <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/telegram" . }}
-            </a-tab-pane>
-            <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}' :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/subscription/general" . }}
-            </a-tab-pane>
-            <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable" :style="{ paddingTop: '20px' }">
-              {{ template "settings/panel/subscription/json" . }}
-            </a-tab-pane>
-          </a-tabs>
-        </a-space>
+          </template>
+        </transition>
       </a-spin>
     </a-layout-content>
   </a-layout>
@@ -132,10 +165,14 @@
 <script>
   const app = new Vue({
     delimiters: ['[[', ']]'],
+    mixins: [MediaQueryMixin],
     el: '#app',
     data: {
       themeSwitcher,
-      spinning: false,
+      loadingStates: {
+        fetched: false,
+        spinning: false
+      },
       oldAllSetting: new AllSetting(),
       allSetting: new AllSetting(),
       saveBtnDisable: true,
@@ -248,13 +285,16 @@
     },
     methods: {
       loading(spinning = true) {
-        this.spinning = spinning;
+        this.loadingStates.spinning = spinning;
       },
       async getAllSetting() {
-        this.loading(true);
         const msg = await HttpUtil.post("/panel/setting/all");
-        this.loading(false);
+
         if (msg.success) {
+          if (!this.loadingStates.fetched) {
+            this.loadingStates.fetched = true
+          }
+
           this.oldAllSetting = new AllSetting(msg.obj);
           this.allSetting = new AllSetting(msg.obj);
           app.changeRemarkSample();
diff --git a/web/html/settings/xray/advanced.html b/web/html/settings/xray/advanced.html
index b5f61b34..28e31871 100644
--- a/web/html/settings/xray/advanced.html
+++ b/web/html/settings/xray/advanced.html
@@ -1,5 +1,5 @@
 {{define "settings/xray/advanced"}}
-<a-space direction="vertical" size="small">
+<a-space direction="vertical" size="small" :style="{ marginTop: '20px' }">
     <a-list-item-meta title='{{ i18n "pages.xray.Template"}}'
         description='{{ i18n "pages.xray.TemplateDesc"}}'></a-list-item-meta>
     <a-radio-group v-model="advSettings" @change="changeCode" button-style="solid" :style="{ margin: '10px 0' }"
diff --git a/web/html/xray.html b/web/html/xray.html
index 8a60dafe..b6e40858 100644
--- a/web/html/xray.html
+++ b/web/html/xray.html
@@ -9,102 +9,148 @@
       margin: 24px 16px;
     }
   }
+
   @media (max-width: 768px) {
     .ant-tabs-nav .ant-tabs-tab {
       margin: 0;
       padding: 12px .5rem;
     }
+
     .ant-table-thead>tr>th,
     .ant-table-tbody>tr>td {
       padding: 10px 0px;
     }
   }
+
   .ant-tabs-bar {
     margin: 0;
   }
+
   .ant-list-item {
     display: block;
   }
+
   .ant-list-item>li {
     padding: 10px 20px !important;
   }
+
   .ant-collapse-content-box .ant-alert {
     margin-block-end: 12px;
-}
+  }
 </style>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
 <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
-<a-sidebar></a-sidebar>
-<a-layout id="content-layout">
+  <a-sidebar></a-sidebar>
+  <a-layout id="content-layout">
     <a-layout-content>
-    <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+      <a-spin :spinning="loadingStates.spinning" :delay="500" tip='{{ i18n "loading"}}'>
         <transition name="list" appear>
-        <a-alert type="error" v-if="showAlert" :style="{ marginBottom: '10px' }"
-            message='{{ i18n "secAlertTitle" }}'
-            color="red"
-            description='{{ i18n "secAlertSsl" }}'
-            show-icon closable>
-        </a-alert>
+          <a-alert type="error" v-if="showAlert && loadingStates.fetched" :style="{ marginBottom: '10px' }" message='{{ i18n "secAlertTitle" }}'
+            color="red" description='{{ i18n "secAlertSsl" }}' show-icon closable>
+          </a-alert>
         </transition>
-        <a-space direction="vertical">
-        <a-card hoverable :style="{ marginBottom: '.5rem' }">
-            <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
-            <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
-                <a-space direction="horizontal">
-                <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">{{ i18n "pages.xray.save" }}</a-button>
-                <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">{{ i18n "pages.xray.restart" }}</a-button>
-                <a-popover v-if="restartResult"
-                    :overlay-class-name="themeSwitcher.currentTheme">
-                    <span slot="title">{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
-                    <template slot="content">
-                    <span :style="{ maxWidth: '400px' }" v-for="line in restartResult.split('\n')">[[ line ]]</span>
+        <transition name="list" appear>
+          <a-row v-if="!loadingStates.fetched">
+            <a-card :style="{ textAlign: 'center', padding: '30px 0', marginTop: '10px', background: 'transparent', border: 'none' }">
+              <a-spin tip='{{ i18n "loading" }}'></a-spin>
+            </a-card>
+          </a-row>
+          <a-row :gutter="[isMobile ? 8 : 16, isMobile ? 0 : 12]" v-else>
+            <a-col>
+              <a-card hoverable>
+                <a-row :style="{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }">
+                  <a-col :xs="24" :sm="10" :style="{ padding: '4px' }">
+                    <a-space direction="horizontal">
+                      <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">
+                        {{ i18n "pages.xray.save" }}
+                      </a-button>
+                      <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">
+                        {{ i18n "pages.xray.restart" }}
+                      </a-button>
+                      <a-popover v-if="restartResult" :overlay-class-name="themeSwitcher.currentTheme">
+                        <span slot="title">{{ i18n "pages.index.xrayErrorPopoverTitle" }}</span>
+                        <template slot="content">
+                          <span :style="{ maxWidth: '400px' }" v-for="line in restartResult.split('\n')">[[ line ]]</span>
+                        </template>
+                        <a-icon type="question-circle"></a-icon>
+                      </a-popover>
+                    </a-space>
+                  </a-col>
+                  <a-col :xs="24" :sm="14">
+                    <template>
+                      <div>
+                        <a-back-top :target="() => document.getElementById('content-layout')"
+                          visibility-height="200"></a-back-top>
+                        <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }"
+                          message='{{ i18n "pages.settings.infoDesc" }}' show-icon>
+                        </a-alert>
+                      </div>
                     </template>
-                    <a-icon type="question-circle"></a-icon>
-                </a-popover>
-                </a-space>
+                  </a-col>
+                </a-row>
+              </a-card>
             </a-col>
-            <a-col :xs="24" :sm="14">
-                <template>
-                <div>
-                    <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"></a-back-top>
-                    <a-alert type="warning" :style="{ float: 'right', width: 'fit-content' }" message='{{ i18n "pages.settings.infoDesc" }}' show-icon>
-                    </a-alert>
-                </div>
-                </template>
+            <a-col>
+              <a-tabs default-active-key="tpl-basic" @change="(activeKey) => { this.changePage(activeKey); }"
+                :class="themeSwitcher.currentTheme">
+                <a-tab-pane key="tpl-basic" :style="{ paddingTop: '20px' }">
+                  <template #tab>
+                    <a-icon type="setting"></a-icon>
+                    <span>{{ i18n "pages.xray.basicTemplate"}}</span>
+                  </template>
+                  {{ template "settings/xray/basics" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-routing" :style="{ paddingTop: '20px' }">
+                  <template #tab>
+                    <a-icon type="swap"></a-icon>
+                    <span>{{ i18n "pages.xray.Routings"}}</span>
+                  </template>
+                  {{ template "settings/xray/routing" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-outbound" force-render="true">
+                  <template #tab>
+                    <a-icon type="upload"></a-icon>
+                    <span>{{ i18n "pages.xray.Outbounds"}}</span>
+                  </template>
+                  {{ template "settings/xray/outbounds" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-reverse" :style="{ paddingTop: '20px' }" force-render="true">
+                  <template #tab>
+                    <a-icon type="import"></a-icon>
+                    <span>{{ i18n "pages.xray.outbound.reverse"}}</span>
+                  </template>
+                  {{ template "settings/xray/reverse" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-balancer" :style="{ paddingTop: '20px' }" force-render="true">
+                  <template #tab>
+                    <a-icon type="cluster"></a-icon>
+                    <span>{{ i18n "pages.xray.Balancers"}}</span>
+                  </template>
+                  {{ template "settings/xray/balancers" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-dns" :style="{ paddingTop: '20px' }" force-render="true">
+                  <template #tab>
+                    <a-icon type="database"></a-icon>
+                    <span>DNS</span>
+                  </template>
+                  {{ template "settings/xray/dns" . }}
+                </a-tab-pane>
+                <a-tab-pane key="tpl-advanced" force-render="true">
+                  <template #tab>
+                    <a-icon type="code"></a-icon>
+                    <span>{{ i18n "pages.xray.advancedTemplate"}}</span>
+                  </template>
+                  {{ template "settings/xray/advanced" . }}
+                </a-tab-pane>
+              </a-tabs>
             </a-col>
-            </a-row>
-        </a-card>
-        <a-tabs class="ant-card-dark-box-nohover" default-active-key="1"
-            @change="(activeKey) => { this.changePage(activeKey); }"
-            :class="themeSwitcher.currentTheme">
-            <a-tab-pane key="tpl-basic" tab='{{ i18n "pages.xray.basicTemplate"}}' :style="{ paddingTop: '20px' }">
-            {{ template "settings/xray/basics" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-routing" tab='{{ i18n "pages.xray.Routings"}}' :style="{ paddingTop: '20px' }">
-            {{ template "settings/xray/routing" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-outbound" tab='{{ i18n "pages.xray.Outbounds"}}' force-render="true">
-            {{ template "settings/xray/outbounds" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-reverse" tab='{{ i18n "pages.xray.outbound.reverse"}}' :style="{ paddingTop: '20px' }" force-render="true">
-            {{ template "settings/xray/reverse" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-balancer" tab='{{ i18n "pages.xray.Balancers"}}' :style="{ paddingTop: '20px' }" force-render="true">
-            {{ template "settings/xray/balancers" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-dns" tab='DNS' :style="{ paddingTop: '20px' }" force-render="true">
-            {{ template "settings/xray/dns" . }}
-            </a-tab-pane>
-            <a-tab-pane key="tpl-advanced" tab='{{ i18n "pages.xray.advancedTemplate"}}' :style="{ paddingTop: '20px' }" force-render="true">
-            {{ template "settings/xray/advanced" . }}
-            </a-tab-pane>
-        </a-tabs>
-        </a-space>
-    </a-spin>
+          </a-row>
+        </transition>
+      </a-spin>
     </a-layout-content>
-</a-layout>
+  </a-layout>
 </a-layout>
 {{template "page/body_scripts" .}}
 <script src="{{ .base_path }}assets/js/model/outbound.js?{{ .cur_ver }}"></script>
@@ -131,1282 +177,1296 @@
 {{template "modals/fakednsModal"}}
 {{template "modals/warpModal"}}
 <script>
-    const rulesColumns = [
-        { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.rules.source"}}', children: [
-            { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true },
-            { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true } ]},
-        { title: '{{ i18n "pages.inbounds.network"}}', children: [
-            { title: 'L4', dataIndex: 'network', align: 'center', width: 10 },
-            { title: '{{ i18n "protocol" }}', dataIndex: 'protocol', align: 'center', width: 15, ellipsis: true },
-            { title: 'Attrs', dataIndex: 'attrs', align: 'center', width: 10, ellipsis: true } ]}, 
-        { title: '{{ i18n "pages.xray.rules.dest"}}', children: [
-            { title: 'IP', dataIndex: 'ip', align: 'center', width: 20, ellipsis: true },
-            { title: '{{ i18n "pages.xray.outbound.domain" }}', dataIndex: 'domain', align: 'center', width: 20, ellipsis: true },
-            { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]},
-        { title: '{{ i18n "pages.xray.rules.inbound"}}', children: [
-            { title: '{{ i18n "pages.xray.outbound.tag" }}', dataIndex: 'inboundTag', align: 'center', width: 15, ellipsis: true },
-            { title: '{{ i18n "pages.inbounds.client" }}', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
-        { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 17 },
-        { title: '{{ i18n "pages.xray.rules.balancer"}}', dataIndex: 'balancerTag', align: 'center', width: 15 },
-    ];
+  const rulesColumns = [
+    { title: "#", align: 'center', width: 15, scopedSlots: { customRender: 'action' } },
+    {
+      title: '{{ i18n "pages.xray.rules.source"}}', children: [
+        { title: 'IP', dataIndex: "source", align: 'center', width: 20, ellipsis: true },
+        { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'sourcePort', align: 'center', width: 10, ellipsis: true }]
+    },
+    {
+      title: '{{ i18n "pages.inbounds.network"}}', children: [
+        { title: 'L4', dataIndex: 'network', align: 'center', width: 10 },
+        { title: '{{ i18n "protocol" }}', dataIndex: 'protocol', align: 'center', width: 15, ellipsis: true },
+        { title: 'Attrs', dataIndex: 'attrs', align: 'center', width: 10, ellipsis: true }]
+    },
+    {
+      title: '{{ i18n "pages.xray.rules.dest"}}', children: [
+        { title: 'IP', dataIndex: 'ip', align: 'center', width: 20, ellipsis: true },
+        { title: '{{ i18n "pages.xray.outbound.domain" }}', dataIndex: 'domain', align: 'center', width: 20, ellipsis: true },
+        { title: '{{ i18n "pages.inbounds.port" }}', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]
+    },
+    {
+      title: '{{ i18n "pages.xray.rules.inbound"}}', children: [
+        { title: '{{ i18n "pages.xray.outbound.tag" }}', dataIndex: 'inboundTag', align: 'center', width: 15, ellipsis: true },
+        { title: '{{ i18n "pages.inbounds.client" }}', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]
+    },
+    { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 17 },
+    { title: '{{ i18n "pages.xray.rules.balancer"}}', dataIndex: 'balancerTag', align: 'center', width: 15 },
+  ];
 
-    const rulesMobileColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.rules.inbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'inbound' } },
-        { title: '{{ i18n "pages.xray.rules.outbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'outbound' } },
-        { title: '{{ i18n "pages.xray.rules.info"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'info' } },
-    ];
+  const rulesMobileColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.rules.inbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'inbound' } },
+    { title: '{{ i18n "pages.xray.rules.outbound"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'outbound' } },
+    { title: '{{ i18n "pages.xray.rules.info"}}', align: 'center', width: 50, ellipsis: true, scopedSlots: { customRender: 'info' } },
+  ];
 
-    const outboundColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
-        { title: '{{ i18n "protocol"}}', align: 'center', width: 50, scopedSlots: { customRender: 'protocol' }  },
-        { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}', align: 'center', width: 50, scopedSlots: { customRender: 'traffic' } },
-    ];
+  const outboundColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
+    { title: '{{ i18n "protocol"}}', align: 'center', width: 50, scopedSlots: { customRender: 'protocol' } },
+    { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
+    { title: '{{ i18n "pages.inbounds.traffic" }}', align: 'center', width: 50, scopedSlots: { customRender: 'traffic' } },
+  ];
 
-    const reverseColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.outbound.type"}}', dataIndex: 'type', align: 'center', width: 50 },
-        { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
-        { title: '{{ i18n "pages.xray.outbound.domain"}}', dataIndex: 'domain', align: 'center', width: 50 },
-    ];
+  const reverseColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.outbound.type"}}', dataIndex: 'type', align: 'center', width: 50 },
+    { title: '{{ i18n "pages.xray.outbound.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
+    { title: '{{ i18n "pages.xray.outbound.domain"}}', dataIndex: 'domain', align: 'center', width: 50 },
+  ];
 
-    const balancerColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.balancer.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
-        { title: '{{ i18n "pages.xray.balancer.balancerStrategy"}}', align: 'center', width: 50, scopedSlots: { customRender: 'strategy' }},
-        { title: '{{ i18n "pages.xray.balancer.balancerSelectors"}}', align: 'center', width: 100, scopedSlots: { customRender: 'selector' }},
-    ];
+  const balancerColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.balancer.tag"}}', dataIndex: 'tag', align: 'center', width: 50 },
+    { title: '{{ i18n "pages.xray.balancer.balancerStrategy"}}', align: 'center', width: 50, scopedSlots: { customRender: 'strategy' } },
+    { title: '{{ i18n "pages.xray.balancer.balancerSelectors"}}', align: 'center', width: 100, scopedSlots: { customRender: 'selector' } },
+  ];
 
-    const dnsColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
-        { title: '{{ i18n "pages.xray.dns.domains"}}', align: 'center', width: 50, scopedSlots: { customRender: 'domain' } },
-        { title: '{{ i18n "pages.xray.dns.expectIPs"}}', align: 'center', width: 50, scopedSlots: { customRender: 'expectIPs' } },
-    ];
+  const dnsColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.outbound.address"}}', align: 'center', width: 50, scopedSlots: { customRender: 'address' } },
+    { title: '{{ i18n "pages.xray.dns.domains"}}', align: 'center', width: 50, scopedSlots: { customRender: 'domain' } },
+    { title: '{{ i18n "pages.xray.dns.expectIPs"}}', align: 'center', width: 50, scopedSlots: { customRender: 'expectIPs' } },
+  ];
 
-    const fakednsColumns = [
-        { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
-        { title: '{{ i18n "pages.xray.fakedns.ipPool"}}', dataIndex: 'ipPool', align: 'center', width: 50 },
-        { title: '{{ i18n "pages.xray.fakedns.poolSize"}}', dataIndex: 'poolSize', align: 'center', width: 50 },
-    ];
+  const fakednsColumns = [
+    { title: "#", align: 'center', width: 20, scopedSlots: { customRender: 'action' } },
+    { title: '{{ i18n "pages.xray.fakedns.ipPool"}}', dataIndex: 'ipPool', align: 'center', width: 50 },
+    { title: '{{ i18n "pages.xray.fakedns.poolSize"}}', dataIndex: 'poolSize', align: 'center', width: 50 },
+  ];
 
-    const app = new Vue({
-        delimiters: ['[[', ']]'],
-        mixins: [MediaQueryMixin],
-        el: '#app',
-        data: {
-            themeSwitcher,
-            isDarkTheme: themeSwitcher.isDarkTheme,
-            spinning: false,
-            oldXraySetting: '',
-            xraySetting: '',
-            inboundTags: [],
-            outboundsTraffic: [],
-            saveBtnDisable: true,
-            refreshing: false,
-            restartResult: '',
-            showAlert: false,
-            advSettings: 'xraySetting',
-            obsSettings: '',
-            cm: null,
-            cmOptions: {
-                lineNumbers: true,
-                mode: "application/json",
-                lint: true,
-                styleActiveLine: true,
-                matchBrackets: true,
-                theme: "xq",
-                autoCloseTags: true,
-                lineWrapping: true,
-                indentUnit: 2,
-                indentWithTabs: true,
-                smartIndent: true,
-                tabSize: 2,
-                lineWiseCopyCut: false,
-                foldGutter: true,
-                gutters: [
-                    "CodeMirror-lint-markers",
-                    "CodeMirror-linenumbers",
-                    "CodeMirror-foldgutter",
-                ],
-            },
-            ipv4Settings: {
-                tag: "IPv4",
-                protocol: "freedom",
-                settings: {
-                    domainStrategy: "UseIPv4"
-                }
-            },
-            directSettings: {
-                tag: "direct",
-                protocol: "freedom"
-            },
-            routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"],
-            log: {
-                loglevel: ["none", "debug", "info", "warning", "error"],
-                access: ["none", "./access.log"],
-                error: ["none", "./error.log"],
-                dnsLog: false,
-                maskAddress: ["quarter", "half", "full"],
-            },
-            settingsData: {
-                protocols: {
-                    bittorrent: ["bittorrent"],
-                },
-                IPsOptions: [
-                    { label: 'Private IPs', value: 'geoip:private' },
-                    { label: '🇮🇷 Iran', value: 'ext:geoip_IR.dat:ir' },
-                    { label: '🇨🇳 China', value: 'geoip:cn' },
-                    { label: '🇷🇺 Russia', value: 'ext:geoip_RU.dat:ru' },
-                    { label: '🇻🇳 Vietnam', value: 'geoip:vn' },
-                    { label: '🇪🇸 Spain', value: 'geoip:es' },
-                    { label: '🇮🇩 Indonesia', value: 'geoip:id' },
-                    { label: '🇺🇦 Ukraine', value: 'geoip:ua' },
-                    { label: '🇹🇷 Türkiye', value: 'geoip:tr' },
-                    { label: '🇧🇷 Brazil', value: 'geoip:br' },
-                ],
-                DomainsOptions: [
-                    { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' },
-                    { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' },
-                    { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' },
-                    { label: '🇨🇳 China', value: 'geosite:cn' },
-                    { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' },
-                    { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' },
-                    { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru$' },
-                    { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' },
-                    { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' },
-                    { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' },
-                ],
-                BlockDomainsOptions: [
-                    { label: 'Ads All', value: 'geosite:category-ads-all' },
-                    { label: 'Ads IR 🇮🇷', value: 'ext:geosite_IR.dat:category-ads-all' },
-                    { label: 'Ads RU 🇷🇺', value: 'ext:geosite_RU.dat:category-ads-all' },
-                    { label: 'Malware 🇮🇷', value: 'ext:geosite_IR.dat:malware' },
-                    { label: 'Phishing 🇮🇷', value: 'ext:geosite_IR.dat:phishing' },
-                    { label: 'Cryptominers 🇮🇷', value: 'ext:geosite_IR.dat:cryptominers' },
-                    { label: 'Adult +18', value: 'geosite:category-porn' },
-                    { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' },
-                    { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' },
-                    { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' },
-                    { label: '🇨🇳 China', value: 'geosite:cn' },
-                    { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' },
-                    { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' },
-                    { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru' },
-                    { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' },
-                    { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' },
-                    { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' },
-                ],
-                ServicesOptions: [
-                    { label: 'Apple', value: 'geosite:apple' },
-                    { label: 'Meta', value: 'geosite:meta' },
-                    { label: 'Google', value: 'geosite:google' },
-                    { label: 'OpenAI', value: 'geosite:openai' },
-                    { label: 'Spotify', value: 'geosite:spotify' },
-                    { label: 'Netflix', value: 'geosite:netflix' },
-                    { label: 'Reddit', value: 'geosite:reddit' },
-                    { label: 'Speedtest', value: 'geosite:speedtest' },
-                ]
-            },
-            defaultObservatory: {
-                subjectSelector: [],
-                probeURL: "http://www.google.com/gen_204",
-                probeInterval: "10m",
-                enableConcurrency: true
-            },
-            defaultBurstObservatory: {
-                subjectSelector: [],
-                pingConfig: {
-                    destination: "http://www.google.com/gen_204",
-                    interval: "30m",
-                    connectivity: "http://connectivitycheck.platform.hicloud.com/generate_204",
-                    timeout: "10s",
-                    sampling: 2
-                }
-            }
+  const app = new Vue({
+    delimiters: ['[[', ']]'],
+    mixins: [MediaQueryMixin],
+    el: '#app',
+    data: {
+      themeSwitcher,
+      isDarkTheme: themeSwitcher.isDarkTheme,
+      loadingStates: {
+        fetched: false,
+        spinning: false
+      },
+      oldXraySetting: '',
+      xraySetting: '',
+      inboundTags: [],
+      outboundsTraffic: [],
+      saveBtnDisable: true,
+      refreshing: false,
+      restartResult: '',
+      showAlert: false,
+      advSettings: 'xraySetting',
+      obsSettings: '',
+      cm: null,
+      cmOptions: {
+        lineNumbers: true,
+        mode: "application/json",
+        lint: true,
+        styleActiveLine: true,
+        matchBrackets: true,
+        theme: "xq",
+        autoCloseTags: true,
+        lineWrapping: true,
+        indentUnit: 2,
+        indentWithTabs: true,
+        smartIndent: true,
+        tabSize: 2,
+        lineWiseCopyCut: false,
+        foldGutter: true,
+        gutters: [
+          "CodeMirror-lint-markers",
+          "CodeMirror-linenumbers",
+          "CodeMirror-foldgutter",
+        ],
+      },
+      ipv4Settings: {
+        tag: "IPv4",
+        protocol: "freedom",
+        settings: {
+          domainStrategy: "UseIPv4"
+        }
+      },
+      directSettings: {
+        tag: "direct",
+        protocol: "freedom"
+      },
+      routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"],
+      log: {
+        loglevel: ["none", "debug", "info", "warning", "error"],
+        access: ["none", "./access.log"],
+        error: ["none", "./error.log"],
+        dnsLog: false,
+        maskAddress: ["quarter", "half", "full"],
+      },
+      settingsData: {
+        protocols: {
+          bittorrent: ["bittorrent"],
         },
-        methods: {
-            loading(spinning = true) {
-                this.spinning = spinning;
-            },
-            async getOutboundsTraffic() {
-                const msg = await HttpUtil.get("/panel/xray/getOutboundsTraffic");
-                if (msg.success) {
-                    this.outboundsTraffic = msg.obj;
-                }
-            },
-            async getXraySetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/xray/");
-                this.loading(false);
-                if (msg.success) {
-                    result = JSON.parse(msg.obj);
-                    xs = JSON.stringify(result.xraySetting, null, 2);
-                    this.oldXraySetting = xs;
-                    this.xraySetting = xs;
-                    this.inboundTags = result.inboundTags;
-                    this.saveBtnDisable = true;
-                }
-            },
-            async updateXraySetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/xray/update", {xraySetting : this.xraySetting});
-                this.loading(false);
-                if (msg.success) {
-                    await this.getXraySetting();
-                }
-            },
-            async restartXray() {
-                this.loading(true);
-                const msg = await HttpUtil.post("server/restartXrayService");
-                this.loading(false);
-                if (msg.success) {
-                    await PromiseUtil.sleep(500);
-                    await this.getXrayResult();
-                }
-                this.loading(false);
-            },
-            async getXrayResult() {
-                const msg = await HttpUtil.get("/panel/xray/getXrayResult");
-                if (msg.success) {
-                    this.restartResult=msg.obj;
-                    if(msg.obj.length > 1) Vue.prototype.$message.error(msg.obj);
-                }
-            },
-            async resetXrayConfigToDefault() {
-                this.loading(true);
-                const msg = await HttpUtil.get("/panel/setting/getDefaultJsonConfig");
-                this.loading(false);
-                if (msg.success) {
-                    this.templateSettings = JSON.parse(JSON.stringify(msg.obj, null, 2));
-                    this.saveBtnDisable = true;
-                }
-            },
-            changePage(pageKey) {
-                if(pageKey == 'tpl-advanced') this.changeCode();
-                if(pageKey == 'tpl-balancer') this.changeObsCode();
-            },
-            syncRulesWithOutbound(tag, setting) {
-                const newTemplateSettings = this.templateSettings;
-                const haveRules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === tag);
-                const outboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.tag === tag);
-                if (!haveRules && outboundIndex > 0) {
-                    newTemplateSettings.outbounds.splice(outboundIndex);
-                }
-                if (haveRules && outboundIndex < 0) {
-                    newTemplateSettings.outbounds.push(setting);
-                }
-                this.templateSettings = newTemplateSettings;
-            },
-            templateRuleGetter(routeSettings) {
-                const { property, outboundTag } = routeSettings;
-                let result = [];
-                if (this.templateSettings != null) {
-                    this.templateSettings.routing.rules.forEach(
-                        (routingRule) => {
-                            if (
-                                routingRule.hasOwnProperty(property) &&
-                                routingRule.hasOwnProperty("outboundTag") &&
-                                routingRule.outboundTag === outboundTag
-                            ) {
-                                result.push(...routingRule[property]);
-                            }
-                        }
-                    );
-                }
-                return result;
-            },
-            templateRuleSetter(routeSettings) {
-                const { data, property, outboundTag } = routeSettings;
-                const oldTemplateSettings = this.templateSettings;
-                const newTemplateSettings = oldTemplateSettings;
-                currentProperty = this.templateRuleGetter({ outboundTag, property })
-                if (currentProperty.length == 0) {
-                    const propertyRule = {
-                        type: "field",
-                        outboundTag,
-                        [property]: data
-                    };
-                    newTemplateSettings.routing.rules.push(propertyRule);
-                }
-                else {
-                    const newRules = [];
-                    insertedOnce = false;
-                    newTemplateSettings.routing.rules.forEach(
-                        (routingRule) => {
-                            if (
-                                routingRule.hasOwnProperty(property) &&
-                                routingRule.hasOwnProperty("outboundTag") &&
-                                routingRule.outboundTag === outboundTag
-                            ) {
-                                if (!insertedOnce && data.length > 0) {
-                                    insertedOnce = true;
-                                    routingRule[property] = data;
-                                    newRules.push(routingRule);
-                                }
-                            }
-                            else {
-                                newRules.push(routingRule);
-                            }
-                        }
-                    );
-                    newTemplateSettings.routing.rules = newRules;
-                }
-                this.templateSettings = newTemplateSettings;
-            },
-            changeCode() {
-                if(this.cm != null) {
-                    this.cm.toTextArea();
-                }
-                textAreaObj = document.getElementById('xraySetting');
-                textAreaObj.value = this[this.advSettings];
-                this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions);
-                this.cm.on('change',editor => {
-                    value = editor.getValue();
-                    if (this.isJsonString(value)) {
-                        this[this.advSettings] = value;
-                    }
-                });
-            },
-            changeObsCode() {
-                if(this.cm != null) {
-                    this.cm.toTextArea();
-                }
-                if (this.obsSettings == ''){
-                    this.cm = null;
-                    return
-                }
-                textAreaObj = document.getElementById('obsSetting');
-                textAreaObj.value = this[this.obsSettings];
-                this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions);
-                this.cm.on('change',editor => {
-                    value = editor.getValue();
-                    if(this.isJsonString(value)){
-                        this[this.obsSettings] = value;
-                    }
-                });
-            },
-            isJsonString(str) {
-                try {
-                    JSON.parse(str);
-                } catch (e) {
-                    return false;
-                }
-                return true;
-            },
-            findOutboundTraffic(o) {
-                for (const otraffic of this.outboundsTraffic) {
-                    if (otraffic.tag == o.tag) {
-                        return SizeFormatter.sizeFormat(otraffic.up) + ' / ' + SizeFormatter.sizeFormat(otraffic.down);
-                    }
-                }
-                return SizeFormatter.sizeFormat(0) + ' / ' + SizeFormatter.sizeFormat(0);
-            },
-            findOutboundAddress(o) {
-                serverObj = null;
-                switch(o.protocol){
-                    case Protocols.VMess:
-                    case Protocols.VLESS:
-                        serverObj = o.settings.vnext;
-                        break;
-                    case Protocols.HTTP:
-                    case Protocols.Socks:
-                    case Protocols.Shadowsocks:
-                    case Protocols.Trojan:
-                        serverObj = o.settings.servers;
-                        break;
-                    case Protocols.DNS:
-                        return [o.settings?.address + ':' + o.settings?.port];
-                        case Protocols.Wireguard:
-                        return o.settings.peers.map(peer => peer.endpoint);
-                    default:
-                        return null;
-                }
-                return serverObj ? serverObj.map(obj => obj.address + ':' + obj.port) : null;
-            },
-            addOutbound(){
-                outModal.show({
-                    title: '{{ i18n "pages.xray.outbound.addOutbound"}}',
-                    okText: '{{ i18n "pages.xray.outbound.addOutbound" }}',
-                    confirm: (outbound) => {
-                        outModal.loading();
-                        if(outbound.tag.length > 0){
-                            this.templateSettings.outbounds.push(outbound);
-                            this.outboundSettings = JSON.stringify(this.templateSettings.outbounds);
-                        }
-                        outModal.close();
-                    },
-                    isEdit: false,
-                    tags: this.templateSettings.outbounds.map(obj => obj.tag)
-                });
-            },
-            editOutbound(index){
-                outModal.show({
-                    title: '{{ i18n "pages.xray.outbound.editOutbound"}} ' + (index+1),
-                    outbound: app.templateSettings.outbounds[index],
-                    confirm: (outbound) => {
-                        outModal.loading();
-                        this.templateSettings.outbounds[index] = outbound;
-                        this.outboundSettings = JSON.stringify(this.templateSettings.outbounds);
-                        outModal.close();
-                    },
-                    isEdit: true,
-                    tags: this.outboundData.filter((o) => o.key != index ).map(obj => obj.tag)
-                });
-            },
-            deleteOutbound(index){
-                outbounds = this.templateSettings.outbounds;
-                outbounds.splice(index,1);
-                this.outboundSettings = JSON.stringify(outbounds);
-            },
-            setFirstOutbound(index){
-                outbounds = this.templateSettings.outbounds;
-                outbounds.splice(0, 0, outbounds.splice(index, 1)[0]);
-                this.outboundSettings = JSON.stringify(outbounds);
-            },
-            addReverse(){
-                reverseModal.show({
-                    title: '{{ i18n "pages.xray.outbound.addReverse"}}',
-                    okText: '{{ i18n "pages.xray.outbound.addReverse" }}',
-                    confirm: (reverse, rules) => {
-                        reverseModal.loading();
-                        if(reverse.tag.length > 0){
-                            newTemplateSettings = this.templateSettings;
-                            if(newTemplateSettings.reverse == undefined) newTemplateSettings.reverse = {};
-                            if(newTemplateSettings.reverse[reverse.type+'s']  == undefined) newTemplateSettings.reverse[reverse.type+'s'] = [];
-                            newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain });
-                            this.templateSettings = newTemplateSettings;
+        IPsOptions: [
+          { label: 'Private IPs', value: 'geoip:private' },
+          { label: '🇮🇷 Iran', value: 'ext:geoip_IR.dat:ir' },
+          { label: '🇨🇳 China', value: 'geoip:cn' },
+          { label: '🇷🇺 Russia', value: 'ext:geoip_RU.dat:ru' },
+          { label: '🇻🇳 Vietnam', value: 'geoip:vn' },
+          { label: '🇪🇸 Spain', value: 'geoip:es' },
+          { label: '🇮🇩 Indonesia', value: 'geoip:id' },
+          { label: '🇺🇦 Ukraine', value: 'geoip:ua' },
+          { label: '🇹🇷 Türkiye', value: 'geoip:tr' },
+          { label: '🇧🇷 Brazil', value: 'geoip:br' },
+        ],
+        DomainsOptions: [
+          { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' },
+          { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' },
+          { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' },
+          { label: '🇨🇳 China', value: 'geosite:cn' },
+          { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' },
+          { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' },
+          { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru$' },
+          { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' },
+          { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' },
+          { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' },
+        ],
+        BlockDomainsOptions: [
+          { label: 'Ads All', value: 'geosite:category-ads-all' },
+          { label: 'Ads IR 🇮🇷', value: 'ext:geosite_IR.dat:category-ads-all' },
+          { label: 'Ads RU 🇷🇺', value: 'ext:geosite_RU.dat:category-ads-all' },
+          { label: 'Malware 🇮🇷', value: 'ext:geosite_IR.dat:malware' },
+          { label: 'Phishing 🇮🇷', value: 'ext:geosite_IR.dat:phishing' },
+          { label: 'Cryptominers 🇮🇷', value: 'ext:geosite_IR.dat:cryptominers' },
+          { label: 'Adult +18', value: 'geosite:category-porn' },
+          { label: '🇮🇷 Iran', value: 'ext:geosite_IR.dat:ir' },
+          { label: '🇮🇷 .ir', value: 'regexp:.*\\.ir$' },
+          { label: '🇮🇷 .ایران', value: 'regexp:.*\\.xn--mgba3a4f16a$' },
+          { label: '🇨🇳 China', value: 'geosite:cn' },
+          { label: '🇨🇳 .cn', value: 'regexp:.*\\.cn$' },
+          { label: '🇷🇺 Russia', value: 'ext:geosite_RU.dat:ru-available-only-inside' },
+          { label: '🇷🇺 .ru', value: 'regexp:.*\\.ru' },
+          { label: '🇷🇺 .su', value: 'regexp:.*\\.su$' },
+          { label: '🇷🇺 .рф', value: 'regexp:.*\\.xn--p1ai$' },
+          { label: '🇻🇳 .vn', value: 'regexp:.*\\.vn$' },
+        ],
+        ServicesOptions: [
+          { label: 'Apple', value: 'geosite:apple' },
+          { label: 'Meta', value: 'geosite:meta' },
+          { label: 'Google', value: 'geosite:google' },
+          { label: 'OpenAI', value: 'geosite:openai' },
+          { label: 'Spotify', value: 'geosite:spotify' },
+          { label: 'Netflix', value: 'geosite:netflix' },
+          { label: 'Reddit', value: 'geosite:reddit' },
+          { label: 'Speedtest', value: 'geosite:speedtest' },
+        ]
+      },
+      defaultObservatory: {
+        subjectSelector: [],
+        probeURL: "http://www.google.com/gen_204",
+        probeInterval: "10m",
+        enableConcurrency: true
+      },
+      defaultBurstObservatory: {
+        subjectSelector: [],
+        pingConfig: {
+          destination: "http://www.google.com/gen_204",
+          interval: "30m",
+          connectivity: "http://connectivitycheck.platform.hicloud.com/generate_204",
+          timeout: "10s",
+          sampling: 2
+        }
+      }
+    },
+    methods: {
+      loading(spinning = true) {
+        this.loadingStates.spinning = spinning;
+      },
+      async getOutboundsTraffic() {
+        const msg = await HttpUtil.get("/panel/xray/getOutboundsTraffic");
+        if (msg.success) {
+          this.outboundsTraffic = msg.obj;
+        }
+      },
+      async getXraySetting() {
+        const msg = await HttpUtil.post("/panel/xray/");
 
-                            // Add related rules
-                            this.templateSettings.routing.rules.push(...rules);
-                            this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
-                        }
-                        reverseModal.close();
-                    },
-                    isEdit: false
-                });
-            },
-            editReverse(index){
-                if(this.reverseData[index].type == "bridge") {
-                    oldRules = this.templateSettings.routing.rules.filter(r => r.inboundTag && r.inboundTag[0] == this.reverseData[index].tag);
-                } else {
-                    oldRules = this.templateSettings.routing.rules.filter(r => r.outboundTag && r.outboundTag == this.reverseData[index].tag);
-                }
-                reverseModal.show({
-                    title: '{{ i18n "pages.xray.outbound.editReverse"}} ' + (index+1),
-                    reverse: this.reverseData[index],
-                    rules: oldRules,
-                    confirm: (reverse, rules) => {
-                        reverseModal.loading();
-                        if(reverse.tag.length > 0){
-                            oldData = this.reverseData[index];
-                            newTemplateSettings = this.templateSettings;
-                            oldReverseIndex = newTemplateSettings.reverse[oldData.type+'s'].findIndex(rs => rs.tag == oldData.tag);
-                            oldRuleIndex0 = oldRules.length>0 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[0])) : -1;
-                            oldRuleIndex1 = oldRules.length==2 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[1])) : -1;
-                            if(oldData.type == reverse.type){
-                                newTemplateSettings.reverse[oldData.type + 's'][oldReverseIndex] = { tag: reverse.tag, domain: reverse.domain };
-                            } else {
-                                newTemplateSettings.reverse[oldData.type+'s'].splice(oldReverseIndex,1);
-                                // delete empty object
-                                if(newTemplateSettings.reverse[oldData.type+'s'].length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type+'s');
-                                // add other type of reverse if it is not exist
-                                if(!newTemplateSettings.reverse[reverse.type+'s']) newTemplateSettings.reverse[reverse.type+'s'] = [];
-                                newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain });
-                            }
-                            this.templateSettings = newTemplateSettings;
+        if (msg.success) {
+          if (!this.loadingStates.fetched) {
+            this.loadingStates.fetched = true
+          }
 
-                            // Adjust Rules
-                            newRules = this.templateSettings.routing.rules;
-                            oldRuleIndex0 != -1 ? newRules[oldRuleIndex0] = rules[0] : newRules.push(rules[0]);
-                            oldRuleIndex1 != -1 ? newRules[oldRuleIndex1] = rules[1] : newRules.push(rules[1]);
-                            this.routingRuleSettings = JSON.stringify(newRules);
-                        }
-                        reverseModal.close();
-                    },
-                    isEdit: true
-                });
-            },
-            deleteReverse(index){
-                oldData = this.reverseData[index];
-                newTemplateSettings = this.templateSettings;
-                reverseTypeObj = newTemplateSettings.reverse[oldData.type+'s'];
-                realIndex = reverseTypeObj.findIndex(r => r.tag==oldData.tag && r.domain==oldData.domain);
-                newTemplateSettings.reverse[oldData.type+'s'].splice(realIndex,1);
-
-                // delete empty objects
-                if(reverseTypeObj.length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type+'s');
-                if(Object.keys(newTemplateSettings.reverse).length === 0) Reflect.deleteProperty(newTemplateSettings, 'reverse');
-
-                // delete related routing rules
-                newRules = newTemplateSettings.routing.rules;
-                if(oldData.type == "bridge"){
-                    newRules = newTemplateSettings.routing.rules.filter(r => !( r.inboundTag && r.inboundTag.length == 1 && r.inboundTag[0] == oldData.tag));
-                } else if(oldData.type == "portal"){
-                    newRules = newTemplateSettings.routing.rules.filter(r => r.outboundTag != oldData.tag);
-                }
-                newTemplateSettings.routing.rules = newRules;
-
-                this.templateSettings = newTemplateSettings;
-            },
-            async refreshOutboundTraffic() {
-                if (!this.refreshing) {
-                    this.refreshing = true;
-                    await this.getOutboundsTraffic();
-
-                    data = []
-                    if (this.templateSettings != null) {
-                        this.templateSettings.outbounds.forEach((o, index) => {
-                            data.push({'key': index, ...o});
-                        });
-                    }
-
-                    this.outboundData = data;
-                    this.refreshing = false;
-                }
-            },
-            async resetOutboundTraffic(index) {
-                let tag = "-alltags-";
-                if (index >= 0) {
-                    tag = this.outboundData[index].tag ? this.outboundData[index].tag : ""
-                }
-                const msg = await HttpUtil.post("/panel/xray/resetOutboundsTraffic", { tag: tag });
-                if (msg.success) {
-                    await this.refreshOutboundTraffic();
-                }
-            },
-            addBalancer() {
-                balancerModal.show({
-                    title: '{{ i18n "pages.xray.balancer.addBalancer"}}',
-                    okText: '{{ i18n "pages.xray.balancer.addBalancer"}}',
-                    balancerTags: this.balancersData.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag),
-                    balancer: {
-                        tag: '',
-                        strategy: 'random',
-                        selector: [],
-                        fallbackTag: ''
-                    },
-                    confirm: (balancer) => {
-                        balancerModal.loading();
-                        newTemplateSettings = this.templateSettings;
-                        if (newTemplateSettings.routing.balancers == undefined) {
-                            newTemplateSettings.routing.balancers = [];
-                        }
-                        let tmpBalancer = {
-                            'tag': balancer.tag,
-                            'selector': balancer.selector,
-                            'fallbackTag': balancer.fallbackTag
-                        };
-                        if (balancer.strategy && balancer.strategy != 'random') {
-                            tmpBalancer.strategy = {
-                                'type': balancer.strategy
-                            };
-                        }
-                        newTemplateSettings.routing.balancers.push(tmpBalancer);
-                        this.templateSettings = newTemplateSettings;
-                        this.updateObservatorySelectors();
-                        balancerModal.close();
-                        this.changeObsCode();
-                    },
-                    isEdit: false
-                });
-            },
-            editBalancer(index) {
-                const oldTag = this.balancersData[index].tag;
-                balancerModal.show({
-                    title: '{{ i18n "pages.xray.balancer.editBalancer"}}',
-                    okText: '{{ i18n "sure" }}',
-                    balancerTags: this.balancersData.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag),
-                    balancer: this.balancersData[index],
-                    confirm: (balancer) => {
-                        balancerModal.loading();
-                        newTemplateSettings = this.templateSettings;
-
-                        let tmpBalancer = {
-                            'tag': balancer.tag,
-                            'selector': balancer.selector,
-                            'fallbackTag': balancer.fallbackTag
-                        };
-
-                        // Remove old tag
-                        if (newTemplateSettings.observatory){
-                            newTemplateSettings.observatory.subjectSelector = newTemplateSettings.observatory.subjectSelector.filter(s => s != oldTag);
-                        }
-                        if (newTemplateSettings.burstObservatory){
-                            newTemplateSettings.burstObservatory.subjectSelector = newTemplateSettings.burstObservatory.subjectSelector.filter(s => s != oldTag);
-                        }
-
-                        if (balancer.strategy && balancer.strategy != 'random') {
-                            tmpBalancer.strategy = {
-                                'type': balancer.strategy
-                            };
-                        }
-
-                        newTemplateSettings.routing.balancers[index] = tmpBalancer;
-                        // change edited tag if used in rule section
-                        if (oldTag != balancer.tag) {
-                            newTemplateSettings.routing.rules.forEach((rule) => {
-                                if (rule.balancerTag && rule.balancerTag == oldTag) {
-                                    rule.balancerTag = balancer.tag;
-                                }
-                            });
-                        }
-                        this.templateSettings = newTemplateSettings;
-                        this.updateObservatorySelectors();
-                        balancerModal.close();
-                        this.changeObsCode();
-                    },
-                    isEdit: true
-                });
-            },
-            updateObservatorySelectors(){
-                newTemplateSettings = this.templateSettings;
-                const leastPings = this.balancersData.filter((b) => b.strategy == 'leastPing');
-                const leastLoads = this.balancersData.filter((b) =>
-                    b.strategy === 'leastLoad' ||
-                    b.strategy === 'roundRobin' ||
-                    b.strategy === 'random'
-                );
-                if (leastPings.length>0){
-                    if (!newTemplateSettings.observatory)
-                        newTemplateSettings.observatory = this.defaultObservatory;
-                    newTemplateSettings.observatory.subjectSelector = [];
-                    leastPings.forEach((b) => {
-                        b.selector.forEach((s) => {
-                            if (!newTemplateSettings.observatory.subjectSelector.includes(s))
-                                newTemplateSettings.observatory.subjectSelector.push(s);
-                        });
-                    });
-                } else {
-                    delete newTemplateSettings.observatory
-                }
-                if (leastLoads.length>0){
-                    if (!newTemplateSettings.burstObservatory)
-                        newTemplateSettings.burstObservatory = this.defaultBurstObservatory;
-                    newTemplateSettings.burstObservatory.subjectSelector = [];
-                    leastLoads.forEach((b) => {
-                        b.selector.forEach((s) => {
-                            if (!newTemplateSettings.burstObservatory.subjectSelector.includes(s))
-                                newTemplateSettings.burstObservatory.subjectSelector.push(s);
-                        });
-                    });
-                } else {
-                    delete newTemplateSettings.burstObservatory
-                }
-                this.templateSettings = newTemplateSettings;
-                this.changeObsCode();
-            },
-            deleteBalancer(index) {
-                newTemplateSettings = this.templateSettings;
-
-                // Remove from balancers
-                const removedBalancer = this.balancersData.splice(index, 1)[0];
-
-                // Remove from settings
-                let realIndex = newTemplateSettings.routing.balancers.findIndex((b) => b.tag === removedBalancer.tag);
-                newTemplateSettings.routing.balancers.splice(realIndex, 1);
-                
-                // Update balancers property to an empty array if there are no more balancers
-                if (newTemplateSettings.routing.balancers.length === 0) {
-                    delete newTemplateSettings.routing.balancers;
-                }
-                this.templateSettings = newTemplateSettings;
-                this.updateObservatorySelectors();
-                this.obsSettings = '';
-                this.changeObsCode()
-            },
-            openDNSPresets() {
-                dnsPresetsModal.show({
-                    title: '{{ i18n "pages.xray.dns.dnsPresetTitle" }}',
-                    selected: (selectedPreset) => {
-                        this.dnsServers = selectedPreset;
-                        
-                        dnsPresetsModal.close();
-                    }
-                });
-            },
-            addDNSServer(){
-                dnsModal.show({
-                    title: '{{ i18n "pages.xray.dns.add" }}',
-                    confirm: (dnsServer) => {
-                        dnsServers = this.dnsServers;
-                        dnsServers.push(dnsServer);
-                        this.dnsServers = dnsServers;
-                        dnsModal.close();
-                    },
-                    isEdit: false
-                });
-            },
-            editDNSServer(index){
-                dnsModal.show({
-                    title: '{{ i18n "pages.xray.dns.edit" }} #' + (index+1),
-                    dnsServer: this.dnsServers[index],
-                    confirm: (dnsServer) => {
-                        dnsServers = this.dnsServers;
-                        dnsServers[index] = dnsServer;
-                        this.dnsServers = dnsServers;
-                        dnsModal.close();
-                    },
-                    isEdit: true
-                });
-            },
-            deleteDNSServer(index){
-                newDnsServers = this.dnsServers;
-                newDnsServers.splice(index,1);
-                this.dnsServers = newDnsServers;
-            },
-            addFakedns() {
-                fakednsModal.show({
-                    title: '{{ i18n "pages.xray.fakedns.add" }}',
-                    confirm: (item) => {
-                        fakeDns = this.fakeDns?? [];
-                        fakeDns.push(item);
-                        this.fakeDns = fakeDns;
-                        fakednsModal.close();
-                    },
-                    isEdit: false
-                });
-            },
-            editFakedns(index){
-                fakednsModal.show({
-                    title: '{{ i18n "pages.xray.fakedns.edit" }} #' + (index+1),
-                    fakeDns: this.fakeDns[index],
-                    confirm: (item) => {
-                        fakeDns = this.fakeDns;
-                        fakeDns[index] = item;
-                        this.fakeDns = fakeDns;
-                        fakednsModal.close();
-                    },
-                    isEdit: true
-                });
-            },
-            deleteFakedns(index){
-                fakeDns = this.fakeDns;
-                fakeDns.splice(index,1);
-                this.fakeDns = fakeDns;
-            },
-            addRule(){
-                ruleModal.show({
-                    title: '{{ i18n "pages.xray.rules.add"}}',
-                    okText: '{{ i18n "pages.xray.rules.add" }}',
-                    confirm: (rule) => {
-                        ruleModal.loading();
-                        if(JSON.stringify(rule).length > 3){
-                            this.templateSettings.routing.rules.push(rule);
-                            this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
-                        }
-                        ruleModal.close();
-                    },
-                    isEdit: false
-                });
-            },
-            editRule(index){
-                ruleModal.show({
-                    title: '{{ i18n "pages.xray.rules.edit"}} ' + (index+1),
-                    rule: app.templateSettings.routing.rules[index],
-                    confirm: (rule) => {
-                        ruleModal.loading();
-                        if(JSON.stringify(rule).length > 3){
-                            this.templateSettings.routing.rules[index] = rule;
-                            this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
-                        }
-                        ruleModal.close();
-                    },
-                    isEdit: true
-                });
-            },
-            replaceRule(old_index,new_index){
-                rules = this.templateSettings.routing.rules;
-                if (new_index >= rules.length) rules.push(undefined);
-                rules.splice(new_index, 0, rules.splice(old_index, 1)[0]);
-                this.routingRuleSettings = JSON.stringify(rules);
-            },
-            deleteRule(index){
-                rules = this.templateSettings.routing.rules;
-                rules.splice(index,1);
-                this.routingRuleSettings = JSON.stringify(rules);
-            },
-            showWarp(){
-                warpModal.show();
+          result = JSON.parse(msg.obj);
+          xs = JSON.stringify(result.xraySetting, null, 2);
+          this.oldXraySetting = xs;
+          this.xraySetting = xs;
+          this.inboundTags = result.inboundTags;
+          this.saveBtnDisable = true;
+        }
+      },
+      async updateXraySetting() {
+        this.loading(true);
+        const msg = await HttpUtil.post("/panel/xray/update", { xraySetting: this.xraySetting });
+        this.loading(false);
+        if (msg.success) {
+          await this.getXraySetting();
+        }
+      },
+      async restartXray() {
+        this.loading(true);
+        const msg = await HttpUtil.post("server/restartXrayService");
+        this.loading(false);
+        if (msg.success) {
+          await PromiseUtil.sleep(500);
+          await this.getXrayResult();
+        }
+        this.loading(false);
+      },
+      async getXrayResult() {
+        const msg = await HttpUtil.get("/panel/xray/getXrayResult");
+        if (msg.success) {
+          this.restartResult = msg.obj;
+          if (msg.obj.length > 1) Vue.prototype.$message.error(msg.obj);
+        }
+      },
+      async resetXrayConfigToDefault() {
+        this.loading(true);
+        const msg = await HttpUtil.get("/panel/setting/getDefaultJsonConfig");
+        this.loading(false);
+        if (msg.success) {
+          this.templateSettings = JSON.parse(JSON.stringify(msg.obj, null, 2));
+          this.saveBtnDisable = true;
+        }
+      },
+      changePage(pageKey) {
+        if (pageKey == 'tpl-advanced') this.changeCode();
+        if (pageKey == 'tpl-balancer') this.changeObsCode();
+      },
+      syncRulesWithOutbound(tag, setting) {
+        const newTemplateSettings = this.templateSettings;
+        const haveRules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === tag);
+        const outboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.tag === tag);
+        if (!haveRules && outboundIndex > 0) {
+          newTemplateSettings.outbounds.splice(outboundIndex);
+        }
+        if (haveRules && outboundIndex < 0) {
+          newTemplateSettings.outbounds.push(setting);
+        }
+        this.templateSettings = newTemplateSettings;
+      },
+      templateRuleGetter(routeSettings) {
+        const { property, outboundTag } = routeSettings;
+        let result = [];
+        if (this.templateSettings != null) {
+          this.templateSettings.routing.rules.forEach(
+            (routingRule) => {
+              if (
+                routingRule.hasOwnProperty(property) &&
+                routingRule.hasOwnProperty("outboundTag") &&
+                routingRule.outboundTag === outboundTag
+              ) {
+                result.push(...routingRule[property]);
+              }
             }
+          );
+        }
+        return result;
+      },
+      templateRuleSetter(routeSettings) {
+        const { data, property, outboundTag } = routeSettings;
+        const oldTemplateSettings = this.templateSettings;
+        const newTemplateSettings = oldTemplateSettings;
+        currentProperty = this.templateRuleGetter({ outboundTag, property })
+        if (currentProperty.length == 0) {
+          const propertyRule = {
+            type: "field",
+            outboundTag,
+            [property]: data
+          };
+          newTemplateSettings.routing.rules.push(propertyRule);
+        }
+        else {
+          const newRules = [];
+          insertedOnce = false;
+          newTemplateSettings.routing.rules.forEach(
+            (routingRule) => {
+              if (
+                routingRule.hasOwnProperty(property) &&
+                routingRule.hasOwnProperty("outboundTag") &&
+                routingRule.outboundTag === outboundTag
+              ) {
+                if (!insertedOnce && data.length > 0) {
+                  insertedOnce = true;
+                  routingRule[property] = data;
+                  newRules.push(routingRule);
+                }
+              }
+              else {
+                newRules.push(routingRule);
+              }
+            }
+          );
+          newTemplateSettings.routing.rules = newRules;
+        }
+        this.templateSettings = newTemplateSettings;
+      },
+      changeCode() {
+        if (this.cm != null) {
+          this.cm.toTextArea();
+        }
+        textAreaObj = document.getElementById('xraySetting');
+        textAreaObj.value = this[this.advSettings];
+        this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions);
+        this.cm.on('change', editor => {
+          value = editor.getValue();
+          if (this.isJsonString(value)) {
+            this[this.advSettings] = value;
+          }
+        });
+      },
+      changeObsCode() {
+        if (this.cm != null) {
+          this.cm.toTextArea();
+        }
+        if (this.obsSettings == '') {
+          this.cm = null;
+          return
+        }
+        textAreaObj = document.getElementById('obsSetting');
+        textAreaObj.value = this[this.obsSettings];
+        this.cm = CodeMirror.fromTextArea(textAreaObj, this.cmOptions);
+        this.cm.on('change', editor => {
+          value = editor.getValue();
+          if (this.isJsonString(value)) {
+            this[this.obsSettings] = value;
+          }
+        });
+      },
+      isJsonString(str) {
+        try {
+          JSON.parse(str);
+        } catch (e) {
+          return false;
+        }
+        return true;
+      },
+      findOutboundTraffic(o) {
+        for (const otraffic of this.outboundsTraffic) {
+          if (otraffic.tag == o.tag) {
+            return SizeFormatter.sizeFormat(otraffic.up) + ' / ' + SizeFormatter.sizeFormat(otraffic.down);
+          }
+        }
+        return SizeFormatter.sizeFormat(0) + ' / ' + SizeFormatter.sizeFormat(0);
+      },
+      findOutboundAddress(o) {
+        serverObj = null;
+        switch (o.protocol) {
+          case Protocols.VMess:
+          case Protocols.VLESS:
+            serverObj = o.settings.vnext;
+            break;
+          case Protocols.HTTP:
+          case Protocols.Socks:
+          case Protocols.Shadowsocks:
+          case Protocols.Trojan:
+            serverObj = o.settings.servers;
+            break;
+          case Protocols.DNS:
+            return [o.settings?.address + ':' + o.settings?.port];
+          case Protocols.Wireguard:
+            return o.settings.peers.map(peer => peer.endpoint);
+          default:
+            return null;
+        }
+        return serverObj ? serverObj.map(obj => obj.address + ':' + obj.port) : null;
+      },
+      addOutbound() {
+        outModal.show({
+          title: '{{ i18n "pages.xray.outbound.addOutbound"}}',
+          okText: '{{ i18n "pages.xray.outbound.addOutbound" }}',
+          confirm: (outbound) => {
+            outModal.loading();
+            if (outbound.tag.length > 0) {
+              this.templateSettings.outbounds.push(outbound);
+              this.outboundSettings = JSON.stringify(this.templateSettings.outbounds);
+            }
+            outModal.close();
+          },
+          isEdit: false,
+          tags: this.templateSettings.outbounds.map(obj => obj.tag)
+        });
+      },
+      editOutbound(index) {
+        outModal.show({
+          title: '{{ i18n "pages.xray.outbound.editOutbound"}} ' + (index + 1),
+          outbound: app.templateSettings.outbounds[index],
+          confirm: (outbound) => {
+            outModal.loading();
+            this.templateSettings.outbounds[index] = outbound;
+            this.outboundSettings = JSON.stringify(this.templateSettings.outbounds);
+            outModal.close();
+          },
+          isEdit: true,
+          tags: this.outboundData.filter((o) => o.key != index).map(obj => obj.tag)
+        });
+      },
+      deleteOutbound(index) {
+        outbounds = this.templateSettings.outbounds;
+        outbounds.splice(index, 1);
+        this.outboundSettings = JSON.stringify(outbounds);
+      },
+      setFirstOutbound(index) {
+        outbounds = this.templateSettings.outbounds;
+        outbounds.splice(0, 0, outbounds.splice(index, 1)[0]);
+        this.outboundSettings = JSON.stringify(outbounds);
+      },
+      addReverse() {
+        reverseModal.show({
+          title: '{{ i18n "pages.xray.outbound.addReverse"}}',
+          okText: '{{ i18n "pages.xray.outbound.addReverse" }}',
+          confirm: (reverse, rules) => {
+            reverseModal.loading();
+            if (reverse.tag.length > 0) {
+              newTemplateSettings = this.templateSettings;
+              if (newTemplateSettings.reverse == undefined) newTemplateSettings.reverse = {};
+              if (newTemplateSettings.reverse[reverse.type + 's'] == undefined) newTemplateSettings.reverse[reverse.type + 's'] = [];
+              newTemplateSettings.reverse[reverse.type + 's'].push({ tag: reverse.tag, domain: reverse.domain });
+              this.templateSettings = newTemplateSettings;
+
+              // Add related rules
+              this.templateSettings.routing.rules.push(...rules);
+              this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
+            }
+            reverseModal.close();
+          },
+          isEdit: false
+        });
+      },
+      editReverse(index) {
+        if (this.reverseData[index].type == "bridge") {
+          oldRules = this.templateSettings.routing.rules.filter(r => r.inboundTag && r.inboundTag[0] == this.reverseData[index].tag);
+        } else {
+          oldRules = this.templateSettings.routing.rules.filter(r => r.outboundTag && r.outboundTag == this.reverseData[index].tag);
+        }
+        reverseModal.show({
+          title: '{{ i18n "pages.xray.outbound.editReverse"}} ' + (index + 1),
+          reverse: this.reverseData[index],
+          rules: oldRules,
+          confirm: (reverse, rules) => {
+            reverseModal.loading();
+            if (reverse.tag.length > 0) {
+              oldData = this.reverseData[index];
+              newTemplateSettings = this.templateSettings;
+              oldReverseIndex = newTemplateSettings.reverse[oldData.type + 's'].findIndex(rs => rs.tag == oldData.tag);
+              oldRuleIndex0 = oldRules.length > 0 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[0])) : -1;
+              oldRuleIndex1 = oldRules.length == 2 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[1])) : -1;
+              if (oldData.type == reverse.type) {
+                newTemplateSettings.reverse[oldData.type + 's'][oldReverseIndex] = { tag: reverse.tag, domain: reverse.domain };
+              } else {
+                newTemplateSettings.reverse[oldData.type + 's'].splice(oldReverseIndex, 1);
+                // delete empty object
+                if (newTemplateSettings.reverse[oldData.type + 's'].length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type + 's');
+                // add other type of reverse if it is not exist
+                if (!newTemplateSettings.reverse[reverse.type + 's']) newTemplateSettings.reverse[reverse.type + 's'] = [];
+                newTemplateSettings.reverse[reverse.type + 's'].push({ tag: reverse.tag, domain: reverse.domain });
+              }
+              this.templateSettings = newTemplateSettings;
+
+              // Adjust Rules
+              newRules = this.templateSettings.routing.rules;
+              oldRuleIndex0 != -1 ? newRules[oldRuleIndex0] = rules[0] : newRules.push(rules[0]);
+              oldRuleIndex1 != -1 ? newRules[oldRuleIndex1] = rules[1] : newRules.push(rules[1]);
+              this.routingRuleSettings = JSON.stringify(newRules);
+            }
+            reverseModal.close();
+          },
+          isEdit: true
+        });
+      },
+      deleteReverse(index) {
+        oldData = this.reverseData[index];
+        newTemplateSettings = this.templateSettings;
+        reverseTypeObj = newTemplateSettings.reverse[oldData.type + 's'];
+        realIndex = reverseTypeObj.findIndex(r => r.tag == oldData.tag && r.domain == oldData.domain);
+        newTemplateSettings.reverse[oldData.type + 's'].splice(realIndex, 1);
+
+        // delete empty objects
+        if (reverseTypeObj.length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type + 's');
+        if (Object.keys(newTemplateSettings.reverse).length === 0) Reflect.deleteProperty(newTemplateSettings, 'reverse');
+
+        // delete related routing rules
+        newRules = newTemplateSettings.routing.rules;
+        if (oldData.type == "bridge") {
+          newRules = newTemplateSettings.routing.rules.filter(r => !(r.inboundTag && r.inboundTag.length == 1 && r.inboundTag[0] == oldData.tag));
+        } else if (oldData.type == "portal") {
+          newRules = newTemplateSettings.routing.rules.filter(r => r.outboundTag != oldData.tag);
+        }
+        newTemplateSettings.routing.rules = newRules;
+
+        this.templateSettings = newTemplateSettings;
+      },
+      async refreshOutboundTraffic() {
+        if (!this.refreshing) {
+          this.refreshing = true;
+          await this.getOutboundsTraffic();
+
+          data = []
+          if (this.templateSettings != null) {
+            this.templateSettings.outbounds.forEach((o, index) => {
+              data.push({ 'key': index, ...o });
+            });
+          }
+
+          this.outboundData = data;
+          this.refreshing = false;
+        }
+      },
+      async resetOutboundTraffic(index) {
+        let tag = "-alltags-";
+        if (index >= 0) {
+          tag = this.outboundData[index].tag ? this.outboundData[index].tag : ""
+        }
+        const msg = await HttpUtil.post("/panel/xray/resetOutboundsTraffic", { tag: tag });
+        if (msg.success) {
+          await this.refreshOutboundTraffic();
+        }
+      },
+      addBalancer() {
+        balancerModal.show({
+          title: '{{ i18n "pages.xray.balancer.addBalancer"}}',
+          okText: '{{ i18n "pages.xray.balancer.addBalancer"}}',
+          balancerTags: this.balancersData.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag),
+          balancer: {
+            tag: '',
+            strategy: 'random',
+            selector: [],
+            fallbackTag: ''
+          },
+          confirm: (balancer) => {
+            balancerModal.loading();
+            newTemplateSettings = this.templateSettings;
+            if (newTemplateSettings.routing.balancers == undefined) {
+              newTemplateSettings.routing.balancers = [];
+            }
+            let tmpBalancer = {
+              'tag': balancer.tag,
+              'selector': balancer.selector,
+              'fallbackTag': balancer.fallbackTag
+            };
+            if (balancer.strategy && balancer.strategy != 'random') {
+              tmpBalancer.strategy = {
+                'type': balancer.strategy
+              };
+            }
+            newTemplateSettings.routing.balancers.push(tmpBalancer);
+            this.templateSettings = newTemplateSettings;
+            this.updateObservatorySelectors();
+            balancerModal.close();
+            this.changeObsCode();
+          },
+          isEdit: false
+        });
+      },
+      editBalancer(index) {
+        const oldTag = this.balancersData[index].tag;
+        balancerModal.show({
+          title: '{{ i18n "pages.xray.balancer.editBalancer"}}',
+          okText: '{{ i18n "sure" }}',
+          balancerTags: this.balancersData.filter((o) => !ObjectUtil.isEmpty(o.tag)).map(obj => obj.tag),
+          balancer: this.balancersData[index],
+          confirm: (balancer) => {
+            balancerModal.loading();
+            newTemplateSettings = this.templateSettings;
+
+            let tmpBalancer = {
+              'tag': balancer.tag,
+              'selector': balancer.selector,
+              'fallbackTag': balancer.fallbackTag
+            };
+
+            // Remove old tag
+            if (newTemplateSettings.observatory) {
+              newTemplateSettings.observatory.subjectSelector = newTemplateSettings.observatory.subjectSelector.filter(s => s != oldTag);
+            }
+            if (newTemplateSettings.burstObservatory) {
+              newTemplateSettings.burstObservatory.subjectSelector = newTemplateSettings.burstObservatory.subjectSelector.filter(s => s != oldTag);
+            }
+
+            if (balancer.strategy && balancer.strategy != 'random') {
+              tmpBalancer.strategy = {
+                'type': balancer.strategy
+              };
+            }
+
+            newTemplateSettings.routing.balancers[index] = tmpBalancer;
+            // change edited tag if used in rule section
+            if (oldTag != balancer.tag) {
+              newTemplateSettings.routing.rules.forEach((rule) => {
+                if (rule.balancerTag && rule.balancerTag == oldTag) {
+                  rule.balancerTag = balancer.tag;
+                }
+              });
+            }
+            this.templateSettings = newTemplateSettings;
+            this.updateObservatorySelectors();
+            balancerModal.close();
+            this.changeObsCode();
+          },
+          isEdit: true
+        });
+      },
+      updateObservatorySelectors() {
+        newTemplateSettings = this.templateSettings;
+        const leastPings = this.balancersData.filter((b) => b.strategy == 'leastPing');
+        const leastLoads = this.balancersData.filter((b) =>
+          b.strategy === 'leastLoad' ||
+          b.strategy === 'roundRobin' ||
+          b.strategy === 'random'
+        );
+        if (leastPings.length > 0) {
+          if (!newTemplateSettings.observatory)
+            newTemplateSettings.observatory = this.defaultObservatory;
+          newTemplateSettings.observatory.subjectSelector = [];
+          leastPings.forEach((b) => {
+            b.selector.forEach((s) => {
+              if (!newTemplateSettings.observatory.subjectSelector.includes(s))
+                newTemplateSettings.observatory.subjectSelector.push(s);
+            });
+          });
+        } else {
+          delete newTemplateSettings.observatory
+        }
+        if (leastLoads.length > 0) {
+          if (!newTemplateSettings.burstObservatory)
+            newTemplateSettings.burstObservatory = this.defaultBurstObservatory;
+          newTemplateSettings.burstObservatory.subjectSelector = [];
+          leastLoads.forEach((b) => {
+            b.selector.forEach((s) => {
+              if (!newTemplateSettings.burstObservatory.subjectSelector.includes(s))
+                newTemplateSettings.burstObservatory.subjectSelector.push(s);
+            });
+          });
+        } else {
+          delete newTemplateSettings.burstObservatory
+        }
+        this.templateSettings = newTemplateSettings;
+        this.changeObsCode();
+      },
+      deleteBalancer(index) {
+        newTemplateSettings = this.templateSettings;
+
+        // Remove from balancers
+        const removedBalancer = this.balancersData.splice(index, 1)[0];
+
+        // Remove from settings
+        let realIndex = newTemplateSettings.routing.balancers.findIndex((b) => b.tag === removedBalancer.tag);
+        newTemplateSettings.routing.balancers.splice(realIndex, 1);
+
+        // Update balancers property to an empty array if there are no more balancers
+        if (newTemplateSettings.routing.balancers.length === 0) {
+          delete newTemplateSettings.routing.balancers;
+        }
+        this.templateSettings = newTemplateSettings;
+        this.updateObservatorySelectors();
+        this.obsSettings = '';
+        this.changeObsCode()
+      },
+      openDNSPresets() {
+        dnsPresetsModal.show({
+          title: '{{ i18n "pages.xray.dns.dnsPresetTitle" }}',
+          selected: (selectedPreset) => {
+            this.dnsServers = selectedPreset;
+
+            dnsPresetsModal.close();
+          }
+        });
+      },
+      addDNSServer() {
+        dnsModal.show({
+          title: '{{ i18n "pages.xray.dns.add" }}',
+          confirm: (dnsServer) => {
+            dnsServers = this.dnsServers;
+            dnsServers.push(dnsServer);
+            this.dnsServers = dnsServers;
+            dnsModal.close();
+          },
+          isEdit: false
+        });
+      },
+      editDNSServer(index) {
+        dnsModal.show({
+          title: '{{ i18n "pages.xray.dns.edit" }} #' + (index + 1),
+          dnsServer: this.dnsServers[index],
+          confirm: (dnsServer) => {
+            dnsServers = this.dnsServers;
+            dnsServers[index] = dnsServer;
+            this.dnsServers = dnsServers;
+            dnsModal.close();
+          },
+          isEdit: true
+        });
+      },
+      deleteDNSServer(index) {
+        newDnsServers = this.dnsServers;
+        newDnsServers.splice(index, 1);
+        this.dnsServers = newDnsServers;
+      },
+      addFakedns() {
+        fakednsModal.show({
+          title: '{{ i18n "pages.xray.fakedns.add" }}',
+          confirm: (item) => {
+            fakeDns = this.fakeDns ?? [];
+            fakeDns.push(item);
+            this.fakeDns = fakeDns;
+            fakednsModal.close();
+          },
+          isEdit: false
+        });
+      },
+      editFakedns(index) {
+        fakednsModal.show({
+          title: '{{ i18n "pages.xray.fakedns.edit" }} #' + (index + 1),
+          fakeDns: this.fakeDns[index],
+          confirm: (item) => {
+            fakeDns = this.fakeDns;
+            fakeDns[index] = item;
+            this.fakeDns = fakeDns;
+            fakednsModal.close();
+          },
+          isEdit: true
+        });
+      },
+      deleteFakedns(index) {
+        fakeDns = this.fakeDns;
+        fakeDns.splice(index, 1);
+        this.fakeDns = fakeDns;
+      },
+      addRule() {
+        ruleModal.show({
+          title: '{{ i18n "pages.xray.rules.add"}}',
+          okText: '{{ i18n "pages.xray.rules.add" }}',
+          confirm: (rule) => {
+            ruleModal.loading();
+            if (JSON.stringify(rule).length > 3) {
+              this.templateSettings.routing.rules.push(rule);
+              this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
+            }
+            ruleModal.close();
+          },
+          isEdit: false
+        });
+      },
+      editRule(index) {
+        ruleModal.show({
+          title: '{{ i18n "pages.xray.rules.edit"}} ' + (index + 1),
+          rule: app.templateSettings.routing.rules[index],
+          confirm: (rule) => {
+            ruleModal.loading();
+            if (JSON.stringify(rule).length > 3) {
+              this.templateSettings.routing.rules[index] = rule;
+              this.routingRuleSettings = JSON.stringify(this.templateSettings.routing.rules);
+            }
+            ruleModal.close();
+          },
+          isEdit: true
+        });
+      },
+      replaceRule(old_index, new_index) {
+        rules = this.templateSettings.routing.rules;
+        if (new_index >= rules.length) rules.push(undefined);
+        rules.splice(new_index, 0, rules.splice(old_index, 1)[0]);
+        this.routingRuleSettings = JSON.stringify(rules);
+      },
+      deleteRule(index) {
+        rules = this.templateSettings.routing.rules;
+        rules.splice(index, 1);
+        this.routingRuleSettings = JSON.stringify(rules);
+      },
+      showWarp() {
+        warpModal.show();
+      }
+    },
+    async mounted() {
+      if (window.location.protocol !== "https:") {
+        this.showAlert = true;
+      }
+      await this.getXraySetting();
+      await this.getXrayResult();
+      await this.getOutboundsTraffic();
+      while (true) {
+        await PromiseUtil.sleep(800);
+        this.saveBtnDisable = this.oldXraySetting === this.xraySetting;
+      }
+    },
+    computed: {
+      templateSettings: {
+        get: function () {
+          const parsedSettings = this.xraySetting ? JSON.parse(this.xraySetting) : null;
+          return parsedSettings;
         },
-        async mounted() {
-            if (window.location.protocol !== "https:") {
-                this.showAlert = true;
-            }
-            await this.getXraySetting();
-            await this.getXrayResult();
-            await this.getOutboundsTraffic();
-            while (true) {
-                await PromiseUtil.sleep(800);
-                this.saveBtnDisable = this.oldXraySetting === this.xraySetting;
-            }
+        set: function (newValue) {
+          if (newValue) {
+            this.xraySetting = JSON.stringify(newValue, null, 2);
+          }
         },
-        computed: {
-            templateSettings: {
-                get: function () {
-                    const parsedSettings = this.xraySetting ? JSON.parse(this.xraySetting) : null;
-                    return parsedSettings;
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.xraySetting = JSON.stringify(newValue, null, 2);
-                    }
-                },
-            },
-            inboundSettings: {
-                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.inbounds, null, 2) : null; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.inbounds = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            outboundSettings: {
-                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.outbounds, null, 2) : null; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.outbounds = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            outboundData: {
-                get: function () {
-                    data = []
-                    if (this.templateSettings != null) {
-                        this.templateSettings.outbounds.forEach((o, index) => {
-                            data.push({'key': index, ...o});
-                        });
-                    }
-                    return data;
-                },
-            },
-            reverseData: {
-                get: function () {
-                    data = []
-                    if (this.templateSettings != null && this.templateSettings.reverse != null) {
-                        if(this.templateSettings.reverse.bridges) {
-                            this.templateSettings.reverse.bridges.forEach((o, index) => {
-                                data.push({'key': index, 'type':'bridge', ...o});
-                            });
-                        }
-                        if(this.templateSettings.reverse.portals){
-                            this.templateSettings.reverse.portals.forEach((o, index) => {
-                                data.push({'key': index, 'type':'portal', ...o});
-                            });
-                        }
-                    }
-                    return data;
-                },
-            },
-            routingRuleSettings: {
-                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.routing.rules, null, 2) : null; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.routing.rules = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            routingRuleData: {
-                get: function () {
-                    data = [];
-                    if (this.templateSettings != null) {
-                        this.templateSettings.routing.rules.forEach((r, index) => {
-                            data.push({'key': index, ...r});
-                        });
-                        // Make rules readable
-                        data.forEach(r => {
-                            if(r.domain) r.domain = r.domain.join(',')
-                            if(r.ip) r.ip = r.ip.join(',')
-                            if(r.source) r.source = r.source.join(',');
-                            if(r.user) r.user = r.user.join(',')
-                            if(r.inboundTag) r.inboundTag = r.inboundTag.join(',')
-                            if(r.protocol) r.protocol = r.protocol.join(',')
-                            if(r.attrs) r.attrs = JSON.stringify(r.attrs, null, 2)
-                        });
-                    }
-                    return data;
-                }
-            },
-            balancersData: {
-                get: function () {
-                    data = []
-                    if (this.templateSettings != null && this.templateSettings.routing != null && this.templateSettings.routing.balancers != null) {
-                        this.templateSettings.routing.balancers.forEach((o, index) => {
-                            data.push({
-                                'key': index,
-                                'tag': o.tag ? o.tag : "",
-                                'strategy': o.strategy?.type ?? "random",
-                                'selector': o.selector ? o.selector : [],
-                                'fallbackTag': o.fallbackTag?? '',
-                            });
-                        });
-                    }
-                    return data;
-                }
-            },
-            observatory: {
-                get: function () { 
-                    return this.templateSettings?.observatory ? JSON.stringify(this.templateSettings.observatory, null, 2) : null;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.observatory = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            burstObservatory: {
-                get: function () { 
-                    return this.templateSettings?.burstObservatory ? JSON.stringify(this.templateSettings.burstObservatory, null, 2) : null; 
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.burstObservatory = JSON.parse(newValue);
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            observatoryEnable: function () { return this.templateSettings != null && this.templateSettings.observatory != undefined },
-            burstObservatoryEnable: function () { return this.templateSettings != null && this.templateSettings.burstObservatory != undefined },
-            freedomStrategy: {
-                get: function () {
-                    if (!this.templateSettings) return "AsIs";
-                    freedomOutbound = this.templateSettings.outbounds.find((o) => o.protocol === "freedom" && o.tag == "direct");
-                    if (!freedomOutbound) return "AsIs";
-                    if (!freedomOutbound.settings || !freedomOutbound.settings.domainStrategy) return "AsIs";
-                    return freedomOutbound.settings.domainStrategy;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    freedomOutboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.protocol === "freedom" && o.tag == "direct");
-                    if(freedomOutboundIndex == -1){
-                        newTemplateSettings.outbounds.push({protocol: "freedom", tag: "direct", settings: { "domainStrategy": newValue }});
-                    } else if (!newTemplateSettings.outbounds[freedomOutboundIndex].settings) {
-                        newTemplateSettings.outbounds[freedomOutboundIndex].settings = {"domainStrategy": newValue};
-                    } else {
-                        newTemplateSettings.outbounds[freedomOutboundIndex].settings.domainStrategy = newValue;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            routingStrategy: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.routing || !this.templateSettings.routing.domainStrategy) return "AsIs";
-                    return this.templateSettings.routing.domainStrategy;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.routing.domainStrategy = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            logLevel: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.loglevel) return "warning";
-                    return this.templateSettings.log.loglevel;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.loglevel = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            accessLog: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.access) return "";
-                    return this.templateSettings.log.access;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.access = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            errorLog: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.error) return "";
-                    return this.templateSettings.log.error;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.error = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnslog: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.dnsLog) return false;
-                    return this.templateSettings.log.dnsLog;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.dnsLog = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            statsInboundUplink: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsInboundUplink) return false;
-                    return this.templateSettings.policy.system.statsInboundUplink;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.policy.system.statsInboundUplink = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            statsInboundDownlink: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsInboundDownlink) return false;
-                    return this.templateSettings.policy.system.statsInboundDownlink;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.policy.system.statsInboundDownlink = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            statsOutboundUplink: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsOutboundUplink) return false;
-                    return this.templateSettings.policy.system.statsOutboundUplink;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.policy.system.statsOutboundUplink = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            statsOutboundDownlink: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsOutboundDownlink) return false;
-                    return this.templateSettings.policy.system.statsOutboundDownlink;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.policy.system.statsOutboundDownlink = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            maskAddressLog: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.maskAddress) return "";
-                    return this.templateSettings.log.maskAddress;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.log.maskAddress = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            blockedIPs: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "blocked", property: "ip" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "blocked", property: "ip", data: newValue });
-                }
-            },
-            blockedDomains: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "blocked", property: "domain" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "blocked", property: "domain", data: newValue });
-                }
-            },
-            blockedProtocols: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "blocked", property: "protocol" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "blocked", property: "protocol", data: newValue });
-                }
-            },
-            directIPs: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "direct", property: "ip" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "direct", property: "ip", data: newValue });
-                    this.syncRulesWithOutbound("direct", this.directSettings);
-                }
-            },
-            directDomains: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "direct", property: "domain" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "direct", property: "domain", data: newValue });
-                    this.syncRulesWithOutbound("direct", this.directSettings);
-                }
-            },
-            ipv4Domains: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "IPv4", property: "domain", data: newValue });
-                    this.syncRulesWithOutbound("IPv4", this.ipv4Settings);
-                }
-            },
-            warpDomains: {
-                get: function () {
-                    return this.templateRuleGetter({ outboundTag: "warp", property: "domain" });
-                },
-                set: function (newValue) {
-                    this.templateRuleSetter({ outboundTag: "warp", property: "domain", data: newValue });
-                }
-            },
-            torrentSettings: {
-                get: function () {
-                    return ArrayUtils.doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedProtocols = [...this.blockedProtocols, ...this.settingsData.protocols.bittorrent];
-                    } else {
-                        this.blockedProtocols = this.blockedProtocols.filter(data => !this.settingsData.protocols.bittorrent.includes(data));
-                    }
-                },
-            },
-            WarpExist: {
-                get: function() {
-                    return this.templateSettings ? this.templateSettings.outbounds.findIndex((o) => o.tag == "warp")>=0  : false;
-                },
-            },
-            enableDNS: {
-                get: function () {
-                    return this.templateSettings ? this.templateSettings.dns != null : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns = { 
-                            servers: [], 
-                            queryStrategy: "UseIP", 
-                            tag: "dns_inbound"
-                        };
-                        newTemplateSettings.fakedns = null; 
-                    } else {
-                        delete newTemplateSettings.dns;
-                        delete newTemplateSettings.fakedns;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsTag: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.tag : "";
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.dns.tag = newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsClientIp: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.clientIp : null;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.clientIp = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.clientIp;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsDisableCache: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.disableCache : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.disableCache = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.disableCache
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsDisableFallback: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.disableFallback : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.disableFallback = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.disableFallback
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsDisableFallbackIfMatch: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.disableFallbackIfMatch : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.disableFallbackIfMatch = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.disableFallbackIfMatch
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsUseSystemHosts: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.useSystemHosts : false;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns.useSystemHosts = newValue;
-                    } else {
-                        delete newTemplateSettings.dns.useSystemHosts
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsStrategy: {
-                get: function () {
-                    return this.enableDNS ? this.templateSettings.dns.queryStrategy : null;
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.dns.queryStrategy =  newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            dnsServers: {
-                get: function () { return this.enableDNS ? this.templateSettings.dns.servers : []; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    newTemplateSettings.dns.servers =  newValue;
-                    this.templateSettings = newTemplateSettings;
-                }
-            },
-            fakeDns: {
-                get: function () { return this.templateSettings && this.templateSettings.fakedns ? this.templateSettings.fakedns : []; },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (this.enableDNS) {
-                        newTemplateSettings.fakedns = newValue.length > 0 ? newValue : null;
-                    } else {
-                        delete newTemplateSettings.fakedns;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                }
-            }
+      },
+      inboundSettings: {
+        get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.inbounds, null, 2) : null; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.inbounds = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
         },
-    });
+      },
+      outboundSettings: {
+        get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.outbounds, null, 2) : null; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.outbounds = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
+        },
+      },
+      outboundData: {
+        get: function () {
+          data = []
+          if (this.templateSettings != null) {
+            this.templateSettings.outbounds.forEach((o, index) => {
+              data.push({ 'key': index, ...o });
+            });
+          }
+          return data;
+        },
+      },
+      reverseData: {
+        get: function () {
+          data = []
+          if (this.templateSettings != null && this.templateSettings.reverse != null) {
+            if (this.templateSettings.reverse.bridges) {
+              this.templateSettings.reverse.bridges.forEach((o, index) => {
+                data.push({ 'key': index, 'type': 'bridge', ...o });
+              });
+            }
+            if (this.templateSettings.reverse.portals) {
+              this.templateSettings.reverse.portals.forEach((o, index) => {
+                data.push({ 'key': index, 'type': 'portal', ...o });
+              });
+            }
+          }
+          return data;
+        },
+      },
+      routingRuleSettings: {
+        get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.routing.rules, null, 2) : null; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.routing.rules = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
+        },
+      },
+      routingRuleData: {
+        get: function () {
+          data = [];
+          if (this.templateSettings != null) {
+            this.templateSettings.routing.rules.forEach((r, index) => {
+              data.push({ 'key': index, ...r });
+            });
+            // Make rules readable
+            data.forEach(r => {
+              if (r.domain) r.domain = r.domain.join(',')
+              if (r.ip) r.ip = r.ip.join(',')
+              if (r.source) r.source = r.source.join(',');
+              if (r.user) r.user = r.user.join(',')
+              if (r.inboundTag) r.inboundTag = r.inboundTag.join(',')
+              if (r.protocol) r.protocol = r.protocol.join(',')
+              if (r.attrs) r.attrs = JSON.stringify(r.attrs, null, 2)
+            });
+          }
+          return data;
+        }
+      },
+      balancersData: {
+        get: function () {
+          data = []
+          if (this.templateSettings != null && this.templateSettings.routing != null && this.templateSettings.routing.balancers != null) {
+            this.templateSettings.routing.balancers.forEach((o, index) => {
+              data.push({
+                'key': index,
+                'tag': o.tag ? o.tag : "",
+                'strategy': o.strategy?.type ?? "random",
+                'selector': o.selector ? o.selector : [],
+                'fallbackTag': o.fallbackTag ?? '',
+              });
+            });
+          }
+          return data;
+        }
+      },
+      observatory: {
+        get: function () {
+          return this.templateSettings?.observatory ? JSON.stringify(this.templateSettings.observatory, null, 2) : null;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.observatory = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
+        },
+      },
+      burstObservatory: {
+        get: function () {
+          return this.templateSettings?.burstObservatory ? JSON.stringify(this.templateSettings.burstObservatory, null, 2) : null;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.burstObservatory = JSON.parse(newValue);
+          this.templateSettings = newTemplateSettings;
+        },
+      },
+      observatoryEnable: function () { return this.templateSettings != null && this.templateSettings.observatory != undefined },
+      burstObservatoryEnable: function () { return this.templateSettings != null && this.templateSettings.burstObservatory != undefined },
+      freedomStrategy: {
+        get: function () {
+          if (!this.templateSettings) return "AsIs";
+          freedomOutbound = this.templateSettings.outbounds.find((o) => o.protocol === "freedom" && o.tag == "direct");
+          if (!freedomOutbound) return "AsIs";
+          if (!freedomOutbound.settings || !freedomOutbound.settings.domainStrategy) return "AsIs";
+          return freedomOutbound.settings.domainStrategy;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          freedomOutboundIndex = newTemplateSettings.outbounds.findIndex((o) => o.protocol === "freedom" && o.tag == "direct");
+          if (freedomOutboundIndex == -1) {
+            newTemplateSettings.outbounds.push({ protocol: "freedom", tag: "direct", settings: { "domainStrategy": newValue } });
+          } else if (!newTemplateSettings.outbounds[freedomOutboundIndex].settings) {
+            newTemplateSettings.outbounds[freedomOutboundIndex].settings = { "domainStrategy": newValue };
+          } else {
+            newTemplateSettings.outbounds[freedomOutboundIndex].settings.domainStrategy = newValue;
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      routingStrategy: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.routing || !this.templateSettings.routing.domainStrategy) return "AsIs";
+          return this.templateSettings.routing.domainStrategy;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.routing.domainStrategy = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      logLevel: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.loglevel) return "warning";
+          return this.templateSettings.log.loglevel;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.loglevel = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      accessLog: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.access) return "";
+          return this.templateSettings.log.access;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.access = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      errorLog: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.error) return "";
+          return this.templateSettings.log.error;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.error = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnslog: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.dnsLog) return false;
+          return this.templateSettings.log.dnsLog;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.dnsLog = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      statsInboundUplink: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsInboundUplink) return false;
+          return this.templateSettings.policy.system.statsInboundUplink;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.policy.system.statsInboundUplink = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      statsInboundDownlink: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsInboundDownlink) return false;
+          return this.templateSettings.policy.system.statsInboundDownlink;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.policy.system.statsInboundDownlink = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      statsOutboundUplink: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsOutboundUplink) return false;
+          return this.templateSettings.policy.system.statsOutboundUplink;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.policy.system.statsOutboundUplink = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      statsOutboundDownlink: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.policy.system || !this.templateSettings.policy.system.statsOutboundDownlink) return false;
+          return this.templateSettings.policy.system.statsOutboundDownlink;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.policy.system.statsOutboundDownlink = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      maskAddressLog: {
+        get: function () {
+          if (!this.templateSettings || !this.templateSettings.log || !this.templateSettings.log.maskAddress) return "";
+          return this.templateSettings.log.maskAddress;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.log.maskAddress = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      blockedIPs: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "blocked", property: "ip" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "blocked", property: "ip", data: newValue });
+        }
+      },
+      blockedDomains: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "blocked", property: "domain" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "blocked", property: "domain", data: newValue });
+        }
+      },
+      blockedProtocols: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "blocked", property: "protocol" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "blocked", property: "protocol", data: newValue });
+        }
+      },
+      directIPs: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "direct", property: "ip" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "direct", property: "ip", data: newValue });
+          this.syncRulesWithOutbound("direct", this.directSettings);
+        }
+      },
+      directDomains: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "direct", property: "domain" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "direct", property: "domain", data: newValue });
+          this.syncRulesWithOutbound("direct", this.directSettings);
+        }
+      },
+      ipv4Domains: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "IPv4", property: "domain" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "IPv4", property: "domain", data: newValue });
+          this.syncRulesWithOutbound("IPv4", this.ipv4Settings);
+        }
+      },
+      warpDomains: {
+        get: function () {
+          return this.templateRuleGetter({ outboundTag: "warp", property: "domain" });
+        },
+        set: function (newValue) {
+          this.templateRuleSetter({ outboundTag: "warp", property: "domain", data: newValue });
+        }
+      },
+      torrentSettings: {
+        get: function () {
+          return ArrayUtils.doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols);
+        },
+        set: function (newValue) {
+          if (newValue) {
+            this.blockedProtocols = [...this.blockedProtocols, ...this.settingsData.protocols.bittorrent];
+          } else {
+            this.blockedProtocols = this.blockedProtocols.filter(data => !this.settingsData.protocols.bittorrent.includes(data));
+          }
+        },
+      },
+      WarpExist: {
+        get: function () {
+          return this.templateSettings ? this.templateSettings.outbounds.findIndex((o) => o.tag == "warp") >= 0 : false;
+        },
+      },
+      enableDNS: {
+        get: function () {
+          return this.templateSettings ? this.templateSettings.dns != null : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns = {
+              servers: [],
+              queryStrategy: "UseIP",
+              tag: "dns_inbound"
+            };
+            newTemplateSettings.fakedns = null;
+          } else {
+            delete newTemplateSettings.dns;
+            delete newTemplateSettings.fakedns;
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsTag: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.tag : "";
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.dns.tag = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsClientIp: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.clientIp : null;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.clientIp = newValue;
+          } else {
+            delete newTemplateSettings.dns.clientIp;
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsDisableCache: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.disableCache : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.disableCache = newValue;
+          } else {
+            delete newTemplateSettings.dns.disableCache
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsDisableFallback: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.disableFallback : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.disableFallback = newValue;
+          } else {
+            delete newTemplateSettings.dns.disableFallback
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsDisableFallbackIfMatch: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.disableFallbackIfMatch : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.disableFallbackIfMatch = newValue;
+          } else {
+            delete newTemplateSettings.dns.disableFallbackIfMatch
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsUseSystemHosts: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.useSystemHosts : false;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (newValue) {
+            newTemplateSettings.dns.useSystemHosts = newValue;
+          } else {
+            delete newTemplateSettings.dns.useSystemHosts
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsStrategy: {
+        get: function () {
+          return this.enableDNS ? this.templateSettings.dns.queryStrategy : null;
+        },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.dns.queryStrategy = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      dnsServers: {
+        get: function () { return this.enableDNS ? this.templateSettings.dns.servers : []; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          newTemplateSettings.dns.servers = newValue;
+          this.templateSettings = newTemplateSettings;
+        }
+      },
+      fakeDns: {
+        get: function () { return this.templateSettings && this.templateSettings.fakedns ? this.templateSettings.fakedns : []; },
+        set: function (newValue) {
+          newTemplateSettings = this.templateSettings;
+          if (this.enableDNS) {
+            newTemplateSettings.fakedns = newValue.length > 0 ? newValue : null;
+          } else {
+            delete newTemplateSettings.fakedns;
+          }
+          this.templateSettings = newTemplateSettings;
+        }
+      }
+    },
+  });
 </script>
 {{ template "page/body_end" .}}
\ No newline at end of file

From cad07be8470f1bc6e85c60929dd02134f63f8a39 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Mon, 23 Jun 2025 19:42:44 +0700
Subject: [PATCH 6/8] chore: russian language improvements

---
 web/translation/translate.ru_RU.toml | 126 +++++++++++++--------------
 1 file changed, 63 insertions(+), 63 deletions(-)

diff --git a/web/translation/translate.ru_RU.toml b/web/translation/translate.ru_RU.toml
index 1254087e..bf3fb43a 100644
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -33,7 +33,7 @@
 "sure" = "Да"
 "encryption" = "Шифрование"
 "useIPv4ForHost" = "Использовать IPv4 для хоста"
-"transmission" = "Протокол"
+"transmission" = "Транспорт"
 "host" = "Хост"
 "path" = "Путь"
 "camouflage" = "Маскировка"
@@ -59,10 +59,10 @@
 "security" = "Безопасность"
 "secAlertTitle" = "Предупреждение системы безопасности"
 "secAlertSsl" = "Это соединение не защищено. Пожалуйста, не вводите конфиденциальную информацию, пока не установите SSL сертификат для защиты соединения"
-"secAlertConf" = "Некоторые настройки уязвимы для атак. Рекомендуем усилить протоколы безопасности, чтобы предотвратить проблемы в будущем."
-"secAlertSSL" = "Ваше подключение к панели небезопасно. Пожалуйста, установите SSL сертификат для защиты данных."
-"secAlertPanelPort" = "Порт, на котором работает панель небезопасен. Пожалуйста, установите случайный или просто другой порт."
-"secAlertPanelURI" = "URI-адрес панели по умолчанию небезопасен. Пожалуйста, настройте сложный URI-адрес."
+"secAlertConf" = "Некоторые настройки уязвимы для атак. Чтобы в будущем не было проблем, нужно усилить защиту."
+"secAlertSSL" = "Ваше подключение к панели не защищено. Установите SSL сертификат для защиты данных."
+"secAlertPanelPort" = "Порт панели по умолчанию небезопасен. Установите случайный или просто другой порт."
+"secAlertPanelURI" = "Адрес панели по умолчанию небезопасен. Сделайте адрес сложным."
 "secAlertSubURI" = "URI-адрес подписки по умолчанию небезопасен. Пожалуйста, настройте сложный URI-адрес."
 "secAlertSubJsonURI" = "URI-адрес по умолчанию для JSON подписки небезопасен. Пожалуйста, настройте сложный URI-адрес."
 "emptyDnsDesc" = "Нет добавленных DNS-серверов."
@@ -75,8 +75,8 @@
 "theme" = "Тема"
 "dark" = "Темная"
 "ultraDark" = "Очень темная"
-"dashboard" = "Статус системы"
-"inbounds" = "Входящие подключения"
+"dashboard" = "Дашборд"
+"inbounds" = "Инбаунды"
 "settings" = "Настройки"
 "xray" = "Настройки Xray"
 "logout" = "Выход"
@@ -91,15 +91,15 @@
 "invalidFormData" = "Недопустимый формат данных"
 "emptyUsername" = "Введите имя пользователя"
 "emptyPassword" = "Введите пароль"
-"wrongUsernameOrPassword" = "Неверное имя пользователя, пароль или код двухфакторной аутентификации."
-"successLogin" = "Успешный вход"
+"wrongUsernameOrPassword" = "Неверные данные учетной записи."
+"successLogin" = "Вы успешно вошли в аккаунт"
 
 [pages.index]
-"title" = "Статус системы"
+"title" = "Дашборд"
 "cpu" = "ЦП"
 "logicalProcessors" = "Логические процессоры"
 "frequency" = "Частота"
-"swap" = "Swap"
+"swap" = "Файл подкачки"
 "storage" = "Диск"
 "memory" = "ОЗУ"
 "threads" = "Потоки"
@@ -136,7 +136,7 @@
 "geofileUpdateDialogDesc" = "Это обновит файл #filename#."
 "geofileUpdatePopover" = "Геофайл успешно обновлён"
 "dontRefresh" = "Установка в процессе. Не обновляйте страницу"
-"logs" = "Логи"
+"logs" = "Журнал"
 "config" = "Конфигурация"
 "backup" = "Резервная копия"
 "backupTitle" = "Резервная копия базы данных"
@@ -151,10 +151,10 @@
 "getConfigError" = "Произошла ошибка при получении конфигурационного файла"
 
 [pages.inbounds]
-"title" = "Входящие подключения"
+"title" = "Инбаунды"
 "totalDownUp" = "Объем отправленного/полученного трафика"
 "totalUsage" = "Всего трафика"
-"inboundCount" = "Всего подключений"
+"inboundCount" = "Всего инбаундов"
 "operate" = "Меню"
 "enable" = "Включить"
 "remark" = "Примечание"
@@ -165,18 +165,18 @@
 "transportConfig" = "Транспорт"
 "expireDate" = "Дата окончания"
 "resetTraffic" = "Сброс трафика"
-"addInbound" = "Создать новое подключение"
+"addInbound" = "Создать инбаунд"
 "generalActions" = "Общие действия"
 "autoRefresh" = "Автообновление"
 "autoRefreshInterval" = "Интервал"
-"modifyInbound" = "Изменить входящее подключение"
-"deleteInbound" = "Удалить входящее подключение"
-"deleteInboundContent" = "Вы уверены, что хотите удалить входящее подключение?"
+"modifyInbound" = "Изменить инбаунд"
+"deleteInbound" = "Удалить инбаунд"
+"deleteInboundContent" = "Вы уверены, что хотите удалить инбаунд?"
 "deleteClient" = "Удалить клиента"
 "deleteClientContent" = "Вы уверены, что хотите удалить клиента?"
 "resetTrafficContent" = "Вы уверены, что хотите сбросить трафик?"
-"inboundUpdateSuccess" = "Входящее подключение успешно обновлено."
-"inboundCreateSuccess" = "Входящее подключение успешно создано."
+"inboundUpdateSuccess" = "Инбаунд успешно обновлен."
+"inboundCreateSuccess" = "Инбаунд успешно создан."
 "copyLink" = "Копировать ссылку"
 "address" = "Адрес"
 "network" = "Сеть"
@@ -196,11 +196,11 @@
 "export" = "Экспорт ссылок"
 "clone" = "Клонировать"
 "cloneInbound" = "Клонировать"
-"cloneInboundContent" = "Будут клонированы все настройки входящих подключений, кроме списка клиентов, порта и IP-адреса прослушивания"
+"cloneInboundContent" = "Будут клонированы все настройки инбаундов, кроме списка клиентов, порта и IP-адреса прослушивания"
 "cloneInboundOk" = "Клонировано"
-"resetAllTraffic" = "Сброс трафика всех подключений"
-"resetAllTrafficTitle" = "Сброс трафика всех подключений"
-"resetAllTrafficContent" = "Вы уверены, что хотите сбросить трафик всех подключений?"
+"resetAllTraffic" = "Сброс трафика всех инбаундов"
+"resetAllTrafficTitle" = "Сброс трафика всех инбаундов"
+"resetAllTrafficContent" = "Вы уверены, что хотите сбросить трафик всех инбаундов?"
 "resetInboundClientTraffics" = "Сброс трафика клиента"
 "resetInboundClientTrafficTitle" = "Сброс трафика клиентов"
 "resetInboundClientTrafficContent" = "Вы уверены, что хотите сбросить трафик для этих клиентов?"
@@ -222,10 +222,10 @@
 "subscriptionDesc" = "Вы можете найти свою ссылку подписки в разделе 'Подробнее'"
 "info" = "Информация"
 "same" = "Тот же"
-"inboundData" = "Данные подключений"
-"exportInbound" = "Экспорт входящих подключений"
+"inboundData" = "Данные инбаундов"
+"exportInbound" = "Экспорт инбаундов"
 "import" = "Импортировать"
-"importInbound" = "Импорт входящих подключений"
+"importInbound" = "Импорт инбаундов"
 
 [pages.client]
 "add" = "Создать клиента"
@@ -249,13 +249,13 @@
 "obtain" = "Получить"
 "updateSuccess" = "Обновление прошло успешно"
 "logCleanSuccess" = "Лог был очищен"
-"inboundsUpdateSuccess" = "Входящие подключения успешно обновлены"
-"inboundUpdateSuccess" = "Входящее подключение успешно обновлено"
-"inboundCreateSuccess" = "Входящее подключение успешно создано"
-"inboundDeleteSuccess" = "Входящее подключение успешно удалено"
-"inboundClientAddSuccess" = "Клиент(ы) входящего подключения добавлен(ы)"
-"inboundClientDeleteSuccess" = "Клиент входящего подключения удалён"
-"inboundClientUpdateSuccess" = "Клиент входящего подключения обновлён"
+"inboundsUpdateSuccess" = "Инбаунды успешно обновлены"
+"inboundUpdateSuccess" = "Инбаунд успешно обновлено"
+"inboundCreateSuccess" = "Инбаунд успешно создано"
+"inboundDeleteSuccess" = "Инбаунд успешно удалено"
+"inboundClientAddSuccess" = "Клиент(ы) инбаунда добавлен(ы)"
+"inboundClientDeleteSuccess" = "Клиент инбаунда удалён"
+"inboundClientUpdateSuccess" = "Клиент инбаунда обновлён"
 "delDepletedClientsSuccess" = "Все исчерпанные клиенты удалены"
 "resetAllClientTrafficSuccess" = "Весь трафик клиента сброшен"
 "resetAllTrafficSuccess" = "Весь трафик сброшен"
@@ -281,15 +281,15 @@
 [pages.settings]
 "title" = "Настройки"
 "save" = "Сохранить"
-"infoDesc" = "Каждое выполненное изменение необходимо сохранить. Пожалуйста, перезапустите панель, чтобы изменения вступили в силу"
+"infoDesc" = "Каждое внесённое изменение должно быть сохранено. Пожалуйста, перезапустите панель, чтобы изменения вступили в силу."
 "restartPanel" = "Перезапуск панели"
 "restartPanelDesc" = "Вы уверены, что хотите перезапустить панель? Подтвердите, и перезапуск произойдёт через 3 секунды. Если панель будет недоступна, проверьте лог сервера"
 "restartPanelSuccess" = "Панель успешно перезапущена"
 "actions" = "Действия"
 "resetDefaultConfig" = "Восстановить настройки по умолчанию"
-"panelSettings" = "Настройки панели"
-"securitySettings" = "Настройки безопасности"
-"TGBotSettings" = "Настройки Telegram бота"
+"panelSettings" = "Панель"
+"securitySettings" = "Учетная запись"
+"TGBotSettings" = "Telegram"
 "panelListeningIP" = "IP-адрес для управления панелью"
 "panelListeningIPDesc" = "Оставьте пустым для подключения с любого IP"
 "panelListeningDomain" = "Домен панели"
@@ -303,7 +303,7 @@
 "panelUrlPath" = "Корневой путь URL адреса панели"
 "panelUrlPathDesc" = "Должен начинаться с '/' и заканчиваться '/'"
 "pageSize" = "Размер нумерации страниц"
-"pageSizeDesc" = "Определить размер страницы для таблицы входящих подключений. Установите 0, чтобы отключить"
+"pageSizeDesc" = "Определить размер страницы для таблицы инбаундов. Установите 0, чтобы отключить"
 "remarkModel" = "Модель примечания и символ разделения"
 "datepicker" = "Выбор даты"
 "datepickerPlaceholder" = "Выберите дату"
@@ -391,7 +391,7 @@
 [pages.xray]
 "title" = "Настройки Xray"
 "save" = "Сохранить"
-"restart" = "Перезапустить Xray"
+"restart" = "Перезапуск Xray"
 "restartSuccess" = "Xray успешно перезапущен"
 "stopSuccess" = "Xray успешно остановлен"
 "restartError" = "Произошла ошибка при перезапуске Xray."
@@ -402,7 +402,7 @@
 "generalConfigsDesc" = "Эти параметры описывают общие настройки"
 "logConfigs" = "Логи"
 "logConfigsDesc" = "Логи могут замедлять работу сервера. Включайте только нужные вам виды логов при необходимости!"
-"blockConfigsDesc" = "Настройте, чтобы клиенты не имели доступа к определенным протоколам и веб-сайтами"
+"blockConfigsDesc" = "Настройте, чтобы клиенты не имели доступа к определенным протоколам"
 "basicRouting" = "Базовые соединения"
 "blockConnectionsConfigsDesc" = "Эти параметры будут блокировать трафик в зависимости от страны назначения."
 "directConnectionsConfigsDesc" = "Прямое соединение означает, что определенный трафик не будет перенаправлен через другой сервер."
@@ -413,19 +413,19 @@
 "ipv4Routing" = "Правила IPv4"
 "ipv4RoutingDesc" = "Эти параметры позволят клиентам маршрутизироваться к целевым доменам только через IPv4"
 "warpRouting" = "Правила WARP"
-"warpRoutingDesc" = "Внимание: перед использованием этих параметров установите WARP в режиме прокси-сервера socks5 на свой сервер, следуя инструкциям на GitHub панели. WARP будет направлять трафик на веб-сайты через серверы Cloudflare"
+"warpRoutingDesc" = " Эти опции будут направлять трафик в зависимости от конкретного пункта назначения через WARP."
 "Template" = "Шаблон конфигурации Xray"
-"TemplateDesc" = "Создание файла конфигурации Xray на основе этого шаблона"
+"TemplateDesc" = "На основе шаблона создаётся конфигурационный файл Xray."
 "FreedomStrategy" = "Настройка стратегии протокола Freedom"
 "FreedomStrategyDesc" = "Установка стратегии вывода сети в протоколе Freedom"
 "RoutingStrategy" = "Настройка маршрутизации доменов"
 "RoutingStrategyDesc" = "Установка общей стратегии маршрутизации разрешения DNS"
 "Torrent" = "Заблокировать BitTorrent"
-"Inbounds" = "Входящее соединение"
+"Inbounds" = "Инбаунды"
 "InboundsDesc" = "Изменение шаблона конфигурации для подключения определенных клиентов"
-"Outbounds" = "Исходящее соединение"
+"Outbounds" = "Аутбаунды"
 "Balancers" = "Балансировщик"
-"OutboundsDesc" = "Изменение шаблона конфигурации, чтобы определить исходящие соединения для этого сервера"
+"OutboundsDesc" = "Изменение шаблона конфигурации, чтобы определить аутбаунды для этого сервера"
 "Routings" = "Маршрутизация"
 "RoutingsDesc" = "Важен приоритет каждого правила!"
 "completeTemplate" = "Все"
@@ -456,8 +456,8 @@
 "down" = "Опустить вниз"
 "source" = "Источник"
 "dest" = "Пункт назначения"
-"inbound" = "Входящее соединение"
-"outbound" = "Исходящее соединение"
+"inbound" = "Инбаунд"
+"outbound" = "Аутбаунд"
 "balancer" = "Балансировщик"
 "info" = "Информация"
 "add" = "Создать правило"
@@ -465,9 +465,9 @@
 "useComma" = "Элементы, разделённые запятыми"
 
 [pages.xray.outbound]
-"addOutbound" = "Создать исходящее соединение"
+"addOutbound" = "Создать аутбаунд"
 "addReverse" = "Создать реверс-прокси"
-"editOutbound" = "Изменить исходящее соединение"
+"editOutbound" = "Изменить аутбаунд"
 "editReverse" = "Редактировать реверс-прокси"
 "tag" = "Тег"
 "tagDesc" = "Уникальный тег"
@@ -481,7 +481,7 @@
 "intercon" = "Соединение"
 "settings" = "Настройки"
 "accountInfo" = "Информация об учетной записи"
-"outboundStatus" = "Исходящий статус"
+"outboundStatus" = "Статус аутбаунда"
 "sendThrough" = "Отправить через"
 
 [pages.xray.balancer]
@@ -494,7 +494,7 @@
 "balancerDesc" = "Невозможно одновременно использовать balancerTag и outboundTag. При одновременном использовании будет работать только outboundTag."
 
 [pages.xray.wireguard]
-"secretKey" = "Приватный ключ"
+"secretKey" = "Секретный ключ"
 "publicKey" = "Публичный ключ"
 "allowedIPs" = "Разрешенные IP-адреса"
 "endpoint" = "Конечная точка"
@@ -555,8 +555,8 @@
 "modifyUser" = "Вы успешно изменили учетные данные администратора."
 "originalUserPassIncorrect" = "Неверное имя пользователя или пароль"
 "userPassMustBeNotEmpty" = "Новое имя пользователя и новый пароль должны быть заполнены"
-"getOutboundTrafficError" = "Ошибка получения исходящего трафика"
-"resetOutboundTrafficError" = "Ошибка сброса исходящего трафика"
+"getOutboundTrafficError" = "Ошибка получения трафика аутбаунда"
+"resetOutboundTrafficError" = "Ошибка сброса трафика аутбаунда"
 
 [tgbot]
 "keyboardClosed" = "❌ Клавиатура закрыта."
@@ -564,7 +564,7 @@
 "noQuery" = "❌ Запрос не найден. Пожалуйста, повторите команду."
 "wentWrong" = "❌ Что-то пошло не так..."
 "noIpRecord" = "❗ Нет записей об IP-адресе."
-"noInbounds" = "❗ У вас не настроено ни одного подключения."
+"noInbounds" = "❗ У вас не настроено ни одного инбаунда."
 "unlimited" = "♾ Безлимит"
 "add" = "Добавить"
 "month" = "Месяц"
@@ -573,7 +573,7 @@
 "days" = "Дней"
 "hours" = "Часов"
 "unknown" = "Неизвестно"
-"inbounds" = "Подключения"
+"inbounds" = "Инбаунды"
 "clients" = "Клиенты"
 "offline" = "🔴 Офлайн"
 "online" = "🟢 Онлайн"
@@ -587,7 +587,7 @@
 "status" = "✅ Бот функционирует нормально."
 "usage" = "❗ Пожалуйста, укажите email для поиска."
 "getID" = "🆔 Ваш User ID: <code>{{ .ID }}</code>"
-"helpAdminCommands" = "🔃 Для перезапуска Xray Core:\r\n<code>/restart</code>\r\n\r\n🔎 Для поиска клиента по email:\r\n<code>/usage [Email]</code>\r\n\r\n📊 Для поиска подключений (со статистикой клиентов):\r\n<code>/inbound [имя подключения]</code>\r\n\r\n🆔 Ваш Telegram User ID:\r\n<code>/id</code>"
+"helpAdminCommands" = "🔃 Для перезапуска Xray Core:\r\n<code>/restart</code>\r\n\r\n🔎 Для поиска клиента по email:\r\n<code>/usage [Email]</code>\r\n\r\n📊 Для поиска инбаундов (со статистикой клиентов):\r\n<code>/inbound [имя подключения]</code>\r\n\r\n🆔 Ваш Telegram User ID:\r\n<code>/id</code>"
 "helpClientCommands" = "💲 Для просмотра информации о вашей подписке используйте команду:\r\n<code>/usage [Email]</code>\r\n\r\n🆔 Ваш Telegram User ID:\r\n<code>/id</code>"
 "restartUsage" = "\r\n\r\n<code>/restart</code>"
 "restartSuccess" = "✅ Ядро Xray успешно перезапущено."
@@ -653,8 +653,8 @@
 "pass_prompt" = "🔑 Стандартный пароль: {{ .ClientPassword }}\n\nВведите ваш пароль."
 "email_prompt" = "📧 Стандартный email: {{ .ClientEmail }}\n\nВведите ваш email."
 "comment_prompt" = "💬 Стандартный комментарий: {{ .ClientComment }}\n\nВведите ваш комментарий."
-"inbound_client_data_id" = "🔄 Подключения: {{ .InboundRemark }}\n\n🔑 ID: {{ .ClientId }}\n📧 Email: {{ .ClientEmail }}\n📊 Трафик: {{ .ClientTraffic }}\n📅 Дата исчерпания: {{ .ClientExp }}\n💬 Комментарий: {{ .ClientComment }}\n\nТеперь вы можете добавить клиента в подключение!"
-"inbound_client_data_pass" = "🔄 Подключения: {{ .InboundRemark }}\n\n🔑 Пароль: {{ .ClientPass }}\n📧 Email: {{ .ClientEmail }}\n📊 Трафик: {{ .ClientTraffic }}\n📅 Дата исчерпания: {{ .ClientExp }}\n💬 Комментарий: {{ .ClientComment }}\n\nТеперь вы можете добавить клиента в подключение!"
+"inbound_client_data_id" = "🔄 Инбаунды: {{ .InboundRemark }}\n\n🔑 ID: {{ .ClientId }}\n📧 Email: {{ .ClientEmail }}\n📊 Трафик: {{ .ClientTraffic }}\n📅 Дата исчерпания: {{ .ClientExp }}\n💬 Комментарий: {{ .ClientComment }}\n\nТеперь вы можете добавить клиента в инбаунд!"
+"inbound_client_data_pass" = "🔄 Инбаунды: {{ .InboundRemark }}\n\n🔑 Пароль: {{ .ClientPass }}\n📧 Email: {{ .ClientEmail }}\n📊 Трафик: {{ .ClientTraffic }}\n📅 Дата исчерпания: {{ .ClientExp }}\n💬 Комментарий: {{ .ClientComment }}\n\nТеперь вы можете добавить клиента в инбаунд!"
 "cancel" = "❌ Процесс отменён! \n\nВы можете снова начать с /start в любое время. 🔄"
 "error_add_client"  = "⚠️ Ошибка:\n\n {{ .error }}"
 "using_default_value"  = "Используется значение по умолчанию👌"
@@ -676,7 +676,7 @@
 "confirmToggle" = "✅ Подтвердить вкл/выкл пользователя?"
 "dbBackup" = "📂 Бэкап БД"
 "serverUsage" = "💻 Состояние сервера"
-"getInbounds" = "🔌 Подключения"
+"getInbounds" = "🔌 Инбаунды"
 "depleteSoon" = "⚠️ Скоро конец"
 "clientUsage" = "Статистика клиента"
 "onlines" = "🟢 Онлайн"
@@ -714,7 +714,7 @@
 [tgbot.answers]
 "successfulOperation" = "✅ Успешно!"
 "errorOperation" = "❗ Ошибка в операции."
-"getInboundsFailed" = "❌ Не удалось получить подключения."
+"getInboundsFailed" = "❌ Не удалось получить инбаунды."
 "getClientsFailed" = "❌ Не удалось получить клиентов."
 "canceled" = "❌ {{ .Email }}: Операция отменена."
 "clientRefreshSuccess" = "✅ {{ .Email }}: Клиент успешно обновлен."
@@ -731,5 +731,5 @@
 "enableSuccess" = "✅ {{ .Email }}: Включено успешно."
 "disableSuccess" = "✅ {{ .Email }}: Отключено успешно."
 "askToAddUserId" = "❌ Ваша конфигурация не найдена!\r\n💭 Пожалуйста, попросите администратора использовать ваш Telegram User ID в конфигурации.\r\n\r\n🆔 Ваш User ID: <code>{{ .TgUserID }}</code>"
-"chooseClient" = "Выберите клиента для подключения {{ .Inbound }}"
-"chooseInbound" = "Выберите подключение"
+"chooseClient" = "Выберите клиента для инбаунда {{ .Inbound }}"
+"chooseInbound" = "Выберите инбаунд"

From 49b8f46864ca21c19eba8733cc2b9d34f806035f Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Wed, 25 Jun 2025 00:30:08 +0700
Subject: [PATCH 7/8] fix: selecting a supported language

english could be selected by default at first load, even if the user's language was supported by the panel
---
 web/assets/js/util/index.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/web/assets/js/util/index.js b/web/assets/js/util/index.js
index c40e02c4..4bf760d7 100644
--- a/web/assets/js/util/index.js
+++ b/web/assets/js/util/index.js
@@ -795,6 +795,25 @@ class LanguageManager {
             if (window.navigator) {
                 lang = window.navigator.language || window.navigator.userLanguage;
 
+                const simularLangs = [
+                    ["ar", this.supportedLanguages[0].value],
+                    ["fa", this.supportedLanguages[2].value],
+                    ["ja", this.supportedLanguages[5].value],
+                    ["ru", this.supportedLanguages[6].value],
+                    ["vi", this.supportedLanguages[7].value],
+                    ["es", this.supportedLanguages[8].value],
+                    ["id", this.supportedLanguages[9].value],
+                    ["uk", this.supportedLanguages[10].value],
+                    ["tr", this.supportedLanguages[11].value],
+                    ["pt", this.supportedLanguages[12].value],
+                ]
+
+                simularLangs.forEach((pair) => {
+                    if (lang === pair[0]) {
+                        lang = pair[1];
+                    }
+                });
+
                 if (LanguageManager.isSupportLanguage(lang)) {
                     CookieManager.setCookie("lang", lang, 150);
                 } else {

From c8c0e77714e294e02fe847c7851092484387b615 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Wed, 25 Jun 2025 00:38:03 +0700
Subject: [PATCH 8/8] chore: mark `2053` port as unsecured

---
 web/html/settings.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/html/settings.html b/web/html/settings.html
index 840778f5..1c55ea81 100644
--- a/web/html/settings.html
+++ b/web/html/settings.html
@@ -548,7 +548,7 @@
           if (!this.allSetting) return [];
           var alerts = []
           if (window.location.protocol !== "https:") alerts.push('{{ i18n "secAlertSSL" }}');
-          if (this.allSetting.webPort == 54321) alerts.push('{{ i18n "secAlertPanelPort" }}');
+          if (this.allSetting.webPort === 2053) alerts.push('{{ i18n "secAlertPanelPort" }}');
           panelPath = window.location.pathname.split('/').length < 4
           if (panelPath && this.allSetting.webBasePath == '/') alerts.push('{{ i18n "secAlertPanelURI" }}');
           if (this.allSetting.subEnable) {