From 729d8549e2b536a10c402a88e0d4cfde9e4baf3f Mon Sep 17 00:00:00 2001
From: Alireza Ahmadi <alireza7@gmail.com>
Date: Mon, 4 Dec 2023 19:17:38 +0100
Subject: [PATCH] new frontend and mobile view #1286

---
 web/assets/js/model/models.js                 |  13 +
 web/assets/js/util/common.js                  |  48 +-
 web/html/common/prompt_modal.html             |   2 +-
 web/html/common/qrcode_modal.html             |   4 +-
 web/html/common/text_modal.html               |   2 +-
 web/html/xui/client_bulk_modal.html           |   8 +-
 web/html/xui/client_modal.html                |   7 +-
 web/html/xui/common_sider.html                |  10 +-
 web/html/xui/component/password.html          |   4 +-
 web/html/xui/component/themeSwitch.html       |  26 +-
 web/html/xui/form/client.html                 |  29 +-
 web/html/xui/form/inbound.html                |   4 +-
 web/html/xui/form/protocol/dokodemo.html      |   2 +-
 web/html/xui/form/protocol/shadowsocks.html   |  93 +-
 web/html/xui/form/protocol/trojan.html        |  99 +-
 web/html/xui/form/protocol/vless.html         | 104 +-
 web/html/xui/form/protocol/vmess.html         |  90 +-
 web/html/xui/form/stream/stream_kcp.html      |   2 +-
 web/html/xui/form/stream/stream_quic.html     |   4 +-
 web/html/xui/form/stream/stream_settings.html |   2 +-
 web/html/xui/form/stream/stream_sockopt.html  |   2 +-
 web/html/xui/form/tls_settings.html           |  29 +-
 web/html/xui/inbound_client_table.html        | 248 ++++-
 web/html/xui/inbound_info_modal.html          |   4 +-
 web/html/xui/inbound_modal.html               |   2 +-
 web/html/xui/inbounds.html                    | 474 ++++++---
 web/html/xui/index.html                       |  73 +-
 web/html/xui/settings.html                    | 825 +---------------
 web/html/xui/xray.html                        | 911 ++++++++++++++++++
 29 files changed, 1698 insertions(+), 1423 deletions(-)
 create mode 100644 web/html/xui/xray.html

diff --git a/web/assets/js/model/models.js b/web/assets/js/model/models.js
index 122145fb..dd602c46 100644
--- a/web/assets/js/model/models.js
+++ b/web/assets/js/model/models.js
@@ -141,6 +141,19 @@ class DBInbound {
         return Inbound.fromJson(config);
     }
 
