From db62a07fb89e08e974210ccb0f62cc648d799e94 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Mon, 17 Mar 2025 18:26:07 +0700
Subject: Code refactoring (#2785)

* chore: pretty theme menu in sidebar

* refactor: renaming component templates

* refactor: create custom `a-statistic` component

* fix: display button text only on large screens

* chore: remove loading background in overview page

* fix: show `Version` text when xray version is unknown
---
 web/html/login.html                            |   4 +-
 web/html/xui/common_sider.html                 |  20 +--
 web/html/xui/component/aCustomStatistic.html   |  55 ++++++
 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/aTableSortable.html     | 232 +++++++++++++++++++++++++
 web/html/xui/component/aThemeSwitch.html       | 118 +++++++++++++
 web/html/xui/component/password.html           |  57 ------
 web/html/xui/component/persianDatepicker.html  |  72 --------
 web/html/xui/component/setting.html            |  57 ------
 web/html/xui/component/sortableTable.html      | 232 -------------------------
 web/html/xui/component/themeSwitch.html        | 118 -------------
 web/html/xui/inbounds.html                     |   4 +-
 web/html/xui/index.html                        |  71 ++++----
 web/html/xui/settings.html                     |   6 +-
 web/html/xui/xray.html                         |   6 +-
 web/translation/translate.en_US.toml           |   3 +
 web/translation/translate.es_ES.toml           |   3 +
 web/translation/translate.fa_IR.toml           |   3 +
 web/translation/translate.id_ID.toml           |   3 +
 web/translation/translate.ja_JP.toml           |   3 +
 web/translation/translate.pt_BR.toml           |   3 +
 web/translation/translate.ru_RU.toml           |   3 +
 web/translation/translate.tr_TR.toml           |   3 +
 web/translation/translate.uk_UA.toml           |   3 +
 web/translation/translate.vi_VN.toml           |   3 +
 web/translation/translate.zh_CN.toml           |   3 +
 web/translation/translate.zh_TW.toml           |   3 +
 29 files changed, 671 insertions(+), 595 deletions(-)
 create mode 100644 web/html/xui/component/aCustomStatistic.html
 create mode 100644 web/html/xui/component/aPasswordInput.html
 create mode 100644 web/html/xui/component/aPersianDatepicker.html
 create mode 100644 web/html/xui/component/aSettingListItem.html
 create mode 100644 web/html/xui/component/aTableSortable.html
 create mode 100644 web/html/xui/component/aThemeSwitch.html
 delete mode 100644 web/html/xui/component/password.html
 delete mode 100644 web/html/xui/component/persianDatepicker.html
 delete mode 100644 web/html/xui/component/setting.html
 delete mode 100644 web/html/xui/component/sortableTable.html
 delete mode 100644 web/html/xui/component/themeSwitch.html

diff --git a/web/html/login.html b/web/html/login.html
index fc48b9ec..b27333a5 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -473,8 +473,8 @@
     </transition>
   </a-layout>
 {{template "js" .}}
-{{template "component/themeSwitcher" .}}
-{{template "component/password" .}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aPasswordInput" .}}
 <script>
   class User {
     constructor() {
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index 1d5fe075..97114c15 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -1,33 +1,23 @@
 {{define "menuItems"}}
 <a-menu-item key="{{ .base_path }}panel/">
   <a-icon type="dashboard"></a-icon>
-  <span>
-    <b>{{ i18n "menu.dashboard"}}</b>
-  </span>
+  <span>{{ i18n "menu.dashboard"}}</span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/inbounds">
   <a-icon type="user"></a-icon>
-  <span>
-    <b>{{ i18n "menu.inbounds"}}</b>
-  </span>
+  <span>{{ i18n "menu.inbounds"}}</span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/settings">
   <a-icon type="setting"></a-icon>
-  <span>
-    <b>{{ i18n "menu.settings"}}</b>
-  </span>
+  <span>{{ i18n "menu.settings"}}</span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}panel/xray">
   <a-icon type="tool"></a-icon>
-  <span>
-    <b>{{ i18n "menu.xray"}}</b>
-  </span>
+  <span>{{ i18n "menu.xray"}}</span>
 </a-menu-item>
 <a-menu-item key="{{ .base_path }}logout">
   <a-icon type="logout"></a-icon>
-  <span>
-    <b>{{ i18n "menu.logout"}}</b>
-  </span>
+  <span>{{ i18n "menu.logout"}}</span>
 </a-menu-item>
 {{end}}
 
diff --git a/web/html/xui/component/aCustomStatistic.html b/web/html/xui/component/aCustomStatistic.html
new file mode 100644
index 00000000..41695e90
--- /dev/null
+++ b/web/html/xui/component/aCustomStatistic.html
@@ -0,0 +1,55 @@
+{{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-title,
+    .dark .ant-statistic-content {
+        color: var(--dark-color-text-primary) !important
+    }
+
+    .dark .ant-statistic-title {
+        user-select: none;
+        opacity: 0.55;
+    }
+    
+    .ant-statistic-title {
+        margin-bottom: 0 !important;
+    }
+
+    .ant-statistic-content-prefix {
+        margin-right: 6px !important;
+    }
+
+    .ant-statistic-content-prefix,
+    .ant-statistic-content-value {
+        font-size: 1.05rem;
+    }
+</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
new file mode 100644
index 00000000..460e7e76
--- /dev/null
+++ b/web/html/xui/component/aPasswordInput.html
@@ -0,0 +1,57 @@
+{{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
new file mode 100644
index 00000000..58132ddd
--- /dev/null
+++ b/web/html/xui/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="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
new file mode 100644
index 00000000..6a7d31d0
--- /dev/null
+++ b/web/html/xui/component/aSettingListItem.html
@@ -0,0 +1,49 @@
+{{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/aTableSortable.html b/web/html/xui/component/aTableSortable.html
new file mode 100644
index 00000000..7dbc3d0a
--- /dev/null
+++ b/web/html/xui/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/xui/component/aThemeSwitch.html b/web/html/xui/component/aThemeSwitch.html
new file mode 100644
index 00000000..9a213ca6
--- /dev/null
+++ b/web/html/xui/component/aThemeSwitch.html
@@ -0,0 +1,118 @@
+{{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-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
+    selected-keys="">
+    <a-menu-item mode="inline" class="ant-menu-theme-switch">
+      <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
+      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
+        @change="themeSwitcher.toggleTheme()"></a-switch>
+      <template v-if="themeSwitcher.isDarkTheme">
+        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
+          @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
+      </template>
+    </a-menu-item>
+  </a-menu>
+</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/component/password.html b/web/html/xui/component/password.html
deleted file mode 100644
index 0fea1430..00000000
--- a/web/html/xui/component/password.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/password"}}
-<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/persianDatepicker.html b/web/html/xui/component/persianDatepicker.html
deleted file mode 100644
index 2df79a06..00000000
--- a/web/html/xui/component/persianDatepicker.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/persianDatepicker"}}
-<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/setting.html b/web/html/xui/component/setting.html
deleted file mode 100644
index 85220d25..00000000
--- a/web/html/xui/component/setting.html
+++ /dev/null
@@ -1,57 +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/setting"}}
-<script>
-    Vue.component('a-setting-list-item', {
-        props: {
-            'title': {
-                type: String,
-                required: true,
-            },
-            'description': {
-                type: String,
-                required: false,
-            },
-            '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/sortableTable.html b/web/html/xui/component/sortableTable.html
deleted file mode 100644
index 67bbcee2..00000000
--- a/web/html/xui/component/sortableTable.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/sortableTable"}}
-<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/themeSwitch.html b/web/html/xui/component/themeSwitch.html
deleted file mode 100644
index 28cb79b1..00000000
--- a/web/html/xui/component/themeSwitch.html
+++ /dev/null
@@ -1,118 +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>Theme</span>
-      </span>
-      <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()"> Dark
-        <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()"> Ultra <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-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
-    selected-keys="">
-    <a-menu-item mode="inline" class="ant-menu-theme-switch">
-      <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-      <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
-        @change="themeSwitcher.toggleTheme()"></a-switch>
-      <template v-if="themeSwitcher.isDarkTheme">
-        <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
-          @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
-      </template>
-    </a-menu-item>
-  </a-menu>
-</template>
-{{end}}
-
-{{define "component/themeSwitcher"}}
-<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/inbounds.html b/web/html/xui/inbounds.html
index c8cf93d3..d8b3c40a 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -548,8 +548,8 @@
 <script src="{{ .base_path }}assets/uri/URI.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/inbound.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/model/dbinbound.js?{{ .cur_ver }}"></script>
-{{template "component/themeSwitcher" .}}
-{{template "component/persianDatepicker" .}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aPersianDatepicker" .}}
 <script>
     const columns = [{
         title: "ID",
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index bd7d3878..0e1c21e2 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -27,8 +27,6 @@
   .dark .ant-backup-list-item svg,
   .dark .ant-card-actions>li>*,
   .dark .ant-badge-status-text,
-  .dark .ant-statistic-title,
-  .dark .ant-statistic-content,
   .dark .ant-card-extra {
     color: var(--dark-color-text-primary) !important;
   }
@@ -44,12 +42,6 @@
   .ant-card-actions {
     background: transparent !important;
   }
-  .ant-statistic-content-prefix {
-    font-size: 20px;
-  }
-  .ant-statistic-content-value {
-    font-size: 18px;
-  }
   .ip-hidden {
     filter: blur(10px);
   }
@@ -123,14 +115,22 @@
           </transition>
           <transition name="list" appear>
             <template v-if="!status.isLoaded">
-              <a-card hoverable style="text-align: center; padding: 30px 0; margin-top: 10px;">
+              <div style="text-align: center; padding: 30px 0; margin-top: 10px;">
                 <a-spin size="large"></a-spin>
-              </a-card>
+              </div>
             </template>
             <template v-else>
               <a-row>
                 <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.xrayStatus" }}' hoverable>
+                  <a-card hoverable>
+                    <template #title>
+                      <a-space direction="horizontal">
+                        <span>{{ i18n "pages.index.xrayStatus" }}</span>
+                        <a-tag v-if="isMobile && status.xray.version != 'Unknown'" color="green">
+                          v[[ status.xray.version ]]
+                        </a-tag>
+                      </a-space>
+                    </template>
                     <template #extra>
                       <template v-if="status.xray.state != State.Error">
                         <a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
@@ -150,15 +150,17 @@
                     <template #actions>
                       <a-space direction="horizontal" @click="stopXrayService" style="justify-content: center;">
                         <a-icon type="poweroff"></a-icon>
-                        <span>{{ i18n "pages.index.stopXray" }}</span>
+                        <span v-if="!isMobile">{{ i18n "pages.index.stopXray" }}</span>
                       </a-space>
                       <a-space direction="horizontal" @click="restartXrayService" style="justify-content: center;">
                         <a-icon type="reload"></a-icon>
-                        <span>{{ i18n "pages.index.restartXray" }}</span>
+                        <span v-if="!isMobile">{{ i18n "pages.index.restartXray" }}</span>
                       </a-space>
                       <a-space direction="horizontal" @click="openSelectV2rayVersion" style="justify-content: center;">
                         <a-icon type="tool"></a-icon>
-                        <span>v[[ status.xray.version ]]</span>
+                        <span v-if="!isMobile">
+                          [[ status.xray.version != 'Unknown' ? `v${status.xray.version}` : '{{ i18n "pages.index.xraySwitch" }}' ]]
+                        </span>
                       </a-space>
                     </template>
                   </a-card>
@@ -168,15 +170,15 @@
                     <template #actions>
                       <a-space direction="horizontal" @click="openLogs()" style="justify-content: center;">
                         <a-icon type="bars"></a-icon>
-                        <span>{{ i18n "pages.index.logs" }}</span>
+                        <span v-if="!isMobile">{{ i18n "pages.index.logs" }}</span>
                       </a-space>
                       <a-space direction="horizontal" @click="openConfig" style="justify-content: center;">
                         <a-icon type="control"></a-icon>
-                        <span>{{ i18n "pages.index.config" }}</span>
+                        <span v-if="!isMobile">{{ i18n "pages.index.config" }}</span>
                       </a-space>
                       <a-space direction="horizontal" @click="openBackup" style="justify-content: center;">
                         <a-icon type="cloud-server"></a-icon>
-                        <span>{{ i18n "pages.index.backup" }}</span>
+                        <span v-if="!isMobile">{{ i18n "pages.index.backup" }}</span>
                       </a-space>
                     </template>
                   </a-card>
@@ -223,18 +225,18 @@
                     </template>
                     <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="IPv4" :value="status.publicIP.ipv4">
+                        <a-custom-statistic title="IPv4" :value="status.publicIP.ipv4">
                           <template #prefix>
                             <a-icon type="global" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="IPv6" :value="status.publicIP.ipv6">
+                        <a-custom-statistic title="IPv6" :value="status.publicIP.ipv6">
                           <template #prefix>
                             <a-icon type="global" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -243,18 +245,18 @@
                   <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
                     <a-row>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="TCP" :value="status.tcpCount">
+                        <a-custom-statistic title="TCP" :value="status.tcpCount">
                           <template #prefix>
                             <a-icon type="swap" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="UDP" :value="status.udpCount">
+                        <a-custom-statistic title="UDP" :value="status.udpCount">
                           <template #prefix>
                             <a-icon type="swap" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -263,24 +265,24 @@
                   <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
                     <a-row>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
+                        <a-custom-statistic title='{{ i18n "pages.index.upload" }}' :value="SizeFormatter.sizeFormat(status.netIO.up)">
                           <template #prefix>
                             <a-icon type="arrow-up" />
                           </template>
                           <template #suffix>
                             /s
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
+                        <a-custom-statistic title='{{ i18n "pages.index.download" }}' :value="SizeFormatter.sizeFormat(status.netIO.down)">
                           <template #prefix>
                             <a-icon type="arrow-down" />
                           </template>
                           <template #suffix>
                             /s
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -289,18 +291,18 @@
                   <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
                     <a-row>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
+                        <a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
                           <template #prefix>
                             <a-icon type="cloud-upload" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                       <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
+                        <a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
                           <template #prefix>
                             <a-icon type="cloud-download" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -397,7 +399,8 @@
     </a-modal>
   </a-layout>
 {{template "js" .}}
-{{template "component/themeSwitcher" .}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aCustomStatistic" .}}
 {{template "textModal"}}
 <script>
     const State = {
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 7ccada90..febb26e8 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -663,9 +663,9 @@
   </a-layout>
 {{template "js" .}}
 <script src="{{ .base_path }}assets/js/model/setting.js?{{ .cur_ver }}"></script>
-{{template "component/themeSwitcher" .}}
-{{template "component/password" .}}
-{{template "component/setting"}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aPasswordInput" .}}
+{{template "component/aSettingListItem" .}}
 <script>
   const app = new Vue({
     delimiters: ['[[', ']]'],
diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
index 99f5f990..8ba14f7d 100644
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -788,9 +788,9 @@
     </a-layout>
   </a-layout>
 {{template "js" .}}
-{{template "component/themeSwitcher" .}}
-{{template "component/sortableTable" .}}
-{{template "component/setting"}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aTableSortable" .}}
+{{template "component/aSettingListItem" .}}
 {{template "ruleModal"}}
 {{template "outModal"}}
 {{template "reverseModal"}}
diff --git a/web/translation/translate.en_US.toml b/web/translation/translate.en_US.toml
index 37e9eb8c..e3090667 100644
--- a/web/translation/translate.en_US.toml
+++ b/web/translation/translate.en_US.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "No added reverse proxies."
 
 [menu]
+"theme" = "Theme"
+"dark" = "Dark"
+"ultraDark" = "Ultra Dark"
 "dashboard" = "Overview"
 "inbounds" = "Inbounds"
 "settings" = "Panel Settings"
diff --git a/web/translation/translate.es_ES.toml b/web/translation/translate.es_ES.toml
index 29e099e8..6c5aa9df 100644
--- a/web/translation/translate.es_ES.toml
+++ b/web/translation/translate.es_ES.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "No hay proxies inversos añadidos."
 
 [menu]
+"theme" = "Tema"
+"dark" = "Oscuro"
+"ultraDark" = "Ultra Oscuro"
 "dashboard" = "Estado del Sistema"
 "inbounds" = "Entradas"
 "settings" = "Configuraciones"
diff --git a/web/translation/translate.fa_IR.toml b/web/translation/translate.fa_IR.toml
index 4a1e4177..e120bb08 100644
--- a/web/translation/translate.fa_IR.toml
+++ b/web/translation/translate.fa_IR.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "هیچ پروکسی معکوس اضافه نشده است."
 
 [menu]
+"theme" = "تم"
+"dark" = "تیره"
+"ultraDark" = "فوق تیره"
 "dashboard" = "نمای کلی"
 "inbounds" = "ورودی‌ها"
 "settings" = "تنظیمات پنل"
diff --git a/web/translation/translate.id_ID.toml b/web/translation/translate.id_ID.toml
index 9d129830..5f5f4354 100644
--- a/web/translation/translate.id_ID.toml
+++ b/web/translation/translate.id_ID.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "Tidak ada proxy terbalik yang ditambahkan."
 
 [menu]
+"theme" = "Tema"
+"dark" = "Gelap"
+"ultraDark" = "Sangat Gelap"
 "dashboard" = "Ikhtisar"
 "inbounds" = "Masuk"
 "settings" = "Pengaturan Panel"
diff --git a/web/translation/translate.ja_JP.toml b/web/translation/translate.ja_JP.toml
index 53d2076c..8283b0b8 100644
--- a/web/translation/translate.ja_JP.toml
+++ b/web/translation/translate.ja_JP.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "追加されたリバースプロキシはありません。"
 
 [menu]
+"theme" = "テーマ"
+"dark" = "ダーク"
+"ultraDark" = "ウルトラダーク"
 "dashboard" = "ダッシュボード"
 "inbounds" = "インバウンド一覧"
 "settings" = "パネル設定"
diff --git a/web/translation/translate.pt_BR.toml b/web/translation/translate.pt_BR.toml
index 7f0badb7..dbdaa7b0 100644
--- a/web/translation/translate.pt_BR.toml
+++ b/web/translation/translate.pt_BR.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "Nenhum proxy reverso adicionado."
 
 [menu]
+"theme" = "Tema"
+"dark" = "Escuro"
+"ultraDark" = "Ultra Escuro"
 "dashboard" = "Visão Geral"
 "inbounds" = "Inbounds"
 "settings" = "Panel Settings"
diff --git a/web/translation/translate.ru_RU.toml b/web/translation/translate.ru_RU.toml
index 5be87e09..dcaf0855 100644
--- a/web/translation/translate.ru_RU.toml
+++ b/web/translation/translate.ru_RU.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "Нет добавленных обратных прокси."
 
 [menu]
+"theme" = "Тема"
+"dark" = "Темная"
+"ultraDark" = "Ультра темная"
 "dashboard" = "Статус системы"
 "inbounds" = "Подключения"
 "settings" = "Настройки панели"
diff --git a/web/translation/translate.tr_TR.toml b/web/translation/translate.tr_TR.toml
index 59149d78..efa632e5 100644
--- a/web/translation/translate.tr_TR.toml
+++ b/web/translation/translate.tr_TR.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "Eklenmiş ters proxy yok."
 
 [menu]
+"theme" = "Tema"
+"dark" = "Koyu"
+"ultraDark" = "Ultra Koyu"
 "dashboard" = "Genel Bakış"
 "inbounds" = "Gelenler"
 "settings" = "Panel Ayarları"
diff --git a/web/translation/translate.uk_UA.toml b/web/translation/translate.uk_UA.toml
index eb9e93fc..da4723ba 100644
--- a/web/translation/translate.uk_UA.toml
+++ b/web/translation/translate.uk_UA.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "Немає доданих зворотних проксі."
 
 [menu]
+"theme" = "Тема"
+"dark" = "Темна"
+"ultraDark" = "Ультра темна"
 "dashboard" = "Огляд"
 "inbounds" = "Вхідні"
 "settings" = "Параметри панелі"
diff --git a/web/translation/translate.vi_VN.toml b/web/translation/translate.vi_VN.toml
index c938449f..53563529 100644
--- a/web/translation/translate.vi_VN.toml
+++ b/web/translation/translate.vi_VN.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "Không có proxy ngược nào được thêm."
 
 [menu]
+"theme" = "Chủ đề"
+"dark" = "Tối"
+"ultraDark" = "Siêu tối"
 "dashboard" = "Trạng thái hệ thống"
 "inbounds" = "Đầu vào khách hàng"
 "settings" = "Cài đặt bảng điều khiển"
diff --git a/web/translation/translate.zh_CN.toml b/web/translation/translate.zh_CN.toml
index 770caed3..917207a3 100644
--- a/web/translation/translate.zh_CN.toml
+++ b/web/translation/translate.zh_CN.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "未添加反向代理。"
 
 [menu]
+"theme" = "主题"
+"dark" = "暗色"
+"ultraDark" = "超暗色"
 "dashboard" = "系统状态"
 "inbounds" = "入站列表"
 "settings" = "面板设置"
diff --git a/web/translation/translate.zh_TW.toml b/web/translation/translate.zh_TW.toml
index 0ad36d27..23709356 100644
--- a/web/translation/translate.zh_TW.toml
+++ b/web/translation/translate.zh_TW.toml
@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "未添加反向代理。"
 
 [menu]
+"theme" = "主題"
+"dark" = "深色"
+"ultraDark" = "超深色"
 "dashboard" = "系統狀態"
 "inbounds" = "入站列表"
 "settings" = "面板設定"
-- 
cgit v1.2.3