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/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 ------------------
 62 files changed, 10723 deletions(-)
 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/html/xui')

diff --git a/web/html/xui/component/aClientTable.html b/web/html/xui/component/aClientTable.html
deleted file mode 100644
index 2bea96e8..00000000
--- a/web/html/xui/component/aClientTable.html
+++ /dev/null
@@ -1,267 +0,0 @@
-{{define "component/aClientTable"}}
-<template slot="actions" slot-scope="text, client, index">
-  <a-tooltip>
-    <template slot="title">{{ i18n "qrCode" }}</template>
-    <a-icon style="font-size: 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="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;" 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="themeSwitcher.isDarkTheme ? 'color: var(--color-primary-100)' : 'color: var(--color-primary-100)'"></a-icon>
-      <a-icon style="font-size: 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="font-size: 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="min-width: 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="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;"> [[ 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="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>
-                    <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="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>
-                    <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="min-width: 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="font-size: 14px; padding: 0 10px;">
-        <a-icon type="solution"></a-icon>
-      </a-button>
-    </a-badge>
-  </a-popover>
-</template>
-{{end}}
diff --git a/web/html/xui/component/aCustomStatistic.html b/web/html/xui/component/aCustomStatistic.html
deleted file mode 100644
index 0bff128d..00000000
--- a/web/html/xui/component/aCustomStatistic.html
+++ /dev/null
@@ -1,42 +0,0 @@
-{{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/xui/component/aPasswordInput.html b/web/html/xui/component/aPasswordInput.html
deleted file mode 100644
index 460e7e76..00000000
--- a/web/html/xui/component/aPasswordInput.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{{define "component/passwordInput"}}
-<template>
-  <a-input :value="value" :type="showPassword ? 'text' : 'password'" :placeholder="placeholder"
-    :autocomplete="autocomplete" :name="name" @input="$emit('input', $event.target.value)">
-    <template v-if="icon" #prefix>
-      <a-icon :type="icon" style="font-size: 16px;" />
-    </template>
-    <template #addonAfter>
-      <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" style="font-size: 16px;" />
-    </template>
-  </a-input>
-</template>
-{{end}}
-
-{{define "component/aPasswordInput"}}
-<script>
-  Vue.component('a-password-input', {
-    props: {
-      'title': {
-        type: String,
-        required: false,
-      },
-      'value': {
-        type: String,
-        required: false,
-      },
-      'placeholder': {
-        type: String,
-        required: false,
-      },
-      'autocomplete': {
-        type: String,
-        required: false,
-      },
-      'name': {
-        type: String,
-        required: false,
-      },
-      'icon': {
-        type: undefined,
-        required: false
-      }
-    },
-    template: `{{template "component/passwordInput"}}`,
-    data() {
-      return {
-        showPassword: false,
-      };
-    },
-    methods: {
-      toggleShowPassword() {
-        this.showPassword = !this.showPassword;
-      },
-    },
-  });
-</script>
-{{end}}
\ No newline at end of file
diff --git a/web/html/xui/component/aPersianDatepicker.html b/web/html/xui/component/aPersianDatepicker.html
deleted file mode 100644
index 58132ddd..00000000
--- a/web/html/xui/component/aPersianDatepicker.html
+++ /dev/null
@@ -1,72 +0,0 @@
-{{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="font-size: 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/xui/component/aSettingListItem.html b/web/html/xui/component/aSettingListItem.html
deleted file mode 100644
index 6a7d31d0..00000000
--- a/web/html/xui/component/aSettingListItem.html
+++ /dev/null
@@ -1,49 +0,0 @@
-{{define "component/settingListItem"}}
-<a-list-item :style="{ padding: padding }">
-    <a-row>
-        <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/xui/component/aSidebar.html b/web/html/xui/component/aSidebar.html
deleted file mode 100644
index dfaebb17..00000000
--- a/web/html/xui/component/aSidebar.html
+++ /dev/null
@@ -1,103 +0,0 @@
-{{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/xui/component/aTableSortable.html b/web/html/xui/component/aTableSortable.html
deleted file mode 100644
index 7dbc3d0a..00000000
--- a/web/html/xui/component/aTableSortable.html
+++ /dev/null
@@ -1,232 +0,0 @@
-{{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/xui/component/aThemeSwitch.html b/web/html/xui/component/aThemeSwitch.html
deleted file mode 100644
index 2f76cd1b..00000000
--- a/web/html/xui/component/aThemeSwitch.html
+++ /dev/null
@@ -1,119 +0,0 @@
-{{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="margin-left: 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="margin-left: 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/xui/form/allocate.html b/web/html/xui/form/allocate.html
deleted file mode 100644
index aba8d5c9..00000000
--- a/web/html/xui/form/allocate.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{{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/xui/form/client.html b/web/html/xui/form/client.html
deleted file mode 100644
index 3aff67e0..00000000
--- a/web/html/xui/form/client.html
+++ /dev/null
@@ -1,172 +0,0 @@
-{{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.canEnableTlsFlow()" label='Flow'>
-        <a-select v-model="client.flow" :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>
-    </a-form-item>
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                </template>
-                {{ i18n "pages.inbounds.totalFlow" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input-number v-model.number="client._totalGB" :min="0"></a-input-number>
-    </a-form-item>
-    <a-form-item v-if="isEdit && clientStats" label='{{ i18n "usage" }}'>
-        <a-tag :color="ColorUtils.clientUsageColor(clientStats, app.trafficDiff)">
-            [[ SizeFormatter.sizeFormat(clientStats.up) ]] /
-            [[ SizeFormatter.sizeFormat(clientStats.down) ]]
-            ([[ SizeFormatter.sizeFormat(clientStats.up + clientStats.down) ]])
-        </a-tag>
-        <a-tooltip>
-            <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-            <a-icon type="retweet"
-                @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
-                v-if="client.email.length > 0"></a-icon>
-        </a-tooltip>
-    </a-form-item>
-    <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
-        <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-    </a-form-item>
-    <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>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</template>
-                {{ i18n "pages.inbounds.expireDate" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-date-picker v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-            :dropdown-class-name="themeSwitcher.currentTheme" v-model="client._expiryTime"></a-date-picker>
-        <a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
-                            value="client._expiryTime" v-model="client._expiryTime"></a-persian-datepicker>
-        <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
-    </a-form-item>
-    <a-form-item v-if="client.expiryTime != 0">
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">{{ i18n "pages.client.renewDesc" }}</template>
-                {{ i18n "pages.client.renew" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <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
deleted file mode 100644
index e0521c69..00000000
--- a/web/html/xui/form/inbound.html
+++ /dev/null
@@ -1,133 +0,0 @@
-{{define "form/inbound"}}
-<!-- base -->
-<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-    <a-form-item label='{{ i18n "enable" }}'>
-        <a-switch v-model="dbInbound.enable"></a-switch>
-    </a-form-item>
-    <a-form-item label='{{ i18n "remark" }}'>
-        <a-input v-model.trim="dbInbound.remark"></a-input>
-    </a-form-item>
-
-    <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="inbound.protocol" :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>
-
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.monitorDesc" }}</span>
-                </template>
-                {{ i18n "monitor" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input v-model.trim="inbound.listen"></a-input>
-    </a-form-item>
-
-    <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-        <a-input-number v-model.number="inbound.port" :min="1" :max="65531"></a-input-number>
-    </a-form-item>
-
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                </template>
-                {{ i18n "pages.inbounds.totalFlow" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-input-number v-model.number="dbInbound.totalGB" :min="0"></a-input-number>
-    </a-form-item>
-
-    <a-form-item>
-        <template slot="label">
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                </template>
-                {{ i18n "pages.inbounds.expireDate" }}
-                <a-icon type="question-circle"></a-icon>
-            </a-tooltip>
-        </template>
-        <a-date-picker style="width: 100%;" v-if="datepicker == 'gregorian'" :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss" :dropdown-class-name="themeSwitcher.currentTheme"
-            v-model="dbInbound._expiryTime"></a-date-picker>
-        <a-persian-datepicker v-else placeholder='{{ i18n "pages.settings.datepickerPlaceholder" }}'
-            value="dbInbound._expiryTime" v-model="dbInbound._expiryTime">
-        </a-persian-datepicker>
-    </a-form-item>
-</a-form>
-
-<!-- vmess settings -->
-<template v-if="inbound.protocol === Protocols.VMESS">
-    {{template "form/vmess"}}
-</template>
-
-<!-- vless settings -->
-<template v-if="inbound.protocol === Protocols.VLESS">
-    {{template "form/vless"}}
-</template>
-
-<!-- trojan settings -->
-<template v-if="inbound.protocol === Protocols.TROJAN">
-    {{template "form/trojan"}}
-</template>
-
-<!-- shadowsocks -->
-<template v-if="inbound.protocol === Protocols.SHADOWSOCKS">
-    {{template "form/shadowsocks"}}
-</template>
-
-<!-- dokodemo-door -->
-<template v-if="inbound.protocol === Protocols.DOKODEMO">
-    {{template "form/dokodemo"}}
-</template>
-
-<!-- socks -->
-<template v-if="inbound.protocol === Protocols.SOCKS">
-    {{template "form/socks"}}
-</template>
-
-<!-- http -->
-<template v-if="inbound.protocol === Protocols.HTTP">
-    {{template "form/http"}}
-</template>
-
-<!-- wireguard -->
-<template v-if="inbound.protocol === Protocols.WIREGUARD">
-    {{template "form/wireguard"}}
-</template>
-
-<!-- stream settings -->
-<template v-if="inbound.canEnableStream()">
-    {{template "form/streamSettings"}}
-    {{template "form/externalProxy" }}
-</template>
-
-<!-- tls settings -->
-<template v-if="inbound.canEnableTls()">
-    {{template "form/tlsSettings"}}
-</template>
-
-<!-- sniffing -->
-<a-collapse>
-    <a-collapse-panel header='Sniffing'>
-        {{template "form/sniffing"}}
-    </a-collapse-panel>
-</a-collapse>
-
-<!-- allocate -->
-<!-- Temporarily disabled until we accepts range for port allocation
-<a-collapse>
-    <a-collapse-panel header='Allocate'>
-        {{template "form/allocate"}}
-    </a-collapse-panel>
-</a-collapse>
--->
-
-{{end}}
diff --git a/web/html/xui/form/outbound.html b/web/html/xui/form/outbound.html
deleted file mode 100644
index 84652c3f..00000000
--- a/web/html/xui/form/outbound.html
+++ /dev/null
@@ -1,517 +0,0 @@
-{{define "form/outbound"}}
-<!-- base -->
-<a-tabs :active-key="outModal.activeKey" style="padding: 0; background-color: transparent;" @change="(activeKey) => {outModal.toggleJson(activeKey == '2'); }">
-  <a-tab-pane key="1" tab="Form">
-    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
-      <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="outbound.protocol" :dropdown-class-name="themeSwitcher.currentTheme">
-          <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}' has-feedback :validate-status="outModal.duplicateTag? 'warning' : 'success'">
-        <a-input v-model.trim="outbound.tag" @change="outModal.check()" placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
-      </a-form-item>
-      <a-form-item label='{{ i18n "pages.xray.outbound.sendThrough" }}'>
-        <a-input v-model="outbound.sendThrough"></a-input>
-      </a-form-item>
-
-      <!-- freedom settings-->
-      <template v-if="outbound.protocol === Protocols.Freedom">
-        <a-form-item label='Strategy'>
-          <a-select v-model="outbound.settings.domainStrategy" :dropdown-class-name="themeSwitcher.currentTheme">
-            <a-select-option v-for="s in OutboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item label='Redirect'>
-          <a-input v-model="outbound.settings.redirect"></a-input>
-        </a-form-item>
-        <a-form-item label='Fragment'>
-          <a-switch :checked="Object.keys(outbound.settings.fragment).length >0"
-            @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
-          </a-switch>
-        </a-form-item>
-        <template v-if="Object.keys(outbound.settings.fragment).length >0">
-          <a-form-item label='Packets'>
-            <a-select v-model="outbound.settings.fragment.packets" :dropdown-class-name="themeSwitcher.currentTheme">
-              <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
-            </a-select>
-          </a-form-item>
-          <a-form-item label='Length'>
-            <a-input v-model.trim="outbound.settings.fragment.length"></a-input>
-          </a-form-item>
-          <a-form-item label='Interval'>
-            <a-input v-model.trim="outbound.settings.fragment.interval"></a-input>
-          </a-form-item>
-        </template>
-
-        <!-- Switch for Noises -->
-        <a-form-item label='Noises'>
-          <a-switch :checked="outbound.settings.noises.length > 0"
-            @change="checked => outbound.settings.noises = checked ? [new Outbound.FreedomSettings.Noise()] : []">
-          </a-switch>
-        </a-form-item>
-
-        <!-- Add Noise Button -->
-        <template v-if="outbound.settings.noises.length > 0">
-          <a-form-item label="Noises">
-            <a-button icon="plus" type="primary" size="small" @click="outbound.settings.addNoise()"></a-button>
-          </a-form-item>
-        
-        <!-- Noise Configurations -->
-          <a-form v-for="(noise, index) in outbound.settings.noises" :key="index" :col