+    isMultiUser() {
+        switch (this.protocol) {
+            case Protocols.VMESS:
+            case Protocols.VLESS:
+            case Protocols.TROJAN:
+                return true;
+            case Protocols.SHADOWSOCKS:
+                return this.toInbound().isSSMultiUser;
+            default:
+                return false;
+        }
+    }
+
     hasLink() {
         switch (this.protocol) {
             case Protocols.VMESS:
diff --git a/web/assets/js/util/common.js b/web/assets/js/util/common.js
index 8e30bce7..b2f15fb2 100644
--- a/web/assets/js/util/common.js
+++ b/web/assets/js/util/common.js
@@ -52,13 +52,15 @@ function safeBase64(str) {
 
 function formatSecond(second) {
     if (second < 60) {
-        return second.toFixed(0) + ' s';
+        return second.toFixed(0) + 's';
     } else if (second < 3600) {
-        return (second / 60).toFixed(0) + ' m';
+        return (second / 60).toFixed(0) + 'm';
     } else if (second < 3600 * 24) {
-        return (second / 3600).toFixed(0) + ' h';
+        return (second / 3600).toFixed(0) + 'h';
     } else {
-        return (second / 3600 / 24).toFixed(0) + ' d';
+        day = Math.floor(second / 3600 / 24);
+        remain = ((second/3600) - (day*24)).toFixed(0);
+        return day + 'd' + (remain > 0 ? ' ' + remain + 'h' : '');
     }
 }
 
@@ -72,7 +74,7 @@ function addZero(num) {
 
 function toFixed(num, n) {
     n = Math.pow(10, n);
-    return Math.round(num * n) / n;
+    return Math.floor(num * n) / n;
 }
 
 function debounce(fn, delay) {
@@ -115,15 +117,39 @@ function setCookie(cname, cvalue, exdays) {
 function usageColor(data, threshold, total) {
     switch (true) {
         case data === null:
-            return 'blue';
-        case total <= 0:
-            return 'blue';
+            return "green";
+        case total < 0:
+            return "blue";
+        case total == 0:
+            return "purple";
         case data < total - threshold:
-            return 'cyan';
+            return "blue";
         case data < total:
-            return 'orange';
+            return "orange";
         default:
-            return 'red';
+            return "red";
+    }
+}
+
+function userExpiryColor(threshold, client, isDark = false) {
+    if (!client.enable) {
+        return isDark ? '#2c3950' : '#bcbcbc';
+    }
+    now = new Date().getTime(),
+    expiry = client.expiryTime;
+    switch (true) {
+        case expiry === null:
+            return "#389e0d";
+        case expiry < 0:
+            return "#0e49b5";
+        case expiry == 0:
+            return "#7a316f";
+        case now < expiry - threshold:
+            return "#0e49b5";
+        case now < expiry:
+            return "#ffa031";
+        default:
+            return "#e04141";
     }
 }
 
diff --git a/web/html/common/prompt_modal.html b/web/html/common/prompt_modal.html
index 17a65ec1..a61b4454 100644
--- a/web/html/common/prompt_modal.html
+++ b/web/html/common/prompt_modal.html
@@ -2,7 +2,7 @@
 <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
          :closable="true" @ok="promptModal.ok" :mask-closable="false"
          :class="themeSwitcher.darkCardClass"
-         :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
+         :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}' :class="themeSwitcher.currentTheme">
     <a-input id="prompt-modal-input" :type="promptModal.type"
              v-model="promptModal.value"
              :autosize="{minRows: 10, maxRows: 20}"
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html
index 51dc38cb..2db1948b 100644
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -1,7 +1,7 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true"
-         :class="themeSwitcher.darkCardClass"
+         :class="themeSwitcher.currentTheme"
          :footer="null"
          width="300px">
     <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
@@ -13,7 +13,7 @@
     </template>
     <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
     <template v-for="(row, index) in qrModal.qrcodes">
-        <a-tag color="orange" style="margin-top: 10px;display: block;text-align: center;">[[ row.remark ]]</a-tag>
+        <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
         <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" style="width: 100%; height: 100%;"></canvas>
     </template>
 </a-modal>
diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html
index 1514051b..2b455ae4 100644
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -1,7 +1,7 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
          :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
-         :class="themeSwitcher.darkCardClass"
+         :class="themeSwitcher.currentTheme"
          :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}">
     <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
               :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index d5c60b76..f758f627 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -1,11 +1,11 @@
 {{define "clientsBulkModal"}}
 <a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title" @ok="clientsBulkModal.ok"
          :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false"
-         :class="themeSwitcher.darkCardClass"
+         :class="themeSwitcher.currentTheme"
          :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'>
     <a-form layout="inline">
         <a-form-item label='{{ i18n "pages.client.method" }}'>
-            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="themeSwitcher.darkCardClass">
+            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="themeSwitcher.currentTheme">
                 <a-select-option :value="0">Random</a-select-option>
                 <a-select-option :value="1">Random+Prefix</a-select-option>
                 <a-select-option :value="2">Random+Prefix+Num</a-select-option>
@@ -72,13 +72,13 @@
         </a-form-item>
         <br>
         <a-form-item v-if="clientsBulkModal.inbound.xtls" label="Flow">
-            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
+            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.currentTheme">
                 <a-select-option value="">{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
             </a-select>
         </a-form-item>
         <a-form-item v-if="clientsBulkModal.inbound.canEnableTlsFlow()" label="Flow" layout="inline">
-            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
+            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.currentTheme">
                 <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                 <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
             </a-select>
diff --git a/web/html/xui/client_modal.html b/web/html/xui/client_modal.html
index e7c23098..b2c03129 100644
--- a/web/html/xui/client_modal.html
+++ b/web/html/xui/client_modal.html
@@ -1,8 +1,11 @@
 {{define "clientsModal"}}
 <a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok"
          :confirm-loading="clientModal.confirmLoading" :closable="true" :mask-closable="false"
-         :class="themeSwitcher.darkCardClass"
+         :class="themeSwitcher.currentTheme"
          :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
+    <template v-if="isEdit">
+        <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag>
+    </template>
     {{template "form/client"}}
 </a-modal>
 <script>
@@ -151,7 +154,7 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                     content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
-                    class: themeSwitcher.darkCardClass,
+                    class: themeSwitcher.currentTheme,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: async () => {
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index 58072f82..12a8ed41 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -11,6 +11,10 @@
     <a-icon type="setting"></a-icon>
     <span>{{ i18n "menu.settings"}}</span>
 </a-menu-item>
+<a-menu-item key="{{ .base_path }}xui/xray">
+    <a-icon type="tool"></a-icon>
+    <span>{{ i18n "menu.xray"}}</span>
+</a-menu-item>
 <!--<a-menu-item key="{{ .base_path }}panel/clients">-->
 <!--    <a-icon type="laptop"></a-icon>-->
 <!--    <span>Client</span>-->
@@ -26,7 +30,7 @@
 <a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md" collapsed-width="0">
     <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
-            <a-icon type="bg-colors"></a-icon>
+            <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
             <theme-switch />
         </a-menu-item>
     </a-menu>
@@ -38,14 +42,14 @@
 <a-drawer id="sider-drawer" placement="left" :closable="false"
           @close="siderDrawer.close()"
           :visible="siderDrawer.visible"
-          :wrap-class-name="themeSwitcher.darkDrawerClass"
+          :wrap-class-name="themeSwitcher.currentTheme"
           :wrap-style="{ padding: 0 }">
     <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
         <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
     </div>
     <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
-            <a-icon type="bg-colors"></a-icon>
+            <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
             <theme-switch />
         </a-menu-item>
     </a-menu>
diff --git a/web/html/xui/component/password.html b/web/html/xui/component/password.html
index ebea3be6..13dbfb51 100644
--- a/web/html/xui/component/password.html
+++ b/web/html/xui/component/password.html
@@ -4,12 +4,12 @@
             :placeholder="placeholder"
             @input="$emit('input', $event.target.value)">
         <template v-if="icon" #prefix>
-            <a-icon :type="icon" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+            <a-icon :type="icon" style="font-size: 16px;" />
         </template>
         <template #addonAfter>
             <a-icon :type="showPassword ? 'eye-invisible' : 'eye'"
                     @click="toggleShowPassword"
-                    :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+                    style="font-size: 16px;" />
         </template>
     </a-input>
 </template>
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
index 7cbedecf..4d5412e2 100644
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -1,8 +1,6 @@
 {{define "component/themeSwitchTemplate"}}
 <template>
-  <a-switch :default-checked="themeSwitcher.isDarkTheme"
-            checked-children="☀"
-            un-checked-children="🌙"
+  <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
             @change="themeSwitcher.toggleTheme()">
   </a-switch>
 </template>
@@ -10,39 +8,17 @@
 
 {{define "component/themeSwitcher"}}
 <script>
-  const colors = {
-    dark: {
-      bg: "#242c3a",
-      text: "hsla(0,0%,100%,.65)"
-    },
-    light: {
-      bg: '#f0f2f5',
-      text: "rgba(0, 0, 0, 0.7)",
-    }
-  }
-
   function createThemeSwitcher() {
     const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
     const theme = isDarkTheme ? 'dark' : 'light';
     return {
       isDarkTheme,
-      bgStyle: `background: ${colors[theme].bg};`,
-      textStyle: `color: ${colors[theme].text};`,
-      darkClass: isDarkTheme ? 'ant-dark' : '',
-      darkCardClass: isDarkTheme ? 'ant-card-dark' : '',
-      darkDrawerClass: isDarkTheme ? 'ant-drawer-dark' : '',
       get currentTheme() {
         return this.isDarkTheme ? 'dark' : 'light';
       },
       toggleTheme() {
         this.isDarkTheme = !this.isDarkTheme;
-        this.theme = this.isDarkTheme ? 'dark' : 'light';
         localStorage.setItem('dark-mode', this.isDarkTheme);
-        this.bgStyle = `background: ${colors[this.theme].bg};`;
-        this.textStyle = `color: ${colors[this.theme].text};`;
-        this.darkClass = this.isDarkTheme ? 'ant-dark' : '';
-        this.darkCardClass = this.isDarkTheme ? 'ant-card-dark' : '';
-        this.darkDrawerClass = this.isDarkTheme ? 'ant-drawer-dark' : '';
       },
     };
   }
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 4fd5b8e3..63080ab7 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -1,10 +1,5 @@
 {{define "form/client"}}
 <a-form layout="inline" v-if="client">
-    <template v-if="isEdit">
-        <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;">
-            Account is (Expired|Traffic Ended) And Disabled
-        </a-tag>
-    </template>
     <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
         <a-switch v-model="client.enable"></a-switch>
     </a-form-item>
@@ -97,13 +92,13 @@
     </a-form-item>
     <br>
     <a-form-item v-if="inbound.xtls" label="Flow">
-        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="">{{ i18n "none" }}</a-select-option>
             <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
     <a-form-item v-else-if="inbound.canEnableTlsFlow()" label="Flow">
-        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
             <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
         </a-select>
@@ -136,10 +131,10 @@
     </a-form-item>
     <br>
     <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-        <a-switch v-model="clientModal.delayedStart" @click="client._expiryTime=0"></a-switch>
+        <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
     </a-form-item>
     <br>
-    <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientModal.delayedStart">
+    <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="delayedStart">
         <a-input-number v-model="delayedExpireDays" :min="0"></a-input-number>
     </a-form-item>
     <a-form-item v-else>
@@ -153,9 +148,21 @@
             </a-tooltip>
         </span>
         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                       :dropdown-class-name="themeSwitcher.darkCardClass"
+                       :dropdown-class-name="themeSwitcher.currentTheme"
                        v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
-        <a-tag color="red" v-if="isExpiry">Expired</a-tag>
+        <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
+    </a-form-item>
+    <a-form-item v-if="client.expiryTime != 0">
+        <span slot="label">
+            <span>{{ i18n "pages.client.renew" }}</span>
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.client.renewDesc" }}</span>
+                </template>
+                <a-icon type="question-circle" theme="filled"></a-icon>
+            </a-tooltip>
+        </span>
+        <a-input-number v-model.number="client.reset" :min="0"></a-input-number>
     </a-form-item>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index e5b3bfc3..40a96d1e 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -9,7 +9,7 @@
         <a-input v-model.trim="dbInbound.remark"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -53,7 +53,7 @@
             </a-tooltip>
         </span>
         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                       :dropdown-class-name="themeSwitcher.darkCardClass"
+                       :dropdown-class-name="themeSwitcher.currentTheme"
                        v-model="dbInbound._expiryTime" style="width: 250px;"></a-date-picker>
     </a-form-item>
 </a-form>
diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html
index 0eed31d4..6a37f346 100644
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -8,7 +8,7 @@
     </a-form-item>
     <br>
     <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
-        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="tcp,udp">TCP+UDP</a-select-option>
             <a-select-option value="tcp">TCP</a-select-option>
             <a-select-option value="udp">UDP</a-select-option>
diff --git a/web/html/xui/form/protocol/shadowsocks.html b/web/html/xui/form/protocol/shadowsocks.html
index 486b372f..001a7006 100644
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -3,94 +3,7 @@
     <template v-if="inbound.isSSMultiUser">
     <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.shadowsockses.slice(0,1)" v-if="!isEdit">
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.email" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
-                        </template>
-                    </a-tooltip>
-                </span>
-                <a-icon @click="client.email = RandomUtil.randomLowerAndNum(8)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
-            </a-form-item>
-            <a-form-item label="Password">
-                <a-icon @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-                <a-input v-model.trim="client.password" style="width: 250px;"></a-input>
-            </a-form-item>
-            <a-form-item v-if="client.email && app.subSettings.enable">
-                <span slot="label">
-                    Subscription
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
-            </a-form-item>
-            <a-form-item v-if="client.email && app.tgBotEnable">
-                <span slot="label">
-                    Telegram ID
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.tgId"></a-input>
-            </a-form-item>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input-number v-model="client.limitIp" min="0"></a-input-number>
-            </a-form-item>
-            <br>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
-                    <a-tooltip>
-                        <template slot="title">
-                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-            </a-form-item>
-            <br>
-            <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-                <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-            </a-form-item>
-            <br>
-            <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
-                <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-            </a-form-item>
-            <a-form-item v-else>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                :dropdown-class-name="themeSwitcher.darkCardClass"
-                                v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
-            </a-form-item>
+            {{template "form/client"}}
         </a-collapse-panel>
     </a-collapse>
     <a-collapse v-else>
@@ -111,7 +24,7 @@
 </a-form>
 <a-form layout="inline">
     <a-form-item label='{{ i18n "encryption" }}'>
-        <a-select v-model="inbound.settings.method" style="width: 250px;" :dropdown-class-name="themeSwitcher.darkCardClass" @change="SSMethodChange">
+        <a-select v-model="inbound.settings.method" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme" @change="SSMethodChange">
             <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -120,7 +33,7 @@
         <a-input v-model.trim="inbound.settings.password" style="width: 250px;"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
-        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="tcp,udp">TCP+UDP</a-select-option>
             <a-select-option value="tcp">TCP</a-select-option>
             <a-select-option value="udp">UDP</a-select-option>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index 46ae5e32..b2ac3dba 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -2,100 +2,7 @@
 <a-form layout="inline" style="padding: 10px 0px;">
     <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.trojans.slice(0,1)" v-if="!isEdit">
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.email" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
-                        </template>
-                    </a-tooltip>
-                </span>
-                <a-icon @click="client.email = RandomUtil.randomLowerAndNum(8)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
-            </a-form-item>
-            <a-form-item label="Password">
-                <a-icon @click="client.password = RandomUtil.randomSeq(10)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.password" style="width: 150px;"></a-input>
-            </a-form-item>
-            <a-form-item v-if="client.email && app.subSettings.enable">
-                <span slot="label">
-                    Subscription
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
-            </a-form-item>
-            <a-form-item v-if="client.email && app.tgBotEnable">
-                <span slot="label">
-                    Telegram ID
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.tgId"></a-input>
-            </a-form-item>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input-number v-model="client.limitIp" min="0"></a-input-number>
-            </a-form-item>
-            <br>
-            <a-form-item v-if="inbound.xtls" label="Flow">
-                <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="themeSwitcher.darkCardClass">
-                    <a-select-option value="">{{ i18n "none" }}</a-select-option>
-                    <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
-                    <a-tooltip>
-                        <template slot="title">
-                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-            </a-form-item>
-            <br>
-            <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-                <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-            </a-form-item>
-            <br>
-            <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
-                <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-            </a-form-item>
-            <a-form-item v-else>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                :dropdown-class-name="themeSwitcher.darkCardClass"
-                                v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
-            </a-form-item>
+            {{template "form/client"}}
         </a-collapse-panel>
     </a-collapse>
     <a-collapse v-else>
@@ -126,7 +33,7 @@
 
     <!-- trojan fallbacks -->
     <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
-        <a-divider>
+        <a-divider style="margin:0;">
             fallback[[ index + 1 ]]
             <a-icon type="delete" @click="() => inbound.settings.delTrojanFallback(index)"
                     style="color: rgb(255, 77, 79);cursor: pointer;"/>
@@ -146,7 +53,7 @@
         <a-form-item label="xVer">
             <a-input-number v-model="fallback.xver"></a-input-number>
         </a-form-item>
-        <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
     </a-form>
+    <a-divider style="margin:0;"></a-divider>
 </template>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 12729eff..261e6616 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -2,106 +2,7 @@
 <a-form layout="inline" style="padding: 10px 0px;">
     <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.email" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
-                        </template>
-                    </a-tooltip>
-                </span>
-                <a-icon @click="client.email = RandomUtil.randomLowerAndNum(8)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
-            </a-form-item>
-            <a-form-item label="ID">
-                <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"> </a-icon>
-                <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
-            </a-form-item>
-            <a-form-item v-if="client.email && app.subSettings.enable">
-                <span slot="label">
-                    Subscription
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
-            </a-form-item>
-            <a-form-item v-if="client.email && app.tgBotEnable">
-                <span slot="label">
-                    Telegram ID
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.tgId"></a-input>
-            </a-form-item>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input-number v-model="client.limitIp" min="0"></a-input-number>
-            </a-form-item>
-            <br>
-            <a-form-item v-if="inbound.xtls" label="Flow">
-                <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
-                    <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                    <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item v-else-if="inbound.canEnableTlsFlow()" label="Flow">
-                <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
-                    <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                    <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                </a-select>
-            </a-form-item>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
-                    <a-tooltip>
-                        <template slot="title">
-                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-            </a-form-item>
-            <br>
-            <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-                <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-            </a-form-item>
-            <br>
-            <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
-                <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-            </a-form-item>
-            <a-form-item v-else>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                               :dropdown-class-name="themeSwitcher.darkCardClass"
-                               v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
-            </a-form-item>
+            {{template "form/client"}}
         </a-collapse-panel>     
     </a-collapse>
     <a-collapse v-else>
@@ -134,7 +35,7 @@
     
     <!-- vless fallbacks -->
     <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
-        <a-divider>
+        <a-divider style="margin:0;">
             fallback[[ index + 1 ]]
             <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                     style="color: rgb(255, 77, 79);cursor: pointer;"/>
@@ -154,7 +55,6 @@
         <a-form-item label="xVer">
             <a-input-number v-model="fallback.xver"></a-input-number>
         </a-form-item>
-        <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
     </a-form>
 </template>
 {{end}}
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index c008f1c0..6d89c1b5 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -2,95 +2,7 @@
 <a-form layout="inline" style="padding: 10px 0px;">
     <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vmesses.slice(0,1)" v-if="!isEdit">
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.email" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
-                        </template>
-                    </a-tooltip>
-                </span>
-                <a-icon @click="client.email = RandomUtil.randomLowerAndNum(8)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
-            </a-form-item>
-            <br>
-            <a-form-item label="ID">
-                <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"> </a-icon>
-                <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
-            </a-form-item>
-            <a-form-item v-if="client.email && app.subSettings.enable">
-                <span slot="label">
-                    Subscription
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"> </a-icon>
-                <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
-            </a-form-item>
-            <a-form-item v-if="client.email && app.tgBotEnable">
-                <span slot="label">
-                    Telegram ID
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input v-model.trim="client.tgId"></a-input>
-            </a-form-item>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input-number v-model="client.limitIp" min="0"></a-input-number>
-            </a-form-item>
-            <br>
-            <a-form-item>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
-                    <a-tooltip>
-                        <template slot="title">
-                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-            </a-form-item>
-            <br>
-            <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-                <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-            </a-form-item>
-            <br>
-            <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
-                <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-            </a-form-item>
-            <a-form-item v-else>
-                <span slot="label">
-                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </span>
-                <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                :dropdown-class-name="themeSwitcher.darkCardClass"
-                                v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
-            </a-form-item>
+            {{template "form/client"}}
         </a-collapse-panel>     
     </a-collapse>
     <a-collapse v-else>
diff --git a/web/html/xui/form/stream/stream_kcp.html b/web/html/xui/form/stream/stream_kcp.html
index 0d6df9e3..59b708bf 100644
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -1,7 +1,7 @@
 {{define "form/streamKCP"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="none">None (Not Camouflage)</a-select-option>
             <a-select-option value="srtp">SRTP (Camouflage Video Call)</a-select-option>
             <a-select-option value="utp">UTP (Camouflage BT Download)</a-select-option>
diff --git a/web/html/xui/form/stream/stream_quic.html b/web/html/xui/form/stream/stream_quic.html
index 53e60b2d..d4e22dd7 100644
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/web/html/xui/form/stream/stream_quic.html
@@ -1,7 +1,7 @@
 {{define "form/streamQUIC"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
-        <a-select v-model="inbound.stream.quic.security" style="width: 165px;" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="inbound.stream.quic.security" style="width: 165px;" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="none">none</a-select-option>
             <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
             <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
@@ -12,7 +12,7 @@
         <a-input v-model.trim="inbound.stream.quic.key" style="width: 150px;"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.quic.type" style="width: 280px;" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="inbound.stream.quic.type" style="width: 280px;" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="none">none (not camouflage)</a-select-option>
             <a-select-option value="srtp">srtp (camouflage video call)</a-select-option>
             <a-select-option value="utp">utp (camouflage BT download)</a-select-option>
diff --git a/web/html/xui/form/stream/stream_settings.html b/web/html/xui/form/stream/stream_settings.html
index e50caf19..cac65207 100644
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -2,7 +2,7 @@
 <!-- select stream network -->
 <a-form layout="inline">
     <a-form-item label='{{ i18n "transmission" }}'>
-        <a-select v-model="inbound.stream.network" @change="streamNetworkChange" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="inbound.stream.network" @change="streamNetworkChange" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="tcp">TCP</a-select-option>
             <a-select-option value="kcp">KCP</a-select-option>
             <a-select-option value="ws">WS</a-select-option>
diff --git a/web/html/xui/form/stream/stream_sockopt.html b/web/html/xui/form/stream/stream_sockopt.html
index d90bf206..5da2f8af 100644
--- a/web/html/xui/form/stream/stream_sockopt.html
+++ b/web/html/xui/form/stream/stream_sockopt.html
@@ -33,7 +33,7 @@
             <td>
                 <a-form-item>
                     <a-select v-model="inbound.stream.sockopt.tproxy" style="width: 250px;"
-                        :dropdown-class-name="themeSwitcher.darkCardClass">
+                        :dropdown-class-name="themeSwitcher.currentTheme">
                         <a-select-option value="off">OFF</a-select-option>
                         <a-select-option value="redirect">Redirect</a-select-option>
                         <a-select-option value="tproxy">T-Proxy</a-select-option>
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index ce3e0fe4..493aef75 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -1,6 +1,7 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
 <a-form layout="inline" v-if="inbound.canSetTls()">
+    <a-divider style="margin:0;"></a-divider>
     <a-form-item v-if="inbound.canEnableTls()" label="TLS">
         <a-switch v-model="inbound.tls">
         </a-switch>
@@ -54,27 +55,27 @@
         <a-input v-model.trim="inbound.stream.tls.server" style="width: 250px"></a-input>
     </a-form-item>
     <a-form-item label="CipherSuites">
-        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px" :dropdown-class-name="themeSwitcher.darkCardClass">
+        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="">auto</a-select-option>
-            <a-select-option v-for="key in TLS_CIPHER_OPTION" :value="key">[[ key ]]</a-select-option>
+            <a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[ value ]]</a-select-option>
         </a-select>
     </a-form-item>
-    <a-form-item label="MinVersion">
-        <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px" :dropdown-class-name="themeSwitcher.darkCardClass">
-            <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-        </a-select>
-    </a-form-item>
-    <a-form-item label="MaxVersion">
-        <a-select v-model="inbound.stream.tls.maxVersion" style="width: 60px" :dropdown-class-name="themeSwitcher.darkCardClass">
-            <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-        </a-select>
+    <a-form-item label="Min/Max Version">
+        <a-input-group compact>
+            <a-select style="width: 60px" v-model="inbound.stream.tls.minVersion" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+            <a-select style="width: 60px" v-model="inbound.stream.tls.maxVersion" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-input-group>
     </a-form-item>
     <a-form-item label="SNI" placeholder="Server Name Indication">
         <a-input v-model.trim="inbound.stream.tls.settings.serverName" style="width: 250px"></a-input>
     </a-form-item>
     <a-form-item label="uTLS">
         <a-select v-model="inbound.stream.tls.settings.fingerprint"
-                  style="width: 170px" :dropdown-class-name="themeSwitcher.darkCardClass">
+                  style="width: 170px" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value=''>None</a-select-option>
             <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
         </a-select>
@@ -83,7 +84,7 @@
         <a-select
             mode="multiple"
             style="width: 250px"
-            :dropdown-class-name="themeSwitcher.darkCardClass"
+            :dropdown-class-name="themeSwitcher.currentTheme"
             v-model="inbound.stream.tls.alpn">
             <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
         </a-select>
@@ -185,7 +186,7 @@
     </a-form-item>
     <a-form-item label="uTLS">
         <a-select v-model="inbound.stream.reality.settings.fingerprint" 
-                    style="width: 135px" :dropdown-class-name="themeSwitcher.darkCardClass">
+                    style="width: 135px" :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/inbound_client_table.html
index 138c91c3..5109fb28 100644
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/inbound_client_table.html
@@ -2,34 +2,66 @@
 <template slot="actions" slot-scope="text, client, index">
     <a-tooltip>
         <template slot="title">{{ i18n "qrCode" }}</template>
-        <a-icon style="font-size: 24px;" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record,index);"></a-icon>
+        <a-icon style="font-size: 24px;" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record,index);"></a-icon>
     </a-tooltip>
     <a-tooltip>
         <template slot="title">{{ i18n "pages.client.edit" }}</template>
-        <a-icon style="font-size: 24px;" type="edit" @click="openEditClient(record.id,client);"></a-icon>
+        <a-icon style="font-size: 24px;" class="normal-icon" type="edit" @click="openEditClient(record.id,client);"></a-icon>
     </a-tooltip>
     <a-tooltip>
         <template slot="title">{{ i18n "info" }}</template>
-        <a-icon style="font-size: 24px;" type="info-circle" @click="showInfo(record,index);"></a-icon>
+        <a-icon style="font-size: 24px;" class="normal-icon" type="info-circle" @click="showInfo(record,index);"></a-icon>
     </a-tooltip>
     <a-tooltip>
         <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-        <a-icon style="font-size: 24px;" type="retweet" @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0"></a-icon>
+        <a-popconfirm @confirm="resetClientTraffic(client,record.id,false)"
+            title='{{ i18n "pages.inbounds.resetTrafficContent"}}'
+            :overlay-class-name="themeSwitcher.currentTheme"
+            ok-text='{{ i18n "reset"}}'
+            cancel-text='{{ i18n "cancel"}}'>
+            <a-icon slot="icon" type="question-circle-o" style="color: blue"></a-icon>
+            <a-icon style="font-size: 24px;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
+        </a-popconfirm>
     </a-tooltip>
     <a-tooltip>
         <template slot="title"><span style="color: #FF4D4F"> {{ i18n "delete"}}</span></template>
-        <a-icon style="font-size: 24px;" type="delete" v-if="isRemovable(record.id)" @click="delClient(record.id,client)"></a-icon>
+        <a-popconfirm @confirm="delClient(record.id,client,false)"
+            title='{{ i18n "pages.inbounds.deleteClientContent"}}'
+            :overlay-class-name="themeSwitcher.currentTheme"
+            ok-text='{{ i18n "delete"}}'
+            ok-type="danger"
+            cancel-text='{{ i18n "cancel"}}'>
+            <a-icon slot="icon" type="question-circle-o" style="color: #e04141"></a-icon>
+            <a-icon style="font-size: 24px" class="delete-icon" type="delete" v-if="isRemovable(record.id)"></a-icon>
+        </a-popconfirm>
     </a-tooltip>
 </template>
 <template slot="enable" slot-scope="text, client, index">
     <a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch>
 </template>   
+<template slot="online" slot-scope="text, client, index">
+    <template v-if="isClientOnline(client.email)">
+        <a-tag color="green">{{ i18n "online" }}</a-tag>
+    </template>
+    <template v-else>
+        <a-tag>{{ i18n "offline" }}</a-tag>
+    </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="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 ]]
     <a-tag v-if="!isClientEnabled(record, client.email)" color="red">{{ i18n "depleted" }}</a-tag>
 </template>                                    
 <template slot="traffic" slot-scope="text, client">
-    <a-popover :overlay-class-name="themeSwitcher.darkClass">
+    <a-popover :overlay-class-name="themeSwitcher.currentTheme">
         <template slot="content" v-if="client.email">
             <table cellpadding="2" width="100%">
                 <tr>
@@ -38,28 +70,200 @@
                 </tr>
                 <tr v-if="client.totalGB > 0">
                     <td>{{ i18n "remained" }}</td>
-                    <td>[[ sizeFormat(client.totalGB - getUpStats(record, client.email) - getDownStats(record, client.email)) ]]</td>
+                    <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
                 </tr>
             </table>
         </template>
-        <a-tag :color="statsColor(record, client.email)">
-            [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] /
-            <template v-if="client.totalGB > 0">[[client._totalGB]]GB</template>
-            <template v-else>
-                <svg style="fill: currentColor; height: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><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"/></svg>
-            </template>
-        </a-tag>
+        <table>
+            <tr>
+                <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
+                    [[ sizeFormat(getSumStats(record, client.email)) ]]
+                </td>
+                <td width="120px" v-if="!client.enable">
+                    <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'"
+                                :show-info="false"
+                                :percent="statsProgress(record, client.email)"/>
+                </td>
+                <td width="120px" v-else-if="client.totalGB > 0">
+                    <a-progress :stroke-color="statsColor(record, client.email)"
+                                :show-info="false"
+                                :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
+                                :percent="statsProgress(record, client.email)"/>
+                </td>
+                <td width="120px" v-else class="infinite-bar">
+                    <a-progress
+                    :show-info="false"
+                    :status="isClientOnline(client.email)? 'active' : ''"
+                    :percent="100"></a-progress>
+                </td>
+                <td width="60px">
+                    <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
+                    <span v-else style="font-weight: 100;font-size: 14pt;">&infin;</span>
+                </td>
+            </tr>
+        </table>
     </a-popover>
 </template>                                    
 <template slot="expiryTime" slot-scope="text, client, index">
-    <template v-if="client.expiryTime > 0">
-        <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, client.expiryTime)">
-            [[ DateUtil.formatMillis(client._expiryTime) ]]
-        </a-tag>
+    <template v-if="client.expiryTime !=0 && client.reset >0">
+        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+            <template slot="content">
+                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
+                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
+            </template>
+            <table>
+                <tr>
+                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
+                        [[ remainedDays(client.expiryTime) ]]
+                    </td>
+                    <td width="120px" class="infinite-bar">
+                        <a-progress :show-info="false"
+                        :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
+                        :percent="expireProgress(client.expiryTime, client.reset)"/>
+                    </td>
+                    <td width="60px">[[ client.reset + "d" ]]</td>
+                </tr>
+            </table>
+        </a-popover>
     </template>
-    <a-tag v-else-if="client.expiryTime < 0" color="cyan">
-        [[ client._expiryTime ]] {{ i18n "pages.client.days" }}
-    </a-tag>
-    <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
+    <template v-else>
+        <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
+            <template slot="content">
+                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
+                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
+            </template>
+        <a-tag style="min-width: 50px; border: none;" :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)">
+            [[ remainedDays(client.expiryTime) ]]
+        </a-tag>
+        </a-popover>
+        <a-tag v-else :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" style="border: 0;" class="infinite-tag">&infin;</a-tag>
+    </template>
+</template>
+<template slot="actionMenu" slot-scope="text, client, index">
+    <a-dropdown :trigger="['click']">
+        <a-icon @click="e => e.preventDefault()" type="ellipsis" style="font-size: 20px;"></a-icon>
+        <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
+            <a-menu-item v-if="record.hasLink()" @click="showQrcode(record.id,client);">
+                <a-icon style="font-size: 14px;" type="qrcode"></a-icon>
+                {{ i18n "qrCode" }}
+            </a-menu-item>
+            <a-menu-item @click="openEditClient(record.id,client);">
+                <a-icon style="font-size: 14px;" type="edit"></a-icon>
+                {{ i18n "pages.client.edit" }}
+            </a-menu-item>
+            <a-menu-item @click="showInfo(record.id,client);">
+                <a-icon style="font-size: 14px;" type="info-circle"></a-icon>
+                {{ i18n "info" }}
+            </a-menu-item>
+            <a-menu-item @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0">
+                <a-icon style="font-size: 14px;" type="retweet"></a-icon>
+                {{ i18n "pages.inbounds.resetTraffic" }}
+            </a-menu-item>
+            <a-menu-item v-if="isRemovable(record.id)" @click="delClient(record.id,client)">
+                <a-icon style="font-size: 14px;" type="delete"></a-icon>
+                <span style="color: #FF4D4F"> {{ i18n "delete"}}</span>
+            </a-menu-item>
+            <a-menu-item>
+                <a-switch v-model="client.enable" size="small" @change="switchEnableClient(record.id,client)">
+                </a-switch>
+                    {{ i18n "enable"}}
+            </a-menu-item>
+        </a-menu>
+    </a-dropdown>
+</template>
+<template slot="info" slot-scope="text, client, index">
+    <a-popover placement="bottomRight" :overlay-class-name="themeSwitcher.currentTheme" trigger="click">
+        <template slot="content">
+            <table>
+                <tr>
+                    <td colspan="3" style="text-align: center;">{{ i18n "pages.inbounds.traffic" }}</td>
+                </tr>
+                <tr>
+                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
+                        [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]]
+                    </td>
+                    <td width="120px" v-if="!client.enable">
+                        <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'"
+                                    :show-info="false"
+                                    :percent="statsProgress(record, client.email)"/>
+                    </td>
+                    <td width="120px" v-else-if="client.totalGB > 0">
+                        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                            <template slot="content" v-if="client.email">
+                                <table cellpadding="2" width="100%">
+                                    <tr>
+                                        <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
+                                        <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
+                                    </tr>
+                                    <tr>
+                                        <td>{{ i18n "remained" }}</td>
+                                        <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
+                                    </tr>
+                                </table>
+                            </template>
+                            <a-progress :stroke-color="statsColor(record, client.email)"
+                                        :show-info="false"
+                                        :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
+                                        :percent="statsProgress(record, client.email)"/>
+                        </a-popover>
+                    </td>
+                    <td width="120px" v-else class="infinite-bar">
+                        <a-progress :stroke-color="themeSwitcher.isDarkTheme ? '#2c1e32':'#F2EAF1'"
+                        :show-info="false"
+                        :status="isClientOnline(client.email)? 'active' : ''"
+                        :percent="100"></a-progress>
+                    </td>
+                    <td width="80px">
+                        <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
+                        <span v-else style="font-weight: 100;font-size: 14pt;">&infin;</span>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="3" style="text-align: center;">
+                        <a-divider style="margin: 0; border-collapse: separate;"></a-divider>
+                        {{ i18n "pages.inbounds.expireDate" }}
+                    </td>
+                </tr>
+                <tr>
+                <template v-if="client.expiryTime !=0 && client.reset >0">
+                    <td width="80px" style="margin:0; text-align: right;font-size: 1em;">
+                        [[ remainedDays(client.expiryTime) ]]
+                    </td>
+                    <td width="120px" class="infinite-bar">
+                        <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+                            <template slot="content">
+                                <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
+                                <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
+                            </template>
+                            <a-progress :show-info="false"
+                            :status="isClientOnline(client.email)? 'active' : isClientEnabled(record, client.email)? 'exception' : ''"
+                            :percent="expireProgress(client.expiryTime, client.reset)"/>
+                        </a-popover>
+                    </td>
+                    <td width="60px">[[ client.reset + "d" ]]</td>
+                </template>
+                <template v-else>
+                    <td colspan="3" style="text-align: center;">
+                            <a-popover v-if="client.expiryTime != 0" :overlay-class-name="themeSwitcher.currentTheme">
+                                <template slot="content">
+                                    <span v-if="client.expiryTime < 0">{{ i18n "pages.client.delayedStart" }}</span>
+                                    <span v-else>[[ DateUtil.formatMillis(client._expiryTime) ]]</span>
+                                </template>
+                                <a-tag style="min-width: 50px; border: none;" 
+                                    :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)">
+                                    [[ remainedDays(client.expiryTime) ]]
+                                </a-tag>
+                            </a-popover>
+                            <a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">&infin;</a-tag>
+                        </template>
+                    </td>
+                </tr>
+            </table>
+        </template>
+        <a-badge>
+            <a-icon v-if="!client.enable" slot="count" type="pause-circle" :style="'color: ' + themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-icon>
+            <a-button shape="round" size="small" style="font-size: 14px; padding: 0 10px;"><a-icon type="solution"></a-icon></a-button>
+        </a-badge>
+    </a-popover>
 </template>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html
index a82451b3..ba4ec980 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -3,7 +3,7 @@
     v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
     :closable="true"
     :mask-closable="true"
-    :class="themeSwitcher.darkCardClass"
+    :class="themeSwitcher.currentTheme"
     :footer="null"
     width="600px"
     >
@@ -315,7 +315,7 @@
                 if (infoModal.clientStats) {
                     return infoModal.clientStats.enable;
                 }
-                return infoModal.dbInbound.isEnable;
+                return true;
             },
             get isEnable() {
                 if (infoModal.clientSettings) {
diff --git a/web/html/xui/inbound_modal.html b/web/html/xui/inbound_modal.html
index a18d7731..99cb05fe 100644
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -1,7 +1,7 @@
 {{define "inboundModal"}}
 <a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title" @ok="inModal.ok"
          :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
-         :class="themeSwitcher.darkCardClass"
+         :class="themeSwitcher.currentTheme"
          :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/inbound"}}
 </a-modal>
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 4e1873f8..27612917 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -8,27 +8,56 @@
         }
     }
 
+    @media (max-width: 768px) {
+        .ant-card-body {
+            padding: .5rem;
+        }
+    }
+
     .ant-col-sm-24 {
-        margin-top: 10px;
+        margin: 0.5rem -2rem 0.5rem 2rem;
     }
     tr.hideExpandIcon .ant-table-row-expand-icon {
         display: none;
     }
+    .infinite-tag {
+        padding: 0 5px;
+        border-radius: 2rem;
+        min-width: 50px;
+    }
+    .infinite-bar .ant-progress-inner .ant-progress-bg {
+        background-color: #F2EAF1;
+        border: #D5BED2 solid 1px;
+    }
+    .dark .infinite-bar .ant-progress-inner .ant-progress-bg {
+        background-color: #3c1536;
+        border: #7a316f solid 1px;
+    }
+    .ant-collapse {
+        margin: 5px 0;
+    }
+    .online-animation .ant-badge-status-dot {
+        animation: 1.2s ease infinite normal none running onlineAnimation;
+    }
+    @keyframes onlineAnimation {
+        0%, 50%, 100%   { transform: scale(1);  opacity:  1; }
+        10%             { transform: scale(1.5); opacity: .2; }
+    }
 </style>
 
 <body>
-<a-layout id="app" v-cloak>
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
     {{ template "commonSider" . }}
-    <a-layout id="content-layout" :style="themeSwitcher.bgStyle">
+    <a-layout id="content-layout">
         <a-layout-content>
-            <a-spin :spinning="spinning" :delay="500" tip="loading">
+            <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
                 <transition name="list" appear>
                     <a-tag v-if="false" color="red" style="margin-bottom: 10px">
                         Please go to the panel settings as soon as possible to modify the username and password, otherwise there may be a risk of leaking account information
                     </a-tag>
                 </transition>
                 <transition name="list" appear>
-                    <a-card hoverable style="margin-bottom: 20px;" :class="themeSwitcher.darkCardClass">
+                    <a-card hoverable>
                         <a-row>
                             <a-col :xs="24" :sm="24" :lg="12">
                                 {{ i18n "pages.inbounds.totalDownUp" }}:
@@ -45,36 +74,46 @@
                             <a-col :xs="24" :sm="24" :lg="12">
                                 {{ i18n "clients" }}:
                                 <a-tag color="green">[[ total.clients ]]</a-tag>
-                                <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.darkClass">
+                                <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.deactive">[[ clientEmail ]]</p>
                                     </template>
                                     <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.darkClass">
+                                <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.depleted">[[ clientEmail ]]</p>
                                     </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.darkClass">
+                                <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
                                     </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">
+                                        <p v-for="clientEmail in onlineClients">[[ clientEmail ]]</p>
+                                    </template>
+                                    <a-tag color="blue" v-if="onlineClients.length">[[ onlineClients.length ]]</a-tag>
+                                </a-popover>
                             </a-col>
                         </a-row>
                     </a-card>
                 </transition>
                 <transition name="list" appear>
-                    <a-card hoverable :class="themeSwitcher.darkCardClass">
+                    <a-card hoverable>
                         <div slot="title">
                             <a-row>
-                                <a-col :xs="24" :sm="24" :lg="12">
-                                    <a-button type="primary" icon="plus" @click="openAddInbound">{{ i18n "pages.inbounds.addInbound" }}</a-button>
+                                <a-col :xs="12" :sm="12" :lg="12">
+                                    <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">{{ i18n "pages.inbounds.generalActions" }}</a-button>
+                                        <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="export">
                                                 <a-icon type="export"></a-icon>
@@ -95,12 +134,12 @@
                                         </a-menu>
                                     </a-dropdown>
                                 </a-col>
-                                <a-col :xs="24" :sm="24" :lg="12" style="text-align: right;">
+                                <a-col :xs="12" :sm="12" :lg="12" style="text-align: right;">
                                     <a-select v-model="refreshInterval"
                                               style="width: 65px;"
                                               v-if="isRefreshEnabled"
                                               @change="changeRefreshInterval"
-                                              :dropdown-class-name="themeSwitcher.darkCardClass">
+                                              :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-icon type="sync" :spin="refreshing" @click="manualRefresh" style="margin: 0 5px;"></a-icon>
@@ -108,26 +147,32 @@
                                 </a-col>
                             </a-row>
                         </div>
-                        <a-switch v-model="enableFilter"
-                            checked-children='{{ i18n "search" }}' un-checked-children='{{ i18n "filter" }}'
-                            @change="toggleFilter" style="margin-right: 10px;">
-                        </a-switch>
-                        <a-input v-if="!enableFilter" v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus style="max-width: 300px"></a-input>
-                        <a-radio-group v-if="enableFilter" v-model="filterBy" @change="filterInbounds" button-style="solid">
-                            <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-group>
-                        <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
+                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                            <a-switch v-model="enableFilter"
+                                style="margin-right: .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="max-width: 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 ? mobileColums : columns" :row-key="dbInbound => dbInbound.id"
                                  :data-source="searchedInbounds"
-                                 :loading="spinning" :scroll="{ x: 1200 }"
+                                 :scroll="isMobile ? {} : { x: 1000 }"
                                  :pagination="false"
                                  :expand-icon-as-cell="false"
                                  :expand-row-by-click="false"
                                  :expand-icon-column-index="0"
-                                 :row-class-name="dbInbound => (dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess || (dbInbound.isSS && dbInbound.toInbound().isSSMultiUser) ? '' : 'hideExpandIcon')"
-                                 style="margin-top: 20px"
+                                 :indent-size="0"
+                                 :row-class-name="dbInbound => (dbInbound.isMultiUser() ? '' : 'hideExpandIcon')"
+                                 style="margin-top: 10px"
                                  @change="() => getDBInbounds()">
                             <template slot="action" slot-scope="text, dbInbound">
                                 <a-icon type="edit" style="font-size: 22px" @click="openEditInbound(dbInbound.id);"></a-icon>
@@ -142,7 +187,7 @@
                                             <a-icon type="qrcode"></a-icon>
                                             {{ i18n "qrCode" }}
                                         </a-menu-item>
-                                        <template v-if="dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess || (dbInbound.isSS && dbInbound.toInbound().isSSMultiUser)">
+                                        <template v-if="dbInbound.isMultiUser()">
                                             <a-menu-item key="addClient">
                                                 <a-icon type="user-add"></a-icon>
                                                 {{ i18n "pages.client.add"}}
@@ -181,43 +226,53 @@
                                                 <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)"></a-switch>
+                                            {{ i18n "pages.inbounds.enable" }}
+                                        </a-menu-item>
                                     </a-menu>
                                 </a-dropdown>
                             </template>
                             <template slot="protocol" slot-scope="text, dbInbound">
-                                <a-tag style="margin:0;" color="blue">[[ dbInbound.protocol ]]</a-tag>
+                                <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="cyan">TLS</a-tag>
-                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isXtls" color="cyan">XTLS</a-tag>
-                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="cyan">Reality</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.isXtls" color="blue">XTLS</a-tag>
+                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="blue">Reality</a-tag>
                                 </template>
                             </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.darkClass">
+                                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
                                         </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.darkClass">
+                                    <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
                                         </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.darkClass">
+                                    <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.currentTheme">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
                                         </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>
+                                        </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.darkClass">
+                                <a-popover :overlay-class-name="themeSwitcher.currentTheme">
                                     <template slot="content">
                                         <table cellpadding="2" width="100%">
                                             <tr>
@@ -230,7 +285,7 @@
                                             </tr>
                                         </table>
                                     </template>
-                                    <a-tag :color="dbInbound.total == 0 ? 'green' : dbInbound.up + dbInbound.down < dbInbound.total ? 'cyan' : 'red'">
+                                    <a-tag :color="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
                                         [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
                                         <template v-if="dbInbound.total > 0">
                                             [[ sizeFormat(dbInbound.total) ]]
@@ -245,35 +300,117 @@
                                 <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id)"></a-switch>
                             </template>
                             <template slot="expiryTime" slot-scope="text, dbInbound">
-                                <template v-if="dbInbound.expiryTime > 0">
-                                    <a-tag v-if="dbInbound.isExpiry" color="red">
+                                <a-popover v-if="dbInbound.expiryTime > 0" :overlay-class-name="themeSwitcher.currentTheme">
+                                    <template slot="content">
                                         [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
+                                    </template>
+                                    <a-tag style="min-width: 50px;" :color="usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
+                                        [[ remainedDays(dbInbound._expiryTime) ]]
                                     </a-tag>
-                                    <a-tag v-else color="blue">
-                                        [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
-                                    </a-tag>
-                                </template>
-                                <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
+                                </a-popover>
+                                <a-tag v-else color="purple" class="infinite-tag">&infin;</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">
+                                                            <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
+                                                        </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>
+                                                        </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>
+                                                        </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>
+                                                        </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>↑[[ sizeFormat(dbInbound.up) ]]</td>
+                                                                    <td>↓[[ sizeFormat(dbInbound.down) ]]</td>
+                                                                </tr>
+                                                                <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
+                                                                    <td>{{ i18n "remained" }}</td>
+                                                                    <td>[[ sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                                                                </tr>
+                                                            </table>
+                                                        </template>
+                                                        <a-tag :color="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                                                            [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
+                                                            <template v-if="dbInbound.total > 0">
+                                                                [[ sizeFormat(dbInbound.total) ]]
+                                                            </template>
+                                                            <template v-else>&infin;</template>
+                                                        </a-tag>
+                                                    </a-popover>                    
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td>{{ i18n "pages.inbounds.expireDate" }}</td>
+                                                <td>
+                                                    <a-tag style="min-width: 50px; text-align: center;" v-if="dbInbound.expiryTime > 0" :color="dbInbound.isExpiry? 'red': 'blue'">
+                                                        [[ DateUtil.formatMillis(dbInbound.expiryTime) ]]
+                                                    </a-tag>
+                                                    <a-tag v-else style="text-align: center;" color="purple" class="infinite-tag">&infin;</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="font-size: 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
-                                v-if="(record.protocol === Protocols.VLESS) || (record.protocol === Protocols.VMESS)"
                                 :row-key="client => client.id"
-                                :columns="innerColumns"
+                                :columns="isMobile ? innerMobileColumns : innerColumns"
                                 :data-source="getInboundClients(record)"
                                 :pagination="false"
-                                style="margin-left: 20px;"
-                                >
-                                    {{template "client_table"}}
-                                </a-table>
-                                <a-table
-                                v-else-if="record.protocol === Protocols.TROJAN || record.toInbound().isSSMultiUser"
-                                :row-key="client => client.id"
-                                :columns="innerTrojanColumns"
-                                :data-source="getInboundClients(record)"
-                                :pagination="false"
-                                style="margin-left: 20px;"
-                                >
+                                :style="isMobile ? 'margin: -16px -5px -17px;' : 'margin-left: 10px;'">
                                     {{template "client_table"}}
                                 </a-table>
                             </template>
@@ -292,6 +429,7 @@
         align: 'right',
         dataIndex: "id",
         width: 30,
+        responsive: ["xs"],
     }, {
         title: '{{ i18n "pages.inbounds.operate" }}',
         align: 'center',
@@ -320,7 +458,7 @@
     }, {
         title: '{{ i18n "clients" }}',
         align: 'left',
-        width: 40,
+        width: 50,
         scopedSlots: { customRender: 'clients' },
     }, {
         title: '{{ i18n "pages.inbounds.traffic" }}',
@@ -330,26 +468,46 @@
     }, {
         title: '{{ i18n "pages.inbounds.expireDate" }}',
         align: 'center',
-        width: 80,
+        width: 40,
         scopedSlots: { customRender: 'expiryTime' },
     }];
 
+    const mobileColums = [{
+        title: "ID",
+        align: 'right',
+        dataIndex: "id",
+        width: 10,
+        responsive: ["s"],
+    }, {
+        title: '{{ i18n "pages.inbounds.operate" }}',
+        align: 'center',
+        width: 25,
+        scopedSlots: { customRender: 'action' },
+    }, {
+        title: '{{ i18n "pages.inbounds.remark" }}',
+        align: 'left',
+        width: 70,
+        dataIndex: "remark",
+    }, {
+        title: '{{ i18n "pages.inbounds.info" }}',
+        align: 'center',
+        width: 10,
+        scopedSlots: { customRender: 'info' },
+    }];
+
     const innerColumns = [
-        { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
-        { title: '{{ i18n "pages.inbounds.enable" }}', width: 40, scopedSlots: { customRender: 'enable' } },
+        { title: '{{ i18n "pages.inbounds.operate" }}', width: 50, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.enable" }}', width: 20, scopedSlots: { customRender: 'enable' } },
+        { title: '{{ i18n "online" }}', width: 20, scopedSlots: { customRender: 'online' } },
         { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 50, scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 50, scopedSlots: { customRender: 'expiryTime' } },
-        { title: 'UUID', width: 120, dataIndex: "id" },
+        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 80, align: 'center', scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 80, align: 'center', scopedSlots: { customRender: 'expiryTime' } },
     ];
 
-    const innerTrojanColumns = [
-        { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
-        { title: '{{ i18n "pages.inbounds.enable" }}', width: 40, scopedSlots: { customRender: 'enable' } },
-        { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}', width: 50, scopedSlots: { customRender: 'traffic' } },
-        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 50, scopedSlots: { customRender: 'expiryTime' } },
-        { title: '{{ i18n "password" }}', width: 170, dataIndex: "password" },
+    const innerMobileColumns = [
+        { title: '{{ i18n "pages.inbounds.operate" }}', width: 10, align: 'center', scopedSlots: { customRender: 'actionMenu' } },
+        { title: '{{ i18n "pages.inbounds.client" }}', width: 90, align: 'left', scopedSlots: { customRender: 'client' } },
+        { title: '{{ i18n "pages.inbounds.info" }}', width: 10, align: 'center', scopedSlots: { customRender: 'info' } },
     ];
 
     const app = new Vue({
@@ -370,6 +528,7 @@
             defaultCert: '',
             defaultKey: '',
             clientCount: [],
+            onlineClients: [],
             isRefreshEnabled: localStorage.getItem("isRefreshEnabled") === "true" ? true : false,
             refreshing: false,
             refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
@@ -380,7 +539,8 @@
                 domain: '',
                 tls: false
             },
-            tgBotEnable: false
+            tgBotEnable: false,
+            isMobile: window.innerWidth <= 768,
         },
         methods: {
             loading(spinning = true) {
@@ -393,11 +553,19 @@
                     this.refreshing = false;
                     return;
                 }
+                await this.getOnlineUsers();
                 this.setInbounds(msg.obj);
                 setTimeout(() => {
                     this.refreshing = false;
                 }, 500);
             },
+            async getOnlineUsers() {
+                const msg = await HttpUtil.post('/panel/inbound/onlines');
+                if (!msg.success) {
+                    return;
+                }
+                this.onlineClients = msg.obj != null ? msg.obj : [];
+            },
             async getDefaultSettings() {
                 const msg = await HttpUtil.post('/panel/setting/defaultSettings');
                 if (!msg.success) {
@@ -441,7 +609,7 @@
                 }
             },
             getClientCounts(dbInbound, inbound) {
-                let clientCount = 0, active = [], deactive = [], depleted = [], expiring = [];
+                let clientCount = 0, active = [], deactive = [], depleted = [], expiring = [], online = [];
                 clients = this.getClients(dbInbound.protocol, inbound.settings);
                 clientStats = dbInbound.clientStats
                 now = new Date().getTime()
@@ -450,6 +618,7 @@
                     if (dbInbound.enable) {
                         clients.forEach(client => {
                             client.enable ? active.push(client.email) : deactive.push(client.email);
+                            if(this.isClientOnline(client.email)) online.push(client.email);
                         });
                         clientStats.forEach(client => {
                             if (!client.enable) {
@@ -471,6 +640,7 @@
                     deactive: deactive,
                     depleted: depleted,
                     expiring: expiring,
+                    online: online,
                 };
             },
             searchInbounds(key) {
@@ -547,10 +717,10 @@
             clickAction(action, dbInbound) {
                 switch (action.key) {
                     case "qrcode":
-                        this.showQrcode(dbInbound);
+                        this.showQrcode(dbInbound.id);
                         break;
                     case "showInfo":
-                        this.showInfo(dbInbound);
+                        this.showInfo(dbInbound.id);
                         break;
                     case "edit":
                         this.openEditInbound(dbInbound.id);
@@ -586,6 +756,7 @@
                     title: '{{ i18n "pages.inbounds.cloneInbound"}} \"' + dbInbound.remark + '\"',
                     content: '{{ i18n "pages.inbounds.cloneInboundContent"}}',
                     okText: '{{ i18n "pages.inbounds.cloneInboundOk"}}',
+                    class: themeSwitcher.currentTheme,
                     cancelText: '{{ i18n "cancel" }}',
                     onOk: () => {
                         const baseInbound = dbInbound.toInbound();
@@ -752,7 +923,7 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                     content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
-                    class: themeSwitcher.darkCardClass,
+                    class: themeSwitcher.currentTheme,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => {
@@ -767,23 +938,27 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.deleteInbound"}}',
                     content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
-                    class: themeSwitcher.darkCardClass,
+                    class: themeSwitcher.currentTheme,
                     okText: '{{ i18n "delete"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => this.submit('/panel/inbound/del/' + dbInboundId),
                 });
             },
-            delClient(dbInboundId, client) {
+            delClient(dbInboundId, client,confirmation = true) {
                 dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                 clientId = this.getClientId(dbInbound.protocol, client);
-                this.$confirm({
-                    title: '{{ i18n "pages.inbounds.deleteInbound"}}',
-                    content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
-                    class: themeSwitcher.darkCardClass,
-                    okText: '{{ i18n "delete"}}',
-                    cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit(`/panel/inbound/${dbInboundId}/delClient/${clientId}`),
-                });
+                if (confirmation){
+                    this.$confirm({
+                        title: '{{ i18n "pages.inbounds.deleteClient"}}',
+                        content: '{{ i18n "pages.inbounds.deleteClientContent"}}',
+                        class: themeSwitcher.currentTheme,
+                        okText: '{{ i18n "delete"}}',
+                        cancelText: '{{ i18n "cancel"}}',
+                        onOk: () => this.submit(`/xui/inbound/${dbInboundId}/delClient/${clientId}`),
+                    });
+                } else {
+                    this.submit(`/xui/inbound/${dbInboundId}/delClient/${clientId}`);
+                }
             },
             getClients(protocol, clientSettings) {
                 switch (protocol) {
@@ -860,21 +1035,25 @@
                     return dbInbound.toInbound().settings.shadowsockses;
                 }
             },
-            resetClientTraffic(client, dbInboundId) {
-                this.$confirm({
-                    title: '{{ i18n "pages.inbounds.resetTraffic"}}',
-                    content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
-                    class: themeSwitcher.darkCardClass,
-                    okText: '{{ i18n "reset"}}',
-                    cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email),
-                })
+            resetClientTraffic(client, dbInboundId, confirmation = true) {
+                if (confirmation){
+                    this.$confirm({
+                        title: '{{ i18n "pages.inbounds.resetTraffic"}}',
+                        content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
+                        class: themeSwitcher.currentTheme,
+                        okText: '{{ i18n "reset"}}',
+                        cancelText: '{{ i18n "cancel"}}',
+                        onOk: () => this.submit('/xui/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email),
+                    })
+                } else {
+                    this.submit('/xui/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email);
+                }
             },
             resetAllTraffic() {
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetAllTrafficTitle"}}',
                     content: '{{ i18n "pages.inbounds.resetAllTrafficContent"}}',
-                    class: themeSwitcher.darkCardClass,
+                    class: themeSwitcher.currentTheme,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => this.submit('/panel/inbound/resetAllTraffics'),
@@ -884,7 +1063,7 @@
                 this.$confirm({
                     title: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficTitle"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficTitle"}}',
                     content: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficContent"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficContent"}}',
-                    class: themeSwitcher.darkCardClass,
+                    class: themeSwitcher.currentTheme,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => this.submit('/panel/inbound/resetAllClientTraffics/' + dbInboundId),
@@ -894,36 +1073,98 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.delDepletedClientsTitle"}}',
                     content: '{{ i18n "pages.inbounds.delDepletedClientsContent"}}',
-                    class: themeSwitcher.darkCardClass,
+                    class: themeSwitcher.currentTheme,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => this.submit('/panel/inbound/delDepletedClients/' + dbInboundId),
                 })
             },
             isExpiry(dbInbound, index) {
-                return dbInbound.toInbound().isExpiry(index)
+                return dbInbound.toInbound().isExpiry(index);
             },
             getUpStats(dbInbound, email) {
-                if (email.length == 0) return 0
-                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
-                return clientStats ? clientStats.up : 0
+                if (email.length == 0) return 0;
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
+                return clientStats ? clientStats.up : 0;
             },
             getDownStats(dbInbound, email) {
-                if (email.length == 0) return 0
-                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
-                return clientStats ? clientStats.down : 0
+                if (email.length == 0) return 0;
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
+                return clientStats ? clientStats.down : 0;
+            },
+            getSumStats(dbInbound, email) {
+                if (email.length == 0) return 0;
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
+                return clientStats ? clientStats.up + clientStats.down : 0;
+            },
+            getRemStats(dbInbound, email) {
+                if (email.length == 0) return 0;
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
+                if (!clientStats) return 0;
+                remained = clientStats.totalGB - (clientStats.up + clientStats.down);
+                return remained>0 ? remained : 0;
             },
             statsColor(dbInbound, email) {
-                if(email.length == 0) return 'blue';
+                if (email.length == 0) return '#0e49b5';
                 clientStats = dbInbound.clientStats.find(stats => stats.email === email);
-                return usageColor(clientStats.down + clientStats.up, this.trafficDiff, clientStats.total);
+                switch (true) {
+                    case !clientStats:
+                        return "#0e49b5";
+                    case clientStats.up + clientStats.down < clientStats.total - app.trafficDiff:
+                        return "#0e49b5";
+                    case clientStats.up + clientStats.down < clientStats.total:
+                        return "#FFA031";
+                    default:
+                        return "#E04141";
+                }
+            },
+            statsProgress(dbInbound, email) {
+                if (email.length == 0) return 100;
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
+                if (!clientStats) return 0;
+                if (clientStats.total == 0) return 100;
+                return 100*(clientStats.down + clientStats.up)/clientStats.total;
+            },
+            expireProgress(expTime, reset) {
+                now = new Date().getTime();
+                remainedSeconds = expTime < 0 ? -expTime/1000 : (expTime-now)/1000;
+                resetSeconds = reset * 86400;
+                if (remainedSeconds >= resetSeconds) return 0;
+                return 100*(1-(remainedSeconds/resetSeconds));
+            },
+            remainedDays(expTime){
+                if (expTime == 0) return null;
+                if (expTime < 0) return formatSecond(expTime/-1000);
+                now = new Date().getTime();
+                if (expTime < now) return '{{ i18n "depleted" }}';
+                return formatSecond((expTime-now)/1000);
+            },
+            statsExpColor(dbInbound, email){
+                if (email.length == 0) return '#7a316f';
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email);
+                if (!clientStats) return '#7a316f';
+                statsColor = usageColor(clientStats.down + clientStats.up, this.trafficDiff, clientStats.total);
+                expColor = usageColor(new Date().getTime(), this.expireDiff, clientStats.expiryTime);
+                switch (true) {
+                    case statsColor == "red" || expColor == "red":
+                        return "#E04141";
+                    case statsColor == "orange" || expColor == "orange":
+                        return "#FFA031";
+                    case statsColor == "blue" || expColor == "blue":
+                        return "#0e49b5";
+                    default:
+                        return "#7a316f";
+                }
             },
             isClientEnabled(dbInbound, email) {
-                clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null
-                return clientStats ? clientStats['enable'] : true
+                clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null;
+                return clientStats ? clientStats['enable'] : true;
+            },
+            isClientOnline(email) {
+                return this.onlineClients.includes(email);
             },
             isRemovable(dbInbound_id) {
-                return this.getInboundClients(this.dbInbounds.find(row => row.id === dbInbound_id)).length > 1
+                return this.getInboundClients(this.dbInbounds.find(row => row.id === dbInbound_id)).length > 1;
             },
             inboundLinks(dbInboundId) {
                 dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
@@ -933,7 +1174,7 @@
             exportAllLinks() {
                 let copyText = '';
                 for (const dbInbound of this.dbInbounds) {
-                    copyText += dbInbound.genInboundLinks
+                    copyText += dbInbound.genInboundLinks;
                 }
                 txtModal.show('{{ i18n "pages.inbounds.export"}}', copyText, 'All-Inbounds');
             },
@@ -963,6 +1204,9 @@
                     this.spinning = false;
                 }
             },
+            onResize() {
+                this.isMobile = window.innerWidth <= 768;
+            }
         },
         watch: {
             searchKey: debounce(function (newVal) {
@@ -970,6 +1214,8 @@
             }, 500)
         },
         mounted() {
+            window.addEventListener('resize', this.onResize);
+            this.onResize();
             this.loading();
             this.getDefaultSettings();
             if (this.isRefreshEnabled) {
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 62e60297..cafdb8f9 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -6,6 +6,9 @@
         .ant-layout-content {
             margin: 24px 16px;
         }
+        .ant-card-hoverable {
+            margin-inline: 0.3rem;
+        }
     }
 
     .ant-col-sm-24 {
@@ -18,21 +21,20 @@
 </style>
 
 <body>
-<a-layout id="app" v-cloak>
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
     {{ template "commonSider" . }}
-    <a-layout id="content-layout" :style="themeSwitcher.bgStyle">
+    <a-layout id="content-layout">
         <a-layout-content>
             <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
             <transition name="list" appear>
                 <a-row>
-                    <a-card hoverable :class="themeSwitcher.darkCardClass">
+                    <a-card hoverable>
                         <a-row>
                             <a-col :sm="24" :md="12">
                                 <a-row>
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.cpu.color"
-                                                    :class="themeSwitcher.darkCardClass"
                                                     :percent="status.cpu.percent"></a-progress>
                                         <div>CPU:  [[ cpuCoreFormat(status.cpuCores) ]]</div>
                                         <div>Speed:  [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
@@ -40,7 +42,6 @@
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.mem.color"
-                                                    :class="themeSwitcher.darkCardClass"
                                                     :percent="status.mem.percent"></a-progress>
                                         <div>
                                             {{ i18n "pages.index.memory"}}: [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
@@ -53,7 +54,6 @@
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.swap.color"
-                                                    :class="themeSwitcher.darkCardClass"
                                                     :percent="status.swap.percent"></a-progress>
                                         <div>
                                             Swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
@@ -62,7 +62,6 @@
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.disk.color"
-                                                    :class="themeSwitcher.darkCardClass"
                                                     :percent="status.disk.percent"></a-progress>
                                         <div>
                                             {{ i18n "pages.index.hard"}}: [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
@@ -77,22 +76,22 @@
             <transition name="list" appear>
                 <a-row>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             3X: <a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
                             Xray: <a-tag color="green" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
                             <a href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@panel3xui</a-tag></a>
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             {{ i18n "menu.link" }}:
-                            <a-tag color="blue" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
-                            <a-tag color="blue" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
-                            <a-tag color="blue" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             {{ i18n "pages.index.xrayStatus" }}:
                             <a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag>
                             <a-tooltip v-if="status.xray.state === State.Error">
@@ -101,13 +100,13 @@
                                 </template>
                                 <a-icon type="question-circle" theme="filled"></a-icon>
                             </a-tooltip>
-                            <a-tag color="blue" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
-                            <a-tag color="blue" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>                    
-                            <a-tag color="blue" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
+                            <a-tag color="purple" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>                    
+                            <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag>
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             {{ i18n "pages.index.operationHours" }}:
                             Xray:
                             <a-tag color="green">[[ formatSecond(status.appStats.uptime) ]]</a-tag>
@@ -116,7 +115,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             {{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
                             <a-tooltip>
                                 <template slot="title">
@@ -127,7 +126,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             {{ i18n "usage"}}:
                             Memory [[ sizeFormat(status.appStats.mem) ]] -
                             Threads [[ status.appStats.threads ]]
@@ -135,7 +134,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
                                     IPv4:
@@ -159,7 +158,7 @@
                         </a-card>
                     </a-col>                    
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
                                     TCP:  [[ status.tcpCount ]]
@@ -183,7 +182,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
                                     <a-icon type="arrow-up"></a-icon>
@@ -209,7 +208,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="themeSwitcher.darkCardClass">
+                        <a-card hoverable>
                             <a-row>
                                 <a-col :span="12">
                                     <a-icon type="cloud-upload"></a-icon>
@@ -241,12 +240,12 @@
 
     <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
              :closable="true" @ok="() => versionModal.visible = false"
-             :class="themeSwitcher.darkCardClass"
+             :class="themeSwitcher.currentTheme"
              footer="">
         <h2>{{ i18n "pages.index.xraySwitchClick"}}</h2>
         <h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2>
         <template v-for="version, index in versionModal.versions">
-            <a-tag :color="index % 2 == 0 ? 'blue' : 'green'"
+            <a-tag :color="index % 2 == 0 ? 'purple' : 'green'"
                    style="margin: 10px" @click="switchV2rayVersion(version)">
                 [[ version ]]
             </a-tag>
@@ -255,7 +254,7 @@
 
     <a-modal id="log-modal" v-model="logModal.visible" title="X-UI logs"
              :closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false"
-             :class="themeSwitcher.darkCardClass"
+             :class="themeSwitcher.currentTheme"
              width="800px"
              footer="">
         <a-form layout="inline">
@@ -263,7 +262,7 @@
                 <a-select v-model="logModal.rows"
                 style="width: 80px"
                 @change="openLogs()"
-                :dropdown-class-name="themeSwitcher.darkCardClass">
+                :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>
@@ -274,7 +273,7 @@
                 <a-select v-model="logModal.level"
                 style="width: 120px"
                 @change="openLogs()"
-                :dropdown-class-name="themeSwitcher.darkCardClass">
+                :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>
@@ -300,12 +299,12 @@
     </a-modal>
 
     <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
-            :closable="true" :class="themeSwitcher.darkCardClass"
+            :closable="true" :class="themeSwitcher.currentTheme"
             @ok="() => backupModal.hide()" @cancel="() => backupModal.hide()">
-        <p style="color: inherit; font-size: 16px; padding: 4px 2px;">
-            <a-icon type="warning" style="color: inherit; font-size: 20px;"></a-icon>
-            [[ backupModal.description ]]
-        </p>
+            <a-alert type="warning" style="margin-bottom: 10px; width: fit-content"
+            :message="backupModal.description"
+            show-icon
+            ></a-alert>
         <a-space direction="horizontal" style="text-align: center" style="margin-bottom: 10px;">
             <a-button type="primary" @click="exportDatabase()">
                 [[ backupModal.exportText ]]
@@ -346,11 +345,11 @@
         get color() {
             const percent = this.percent;
             if (percent < 80) {
-                return '#67C23A';
+                return '#0a7557';
             } else if (percent < 90) {
-                return '#E6A23C';
+                return '#ffa031';
             } else {
-                return '#F56C6C';
+                return '#e04141';
             }
         }
     }
@@ -504,7 +503,7 @@
                     title: '{{ i18n "pages.index.xraySwitchVersionDialog"}}',
                     content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}' + ` ${version}?`,
                     okText: '{{ i18n "confirm"}}',
-                    class: themeSwitcher.darkCardClass,
+                    class: themeSwitcher.currentTheme,
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: async () => {
                         versionModal.hide();
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 1f3b0ebb..7c4fef16 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -8,8 +8,11 @@
         }
     }
 
-    .ant-col-sm-24 {
-        margin-top: 10px;
+    @media (max-width: 768px) {
+        .ant-tabs-nav .ant-tabs-tab {
+            margin: 0;
+            padding: 12px .5rem;
+        }
     }
 
     .ant-tabs-bar {
@@ -20,10 +23,6 @@
         display: block;
     }
 
-    :not(.ant-card-dark)>.ant-tabs-top-bar {
-        background: white;
-    }
-
     .alert-msg {
         color: rgb(194, 117, 18);
         font-weight: normal;
@@ -71,25 +70,31 @@
     }
 </style>
 <body>
-<a-layout id="app" v-cloak>
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
     {{ template "commonSider" . }}
-    <a-layout id="content-layout" :style="themeSwitcher.bgStyle">
+    <a-layout id="content-layout">
         <a-layout-content>
-            <a-spin :spinning="spinning" :delay="500" tip="loading">
+            <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
                 <a-space direction="vertical">
-                    <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-tabs style="margin:1rem 0.5rem;" default-active-key="1" :class="themeSwitcher.darkCardClass">
+                    <a-card hoverable style="margin-bottom: .5rem;">
+                        <a-row>
+                            <a-col :xs="24" :sm="8" 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="16">
+                                <a-alert type="warning" style="float: right; width: fit-content"
+                                message='{{ i18n "pages.settings.infoDesc" }}'
+                                show-icon
+                                >
+                            </a-col>
+                        </a-row>
+                    </a-card>
+                    <a-tabs default-active-key="1">
                         <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings"}}'>
-                            <a-row :xs="24" :sm="24" :lg="12">
-                                <h2 class="alert-msg">
-                                    <a-icon type="warning"></a-icon>
-                                    {{ i18n "pages.settings.infoDesc" }}
-                                </h2>
-                            </a-row>
-                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
+                            <a-list item-layout="horizontal">
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningIP"}}' desc='{{ i18n "pages.settings.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningDomain"}}' desc='{{ i18n "pages.settings.panelListeningDomainDesc"}}' v-model="allSetting.webDomain"></setting-list-item>
                                 <setting-list-item type="number" title='{{ i18n "pages.settings.panelPort"}}' desc='{{ i18n "pages.settings.panelPortDesc"}}' v-model="allSetting.webPort" :min="0"></setting-list-item>
@@ -112,7 +117,7 @@
                                                     ref="selectLang"
                                                     v-model="lang"
                                                     @change="setLang(lang)"
-                                                    :dropdown-class-name="themeSwitcher.darkCardClass"
+                                                    :dropdown-class-name="themeSwitcher.currentTheme"
                                                     style="width: 100%"
                                                 >
                                                     <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
@@ -127,9 +132,9 @@
                             </a-list>
                         </a-tab-pane>
                         <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding: 20px;">
-                            <a-tabs class="ant-card-dark-securitybox-nohover" default-active-key="sec-1" :class="themeSwitcher.darkCardClass">
+                            <a-tabs class="ant-card-dark-securitybox-nohover" default-active-key="sec-1" :class="themeSwitcher.currentTheme">
                                 <a-tab-pane key="sec-1" tab='{{ i18n "pages.settings.security.admin"}}'>
-                                    <a-form :style="'padding: 20px;' + themeSwitcher.textStyle">
+                                    <a-form style="padding: 20px;">
                                         <a-form-item label='{{ i18n "pages.settings.oldUsername"}}'>
                                             <a-input v-model="user.oldUsername" style="max-width: 300px"></a-input>
                                         </a-form-item>
@@ -148,7 +153,7 @@
                                     </a-form>
                                 </a-tab-pane>
                                 <a-tab-pane key="sec-2" tab='{{ i18n "pages.settings.security.secret"}}'>
-                                    <a-form :style="'padding: 20px;' + themeSwitcher.textStyle">
+                                    <a-form style="padding: 20px;">
                                         <a-list-item style="padding: 20px">
                                             <a-row>
                                                 <a-col :lg="24" :xl="12">
@@ -183,188 +188,8 @@
                             </a-tabs>
                         </a-tab-pane>
 
-                        <a-tab-pane key="3" tab='{{ i18n "pages.settings.xrayConfiguration"}}'>
-                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
-                                <a-divider style="padding: 20px;">{{ i18n "pages.settings.actions"}}</a-divider>
-                                <a-space direction="horizontal" style="padding: 0px 20px">
-                                    <a-button type="primary" @click="resetXrayConfigToDefault">{{ i18n "pages.settings.resetDefaultConfig" }}</a-button>
-                                </a-space>
-                                <a-divider style="padding: 20px;">{{ i18n "pages.settings.templates.title"}} </a-divider>
-                                <a-row :xs="24" :sm="24" :lg="12">
-                                    <h2 class="alert-msg">
-                                        <a-icon type="warning"></a-icon>
-                                        {{ i18n "pages.settings.infoDesc" }}
-                                    </h2>
-                                </a-row>
-                                <a-tabs class="ant-card-dark-box-nohover" default-active-key="tpl-1" :class="themeSwitcher.darkCardClass" style="padding: 20px 20px;">
-                                    <a-tab-pane key="tpl-1" tab='{{ i18n "pages.settings.templates.basicTemplate"}}' style="padding-top: 20px;">
-                                        <a-collapse>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.generalConfigs"}}'>
-                                                <a-row :xs="24" :sm="24" :lg="12">
-                                                    <h2 class="collapse-title">
-                                                        <a-icon type="warning"></a-icon>
-                                                        {{ i18n "pages.settings.templates.generalConfigsDesc" }}
-                                                    </h2>
-                                                </a-row>
-                                                <a-list-item>
-                                                    <a-row style="padding: 20px">
-                                                        <a-col :lg="24" :xl="12">
-                                                            <a-list-item-meta 
-                                                                title='{{ i18n "pages.settings.templates.xrayConfigFreedomStrategy" }}'
-                                                                description='{{ i18n "pages.settings.templates.xrayConfigFreedomStrategyDesc" }}'/>
-                                                        </a-col>
-                                                        <a-col :lg="24" :xl="12">
-                                                            <template>
-                                                                <a-select
-                                                                    v-model="freedomStrategy"
-                                                                    :dropdown-class-name="themeSwitcher.darkCardClass"
-                                                                    style="width: 100%">
-                                                                    <a-select-option v-for="s in outboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
-                                                                </a-select>
-                                                            </template>
-                                                        </a-col>
-                                                    </a-row>
-                                                </a-list-item>
-                                                <a-row style="padding: 20px">
-                                                    <a-col :lg="24" :xl="12">
-                                                        <a-list-item-meta 
-                                                            title='{{ i18n "pages.settings.templates.xrayConfigRoutingStrategy" }}'
-                                                            description='{{ i18n "pages.settings.templates.xrayConfigRoutingStrategyDesc" }}'/>
-                                                    </a-col>
-                                                    <a-col :lg="24" :xl="12">
-                                                        <template>
-                                                            <a-select
-                                                                v-model="routingStrategy"
-                                                                :dropdown-class-name="themeSwitcher.darkCardClass"
-                                                                style="width: 100%">
-                                                                <a-select-option v-for="s in routingDomainStrategies" :value="s">[[ s ]]</a-select-option>
-                                                            </a-select>
-                                                        </template>
-                                                    </a-col>
-                                                </a-row>
-                                            </a-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.blockConfigs"}}'>
-                                                <a-row :xs="24" :sm="24" :lg="12">
-                                                    <h2 class="collapse-title">
-                                                        <a-icon type="warning"></a-icon>
-                                                        {{ i18n "pages.settings.templates.blockConfigsDesc" }}
-                                                    </h2>
-                                                </a-row>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigTorrent"}}' desc='{{ i18n "pages.settings.templates.xrayConfigTorrentDesc"}}' v-model="torrentSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigPrivateIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigPrivateIpDesc"}}' v-model="privateIpSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigAds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigAdsDesc"}}' v-model="AdsSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigFamily"}}' desc='{{ i18n "pages.settings.templates.xrayConfigFamilyDesc"}}' v-model="familyProtectSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigSpeedtest"}}' desc='{{ i18n "pages.settings.templates.xrayConfigSpeedtestDesc"}}' v-model="SpeedTestSettings"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.blockCountryConfigs"}}'>
-                                                <a-row :xs="24" :sm="24" :lg="12">
-                                                    <h2 class="collapse-title">
-                                                        <a-icon type="warning"></a-icon>
-                                                        {{ i18n "pages.settings.templates.blockCountryConfigsDesc" }}
-                                                    </h2>
-                                                </a-row>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigIRIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigIRIpDesc"}}' v-model="IRIpSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigIRDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigIRDomainDesc"}}' v-model="IRDomainSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigChinaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigChinaIpDesc"}}' v-model="ChinaIpSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigChinaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigChinaDomainDesc"}}' v-model="ChinaDomainSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigRussiaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRussiaIpDesc"}}' v-model="RussiaIpSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigRussiaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRussiaDomainDesc"}}' v-model="RussiaDomainSettings"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.directCountryConfigs"}}'>
-                                                <a-row :xs="24" :sm="24" :lg="12">
-                                                    <h2 class="collapse-title">
-                                                        <a-icon type="warning"></a-icon>
-                                                        {{ i18n "pages.settings.templates.directCountryConfigsDesc" }}
-                                                    </h2>
-                                                </a-row>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectIRIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectIRIpDesc"}}' v-model="IRIpDirectSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectIRDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectIRDomainDesc"}}' v-model="IRDomainDirectSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectChinaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectChinaIpDesc"}}' v-model="ChinaIpDirectSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectChinaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectChinaDomainDesc"}}' v-model="ChinaDomainDirectSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectRussiaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectRussiaIpDesc"}}' v-model="RussiaIpDirectSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectRussiaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectRussiaDomainDesc"}}' v-model="RussiaDomainDirectSettings"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.ipv4Configs"}}'>
-                                                <a-row :xs="24" :sm="24" :lg="12">
-                                                    <h2 class="collapse-title">
-                                                        <a-icon type="warning"></a-icon>
-                                                        {{ i18n "pages.settings.templates.ipv4ConfigsDesc" }}
-                                                    </h2>
-                                                </a-row>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigGoogleIPv4"}}' desc='{{ i18n "pages.settings.templates.xrayConfigGoogleIPv4Desc"}}' v-model="GoogleIPv4Settings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigNetflixIPv4"}}' desc='{{ i18n "pages.settings.templates.xrayConfigNetflixIPv4Desc"}}' v-model="NetflixIPv4Settings"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.warpConfigs"}}'>
-                                                <a-row :xs="24" :sm="24" :lg="12">
-                                                    <h2 class="collapse-title">
-                                                        <a-icon type="warning"></a-icon>
-                                                        {{ i18n "pages.settings.templates.warpConfigsDesc" }}
-                                                    </h2>
-                                                </a-row>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigGoogleWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigGoogleWARPDesc"}}' v-model="GoogleWARPSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigOpenAIWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigOpenAIWARPDesc"}}' v-model="OpenAIWARPSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigNetflixWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigNetflixWARPDesc"}}' v-model="NetflixWARPSettings"></setting-list-item>
-                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigSpotifyWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigSpotifyWARPDesc"}}' v-model="SpotifyWARPSettings"></setting-list-item>
-                                            </a-collapse-panel>
-                                        </a-collapse>
-                                    </a-tab-pane>
-                                    <a-tab-pane key="tpl-2" tab='{{ i18n "pages.settings.templates.manualLists"}}' style="padding-top: 20px;">
-                                        <a-row :xs="24" :sm="24" :lg="12">
-                                            <h2 class="collapse-title">
-                                                <a-icon type="warning"></a-icon>
-                                                {{ i18n "pages.settings.templates.manualListsDesc" }}
-                                            </h2>
-                                        </a-row>
-                                        <a-collapse>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.manualBlockedIPs"}}'>
-                                                <setting-list-item type="textarea" v-model="manualBlockedIPs"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.manualBlockedDomains"}}'>
-                                                <setting-list-item type="textarea" v-model="manualBlockedDomains"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.manualDirectIPs"}}'>
-                                                <setting-list-item type="textarea" v-model="manualDirectIPs"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.manualDirectDomains"}}'>
-                                                <setting-list-item type="textarea" v-model="manualDirectDomains"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.manualIPv4Domains"}}'>
-                                                <setting-list-item type="textarea" v-model="manualIPv4Domains"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.manualWARPDomains"}}'>
-                                                <setting-list-item type="textarea" v-model="manualWARPDomains"></setting-list-item>
-                                            </a-collapse-panel>
-                                        </a-collapse>
-                                    </a-tab-pane>
-                                    <a-tab-pane key="tpl-3" tab='{{ i18n "pages.settings.templates.advancedTemplate"}}' style="padding-top: 20px;">
-                                        <a-collapse>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigInbounds"}}'>
-                                                <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigInbounds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigInboundsDesc"}}' v-model="inboundSettings"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigOutbounds"}}'>
-                                                <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigOutbounds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigOutboundsDesc"}}' v-model="outboundSettings"></setting-list-item>
-                                            </a-collapse-panel>
-                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigRoutings"}}'>
-                                                <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigRoutings"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRoutingsDesc"}}' v-model="routingRuleSettings"></setting-list-item>
-                                            </a-collapse-panel>
-                                        </a-collapse>
-                                    </a-tab-pane>
-                                    <a-tab-pane key="tpl-4" tab='{{ i18n "pages.settings.templates.completeTemplate"}}' style="padding-top: 20px;">
-                                        <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigTemplate"}}' desc='{{ i18n "pages.settings.templates.xrayConfigTemplateDesc"}}' v-model="allSetting.xrayTemplateConfig"></setting-list-item>
-                                    </a-tab-pane>
-                                </a-tabs>
-                            </a-list>
-                        </a-tab-pane>
-
-                        <a-tab-pane key="4" tab='{{ i18n "pages.settings.TGBotSettings"}}'>
-                            <a-row :xs="24" :sm="24" :lg="12">
-                                <h2 class="alert-msg">
-                                    <a-icon type="warning"></a-icon>
-                                    {{ i18n "pages.settings.infoDesc" }}
-                                </h2>
-                            </a-row>
-                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
+                        <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings"}}'>
+                            <a-list item-layout="horizontal">
                                 <setting-list-item type="switch" title='{{ i18n "pages.settings.telegramBotEnable" }}' desc='{{ i18n "pages.settings.telegramBotEnableDesc" }}' v-model="allSetting.tgBotEnable"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.telegramToken"}}' desc='{{ i18n "pages.settings.telegramTokenDesc"}}' v-model="allSetting.tgBotToken"></setting-list-item>
                                 <setting-list-item type="text" title='{{ i18n "pages.settings.telegramChatId"}}' desc='{{ i18n "pages.settings.telegramChatIdDesc"}}' v-model="allSetting.tgBotChatId"></setting-list-item>
