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: new frontend and mobile view #1286

---
 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        | 246 ++++++-
 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 ++++++++++++++++++++++++++
 24 files changed, 1643 insertions(+), 1407 deletions(-)
 create mode 100644 web/html/xui/xray.html

(limited to 'web/html/xui')

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) ]]
+    <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>
+    <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>
-    <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>
+<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="userExpiryC