From bea19a263db88fef44b4356082b199fbfcc39a25 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Sun, 6 Apr 2025 16:40:33 +0700
Subject: Code refactoring (#2865)

* refactor: use vue inline styles in entire application

* refactor: setting row in dashboard page

* refactor: use blob for download file in text modal

* refactor: move all html templates in `web/html` folder

* refactor: `DeviceUtils` -> `MediaQueryMixin`
The transition to mixins has been made, as they can update themselves.

* chore: pretty right buttons in `outbounds` tab in xray settings

* refactor: add translations for system status

* refactor: adjust gutter spacing in setting list item

* refactor: use native `a-input-password` for password field

* chore: return old system status
with new translations

* chore: add missing translation
---
 web/assets/js/util/index.js                        |   63 +-
 web/html/component/aClientTable.html               |  267 ++++
 web/html/component/aCustomStatistic.html           |   42 +
 web/html/component/aPersianDatepicker.html         |   72 +
 web/html/component/aSettingListItem.html           |   49 +
 web/html/component/aSidebar.html                   |  103 ++
 web/html/component/aTableSortable.html             |  232 +++
 web/html/component/aThemeSwitch.html               |  119 ++
 web/html/form/allocate.html                        |   15 +
 web/html/form/client.html                          |  172 +++
 web/html/form/inbound.html                         |  133 ++
 web/html/form/outbound.html                        |  517 +++++++
 web/html/form/protocol/dokodemo.html               |   20 +
 web/html/form/protocol/http.html                   |   26 +
 web/html/form/protocol/shadowsocks.html            |   50 +
 web/html/form/protocol/socks.html                  |   34 +
 web/html/form/protocol/trojan.html                 |   50 +
 web/html/form/protocol/vless.html                  |   50 +
 web/html/form/protocol/vmess.html                  |   23 +
 web/html/form/protocol/wireguard.html              |   76 +
 web/html/form/reality_settings.html                |   56 +
 web/html/form/sniffing.html                        |   29 +
 web/html/form/stream/external_proxy.html           |   29 +
 web/html/form/stream/stream_grpc.html              |   13 +
 web/html/form/stream/stream_httpupgrade.html       |   26 +
 web/html/form/stream/stream_kcp.html               |   48 +
 web/html/form/stream/stream_settings.html          |   51 +
 web/html/form/stream/stream_sockopt.html           |   66 +
 web/html/form/stream/stream_tcp.html               |   72 +
 web/html/form/stream/stream_ws.html                |   29 +
 web/html/form/stream/stream_xhttp.html             |   46 +
 web/html/form/tls_settings.html                    |  116 ++
 web/html/inbounds.html                             | 1530 +++++++++++++++++++
 web/html/index.html                                |  752 ++++++++++
 web/html/login.html                                |   21 +-
 web/html/modals/client_bulk_modal.html             |  250 ++++
 web/html/modals/client_modal.html                  |  172 +++
 web/html/modals/dns_modal.html                     |  114 ++
 web/html/modals/fakedns_modal.html                 |   57 +
 web/html/modals/inbound_info_modal.html            |  572 ++++++++
 web/html/modals/inbound_modal.html                 |  144 ++
 web/html/modals/prompt_modal.html                  |   71 +
 web/html/modals/qrcode_modal.html                  |  162 +++
 web/html/modals/text_modal.html                    |   62 +
 web/html/modals/warp_modal.html                    |  246 ++++
 web/html/modals/xray_balancer_modal.html           |  123 ++
 web/html/modals/xray_outbound_modal.html           |  127 ++
 web/html/modals/xray_reverse_modal.html            |  138 ++
 web/html/modals/xray_rule_modal.html               |  246 ++++
 web/html/settings.html                             |  542 +++++++
 web/html/settings/panel/general.html               |  149 ++
 web/html/settings/panel/security.html              |   60 +
 web/html/settings/panel/subscription/general.html  |   98 ++
 web/html/settings/panel/subscription/json.html     |  180 +++
 web/html/settings/panel/telegram.html              |   87 ++
 web/html/settings/xray/advanced.html               |   14 +
 web/html/settings/xray/balancers.html              |   53 +
 web/html/settings/xray/basics.html                 |  275 ++++
 web/html/settings/xray/dns.html                    |  149 ++
 web/html/settings/xray/outbounds.html              |   74 +
 web/html/settings/xray/reverse.html                |   38 +
 web/html/settings/xray/routing.html                |  119 ++
 web/html/xray.html                                 | 1450 ++++++++++++++++++
 web/html/xui/component/aClientTable.html           |  267 ----
 web/html/xui/component/aCustomStatistic.html       |   42 -
 web/html/xui/component/aPasswordInput.html         |   57 -
 web/html/xui/component/aPersianDatepicker.html     |   72 -
 web/html/xui/component/aSettingListItem.html       |   49 -
 web/html/xui/component/aSidebar.html               |  103 --
 web/html/xui/component/aTableSortable.html         |  232 ---
 web/html/xui/component/aThemeSwitch.html           |  119 --
 web/html/xui/form/allocate.html                    |   15 -
 web/html/xui/form/client.html                      |  172 ---
 web/html/xui/form/inbound.html                     |  133 --
 web/html/xui/form/outbound.html                    |  517 -------
 web/html/xui/form/protocol/dokodemo.html           |   20 -
 web/html/xui/form/protocol/http.html               |   26 -
 web/html/xui/form/protocol/shadowsocks.html        |   50 -
 web/html/xui/form/protocol/socks.html              |   34 -
 web/html/xui/form/protocol/trojan.html             |   50 -
 web/html/xui/form/protocol/vless.html              |   50 -
 web/html/xui/form/protocol/vmess.html              |   23 -
 web/html/xui/form/protocol/wireguard.html          |   76 -
 web/html/xui/form/reality_settings.html            |   56 -
 web/html/xui/form/sniffing.html                    |   29 -
 web/html/xui/form/stream/external_proxy.html       |   29 -
 web/html/xui/form/stream/stream_grpc.html          |   13 -
 web/html/xui/form/stream/stream_httpupgrade.html   |   26 -
 web/html/xui/form/stream/stream_kcp.html           |   48 -
 web/html/xui/form/stream/stream_settings.html      |   51 -
 web/html/xui/form/stream/stream_sockopt.html       |   66 -
 web/html/xui/form/stream/stream_tcp.html           |   72 -
 web/html/xui/form/stream/stream_ws.html            |   29 -
 web/html/xui/form/stream/stream_xhttp.html         |   46 -
 web/html/xui/form/tls_settings.html                |  116 --
 web/html/xui/inbounds.html                         | 1535 --------------------
 web/html/xui/index.html                            |  743 ----------
 web/html/xui/modals/client_bulk_modal.html         |  250 ----
 web/html/xui/modals/client_modal.html              |  172 ---
 web/html/xui/modals/dns_modal.html                 |  114 --
 web/html/xui/modals/fakedns_modal.html             |   57 -
 web/html/xui/modals/inbound_info_modal.html        |  572 --------
 web/html/xui/modals/inbound_modal.html             |  144 --
 web/html/xui/modals/prompt_modal.html              |   71 -
 web/html/xui/modals/qrcode_modal.html              |  161 --
 web/html/xui/modals/text_modal.html                |   52 -
 web/html/xui/modals/warp_modal.html                |  246 ----
 web/html/xui/modals/xray_balancer_modal.html       |  123 --
 web/html/xui/modals/xray_outbound_modal.html       |  127 --
 web/html/xui/modals/xray_reverse_modal.html        |  138 --
 web/html/xui/modals/xray_rule_modal.html           |  246 ----
 web/html/xui/settings.html                         |  540 -------
 web/html/xui/settings/panel/general.html           |  149 --
 web/html/xui/settings/panel/security.html          |   60 -
 .../xui/settings/panel/subscription/general.html   |   98 --
 web/html/xui/settings/panel/subscription/json.html |  180 ---
 web/html/xui/settings/panel/telegram.html          |   87 --
 web/html/xui/settings/xray/advanced.html           |   14 -
 web/html/xui/settings/xray/balancers.html          |   53 -
 web/html/xui/settings/xray/basics.html             |  275 ----
 web/html/xui/settings/xray/dns.html                |  149 --
 web/html/xui/settings/xray/outbounds.html          |   72 -
 web/html/xui/settings/xray/reverse.html            |   38 -
 web/html/xui/settings/xray/routing.html            |  119 --
 web/html/xui/xray.html                             | 1450 ------------------
 web/translation/translate.en_US.toml               |   12 +-
 web/translation/translate.es_ES.toml               |   14 +-
 web/translation/translate.fa_IR.toml               |   14 +-
 web/translation/translate.id_ID.toml               |   13 +-
 web/translation/translate.ja_JP.toml               |   14 +-
 web/translation/translate.pt_BR.toml               |   14 +-
 web/translation/translate.ru_RU.toml               |   14 +-
 web/translation/translate.tr_TR.toml               |   12 +-
 web/translation/translate.uk_UA.toml               |   14 +-
 web/translation/translate.vi_VN.toml               |   14 +-
 web/translation/translate.zh_CN.toml               |   12 +-
 web/translation/translate.zh_TW.toml               |   12 +-
 137 files changed, 10874 insertions(+), 10777 deletions(-)
 create mode 100644 web/html/component/aClientTable.html
 create mode 100644 web/html/component/aCustomStatistic.html
 create mode 100644 web/html/component/aPersianDatepicker.html
 create mode 100644 web/html/component/aSettingListItem.html
 create mode 100644 web/html/component/aSidebar.html
 create mode 100644 web/html/component/aTableSortable.html
 create mode 100644 web/html/component/aThemeSwitch.html
 create mode 100644 web/html/form/allocate.html
 create mode 100644 web/html/form/client.html
 create mode 100644 web/html/form/inbound.html
 create mode 100644 web/html/form/outbound.html
 create mode 100644 web/html/form/protocol/dokodemo.html
 create mode 100644 web/html/form/protocol/http.html
 create mode 100644 web/html/form/protocol/shadowsocks.html
 create mode 100644 web/html/form/protocol/socks.html
 create mode 100644 web/html/form/protocol/trojan.html
 create mode 100644 web/html/form/protocol/vless.html
 create mode 100644 web/html/form/protocol/vmess.html
 create mode 100644 web/html/form/protocol/wireguard.html
 create mode 100644 web/html/form/reality_settings.html
 create mode 100644 web/html/form/sniffing.html
 create mode 100644 web/html/form/stream/external_proxy.html
 create mode 100644 web/html/form/stream/stream_grpc.html
 create mode 100644 web/html/form/stream/stream_httpupgrade.html
 create mode 100644 web/html/form/stream/stream_kcp.html
 create mode 100644 web/html/form/stream/stream_settings.html
 create mode 100644 web/html/form/stream/stream_sockopt.html
 create mode 100644 web/html/form/stream/stream_tcp.html
 create mode 100644 web/html/form/stream/stream_ws.html
 create mode 100644 web/html/form/stream/stream_xhttp.html
 create mode 100644 web/html/form/tls_settings.html
 create mode 100644 web/html/inbounds.html
 create mode 100644 web/html/index.html
 create mode 100644 web/html/modals/client_bulk_modal.html
 create mode 100644 web/html/modals/client_modal.html
 create mode 100644 web/html/modals/dns_modal.html
 create mode 100644 web/html/modals/fakedns_modal.html
 create mode 100644 web/html/modals/inbound_info_modal.html
 create mode 100644 web/html/modals/inbound_modal.html
 create mode 100644 web/html/modals/prompt_modal.html
 create mode 100644 web/html/modals/qrcode_modal.html
 create mode 100644 web/html/modals/text_modal.html
 create mode 100644 web/html/modals/warp_modal.html
 create mode 100644 web/html/modals/xray_balancer_modal.html
 create mode 100644 web/html/modals/xray_outbound_modal.html
 create mode 100644 web/html/modals/xray_reverse_modal.html
 create mode 100644 web/html/modals/xray_rule_modal.html
 create mode 100644 web/html/settings.html
 create mode 100644 web/html/settings/panel/general.html
 create mode 100644 web/html/settings/panel/security.html
 create mode 100644 web/html/settings/panel/subscription/general.html
 create mode 100644 web/html/settings/panel/subscription/json.html
 create mode 100644 web/html/settings/panel/telegram.html
 create mode 100644 web/html/settings/xray/advanced.html
 create mode 100644 web/html/settings/xray/balancers.html
 create mode 100644 web/html/settings/xray/basics.html
 create mode 100644 web/html/settings/xray/dns.html
 create mode 100644 web/html/settings/xray/outbounds.html
 create mode 100644 web/html/settings/xray/reverse.html
 create mode 100644 web/html/settings/xray/routing.html
 create mode 100644 web/html/xray.html
 delete mode 100644 web/html/xui/component/aClientTable.html
 delete mode 100644 web/html/xui/component/aCustomStatistic.html
 delete mode 100644 web/html/xui/component/aPasswordInput.html
 delete mode 100644 web/html/xui/component/aPersianDatepicker.html
 delete mode 100644 web/html/xui/component/aSettingListItem.html
 delete mode 100644 web/html/xui/component/aSidebar.html
 delete mode 100644 web/html/xui/component/aTableSortable.html
 delete mode 100644 web/html/xui/component/aThemeSwitch.html
 delete mode 100644 web/html/xui/form/allocate.html
 delete mode 100644 web/html/xui/form/client.html
 delete mode 100644 web/html/xui/form/inbound.html
 delete mode 100644 web/html/xui/form/outbound.html
 delete mode 100644 web/html/xui/form/protocol/dokodemo.html
 delete mode 100644 web/html/xui/form/protocol/http.html
 delete mode 100644 web/html/xui/form/protocol/shadowsocks.html
 delete mode 100644 web/html/xui/form/protocol/socks.html
 delete mode 100644 web/html/xui/form/protocol/trojan.html
 delete mode 100644 web/html/xui/form/protocol/vless.html
 delete mode 100644 web/html/xui/form/protocol/vmess.html
 delete mode 100644 web/html/xui/form/protocol/wireguard.html
 delete mode 100644 web/html/xui/form/reality_settings.html
 delete mode 100644 web/html/xui/form/sniffing.html
 delete mode 100644 web/html/xui/form/stream/external_proxy.html
 delete mode 100644 web/html/xui/form/stream/stream_grpc.html
 delete mode 100644 web/html/xui/form/stream/stream_httpupgrade.html
 delete mode 100644 web/html/xui/form/stream/stream_kcp.html
 delete mode 100644 web/html/xui/form/stream/stream_settings.html
 delete mode 100644 web/html/xui/form/stream/stream_sockopt.html
 delete mode 100644 web/html/xui/form/stream/stream_tcp.html
 delete mode 100644 web/html/xui/form/stream/stream_ws.html
 delete mode 100644 web/html/xui/form/stream/stream_xhttp.html
 delete mode 100644 web/html/xui/form/tls_settings.html
 delete mode 100644 web/html/xui/inbounds.html
 delete mode 100644 web/html/xui/index.html
 delete mode 100644 web/html/xui/modals/client_bulk_modal.html
 delete mode 100644 web/html/xui/modals/client_modal.html
 delete mode 100644 web/html/xui/modals/dns_modal.html
 delete mode 100644 web/html/xui/modals/fakedns_modal.html
 delete mode 100644 web/html/xui/modals/inbound_info_modal.html
 delete mode 100644 web/html/xui/modals/inbound_modal.html
 delete mode 100644 web/html/xui/modals/prompt_modal.html
 delete mode 100644 web/html/xui/modals/qrcode_modal.html
 delete mode 100644 web/html/xui/modals/text_modal.html
 delete mode 100644 web/html/xui/modals/warp_modal.html
 delete mode 100644 web/html/xui/modals/xray_balancer_modal.html
 delete mode 100644 web/html/xui/modals/xray_outbound_modal.html
 delete mode 100644 web/html/xui/modals/xray_reverse_modal.html
 delete mode 100644 web/html/xui/modals/xray_rule_modal.html
 delete mode 100644 web/html/xui/settings.html
 delete mode 100644 web/html/xui/settings/panel/general.html
 delete mode 100644 web/html/xui/settings/panel/security.html
 delete mode 100644 web/html/xui/settings/panel/subscription/general.html
 delete mode 100644 web/html/xui/settings/panel/subscription/json.html
 delete mode 100644 web/html/xui/settings/panel/telegram.html
 delete mode 100644 web/html/xui/settings/xray/advanced.html
 delete mode 100644 web/html/xui/settings/xray/balancers.html
 delete mode 100644 web/html/xui/settings/xray/basics.html
 delete mode 100644 web/html/xui/settings/xray/dns.html
 delete mode 100644 web/html/xui/settings/xray/outbounds.html
 delete mode 100644 web/html/xui/settings/xray/reverse.html
 delete mode 100644 web/html/xui/settings/xray/routing.html
 delete mode 100644 web/html/xui/xray.html

(limited to 'web')

diff --git a/web/assets/js/util/index.js b/web/assets/js/util/index.js
index 625af8b9..93416abe 100644
--- a/web/assets/js/util/index.js
+++ b/web/assets/js/util/index.js
@@ -83,7 +83,7 @@ class PromiseUtil {
 class RandomUtil {
     static getSeq({ type = "default", hasNumbers = true, hasLowercase = true, hasUppercase = true } = {}) {
         let seq = '';
-        
+
         switch (type) {
             case "hex":
                 seq += "0123456789abcdef";
@@ -488,7 +488,7 @@ class ClipboardManager {
         return new Promise((resolve) => {
             try {
                 const textarea = window.document.createElement('textarea');
-    
+
                 textarea.style.fontSize = '12pt';
                 textarea.style.border = '0';
                 textarea.style.padding = '0';
@@ -498,14 +498,14 @@ class ClipboardManager {
                 textarea.style.top = `${window.pageYOffset || document.documentElement.scrollTop}px`;
                 textarea.setAttribute('readonly', '');
                 textarea.value = content;
-    
+
                 window.document.body.appendChild(textarea);
-    
+
                 textarea.select();
                 window.document.execCommand("copy");
-    
+
                 window.document.body.removeChild(textarea);
-    
+
                 resolve(true)
             } catch {
                 resolve(false)
@@ -558,7 +558,7 @@ class CPUFormatter {
     static cpuSpeedFormat(speed) {
         return speed > 1000 ? (speed / 1000).toFixed(2) + " GHz" : speed.toFixed(2) + " MHz";
     }
-    
+
     static cpuCoreFormat(cores) {
         return cores === 1 ? "1 Core" : cores + " Cores";
     }
@@ -579,7 +579,7 @@ class NumberFormatter {
     static addZero(num) {
         return num < 10 ? "0" + num : num;
     }
-    
+
     static toFixed(num, n) {
         n = Math.pow(10, n);
         return Math.floor(num * n) / n;
@@ -610,7 +610,7 @@ class CookieManager {
         }
         return '';
     }
-    
+
     static setCookie(cname, cvalue, exdays) {
         const d = new Date();
         d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
@@ -630,7 +630,7 @@ class ColorUtils {
             default: return "red";
         }
     }
-    
+
     static clientUsageColor(clientStats, trafficDiff) {
         switch (true) {
             case !clientStats || clientStats.total == 0: return "#7a316f";
@@ -639,7 +639,7 @@ class ColorUtils {
             default: return "#cf3c3c";
         }
     }
-    
+
     static userExpiryColor(threshold, client, isDark = false) {
         if (!client.enable) return isDark ? '#2c3950' : '#bcbcbc';
         let now = new Date().getTime(), expiry = client.expiryTime;
@@ -665,7 +665,7 @@ class URLBuilder {
         if (!host || host.length === 0) host = window.location.hostname;
         if (!port || port.length === 0) port = window.location.port;
         if (isTLS === undefined) isTLS = window.location.protocol === "https:";
-        
+
         const protocol = isTLS ? "https:" : "http:";
         port = String(port);
         if (port === "" || (isTLS && port === "443") || (!isTLS && port === "80")) {
@@ -673,7 +673,7 @@ class URLBuilder {
         } else {
             port = `:${port}`;
         }
-        
+
         return `${protocol}//${host}${port}${base}${path}`;
     }
 }
@@ -744,11 +744,11 @@ class LanguageManager {
 
     static getLanguage() {
         let lang = CookieManager.getCookie("lang");
-    
+
         if (!lang) {
             if (window.navigator) {
                 lang = window.navigator.language || window.navigator.userLanguage;
-    
+
                 if (LanguageManager.isSupportLanguage(lang)) {
                     CookieManager.setCookie("lang", lang, 150);
                 } else {
@@ -760,30 +760,43 @@ class LanguageManager {
                 window.location.reload();
             }
         }
-    
+
         return lang;
     }
-    
+
     static setLanguage(language) {
         if (!LanguageManager.isSupportLanguage(language)) {
             language = "en-US";
         }
-    
+
         CookieManager.setCookie("lang", language, 150);
         window.location.reload();
     }
-    
+
     static isSupportLanguage(language) {
         const languageFilter = LanguageManager.supportedLanguages.filter((lang) => {
             return lang.value === language
         })
-    
+
         return languageFilter.length > 0;
-    }    
+    }
 }
 
-class DeviceUtils {
-    static isMobile() {
-        return window.innerWidth <= 768;
-    }
+const MediaQueryMixin = {
+    data() {
+        return {
+            isMobile: window.innerWidth <= 768,
+        };
+    },
+    methods: {
+        updateDeviceType() {
+            this.isMobile = window.innerWidth <= 768;
+        },
+    },
+    mounted() {
+        window.addEventListener('resize', this.updateDeviceType);
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.updateDeviceType);
+    },
 }
\ No newline at end of file
diff --git a/web/html/component/aClientTable.html b/web/html/component/aClientTable.html
new file mode 100644
index 00000000..868112d9
--- /dev/null
+++ b/web/html/component/aClientTable.html
@@ -0,0 +1,267 @@
+{{define "component/aClientTable"}}
+<template slot="actions" slot-scope="text, client, index">
+  <a-tooltip>
+    <template slot="title">{{ i18n "qrCode" }}</template>
+    <a-icon :style="{ fontSize: '24px' }" class="normal-icon" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record.id,client);"></a-icon>
+  </a-tooltip>
+  <a-tooltip>
+    <template slot="title">{{ i18n "pages.client.edit" }}</template>
+    <a-icon :style="{ fontSize: '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="{ fontSize: '24px' }" class="normal-icon" type="info-circle" @click="showInfo(record.id,client);"></a-icon>
+  </a-tooltip>
+  <a-tooltip>
+    <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
+    <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: 'var(--color-primary-100)'}"></a-icon>
+      <a-icon :style="{ fontSize: '24px', cursor: 'pointer' }" 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-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="{ fontSize: '24px', cursor: 'pointer' }" 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="client.enable && 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="client.enable && isClientOnline(client.email)">{{ i18n "online" }}</template>
+    </template>
+    <a-badge :class="isClientOnline(client.email)? 'online-animation' : ''" :color="client.enable ? statsExpColor(record, client.email) : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'"></a-badge>
+  </a-tooltip> [[ client.email ]]
+</template>
+<template slot="traffic" slot-scope="text, client">
+  <a-popover :overlay-class-name="themeSwitcher.currentTheme">
+    <template slot="content" v-if="client.email">
+      <table cellpadding="2" width="100%">
+        <tr>
+          <td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
+          <td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
+        </tr>
+        <tr v-if="client.totalGB > 0">
+          <td>{{ i18n "remained" }}</td>
+          <td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
+        </tr>
+      </table>
+    </template>
+    <table>
+      <tr class="tr-table-box">
+        <td class="tr-table-rt"> [[ SizeFormatter.sizeFormat(getSumStats(record, client.email)) ]] </td>
+        <td class="tr-table-bar" 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 class="tr-table-bar" v-else-if="client.totalGB > 0">
+          <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="statsProgress(record, client.email)" />
+        </td>
+        <td v-else class="infinite-bar tr-table-bar">
+          <a-progress :show-info="false" :percent="100"></a-progress>
+        </td>
+        <td class="tr-table-lt">
+          <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
+          <span v-else class="tr-infinity-ch">&infin;</span>
+        </td>
+      </tr>
+    </table>
+  </a-popover>
+</template>
+<template slot="expiryTime" slot-scope="text, client, index">
+  <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>
+          <template v-if="app.datepicker === 'gregorian'">
+            [[ DateUtil.formatMillis(client._expiryTime) ]]
+          </template>
+          <template v-else>
+            [[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
+          </template>
+        </span>
+      </template>
+      <table>
+        <tr class="tr-table-box">
+          <td class="tr-table-rt"> [[ remainedDays(client.expiryTime) ]] </td>
+          <td class="infinite-bar tr-table-bar">
+            <a-progress :show-info="false" :status="isClientEnabled(record, client.email)? 'exception' : ''" :percent="expireProgress(client.expiryTime, client.reset)" />
+          </td>
+          <td class="tr-table-lt">[[ 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>
+          <template v-if="app.datepicker === 'gregorian'">
+            [[ DateUtil.formatMillis(client._expiryTime) ]]
+          </template>
+          <template v-else>
+            [[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
+          </template>
+        </span>
+      </template>
+      <a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
+    </a-popover>
+    <a-tag v-else :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" :style="{ border: 'none' }" class="infinite-tag">
+      <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+        <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+      </svg>
+    </a-tag>
+  </template>
+</template>
+<template slot="actionMenu" slot-scope="text, client, index">
+  <a-dropdown :trigger="['click']">
+    <a-icon @click="e => e.preventDefault()" type="ellipsis" :style="{ fontSize: '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="{ fontSize: '14px' }" type="qrcode"></a-icon>
+        {{ i18n "qrCode" }}
+      </a-menu-item>
+      <a-menu-item @click="openEditClient(record.id,client);">
+        <a-icon :style="{ fontSize: '14px' }" type="edit"></a-icon>
+        {{ i18n "pages.client.edit" }}
+      </a-menu-item>
+      <a-menu-item @click="showInfo(record.id,client);">
+        <a-icon :style="{ fontSize: '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="{ fontSize: '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="{ fontSize: '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="{ textAlign: 'center' }">{{ i18n "pages.inbounds.traffic" }}</td>
+        </tr>
+        <tr>
+          <td width="80px" :style="{ margin: '0', textAlign: 'right', fontSize: '1em' }"> [[ SizeFormatter.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>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
+                    <td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
+                  </tr>
+                  <tr>
+                    <td>{{ i18n "remained" }}</td>
+                    <td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
+                  </tr>
+                </table>
+              </template>
+              <a-progress :stroke-color="clientStatsColor(record, client.email)" :show-info="false" :status="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" :percent="100"></a-progress>
+          </td>
+          <td width="80px">
+            <template v-if="client.totalGB > 0">[[ client._totalGB + "GB" ]]</template>
+            <span v-else class="tr-infinity-ch">&infin;</span>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="3" :style="{ textAlign: 'center' }">
+            <a-divider :style="{ margin: '0', borderCollapse: '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', textAlign: 'right', fontSize: '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>
+                    <template v-if="app.datepicker === 'gregorian'">
+                      [[ DateUtil.formatMillis(client._expiryTime) ]]
+                    </template>
+                    <template v-else>
+                      [[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
+                    </template>
+                  </span>
+                </template>
+                <a-progress :show-info="false" :status="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="{ textAlign: '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>
+                    <template v-if="app.datepicker === 'gregorian'">
+                      [[ DateUtil.formatMillis(client._expiryTime) ]]
+                    </template>
+                    <template v-else>
+                      [[ DateUtil.convertToJalalian(moment(client._expiryTime)) ]]
+                    </template>
+                  </span>
+                </template>
+                <a-tag :style="{ minWidth: '50px', border: 'none' }" :color="ColorUtils.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">
+                <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
+                  <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
+                </svg>
+              </a-tag>
+          </template>
+          </td>
+        </tr>
+      </table>
+    </template>
+    <a-badge>
+      <a-icon v-if="!client.enable" slot="count" type="pause-circle" theme="filled" :style="{ color: themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc' }"></a-icon>
+      <a-button shape="round" size="small" :style="{ fontSize: '14px', padding: '0 10px' }">
+        <a-icon type="solution"></a-icon>
+      </a-button>
+    </a-badge>
+  </a-popover>
+</template>
+{{end}}
diff --git a/web/html/component/aCustomStatistic.html b/web/html/component/aCustomStatistic.html
new file mode 100644
index 00000000..0bff128d
--- /dev/null
+++ b/web/html/component/aCustomStatistic.html
@@ -0,0 +1,42 @@
+{{define "component/customStatistic"}}
+<template>
+    <a-statistic :title="title" :value="value">
+        <template #prefix>
+            <slot name="prefix"></slot>
+        </template>
+        <template #suffix>
+            <slot name="suffix"></slot>
+        </template>
+    </a-statistic>
+</template>
+{{end}}
+
+{{define "component/aCustomStatistic"}}
+<style>
+  .dark .ant-statistic-content {
+    color: var(--dark-color-text-primary)
+  }
+  .dark .ant-statistic-title {
+    color: rgba(255, 255, 255, 0.55)
+  }
+  .ant-statistic-content {
+    font-size: 16px;
+  }
+</style>
+
+<script>
+  Vue.component('a-custom-statistic', {
+    props: {
+      'title': {
+        type: String,
+        required: false,
+      },
+      'value': {
+        type: String,
+        required: false
+      }
+    },
+    template: `{{template "component/customStatistic"}}`,
+  });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/component/aPersianDatepicker.html b/web/html/component/aPersianDatepicker.html
new file mode 100644
index 00000000..ebd85a08
--- /dev/null
+++ b/web/html/component/aPersianDatepicker.html
@@ -0,0 +1,72 @@
+{{define "component/persianDatepickerTemplate"}}
+<template>
+    <div>
+        <a-input :value="value" type="text" v-model="date" data-jdp class="persian-datepicker"
+            @input="$emit('input', convertToGregorian($event.target.value)); jalaliDatepicker.hide();"
+            :placeholder="placeholder">
+            <template #addonAfter>
+                <a-icon type="calendar" :style="{ fontSize: '14px', opacity: '0.5' }" />
+            </template>
+        </a-input>
+    </div>
+</template>
+{{end}}
+
+{{define "component/aPersianDatepicker"}}
+<link rel="stylesheet" href="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.css?{{ .cur_ver }}" />
+<script src="{{ .base_path }}assets/moment/moment-jalali.min.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/persian-datepicker/persian-datepicker.min.js?{{ .cur_ver }}"></script>
+<script>
+    const persianDatepicker = {};
+
+    Vue.component('a-persian-datepicker', {
+        props: {
+            'format': {
+                type: undefined,
+                required: false,
+            },
+            'value': {
+                type: String,
+                required: false,
+            },
+            'placeholder': {
+                type: String,
+                required: false,
+            },
+        },
+        template: `{{template "component/persianDatepickerTemplate"}}`,
+        data() {
+            return {
+                date: '',
+                persianDatepicker,
+            };
+        },
+        watch: {
+            value: function (date) {
+                this.date = this.convertToJalalian(date)
+            }
+        },
+        mounted() {
+            this.date = this.convertToJalalian(this.value)
+            this.listenToDatepicker()
+        },
+        methods: {
+            convertToGregorian(date) {
+                return date ? moment(moment(date, 'jYYYY/jMM/jDD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')) : null
+            },
+            convertToJalalian(date) {
+                return date && moment.isMoment(date) ? date.format('jYYYY/jMM/jDD HH:mm:ss') : null
+            },
+            listenToDatepicker() {
+                jalaliDatepicker.startWatch({
+                    time: true,
+                    zIndex: '9999',
+                    hideAfterChange: true,
+                    useDropDownYears: false,
+                    changeMonthRotateYear: true,
+                });
+            },
+        }
+    });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/component/aSettingListItem.html b/web/html/component/aSettingListItem.html
new file mode 100644
index 00000000..27a7abac
--- /dev/null
+++ b/web/html/component/aSettingListItem.html
@@ -0,0 +1,49 @@
+{{define "component/settingListItem"}}
+<a-list-item :style="{ padding: padding }">
+    <a-row :gutter="[8,16]">
+        <a-col :lg="24" :xl="12">
+            <a-list-item-meta>
+                <template #title>
+                    <slot name="title"></slot>
+                </template>
+                <template #description>
+                    <slot name="description"></slot>
+                </template>
+            </a-list-item-meta>
+        </a-col>
+        <a-col :lg="24" :xl="12">
+            <slot name="control"></slot>
+        </a-col>
+    </a-row>
+</a-list-item>
+{{end}}
+
+{{define "component/aSettingListItem"}}
+<script>
+    Vue.component('a-setting-list-item', {
+        props: {
+            'paddings': {
+                type: String,
+                required: false,
+                defaultValue: "default",
+                validator: function (value) {
+                    return ['small', 'default'].includes(value)
+                }
+            }
+        },
+        template: `{{ template "component/settingListItem" }}`,
+        computed: {
+            padding() {
+                switch (this.paddings) {
+                    case "small":
+                        return "10px 20px !important"
+                        break;
+                    case "default":
+                        return "20px !important"
+                        break;
+                }
+            }
+        }
+    })
+</script>
+{{end}}
diff --git a/web/html/component/aSidebar.html b/web/html/component/aSidebar.html
new file mode 100644
index 00000000..dfaebb17
--- /dev/null
+++ b/web/html/component/aSidebar.html
@@ -0,0 +1,103 @@
+{{define "component/sidebar/content"}}
+<template>
+    <div class="ant-sidebar">
+        <a-layout-sider :theme="themeSwitcher.currentTheme" collapsible :collapsed="collapsed"
+            @collapse="(isCollapsed, type) => collapseHandle(isCollapsed, type)" breakpoint="md">
+            <a-theme-switch></a-theme-switch>
+            <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
+                @click="({key}) => openLink(key)">
+                <a-menu-item v-for="tab in tabs" :key="tab.key">
+                    <a-icon :type="tab.icon"></a-icon>
+                    <span v-text="tab.title"></span>
+                </a-menu-item>
+            </a-menu>
+        </a-layout-sider>
+        <a-drawer placement="left" :closable="false" @close="closeDrawer" :visible="visible"
+            :wrap-class-name="themeSwitcher.currentTheme" :wrap-style="{ padding: 0 }" :style="{ height: '100%' }">
+            <div class="drawer-handle" @click="toggleDrawer" slot="handle">
+                <a-icon :type="visible ? 'close' : 'menu-fold'"></a-icon>
+            </div>
+            <a-theme-switch></a-theme-switch>
+            <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="activeTab"
+                @click="({key}) => openLink(key)">
+                <a-menu-item v-for="tab in tabs" :key="tab.key">
+                    <a-icon :type="tab.icon"></a-icon>
+                    <span v-text="tab.title"></span>
+                </a-menu-item>
+            </a-menu>
+        </a-drawer>
+    </div>
+</template>
+{{end}}
+
+{{define "component/aSidebar"}}
+<style>
+    .ant-sidebar>.ant-layout-sider {
+        height: 100%;
+    }
+</style>
+
+<script>
+    const SIDEBAR_COLLAPSED_KEY = "isSidebarCollapsed"
+
+    Vue.component('a-sidebar', {
+        data() {
+            return {
+                tabs: [
+                    {
+                        key: 'panel/',
+                        icon: 'dashboard',
+                        title: '{{ i18n "menu.dashboard"}}'
+                    },
+                    {
+                        key: 'panel/inbounds',
+                        icon: 'user',
+                        title: '{{ i18n "menu.inbounds"}}'
+                    },
+                    {
+                        key: 'panel/settings',
+                        icon: 'setting',
+                        title: '{{ i18n "menu.settings"}}'
+                    },
+                    {
+                        key: 'panel/xray',
+                        icon: 'tool',
+                        title: '{{ i18n "menu.xray"}}'
+                    },
+                    {
+                        key: 'logout/',
+                        icon: 'logout',
+                        title: '{{ i18n "menu.logout"}}'
+                    },
+                ],
+                activeTab: [
+                    '{{ .request_uri }}'
+                ],
+                visible: false,
+                collapsed: JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY)),
+            }
+        },
+        methods: {
+            openLink(key) {
+                return key.startsWith('http') ? 
+                    window.open(`{{ .base_path }}${key}`) : 
+                    location.href = `{{ .base_path }}${key}`
+            },
+            closeDrawer() {
+                this.visible = false;
+            },
+            toggleDrawer() {
+                this.visible = !this.visible;
+            },
+            collapseHandle(collapsed, type) {
+                if (type === "clickTrigger") {
+                    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, collapsed);
+
+                    this.collapsed = JSON.parse(localStorage.getItem(SIDEBAR_COLLAPSED_KEY));
+                }
+            }
+        },
+        template: `{{template "component/sidebar/content"}}`,
+    });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/component/aTableSortable.html b/web/html/component/aTableSortable.html
new file mode 100644
index 00000000..443ac50c
--- /dev/null
+++ b/web/html/component/aTableSortable.html
@@ -0,0 +1,232 @@
+{{define "component/sortableTableTrigger"}}
+<a-icon type="drag" class="sortable-icon" :style="{ cursor: 'move' }" @mouseup="mouseUpHandler" @mousedown="mouseDownHandler"
+  @click="clickHandler" />
+{{end}}
+
+{{define "component/aTableSortable"}}
+<script>
+  const DRAGGABLE_ROW_CLASS = 'draggable-row';
+  const findParentRowElement = (el) => {
+    if (!el || !el.tagName) {
+      return null;
+    } else if (el.classList.contains(DRAGGABLE_ROW_CLASS)) {
+      return el;
+    } else if (el.parentNode) {
+      return findParentRowElement(el.parentNode);
+    } else {
+      return null;
+    }
+  }
+  Vue.component('a-table-sortable', {
+    data() {
+      return {
+        sortingElementIndex: null,
+        newElementIndex: null,
+      };
+    },
+    props: {
+      'data-source': {
+        type: undefined,
+        required: false,
+      },
+      'customRow': {
+        type: undefined,
+        required: false,
+      }
+    },
+    inheritAttrs: false,
+    provide() {
+      const sortable = {}
+      Object.defineProperty(sortable, "setSortableIndex", {
+        enumerable: true,
+        get: () => this.setCurrentSortableIndex,
+      });
+      Object.defineProperty(sortable, "resetSortableIndex", {
+        enumerable: true,
+        get: () => this.resetSortableIndex,
+      });
+      return {
+        sortable,
+      }
+    },
+    render: function (createElement) {
+      return createElement('a-table', {
+        class: {
+          'ant-table-is-sorting': this.isDragging(),
+        },
+        props: {
+          ...this.$attrs,
+          'data-source': this.records,
+          customRow: (record, index) => this.customRowRender(record, index),
+        },
+        on: this.$listeners,
+        nativeOn: {
+          drop: (e) => this.dropHandler(e),
+        },
+        scopedSlots: this.$scopedSlots,
+      }, this.$slots.default,)
+    },
+    created() {
+      this.$memoSort = {};
+    },
+    methods: {
+      isDragging() {
+        const currentIndex = this.sortingElementIndex;
+        return currentIndex !== null && currentIndex !== undefined;
+      },
+      resetSortableIndex(e, index) {
+        this.sortingElementIndex = null;
+        this.newElementIndex = null;
+        this.$memoSort = {};
+      },
+      setCurrentSortableIndex(e, index) {
+        this.sortingElementIndex = index;
+      },
+      dragStartHandler(e, index) {
+        if (!this.isDragging()) {
+          e.preventDefault();
+          return;
+        }
+        const hideDragImage = this.$el.cloneNode(true);
+        hideDragImage.id = "hideDragImage-hide";
+        hideDragImage.style.opacity = 0;
+        e.dataTransfer.setDragImage(hideDragImage, 0, 0);
+      },
+      dragStopHandler(e, index) {
+        const hideDragImage = document.getElementById('hideDragImage-hide');
+        if (hideDragImage) hideDragImage.remove();
+        this.resetSortableIndex(e, index);
+      },
+      dragOverHandler(e, index) {
+        if (!this.isDragging()) {
+          return;
+        }
+        e.preventDefault();
+        const currentIndex = this.sortingElementIndex;
+        if (index === currentIndex) {
+          this.newElementIndex = null;
+          return;
+        }
+        const row = findParentRowElement(e.target);
+        if (!row) {
+          return;
+        }
+        const rect = row.getBoundingClientRect();
+        const offsetTop = e.pageY - rect.top;
+        if (offsetTop < rect.height / 2) {
+          this.newElementIndex = Math.max(index - 1, 0);
+        } else {
+          this.newElementIndex = index;
+        }
+      },
+      dropHandler(e) {
+        if (this.isDragging()) {
+          this.$emit('onsort', this.sortingElementIndex, this.newElementIndex);
+        }
+      },
+      customRowRender(record, index) {
+        const parentMethodResult = this.customRow?.(record, index) || {};
+        const newIndex = this.newElementIndex;
+        const currentIndex = this.sortingElementIndex;
+        return {
+          ...parentMethodResult,
+          attrs: {
+            ...(parentMethodResult?.attrs || {}),
+            draggable: true,
+          },
+          on: {
+            ...(parentMethodResult?.on || {}),
+            dragstart: (e) => this.dragStartHandler(e, index),
+            dragend: (e) => this.dragStopHandler(e, index),
+            dragover: (e) => this.dragOverHandler(e, index),
+          },
+          class: {
+            ...(parentMethodResult?.class || {}),
+            [DRAGGABLE_ROW_CLASS]: true,
+            ['dragging']: this.isDragging() ? (newIndex === null ? index === currentIndex : index === newIndex) : false,
+          },
+        };
+      }
+    },
+    computed: {
+      records() {
+        const newIndex = this.newElementIndex;
+        const currentIndex = this.sortingElementIndex;
+        if (!this.isDragging() || newIndex === null || currentIndex === newIndex) {
+          return this.dataSource;
+        }
+        if (this.$memoSort.newIndex === newIndex) {
+          return this.$memoSort.list;
+        }
+        let list = [...this.dataSource];
+        list.splice(newIndex, 0, list.splice(currentIndex, 1)[0]);
+        this.$memoSort = {
+          newIndex,
+          list,
+        };
+        return list;
+      }
+    }
+  });
+  Vue.component('a-table-sort-trigger', {
+    template: `{{template "component/sortableTableTrigger"}}`,
+    props: {
+      'item-index': {
+        type: undefined,
+        required: false
+      }
+    },
+    inject: ['sortable'],
+    methods: {
+      mouseDownHandler(e) {
+        if (this.sortable) {
+          this.sortable.setSortableIndex(e, this.itemIndex);
+        }
+      },
+      mouseUpHandler(e) {
+        if (this.sortable) {
+          this.sortable.resetSortableIndex(e, this.itemIndex);
+        }
+      },
+      clickHandler(e) {
+        e.preventDefault();
+      },
+    }
+  })
+</script>
+<style>
+  @media only screen and (max-width: 767px) {
+    .sortable-icon {
+      display: none;
+    }
+  }
+
+  .ant-table-is-sorting .draggable-row td {
+    background-color: #ffffff !important;
+  }
+
+  .dark .ant-table-is-sorting .draggable-row td {
+    background-color: var(--dark-color-surface-100) !important;
+  }
+
+  .ant-table-is-sorting .dragging td {
+    background-color: rgb(232 244 242) !important;
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  .dark .ant-table-is-sorting .dragging td {
+    background-color: var(--dark-color-table-hover) !important;
+    color: rgba(255, 255, 255, 0.3);
+  }
+
+  .ant-table-is-sorting .dragging {
+    opacity: 1;
+    box-shadow: 1px -2px 2px #008771;
+    transition: all 0.2s;
+  }
+
+  .ant-table-is-sorting .dragging .ant-table-row-index {
+    opacity: 0.3;
+  }
+</style>
+{{end}}
\ No newline at end of file
diff --git a/web/html/component/aThemeSwitch.html b/web/html/component/aThemeSwitch.html
new file mode 100644
index 00000000..ccc17714
--- /dev/null
+++ b/web/html/component/aThemeSwitch.html
@@ -0,0 +1,119 @@
+{{define "component/themeSwitchTemplate"}}
+<template>
+  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+    <a-sub-menu>
+      <span slot="title">
+        <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
+        <span>{{ i18n "menu.theme" }}</span>
+      </span>
+      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()">
+        <span>{{ i18n "menu.dark" }}</span>
+        <a-switch :style="{ marginLeft: '2px' }" size="small" :default-checked="themeSwitcher.isDarkTheme"
+          @change="themeSwitcher.toggleTheme()"></a-switch>
+      </a-menu-item>
+      <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch"
+        @mousedown="themeSwitcher.animationsOffUltra()">
+        <span>{{ i18n "menu.ultraDark" }}</span>
+        <a-checkbox :style="{ marginLeft: '2px' }" :checked="themeSwitcher.isUltra"
+          @click="themeSwitcher.toggleUltra()"></a-checkbox>
+      </a-menu-item>
+    </a-sub-menu>
+  </a-menu>
+</template>
+{{end}}
+
+{{define "component/themeSwitchTemplateLogin"}}
+<template>
+  <a-space direction="vertical" :size="10" :style="{ width: '100%' }">
+    <a-space direction="horizontal" size="small">
+      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
+      <span>{{ i18n "menu.dark" }}</span>
+    </a-space>
+    <a-space v-if="themeSwitcher.isDarkTheme" direction="horizontal" size="small">
+      <a-checkbox :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
+      <span>{{ i18n "menu.ultraDark" }}</span>
+    </a-space>
+  </a-space>
+</template>
+{{end}}
+
+{{define "component/aThemeSwitch"}}
+<script>
+  function createThemeSwitcher() {
+    const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
+    const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
+    if (isUltra) {
+      document.documentElement.setAttribute('data-theme', 'ultra-dark');
+    }
+    const theme = isDarkTheme ? 'dark' : 'light';
+    document.querySelector('body').setAttribute('class', theme);
+    return {
+      animationsOff() {
+        document.documentElement.setAttribute('data-theme-animations', 'off');
+        const themeAnimations = document.querySelector('#change-theme');
+        themeAnimations.addEventListener('mouseleave', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+        themeAnimations.addEventListener('touchend', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+      },
+      animationsOffUltra() {
+        document.documentElement.setAttribute('data-theme-animations', 'off');
+        const themeAnimationsUltra = document.querySelector('#change-theme-ultra');
+        themeAnimationsUltra.addEventListener('mouseleave', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+        themeAnimationsUltra.addEventListener('touchend', () => {
+          document.documentElement.removeAttribute('data-theme-animations');
+        });
+      },
+      isDarkTheme,
+      isUltra,
+      get currentTheme() {
+        return this.isDarkTheme ? 'dark' : 'light';
+      },
+      toggleTheme() {
+        this.isDarkTheme = !this.isDarkTheme;
+        localStorage.setItem('dark-mode', this.isDarkTheme);
+        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
+        document.getElementById('message').className = themeSwitcher.currentTheme;
+      },
+      toggleUltra() {
+        this.isUltra = !this.isUltra;
+        if (this.isUltra) {
+          document.documentElement.setAttribute('data-theme', 'ultra-dark');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
+        localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
+      }
+    };
+  }
+  const themeSwitcher = createThemeSwitcher();
+  Vue.component('a-theme-switch', {
+    template: `{{template "component/themeSwitchTemplate"}}`,
+    data: () => ({
+      themeSwitcher
+    }),
+    mounted() {
+      this.$message.config({
+        getContainer: () => document.getElementById('message')
+      });
+      document.getElementById('message').className = themeSwitcher.currentTheme;
+    }
+  });
+  Vue.component('a-theme-switch-login', {
+    template: `{{template "component/themeSwitchTemplateLogin"}}`,
+    data: () => ({
+      themeSwitcher
+    }),
+    mounted() {
+      this.$message.config({
+        getContainer: () => document.getElementById('message')
+      });
+      document.getElementById('message').className = themeSwitcher.currentTheme;
+    }
+  });
+</script>
+{{end}}
\ No newline at end of file
diff --git a/web/html/form/allocate.html b/web/html/form/allocate.html
new file mode 100644
index 00000000..aba8d5c9
--- /dev/null
+++ b/web/html/form/allocate.html
@@ -0,0 +1,15 @@
+{{define "form/allocate"}}
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='Strategy'>
+      <a-select v-model="inbound.allocate.strategy" :dropdown-class-name="themeSwitcher.currentTheme">
+        <a-select-option v-for="s in ['always','random']" :value="s">[[ s ]]</a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item label='Refresh'>
+      <a-input-number v-model.number="inbound.allocate.refresh" min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Concurrency'>
+      <a-input-number v-model.number="inbound.allocate.concurrency" min="0"></a-input-number>
+    </a-form-item>
+</a-form>
+{{end}}
diff --git a/web/html/form/client.html b/web/html/form/client.html
new file mode 100644
index 00000000..c67f1470
--- /dev/null
+++ b/web/html/form/client.html
@@ -0,0 +1,172 @@
+{{define "form/client"}}
+<a-form layout="horizontal" v-if="client" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
+        <a-switch v-model="client.enable"></a-switch>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
+                </template>
+                {{ i18n "pages.inbounds.email" }}
+                <a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.email"></a-input>
+    </a-form-item>
+    <a-form-item v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                {{ i18n "password" }}
+                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS"@click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
+                <a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.password"></a-input>
+    </a-form-item>
+    <a-form-item v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "reset" }}</span>
+                </template>
+                ID <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.id"></a-input>
+    </a-form-item>
+    <a-form-item v-if="inbound.protocol === Protocols.VMESS" label='{{ i18n "security" }}'>
+        <a-select v-model="client.security" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="key in USERS_SECURITY" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item v-if="client.email && app.subSettings.enable">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+                </template>
+                Subscription
+                <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.subId"></a-input>
+    </a-form-item>
+    <a-form-item v-if="client.email && app.tgBotEnable">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+                </template>
+                Telegram ChatID
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number :style="{ width: '50%' }" v-model.number="client.tgId" min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item v-if="client.email" label='{{ i18n "comment" }}'>
+        <a-input v-model.trim="client.comment"></a-input>
+    </a-form-item>
+    <a-form-item v-if="app.ipLimitEnable">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.IPLimitDesc"}}</span>
+                </template>
+                    <span>{{ i18n "pages.inbounds.IPLimit"}} </span>
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model.number="client.limitIp" min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item v-if="app.ipLimitEnable && client.limitIp > 0 && client.email && isEdit">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.IPLimitlogDesc" }}</span>
+                </template>
+                    <span>{{ i18n "pages.inbounds.IPLimitlog" }} </span>
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-tooltip>
+            <template slot="title">
+                <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
+            </template>
+            <span :style="{ color: '#FF4D4F' }">
+                <a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
+            </span>
+        </a-tooltip>
+        <a-form layout="block">
+            <a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email)" placeholder="Click To Get IPs"
+                :auto-size="{ minRows: 5, maxRows: 10 }">
+            </a-textarea>
+        </a-form>
+    </a-form-item>
+    <a-form-item v-if="inbound.ca