@@ -383,7 +208,7 @@
                                                 <a-select
                                                     ref="selectBotLang"
                                                     v-model="allSetting.tgLang"
-                                                    :dropdown-class-name="themeSwitcher.darkCardClass"
+                                                    :dropdown-class-name="themeSwitcher.currentTheme"
                                                     style="width: 100%"
                                                 >
                                                     <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
@@ -397,14 +222,8 @@
                                 </a-list-item>
                             </a-list>
                         </a-tab-pane>
-                        <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }}'>
-                            <a-row :xs="24" :sm="24" :lg="12">
-                                <h2 class="alert-msg">
-                                    <a-icon type="warning"></a-icon>
-                                    {{ i18n "pages.settings.infoDesc" }}
-                                </h2>
-                            </a-row>
-                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
+                        <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}'>
+                            <a-list item-layout="horizontal">
                                 <setting-list-item type="switch" title='{{ i18n "pages.settings.subEnable"}}' desc='{{ i18n "pages.settings.subEnableDesc"}}' v-model="allSetting.subEnable"></setting-list-item>
                                 <setting-list-item type="switch" title='{{ i18n "pages.settings.subEncrypt"}}' desc='{{ i18n "pages.settings.subEncryptDesc"}}' v-model="allSetting.subEncrypt"></setting-list-item>
                                 <setting-list-item type="switch" title='{{ i18n "pages.settings.subShowInfo"}}' desc='{{ i18n "pages.settings.subShowInfoDesc"}}' v-model="allSetting.subShowInfo"></setting-list-item>
@@ -440,75 +259,6 @@
             saveBtnDisable: true,
             user: new User(),
             lang: getLang(),
-            ipv4Settings: {
-                tag: "IPv4",
-                protocol: "freedom",
-                settings: {
-                    domainStrategy: "UseIPv4"
-                }
-            },
-            warpSettings: {
-                tag: "WARP",
-                protocol: "socks",
-                settings: {
-                    servers: [
-                        {
-                            address: "127.0.0.1",
-                            port: 40000
-                        }
-                    ]
-                }
-            },
-            directSettings: {
-                tag: "direct",
-                protocol: "freedom"
-            },
-            outboundDomainStrategies: ["AsIs", "UseIP", "UseIPv4", "UseIPv6"],
-            routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"],
-            settingsData: {
-                protocols: {
-                    bittorrent: ["bittorrent"],
-                },
-                ips: {
-                    local: ["geoip:private"],
-                    cn: ["geoip:cn"],
-                    ir: ["ext:geoip_IR.dat:ir","ext:geoip_IR.dat:arvancloud","ext:geoip_IR.dat:derakcloud","ext:geoip_IR.dat:iranserver"],
-                    ru: ["geoip:ru"],
-                },
-                domains: {
-                    ads: [
-                        "geosite:category-ads-all",
-                        "ext:geosite_IR.dat:category-ads-all"
-                    ],
-                    speedtest: ["geosite:speedtest"],
-                    openai: ["geosite:openai"],
-                    google: ["geosite:google"],
-                    spotify: ["geosite:spotify"],
-                    netflix: ["geosite:netflix"],
-                    cn: [
-                        "geosite:cn",
-                        "regexp:.*\\.cn$"
-                    ],
-                    ru: [
-                        "geosite:category-gov-ru",
-                        "regexp:.*\\.ru$"
-                    ],
-                    ir: [
-                        "regexp:.*\\.ir$",
-                        "regexp:.*\\.xn--mgba3a4f16a$",  // .ایران
-                        "ext:geosite_IR.dat:ir"  // have rules to bypass all .ir domains.
-                    ]
-                },
-                familyProtectDNS: {
-                    "servers": [
-                        "1.1.1.3",  // https://developers.cloudflare.com/1.1.1.1/setup/
-                        "1.0.0.3",
-                        "94.140.14.15",  // https://adguard-dns.io/kb/general/dns-providers/
-                        "94.140.15.16"
-                    ],
-                    "queryStrategy": "UseIPv4"
-                },
-            }
         },
         methods: {
             loading(spinning = true) {
@@ -547,6 +297,7 @@
                     this.$confirm({
                         title: '{{ i18n "pages.settings.restartPanel" }}',
                         content: '{{ i18n "pages.settings.restartPanelDesc" }}',
+                        class: themeSwitcher.currentTheme,
                         okText: '{{ i18n "sure" }}',
                         cancelText: '{{ i18n "cancel" }}',
                         onOk: () => resolve(),
@@ -558,7 +309,9 @@
                 if (msg.success) {
                     this.loading(true);
                     await PromiseUtil.sleep(5000);
-                    const { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting;
+                    var { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting;
+                    if (host == this.oldAllSetting.webDomain) host = null;
+                    if (port == this.oldAllSetting.webPort) port = null;
                     const isTLS = webCertFile !== "" || webKeyFile !== "";
                     const url = buildURL({ host, port, isTLS, base, path: "panel/settings" });
                     window.location.replace(url);
@@ -605,83 +358,6 @@
                 this.user.loginSecret = "";
                 }
             },
-            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;
-                }
-            },
-            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, 1);
-                }
-                if (haveRules && outboundIndex === -1) {
-                    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;
-            }
         },
         async mounted() {
             await this.getAllSetting();
@@ -690,429 +366,6 @@
                 this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
             }
         },
-        computed: {
-            templateSettings: {
-                get: function () { return this.allSetting.xrayTemplateConfig ? JSON.parse(this.allSetting.xrayTemplateConfig) : null; },
-                set: function (newValue) { this.allSetting.xrayTemplateConfig = 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;
-                },
-            },
-            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;
-                },
-            },
-            freedomStrategy: {
-                get: function () {
-                    if (!this.templateSettings) return "AsIs";
-                    freedomOutbound = this.templateSettings.outbounds.find((o) => o.protocol === "freedom" && !o.tag);
-                    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);
-                    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;
-                }
-            },
-            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 });
-                    this.syncRulesWithOutbound("WARP", this.warpSettings);
-                }
-            },
-            manualBlockedIPs: {
-                get: function () { return JSON.stringify(this.blockedIPs, null, 2); },
-                set: debounce(function (value) { this.blockedIPs = JSON.parse(value); }, 1000)
-            },
-            manualBlockedDomains: {
-                get: function () { return JSON.stringify(this.blockedDomains, null, 2); },
-                set: debounce(function (value) { this.blockedDomains = JSON.parse(value); }, 1000)
-            },
-            manualDirectIPs: {
-                get: function () { return JSON.stringify(this.directIPs, null, 2); },
-                set: debounce(function (value) { this.directIPs = JSON.parse(value); }, 1000)
-            },
-            manualDirectDomains: {
-                get: function () { return JSON.stringify(this.directDomains, null, 2); },
-                set: debounce(function (value) { this.directDomains = JSON.parse(value); }, 1000)
-            },
-            manualIPv4Domains: {
-                get: function () { return JSON.stringify(this.ipv4Domains, null, 2); },
-                set: debounce(function (value) { this.ipv4Domains = JSON.parse(value); }, 1000)
-            },
-            manualWARPDomains: {
-                get: function () { return JSON.stringify(this.warpDomains, null, 2); },
-                set: debounce(function (value) { this.warpDomains = JSON.parse(value); }, 1000)
-            },
-            torrentSettings: {
-                get: function () {
-                    return 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));
-                    }
-                },
-            },
-            privateIpSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.ips.local, this.blockedIPs);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.local];
-                    } else {
-                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.local.includes(data));
-                    }
-                },
-            },
-            AdsSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.ads, this.blockedDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ads];
-                    } else {
-                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ads.includes(data));
-                    }
-                },
-            },
-            SpeedTestSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.speedtest, this.blockedDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.speedtest];
-                    } else {
-                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.speedtest.includes(data));
-                    }
-                },
-            },
-            familyProtectSettings: {
-                get: function () {
-                    if (!this.templateSettings || !this.templateSettings.dns || !this.templateSettings.dns.servers) return false;
-                    return doAllItemsExist(this.templateSettings.dns.servers, this.settingsData.familyProtectDNS.servers);
-                },
-                set: function (newValue) {
-                    newTemplateSettings = this.templateSettings;
-                    if (newValue) {
-                        newTemplateSettings.dns = this.settingsData.familyProtectDNS;
-                    } else {
-                        delete newTemplateSettings.dns;
-                    }
-                    this.templateSettings = newTemplateSettings;
-                },
-            },
-            GoogleIPv4Settings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.google, this.ipv4Domains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.ipv4Domains = [...this.ipv4Domains, ...this.settingsData.domains.google];
-                    } else {
-                        this.ipv4Domains = this.ipv4Domains.filter(data => !this.settingsData.domains.google.includes(data));
-                    }
-                },
-            },
-            NetflixIPv4Settings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.netflix, this.ipv4Domains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.ipv4Domains = [...this.ipv4Domains, ...this.settingsData.domains.netflix];
-                    } else {
-                        this.ipv4Domains = this.ipv4Domains.filter(data => !this.settingsData.domains.netflix.includes(data));
-                    }
-                },
-            },
-            IRIpSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.ips.ir, this.blockedIPs);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.ir];
-                    } else {
-                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.ir.includes(data));
-                    }
-                }
-            },
-            IRDomainSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.ir, this.blockedDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ir];
-                    } else {
-                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ir.includes(data));
-                    }
-                }
-            },
-            ChinaIpSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.ips.cn, this.blockedIPs);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.cn];
-                    } else {
-                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.cn.includes(data));
-                    }
-                }
-            },
-            ChinaDomainSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.cn, this.blockedDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.cn];
-                    } else {
-                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.cn.includes(data));
-                    }
-                }
-            },
-            RussiaIpSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.ips.ru, this.blockedIPs);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.ru];
-                    } else {
-                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.ru.includes(data));
-                    }
-                }
-            },
-            RussiaDomainSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.ru, this.blockedDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ru];
-                    } else {
-                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ru.includes(data));
-                    }
-                }
-            },
-            IRIpDirectSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.ips.ir, this.directIPs);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.directIPs = [...this.directIPs, ...this.settingsData.ips.ir];
-                    } else {
-                        this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.ir.includes(data));
-                    }
-                }
-            },
-            IRDomainDirectSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.ir, this.directDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.directDomains = [...this.directDomains, ...this.settingsData.domains.ir];
-                    } else {
-                        this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.ir.includes(data));
-                    }
-                }
-            },
-            ChinaIpDirectSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.ips.cn, this.directIPs);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.directIPs = [...this.directIPs, ...this.settingsData.ips.cn];
-                    } else {
-                        this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.cn.includes(data));
-                    }
-                }
-            },
-            ChinaDomainDirectSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.cn, this.directDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.directDomains = [...this.directDomains, ...this.settingsData.domains.cn];
-                    } else {
-                        this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.cn.includes(data));
-                    }
-                }
-            },
-            RussiaIpDirectSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.ips.ru, this.directIPs);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.directIPs = [...this.directIPs, ...this.settingsData.ips.ru];
-                    } else {
-                        this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.ru.includes(data));
-                    }
-                }
-            },
-            RussiaDomainDirectSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.ru, this.directDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.directDomains = [...this.directDomains, ...this.settingsData.domains.ru];
-                    } else {
-                        this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.ru.includes(data));
-                    }
-                }
-            },
-            GoogleWARPSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.google, this.warpDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.google];
-                    } else {
-                        this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.google.includes(data));
-                    }
-                },
-            },
-            OpenAIWARPSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.openai, this.warpDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.openai];
-                    } else {
-                        this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.openai.includes(data));
-                    }
-                },
-            },
-            NetflixWARPSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.netflix, this.warpDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.netflix];
-                    } else {
-                        this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.netflix.includes(data));
-                    }
-                },
-            },
-            SpotifyWARPSettings: {
-                get: function () {
-                    return doAllItemsExist(this.settingsData.domains.spotify, this.warpDomains);
-                },
-                set: function (newValue) {
-                    if (newValue) {
-                        this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.spotify];
-                    } else {
-                        this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.spotify.includes(data));
-                    }
-                },
-            },
-        },
     });
 </script>
 </body>
diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
new file mode 100644
index 00000000..db5aa202
--- /dev/null
+++ b/web/html/xui/xray.html
@@ -0,0 +1,911 @@
+<!DOCTYPE html>
+<html lang="en">
+{{template "head" .}}
+<style>
+    @media (min-width: 769px) {
+        .ant-layout-content {
+            margin: 24px 16px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        .ant-tabs-nav .ant-tabs-tab {
+            margin: 0;
+            padding: 12px .5rem;
+        }
+    }
+
+    .ant-tabs-bar {
+        margin: 0;
+    }
+
+    .ant-list-item {
+        display: block;
+    }
+
+    .collapse-title {
+        color: inherit;
+        font-weight: bold;
+        font-size: 18px;
+        padding: 10px 20px;
+        border-bottom: 2px solid;
+    }
+
+    .collapse-title > i {
+        color: inherit;
+        font-size: 24px;
+    }
+</style>
+<body>
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+    {{ template "commonSider" . }}
+    <a-layout id="content-layout">
+        <a-layout-content>
+            <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
+                <a-space direction="vertical">
+                    <a-card hoverable style="margin-bottom: .5rem;">
+                        <a-row>
+                            <a-col :xs="24" :sm="8" style="padding: 4px;">
+                                <a-space direction="horizontal">
+                                    <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">{{ 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="16">
+                                <a-alert type="warning" style="float: right; width: fit-content"
+                                message='{{ i18n "pages.settings.infoDesc" }}'
+                                show-icon
+                                >
+                            </a-col>
+                        </a-row>
+                    </a-card>
+                    <a-tabs class="ant-card-dark-box-nohover" default-active-key="tpl-1" :class="themeSwitcher.currentTheme" style="padding: 20px 20px;">
+                        <a-tab-pane key="tpl-1" tab='{{ i18n "pages.settings.templates.basicTemplate"}}' style="padding-top: 20px;">
+                            <a-space direction="horizontal" style="padding: 20px 20px">
+                                <a-button type="primary" @click="resetXrayConfigToDefault">{{ i18n "pages.settings.resetDefaultConfig" }}</a-button>
+                            </a-space>
+                            <a-collapse>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.generalConfigs"}}'>
+                                    <a-row :xs="24" :sm="24" :lg="12">
+                                        <h2 class="collapse-title">
+                                            <a-icon type="warning"></a-icon>
+                                            {{ i18n "pages.settings.templates.generalConfigsDesc" }}
+                                        </h2>
+                                    </a-row>
+                                    <a-list-item>
+                                        <a-row style="padding: 20px">
+                                            <a-col :lg="24" :xl="12">
+                                                <a-list-item-meta 
+                                                    title='{{ i18n "pages.settings.templates.xrayConfigFreedomStrategy" }}'
+                                                    description='{{ i18n "pages.settings.templates.xrayConfigFreedomStrategyDesc" }}'/>
+                                            </a-col>
+                                            <a-col :lg="24" :xl="12">
+                                                <template>
+                                                    <a-select
+                                                        v-model="freedomStrategy"
+                                                        :dropdown-class-name="themeSwitcher.currentTheme"
+                                                        style="width: 100%">
+                                                        <a-select-option v-for="s in outboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
+                                                    </a-select>
+                                                </template>
+                                            </a-col>
+                                        </a-row>
+                                    </a-list-item>
+                                    <a-row style="padding: 20px">
+                                        <a-col :lg="24" :xl="12">
+                                            <a-list-item-meta 
+                                                title='{{ i18n "pages.settings.templates.xrayConfigRoutingStrategy" }}'
+                                                description='{{ i18n "pages.settings.templates.xrayConfigRoutingStrategyDesc" }}'/>
+                                        </a-col>
+                                        <a-col :lg="24" :xl="12">
+                                            <template>
+                                                <a-select
+                                                    v-model="routingStrategy"
+                                                    :dropdown-class-name="themeSwitcher.currentTheme"
+                                                    style="width: 100%">
+                                                    <a-select-option v-for="s in routingDomainStrategies" :value="s">[[ s ]]</a-select-option>
+                                                </a-select>
+                                            </template>
+                                        </a-col>
+                                    </a-row>
+                                </a-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.blockConfigs"}}'>
+                                    <a-row :xs="24" :sm="24" :lg="12">
+                                        <h2 class="collapse-title">
+                                            <a-icon type="warning"></a-icon>
+                                            {{ i18n "pages.settings.templates.blockConfigsDesc" }}
+                                        </h2>
+                                    </a-row>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigTorrent"}}' desc='{{ i18n "pages.settings.templates.xrayConfigTorrentDesc"}}' v-model="torrentSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigPrivateIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigPrivateIpDesc"}}' v-model="privateIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigAds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigAdsDesc"}}' v-model="AdsSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigFamily"}}' desc='{{ i18n "pages.settings.templates.xrayConfigFamilyDesc"}}' v-model="familyProtectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigSpeedtest"}}' desc='{{ i18n "pages.settings.templates.xrayConfigSpeedtestDesc"}}' v-model="SpeedTestSettings"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.blockCountryConfigs"}}'>
+                                    <a-row :xs="24" :sm="24" :lg="12">
+                                        <h2 class="collapse-title">
+                                            <a-icon type="warning"></a-icon>
+                                            {{ i18n "pages.settings.templates.blockCountryConfigsDesc" }}
+                                        </h2>
+                                    </a-row>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigIRIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigIRIpDesc"}}' v-model="IRIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigIRDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigIRDomainDesc"}}' v-model="IRDomainSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigChinaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigChinaIpDesc"}}' v-model="ChinaIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigChinaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigChinaDomainDesc"}}' v-model="ChinaDomainSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigRussiaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRussiaIpDesc"}}' v-model="RussiaIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigRussiaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRussiaDomainDesc"}}' v-model="RussiaDomainSettings"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.directCountryConfigs"}}'>
+                                    <a-row :xs="24" :sm="24" :lg="12">
+                                        <h2 class="collapse-title">
+                                            <a-icon type="warning"></a-icon>
+                                            {{ i18n "pages.settings.templates.directCountryConfigsDesc" }}
+                                        </h2>
+                                    </a-row>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectIRIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectIRIpDesc"}}' v-model="IRIpDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectIRDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectIRDomainDesc"}}' v-model="IRDomainDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectChinaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectChinaIpDesc"}}' v-model="ChinaIpDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectChinaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectChinaDomainDesc"}}' v-model="ChinaDomainDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectRussiaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectRussiaIpDesc"}}' v-model="RussiaIpDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigDirectRussiaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigDirectRussiaDomainDesc"}}' v-model="RussiaDomainDirectSettings"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.ipv4Configs"}}'>
+                                    <a-row :xs="24" :sm="24" :lg="12">
+                                        <h2 class="collapse-title">
+                                            <a-icon type="warning"></a-icon>
+                                            {{ i18n "pages.settings.templates.ipv4ConfigsDesc" }}
+                                        </h2>
+                                    </a-row>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigGoogleIPv4"}}' desc='{{ i18n "pages.settings.templates.xrayConfigGoogleIPv4Desc"}}' v-model="GoogleIPv4Settings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigNetflixIPv4"}}' desc='{{ i18n "pages.settings.templates.xrayConfigNetflixIPv4Desc"}}' v-model="NetflixIPv4Settings"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.warpConfigs"}}'>
+                                    <a-row :xs="24" :sm="24" :lg="12">
+                                        <h2 class="collapse-title">
+                                            <a-icon type="warning"></a-icon>
+                                            {{ i18n "pages.settings.templates.warpConfigsDesc" }}
+                                        </h2>
+                                    </a-row>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigGoogleWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigGoogleWARPDesc"}}' v-model="GoogleWARPSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigOpenAIWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigOpenAIWARPDesc"}}' v-model="OpenAIWARPSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigNetflixWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigNetflixWARPDesc"}}' v-model="NetflixWARPSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigSpotifyWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigSpotifyWARPDesc"}}' v-model="SpotifyWARPSettings"></setting-list-item>
+                                </a-collapse-panel>
+                            </a-collapse>
+                        </a-tab-pane>
+                        <a-tab-pane key="tpl-2" tab='{{ i18n "pages.settings.templates.manualLists"}}' style="padding-top: 20px;">
+                            <a-row :xs="24" :sm="24" :lg="12">
+                                <h2 class="collapse-title">
+                                    <a-icon type="warning"></a-icon>
+                                    {{ i18n "pages.settings.templates.manualListsDesc" }}
+                                </h2>
+                            </a-row>
+                            <a-collapse>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.manualBlockedIPs"}}'>
+                                    <setting-list-item type="textarea" v-model="manualBlockedIPs"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.manualBlockedDomains"}}'>
+                                    <setting-list-item type="textarea" v-model="manualBlockedDomains"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.manualDirectIPs"}}'>
+                                    <setting-list-item type="textarea" v-model="manualDirectIPs"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.manualDirectDomains"}}'>
+                                    <setting-list-item type="textarea" v-model="manualDirectDomains"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.manualIPv4Domains"}}'>
+                                    <setting-list-item type="textarea" v-model="manualIPv4Domains"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.manualWARPDomains"}}'>
+                                    <setting-list-item type="textarea" v-model="manualWARPDomains"></setting-list-item>
+                                </a-collapse-panel>
+                            </a-collapse>
+                        </a-tab-pane>
+                        <a-tab-pane key="tpl-3" tab='{{ i18n "pages.settings.templates.advancedTemplate"}}' style="padding-top: 20px;">
+                            <a-collapse>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigInbounds"}}'>
+                                    <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigInbounds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigInboundsDesc"}}' v-model="inboundSettings"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigOutbounds"}}'>
+                                    <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigOutbounds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigOutboundsDesc"}}' v-model="outboundSettings"></setting-list-item>
+                                </a-collapse-panel>
+                                <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigRoutings"}}'>
+                                    <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigRoutings"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRoutingsDesc"}}' v-model="routingRuleSettings"></setting-list-item>
+                                </a-collapse-panel>
+                            </a-collapse>
+                        </a-tab-pane>
+                        <a-tab-pane key="tpl-4" tab='{{ i18n "pages.settings.templates.completeTemplate"}}' style="padding-top: 20px;">
+                            <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigTemplate"}}' desc='{{ i18n "pages.settings.templates.xrayConfigTemplateDesc"}}' v-model="this.xraySetting"></setting-list-item>
+                        </a-tab-pane>
+                    </a-tabs>
+                </a-space>
+            </a-spin>
+        </a-layout-content>
+    </a-layout>
+</a-layout>
+{{template "js" .}}
+{{template "component/themeSwitcher" .}}
+{{template "component/setting"}}
+<script>
+    const app = new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#app',
+        data: {
+            siderDrawer,
+            themeSwitcher,
+            spinning: false,
+            oldXraySetting: '',
+            xraySetting: '',
+            saveBtnDisable: true,
+            ipv4Settings: {
+                tag: "IPv4",
+                protocol: "freedom",
+                settings: {
+                    domainStrategy: "UseIPv4"
+                }
+            },
+            warpSettings: {
+                tag: "WARP",
+                protocol: "socks",
+                settings: {
+                    servers: [
+                        {
+                            address: "127.0.0.1",
+                            port: 40000
+                        }
+                    ]
+                }
+            },
+            directSettings: {
+                tag: "direct",
+                protocol: "freedom"
+            },
+            outboundDomainStrategies: ["AsIs", "UseIP", "UseIPv4", "UseIPv6"],
+            routingDomainStrategies: ["AsIs", "IPIfNonMatch", "IPOnDemand"],
+            settingsData: {
+                protocols: {
+                    bittorrent: ["bittorrent"],
+                },
+                ips: {
+                    local: ["geoip:private"],
+                    cn: ["geoip:cn"],
+                    ir: ["ext:geoip_IR.dat:ir","ext:geoip_IR.dat:arvancloud","ext:geoip_IR.dat:derakcloud","ext:geoip_IR.dat:iranserver"],
+                    ru: ["geoip:ru"],
+                },
+                domains: {
+                    ads: [
+                        "geosite:category-ads-all",
+                        "ext:geosite_IR.dat:category-ads-all"
+                    ],
+                    speedtest: ["geosite:speedtest"],
+                    openai: ["geosite:openai"],
+                    google: ["geosite:google"],
+                    spotify: ["geosite:spotify"],
+                    netflix: ["geosite:netflix"],
+                    cn: [
+                        "geosite:cn",
+                        "regexp:.*\\.cn$"
+                    ],
+                    ru: [
+                        "geosite:category-gov-ru",
+                        "regexp:.*\\.ru$"
+                    ],
+                    ir: [
+                        "regexp:.*\\.ir$",
+                        "regexp:.*\\.xn--mgba3a4f16a$",  // .ایران
+                        "ext:geosite_IR.dat:ir"  // have rules to bypass all .ir domains.
+                    ]
+                },
+                familyProtectDNS: {
+                    "servers": [
+                        "1.1.1.3",  // https://developers.cloudflare.com/1.1.1.1/setup/
+                        "1.0.0.3",
+                        "94.140.14.15",  // https://adguard-dns.io/kb/general/dns-providers/
+                        "94.140.15.16"
+                    ],
+                    "queryStrategy": "UseIPv4"
+                },
+            }
+        },
+        methods: {
+            loading(spinning = true) {
+                this.spinning = spinning;
+            },
+            async getXraySetting() {
+                this.loading(true);
+                const msg = await HttpUtil.post("/panel/xray/");
+                this.loading(false);
+                if (msg.success) {
+                    this.oldXraySetting = msg.obj;
+                    this.xraySetting = msg.obj;
+                    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 restartPanel() {
+                await new Promise(resolve => {
+                    this.$confirm({
+                        title: '{{ i18n "pages.settings.restartPanel" }}',
+                        content: '{{ i18n "pages.settings.restartPanelDesc" }}',
+                        class: themeSwitcher.currentTheme,
+                        okText: '{{ i18n "sure" }}',
+                        cancelText: '{{ i18n "cancel" }}',
+                        onOk: () => resolve(),
+                    });
+                });
+                this.loading(true);
+                const msg = await HttpUtil.post("/panel/setting/restartPanel");
+                this.loading(false);
+                if (msg.success) {
+                    this.loading(true);
+                    await PromiseUtil.sleep(5000);
+                    var { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.xraySetting;
+                    if (host == this.oldXraySetting.webDomain) host = null;
+                    if (port == this.oldXraySetting.webPort) port = null;
+                    const isTLS = webCertFile !== "" || webKeyFile !== "";
+                    const url = buildURL({ host, port, isTLS, base, path: "panel/settings" });
+                    window.location.replace(url);
+                }
+            },
+            async fetchUserSecret() {
+                this.loading(true);
+                const userMessage = await HttpUtil.post("/panel/setting/getUserSecret", this.user);
+                if (userMessage.success) {
+                    this.user = userMessage.obj;
+                }
+                this.loading(false);
+            },
+            async updateSecret() {
+                this.loading(true);
+                const msg = await HttpUtil.post("/panel/setting/updateUserSecret", this.user);
+                if (msg.success) {
+                    this.user = msg.obj;
+                    window.location.replace(basePath + "logout");
+                }
+                this.loading(false);
+                await this.updateXraySetting();
+            },
+            generateRandomString(length) {
+                var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
+                let randomString = "";
+                for (let i = 0; i < length; i++) {
+                    randomString += chars[Math.floor(Math.random() * chars.length)];
+                }
+                return randomString;
+            },
+            async getNewSecret() {
+                this.loading(true);
+                await PromiseUtil.sleep(600);
+                const newSecret = this.generateRandomString(64);
+                this.user.loginSecret = newSecret;
+                document.getElementById("token").textContent = newSecret;
+                this.loading(false);
+            },
+            async toggleToken(value) {
+                if (value) {
+                await this.getNewSecret();
+                } else {
+                this.user.loginSecret = "";
+                }
+            },
+            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;
+                }
+            },
+            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, 1);
+                }
+                if (haveRules && outboundIndex === -1) {
+                    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;
+            }
+        },
+        async mounted() {
+            await this.getXraySetting();
+            while (true) {
+                await PromiseUtil.sleep(600);
+                this.saveBtnDisable = this.oldXraySetting === this.xraySetting;
+            }
+        },
+        computed: {
+            templateSettings: {
+                get: function () { return this.xraySetting ? JSON.parse(this.xraySetting) : null; },
+                set: function (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;
+                },
+            },
+            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;
+                },
+            },
+            freedomStrategy: {
+                get: function () {
+                    if (!this.templateSettings) return "AsIs";
+                    freedomOutbound = this.templateSettings.outbounds.find((o) => o.protocol === "freedom" && !o.tag);
+                    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);
+                    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;
+                }
+            },
+            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 });
+                    this.syncRulesWithOutbound("WARP", this.warpSettings);
+                }
+            },
+            manualBlockedIPs: {
+                get: function () { return JSON.stringify(this.blockedIPs, null, 2); },
+                set: debounce(function (value) { this.blockedIPs = JSON.parse(value); }, 1000)
+            },
+            manualBlockedDomains: {
+                get: function () { return JSON.stringify(this.blockedDomains, null, 2); },
+                set: debounce(function (value) { this.blockedDomains = JSON.parse(value); }, 1000)
+            },
+            manualDirectIPs: {
+                get: function () { return JSON.stringify(this.directIPs, null, 2); },
+                set: debounce(function (value) { this.directIPs = JSON.parse(value); }, 1000)
+            },
+            manualDirectDomains: {
+                get: function () { return JSON.stringify(this.directDomains, null, 2); },
+                set: debounce(function (value) { this.directDomains = JSON.parse(value); }, 1000)
+            },
+            manualIPv4Domains: {
+                get: function () { return JSON.stringify(this.ipv4Domains, null, 2); },
+                set: debounce(function (value) { this.ipv4Domains = JSON.parse(value); }, 1000)
+            },
+            manualWARPDomains: {
+                get: function () { return JSON.stringify(this.warpDomains, null, 2); },
+                set: debounce(function (value) { this.warpDomains = JSON.parse(value); }, 1000)
+            },
+            torrentSettings: {
+                get: function () {
+                    return 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));
+                    }
+                },
+            },
+            privateIpSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.local, this.blockedIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.local];
+                    } else {
+                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.local.includes(data));
+                    }
+                },
+            },
+            AdsSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.ads, this.blockedDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ads];
+                    } else {
+                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ads.includes(data));
+                    }
+                },
+            },
+            SpeedTestSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.speedtest, this.blockedDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.speedtest];
+                    } else {
+                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.speedtest.includes(data));
+                    }
+                },
+            },
+            familyProtectSettings: {
+                get: function () {
+                    if (!this.templateSettings || !this.templateSettings.dns || !this.templateSettings.dns.servers) return false;
+                    return doAllItemsExist(this.templateSettings.dns.servers, this.settingsData.familyProtectDNS.servers);
+                },
+                set: function (newValue) {
+                    newTemplateSettings = this.templateSettings;
+                    if (newValue) {
+                        newTemplateSettings.dns = this.settingsData.familyProtectDNS;
+                    } else {
+                        delete newTemplateSettings.dns;
+                    }
+                    this.templateSettings = newTemplateSettings;
+                },
+            },
+            GoogleIPv4Settings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.google, this.ipv4Domains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.ipv4Domains = [...this.ipv4Domains, ...this.settingsData.domains.google];
+                    } else {
+                        this.ipv4Domains = this.ipv4Domains.filter(data => !this.settingsData.domains.google.includes(data));
+                    }
+                },
+            },
+            NetflixIPv4Settings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.netflix, this.ipv4Domains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.ipv4Domains = [...this.ipv4Domains, ...this.settingsData.domains.netflix];
+                    } else {
+                        this.ipv4Domains = this.ipv4Domains.filter(data => !this.settingsData.domains.netflix.includes(data));
+                    }
+                },
+            },
+            IRIpSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.ir, this.blockedIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.ir];
+                    } else {
+                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.ir.includes(data));
+                    }
+                }
+            },
+            IRDomainSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.ir, this.blockedDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ir];
+                    } else {
+                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ir.includes(data));
+                    }
+                }
+            },
+            ChinaIpSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.cn, this.blockedIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.cn];
+                    } else {
+                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.cn.includes(data));
+                    }
+                }
+            },
+            ChinaDomainSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.cn, this.blockedDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.cn];
+                    } else {
+                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.cn.includes(data));
+                    }
+                }
+            },
+            RussiaIpSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.ru, this.blockedIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.ru];
+                    } else {
+                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.ru.includes(data));
+                    }
+                }
+            },
+            RussiaDomainSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.ru, this.blockedDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.ru];
+                    } else {
+                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.ru.includes(data));
+                    }
+                }
+            },
+            IRIpDirectSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.ir, this.directIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.directIPs = [...this.directIPs, ...this.settingsData.ips.ir];
+                    } else {
+                        this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.ir.includes(data));
+                    }
+                }
+            },
+            IRDomainDirectSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.ir, this.directDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.directDomains = [...this.directDomains, ...this.settingsData.domains.ir];
+                    } else {
+                        this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.ir.includes(data));
+                    }
+                }
+            },
+            ChinaIpDirectSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.cn, this.directIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.directIPs = [...this.directIPs, ...this.settingsData.ips.cn];
+                    } else {
+                        this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.cn.includes(data));
+                    }
+                }
+            },
+            ChinaDomainDirectSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.cn, this.directDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.directDomains = [...this.directDomains, ...this.settingsData.domains.cn];
+                    } else {
+                        this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.cn.includes(data));
+                    }
+                }
+            },
+            RussiaIpDirectSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.ru, this.directIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.directIPs = [...this.directIPs, ...this.settingsData.ips.ru];
+                    } else {
+                        this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.ru.includes(data));
+                    }
+                }
+            },
+            RussiaDomainDirectSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.ru, this.directDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.directDomains = [...this.directDomains, ...this.settingsData.domains.ru];
+                    } else {
+                        this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.ru.includes(data));
+                    }
+                }
+            },
+            GoogleWARPSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.google, this.warpDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.google];
+                    } else {
+                        this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.google.includes(data));
+                    }
+                },
+            },
+            OpenAIWARPSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.openai, this.warpDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.openai];
+                    } else {
+                        this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.openai.includes(data));
+                    }
+                },
+            },
+            NetflixWARPSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.netflix, this.warpDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.netflix];
+                    } else {
+                        this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.netflix.includes(data));
+                    }
+                },
+            },
+            SpotifyWARPSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.spotify, this.warpDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.warpDomains = [...this.warpDomains, ...this.settingsData.domains.spotify];
+                    } else {
+                        this.warpDomains = this.warpDomains.filter(data => !this.settingsData.domains.spotify.includes(data));
+                    }
+                },
+            },
+        },
+    });
+</script>
+</body>
+</html>
\ No newline at end of file