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

@@ -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() {

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}}
 

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}}

web/html/xui/component/aPasswordInput.html

@@ -12,7 +12,7 @@
 </template>
 {{end}}
 
-{{define "component/password"}}
+{{define "component/aPasswordInput"}}
 <script>
   Vue.component('a-password-input', {
     props: {

web/html/xui/component/aPersianDatepicker.html

@@ -12,7 +12,7 @@
 </template>
 {{end}}
 
-{{define "component/persianDatepicker"}}
+{{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>

web/html/xui/component/aSettingListItem.html

@@ -18,18 +18,10 @@
 </a-list-item>
 {{end}}
 
-{{define "component/setting"}}
+{{define "component/aSettingListItem"}}
 <script>
     Vue.component('a-setting-list-item', {
         props: {
-            'title': {
-                type: String,
-                required: true,
-            },
-            'description': {
-                type: String,
-                required: false,
-            },
             'paddings': {
                 type: String,
                 required: false,

web/html/xui/component/aTableSortable.html

@@ -3,7 +3,7 @@
   @click="clickHandler" />
 {{end}}
 
-{{define "component/sortableTable"}}
+{{define "component/aTableSortable"}}
 <script>
   const DRAGGABLE_ROW_CLASS = 'draggable-row';
   const findParentRowElement = (el) => {

web/html/xui/component/aThemeSwitch.html

@@ -4,15 +4,15 @@
     <a-sub-menu>
       <span slot="title">
         <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-        <span>Theme</span>
+        <span>{{ i18n "menu.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 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()"> Ultra <a-checkbox style="margin-left: 2px;"
-          :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
+      <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>
@@ -36,7 +36,7 @@
 </template>
 {{end}}
 
-{{define "component/themeSwitcher"}}
+{{define "component/aThemeSwitch"}}
 <script>
   function createThemeSwitcher() {
     const isDarkTheme = localStorage.getItem('dark-mode') === 'true';

web/html/xui/form/outbound.html

@@ -506,12 +506,12 @@
     </a-form>
   </a-tab-pane>
   <a-tab-pane key="2" tab="JSON" force-render="true">
-    <a-form-item style="margin: 10px 0"> Link: <a-input v-model.trim="outModal.link" style="width: 300px; margin-right: 5px;" placeholder="vmess:// vless:// trojan:// ss://"></a-input>
-      <a-button @click="convertLink" type="primary">
-        <a-icon type="form"></a-icon>
-      </a-button>
-    </a-form-item>
-    <textarea style="position:absolute; left: -800px;" id="outboundJson"></textarea>
+    <a-space direction="vertical" :size="10" style="margin-top: 10px;">
+      <a-input addon-before='{{ i18n "pages.xray.outbound.link" }}' v-model.trim="outModal.link" placeholder="vmess:// vless:// trojan:// ss://">
+        <a-icon slot="addonAfter" type="form" @click="convertLink"></a-icon>
+      </a-input>
+      <textarea style="position:absolute; left: -800px;" id="outboundJson"></textarea>
+    </a-space>
   </a-tab-pane>
 </a-tabs>
 {{end}}

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",

web/html/xui/index.html

@@ -21,23 +21,17 @@
   }
   .ant-backup-list-item {
     gap: 10px;
+    user-select: none;
+    cursor: pointer;
   }
   .dark .ant-backup-list-item svg,
+  .dark .ant-card-actions>li>*,
   .dark .ant-badge-status-text,
-  .dark .ant-statistic-content,
   .dark .ant-card-extra {
-    color: var(--dark-color-text-primary);
+    color: var(--dark-color-text-primary) !important;
   }
-  .dark .ant-statistic-title,
-  .dark .ant-card-actions>li {
-    color: rgba(255, 255, 255, 0.55);
-  }
-  .dark .ant-radio-inner {
-    background-color: var(--dark-color-surface-100);
-    border-color: var(--dark-color-surface-600);
-  }
-  .dark .ant-radio-checked .ant-radio-inner {
-    border-color: var(--color-primary-100);
+  .dark .ant-card-actions>li>*:hover {
+    color: var(--color-primary-100) !important;
   }
   .dark .ant-backup-list, 
   .dark .ant-xray-version-list,
@@ -46,35 +40,11 @@
     border-color: var(--dark-color-stroke);
   }
   .ant-card-actions {
-    background: transparent;
-  }
-  .ant-statistic-content {
-    font-size: 16px;
+    background: transparent !important;
   }
   .ip-hidden {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
     filter: blur(10px);
   }
-  .running-animation .ant-badge-status-dot {
-    animation: runningAnimation 1.2s linear infinite;
-  }
-  .running-animation .ant-badge-status-processing:after {
-    border-color: var(--color-primary-100);
-  }
-  @keyframes runningAnimation {
-    0%,
-    50%,
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    10% {
-      transform: scale(1.5);
-      opacity: .2;
-    }
-  }
 </style>
 
 <body>
@@ -91,69 +61,79 @@
               show-icon closable>
             </a-alert>
           </transition>
-          <transition name="list" appear>
-            <template>
-              <a-row v-if="!status.isLoaded">
-                <a-card hoverable style="text-align: center; padding: 30px 0; margin-top: 10px;">
-                  <a-spin size="large"></a-spin>
-                </a-card>
-              </a-row>
-              <a-row v-else>
+          <transition v-if="status.isLoaded" name="list" appear>
+            <a-row>
+              <a-card hoverable>
                 <a-row>
-                  <a-card hoverable>
+                  <a-col :sm="24" :md="12">
                     <a-row>
-                      <a-col :sm="24" :md="12">
-                        <a-row>
-                          <a-col :span="12" style="text-align: center">
-                            <a-progress type="dashboard" status="normal"
-                              :stroke-color="status.cpu.color"
-                              :percent="status.cpu.percent"></a-progress>
-                            <div><b>CPU:</b> [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]] <a-tooltip>
-                              <a-icon type="area-chart"></a-icon> 
-                              <template slot="title">
-                                <div><b>Logical Processors:</b> [[ (status.logicalPro) ]]</div>
-                                <div><b>Speed:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
-                              </template>
-                            </a-tooltip></div>
-                          </a-col>
-                          <a-col :span="12" style="text-align: center">
-                            <a-progress type="dashboard" status="normal"
-                              :stroke-color="status.mem.color"
-                              :percent="status.mem.percent"></a-progress>
-                            <div>
-                              <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]]
-                            </div>
-                          </a-col>
-                        </a-row>
+                      <a-col :span="12" style="text-align: center">
+                        <a-progress type="dashboard" status="normal"
+                          :stroke-color="status.cpu.color"
+                          :percent="status.cpu.percent"></a-progress>
+                        <div><b>CPU:</b> [[ CPUFormatter.cpuCoreFormat(status.cpuCores) ]] <a-tooltip>
+                          <a-icon type="area-chart"></a-icon> 
+                          <template slot="title">
+                            <div><b>Logical Processors:</b> [[ (status.logicalPro) ]]</div>
+                            <div><b>Speed:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
+                          </template>
+                        </a-tooltip></div>
                       </a-col>
-                      <a-col :sm="24" :md="12">
-                        <a-row>
-                          <a-col :span="12" style="text-align: center">
-                            <a-progress type="dashboard" status="normal"
-                              :stroke-color="status.swap.color"
-                              :percent="status.swap.percent"></a-progress>
-                            <div>
-                              <b>Swap:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
-                            </div>
-                          </a-col>
-                          <a-col :span="12" style="text-align: center">
-                            <a-progress type="dashboard" status="normal"
-                              :stroke-color="status.disk.color"
-                              :percent="status.disk.percent"></a-progress>
-                            <div>
-                              <b>{{ i18n "pages.index.hard"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
-                            </div>
-                          </a-col>
-                        </a-row>
+                      <a-col :span="12" style="text-align: center">
+                        <a-progress type="dashboard" status="normal"
+                          :stroke-color="status.mem.color"
+                          :percent="status.mem.percent"></a-progress>
+                        <div>
+                          <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]]
+                        </div>
                       </a-col>
                     </a-row>
-                  </a-card>
+                  </a-col>
+                  <a-col :sm="24" :md="12">
+                    <a-row>
+                      <a-col :span="12" style="text-align: center">
+                        <a-progress type="dashboard" status="normal"
+                          :stroke-color="status.swap.color"
+                          :percent="status.swap.percent"></a-progress>
+                        <div>
+                          <b>Swap:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
+                        </div>
+                      </a-col>
+                      <a-col :span="12" style="text-align: center">
+                        <a-progress type="dashboard" status="normal"
+                          :stroke-color="status.disk.color"
+                          :percent="status.disk.percent"></a-progress>
+                        <div>
+                          <b>{{ i18n "pages.index.hard"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
+                        </div>
+                      </a-col>
+                    </a-row>
+                  </a-col>
                 </a-row>
+              </a-card>
+            </a-row>
+          </transition>
+          <transition name="list" appear>
+            <template v-if="!status.isLoaded">
+              <div style="text-align: center; padding: 30px 0; margin-top: 10px;">
+                <a-spin size="large"></a-spin>
+              </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 status="processing" class="running-animation" :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
+                        <a-badge :text="status.xray.state" :color="status.xray.color" style="text-transform: capitalize;"/>
                       </template>
                       <template v-else>
                         <a-popover :overlay-class-name="themeSwitcher.currentTheme">
@@ -170,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>
@@ -188,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>
@@ -231,52 +213,6 @@
                     <a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
                   </a-card>
                 </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
-                    <a-row>
-                      <a-col :span="12">
-                        <a-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-col>
-                      <a-col :span="12">
-                        <a-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-col>
-                    </a-row>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
-                    <a-row>
-                      <a-col :span="12">
-                        <a-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
-                          <template #prefix>
-                            <a-icon type="cloud-upload" />
-                          </template>
-                        </a-statistic>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
-                          <template #prefix>
-                            <a-icon type="cloud-download" />
-                          </template>
-                        </a-statistic>
-                      </a-col>
-                    </a-row>
-                  </a-card>
-                </a-col>
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
                     <template #extra>
@@ -288,19 +224,19 @@
                       </a-tooltip>
                     </template>
                     <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
-                      <a-col :xs="24" :xxl="12" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="IPv4" :value="status.publicIP.ipv4">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                        <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 :xs="24" :xxl="12" :style="{ marginTop: isMobile ? '10px' : 0 }">
-                        <a-statistic title="IPv6" :value="status.publicIP.ipv6">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                        <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>
@@ -308,19 +244,65 @@
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
                     <a-row>
-                      <a-col :span="12">
-                        <a-statistic title="TCP" :value="status.tcpCount">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                        <a-custom-statistic title="TCP" :value="status.tcpCount">
                           <template #prefix>
                             <a-icon type="swap" />
                           </template>
-                        </a-statistic>
+                        </a-custom-statistic>
                       </a-col>
-                      <a-col :span="12">
-                        <a-statistic title="UDP" :value="status.udpCount">
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                        <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>
+                </a-col>
+                <a-col :sm="24" :lg="12">
+                  <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
+                    <a-row>
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                        <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-custom-statistic>
+                      </a-col>
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                        <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-custom-statistic>
+                      </a-col>
+                    </a-row>
+                  </a-card>
+                </a-col>
+                <a-col :sm="24" :lg="12">
+                  <a-card title='{{ i18n "pages.index.totalData" }}' hoverable>
+                    <a-row>
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                        <a-custom-statistic title='{{ i18n "pages.index.sent" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.sent)">
+                          <template #prefix>
+                            <a-icon type="cloud-upload" />
+                          </template>
+                        </a-custom-statistic>
+                      </a-col>
+                      <a-col :lg="12" :sm="24" :style="{ marginTop: isMobile ? '10px' : 0 }">
+                        <a-custom-statistic title='{{ i18n "pages.index.received" }}' :value="SizeFormatter.sizeFormat(status.netTraffic.recv)">
+                          <template #prefix>
+                            <a-icon type="cloud-download" />
+                          </template>
+                        </a-custom-statistic>
                       </a-col>
                     </a-row>
                   </a-card>
@@ -336,8 +318,10 @@
       <a-alert type="warning" style="margin-bottom: 12px; width: 100%;"
         message='{{ i18n "pages.index.xraySwitchClickDesk" }}' show-icon></a-alert>
       <a-list class="ant-xray-version-list" bordered style="width: 100%;">
-        <a-list-item class="ant-xray-version-list-item" v-for="version, index in versionModal.versions">
-          <a-tag :color="index % 2 == 0 ? 'purple' : 'green'">[[ version ]]</a-tag>
+        <a-list-item class="ant-xray-version-list-item" v-for="version in versionModal.versions">
+          <a-list-item-meta>
+            <template #title>[[ version ]]</template>
+          </a-list-item-meta>
           <a-radio :class="themeSwitcher.currentTheme" :checked="version === `v${status.xray.version}`" @click="switchV2rayVersion(version)"></a-radio>
         </a-list-item>
       </a-list>
@@ -394,25 +378,29 @@
         footer=""
         :class="themeSwitcher.currentTheme">
       <a-list class="ant-backup-list" bordered style="width: 100%;">
-        <a-list-item class="ant-backup-list-item">
+        <a-list-item class="ant-backup-list-item" @click="exportDatabase()">
           <a-list-item-meta>
             <template #title>{{ i18n "pages.index.exportDatabase" }}</template>
             <template #description>{{ i18n "pages.index.exportDatabaseDesc" }}</template>
           </a-list-item-meta>
-          <a-button @click="exportDatabase()" type="primary" icon="download"/>
+          <a-icon type="right" />
         </a-list-item>
-        <a-list-item class="ant-backup-list-item">
+        <a-list-item class="ant-backup-list-item" @click="importDatabase()">
           <a-list-item-meta>
             <template #title>{{ i18n "pages.index.importDatabase" }}</template>
             <template #description>{{ i18n "pages.index.importDatabaseDesc" }}</template>
+            <templaet #avatar>
+              <a-icon type="import" />
+            </templaet>
           </a-list-item-meta>
-          <a-button @click="importDatabase()" type="primary" icon="upload" />
+          <a-icon type="right" />
         </a-list-item>
       </a-list>
     </a-modal>
   </a-layout>
 {{template "js" .}}
-{{template "component/themeSwitcher" .}}
+{{template "component/aThemeSwitch" .}}
+{{template "component/aCustomStatistic" .}}
 {{template "textModal"}}
 <script>
     const State = {

web/html/xui/settings.html

@@ -377,7 +377,7 @@
                       <template #title>{{ i18n "pages.settings.tgNotifyCpu" }}</template>
                       <template #description>{{ i18n "pages.settings.tgNotifyCpuDesc" }}</template>
                       <template #control>
-                        <a-input-number :min="0" :min="100" v-model="allSetting.tgCpu"></a-switch>
+                        <a-input-number :min="0" :min="100" v-model="allSetting.tgCpu" style="width: 100%;"></a-switch>
                       </template>
                     </a-setting-list-item>
                   </a-collapse-panel>
@@ -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: ['[[', ']]'],

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"}}

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"
@@ -100,12 +103,12 @@
 "systemLoad" = "System Load"
 "systemLoadDesc" = "System load average for the past 1, 5, and 15 minutes"
 "connectionCount" = "Connection Stats"
-"ipAddresses" = "IP Addresses"
+"ipAddresses" = "IP addresses"
 "toggleIpVisibility" = "Toggle visibility of the IP"
-"overallSpeed" = "Overall Speed"
+"overallSpeed" = "Overall speed"
 "upload" = "Upload"
 "download" = "Download"
-"totalData" = "Total Data"
+"totalData" = "Total data"
 "sent" = "Sent"
 "received" = "Received"
 "xraySwitchVersionDialog" = "Change Xray Version"
@@ -429,6 +432,7 @@
 "type" = "Type"
 "bridge" = "Bridge"
 "portal" = "Portal"
+"link" = "Link"
 "intercon" = "Interconnection"
 "settings" = "Settings"
 "accountInfo" = "Account Information"

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"
@@ -431,6 +434,7 @@
 "type" = "Tipo"
 "bridge" = "puente"
 "portal" = "portal"
+"link" = "Enlace"
 "intercon" = "Interconexión"
 "settings" = "Configuración"
 "accountInfo" = "Información de la Cuenta"

web/translation/translate.fa_IR.toml

@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "هیچ پروکسی معکوس اضافه نشده است."
 
 [menu]
+"theme" = "تم"
+"dark" = "تیره"
+"ultraDark" = "فوق تیره"
 "dashboard" = "نمای کلی"
 "inbounds" = "ورودی‌ها"
 "settings" = "تنظیمات پنل"
@@ -431,6 +434,7 @@
 "type" = "نوع"
 "bridge" = "پل"
 "portal" = "پورتال"
+"link" = "لینک"
 "intercon" = "اتصال میانی"
 "settings" = "تنظیمات"
 "accountInfo" = "اطلاعات حساب"

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"
@@ -430,6 +433,7 @@
 "type" = "Tipe"
 "bridge" = "Jembatan"
 "portal" = "Portal"
+"link" = "Tautan"
 "intercon" = "Interkoneksi"
 "settings" = "Pengaturan"
 "accountInfo" = "Informasi Akun"

web/translation/translate.ja_JP.toml

@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "追加されたリバースプロキシはありません。"
 
 [menu]
+"theme" = "テーマ"
+"dark" = "ダーク"
+"ultraDark" = "ウルトラダーク"
 "dashboard" = "ダッシュボード"
 "inbounds" = "インバウンド一覧"
 "settings" = "パネル設定"
@@ -431,6 +434,7 @@
 "type" = "タイプ"
 "bridge" = "ブリッジ"
 "portal" = "ポータル"
+"link" = "リンク"
 "intercon" = "インターコネクション"
 "settings" = "設定"
 "accountInfo" = "アカウント情報"

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"
@@ -431,6 +434,7 @@
 "type" = "Tipo"
 "bridge" = "Ponte"
 "portal" = "Portal"
+"link" = "Link"
 "intercon" = "Interconexão"
 "settings" = "Configurações"
 "accountInfo" = "Informações da Conta"

web/translation/translate.ru_RU.toml

@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "Нет добавленных обратных прокси."
 
 [menu]
+"theme" = "Тема"
+"dark" = "Темная"
+"ultraDark" = "Ультра темная"
 "dashboard" = "Статус системы"
 "inbounds" = "Подключения"
 "settings" = "Настройки панели"
@@ -431,6 +434,7 @@
 "type" = "Тип"
 "bridge" = "Мост"
 "portal" = "Портал"
+"link" = "Ссылка"
 "intercon" = "Соединение"
 "settings" = "Настройки"
 "accountInfo" = "Информация об учетной записи"

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ı"
@@ -431,6 +434,7 @@
 "type" = "Tür"
 "bridge" = "Köprü"
 "portal" = "Portal"
+"link" = "Bağlantı"
 "intercon" = "Bağlantı"
 "settings" = "Ayarlar"
 "accountInfo" = "Hesap Bilgileri"

web/translation/translate.uk_UA.toml

@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "Немає доданих зворотних проксі."
 
 [menu]
+"theme" = "Тема"
+"dark" = "Темна"
+"ultraDark" = "Ультра темна"
 "dashboard" = "Огляд"
 "inbounds" = "Вхідні"
 "settings" = "Параметри панелі"
@@ -431,6 +434,7 @@
 "type" = "Тип"
 "bridge" = "Міст"
 "portal" = "Портал"
+"link" = "Посилання"
 "intercon" = "Взаємозв'язок"
 "settings" = "Налаштування"
 "accountInfo" = "Інформація про обліковий запис"

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"
@@ -431,6 +434,7 @@
 "type" = "Loại"
 "bridge" = "Cầu"
 "portal" = "Cổng thông tin"
+"link" = "Liên kết"
 "intercon" = "Kết nối"
 "settings" = "cài đặt"
 "accountInfo" = "Thông tin tài khoản"

web/translation/translate.zh_CN.toml

@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "未添加反向代理。"
 
 [menu]
+"theme" = "主题"
+"dark" = "暗色"
+"ultraDark" = "超暗色"
 "dashboard" = "系统状态"
 "inbounds" = "入站列表"
 "settings" = "面板设置"
@@ -431,6 +434,7 @@
 "type" = "类型"
 "bridge" = "Bridge"
 "portal" = "Portal"
+"link" = "链接"
 "intercon" = "互连"
 "settings" = "设置"
 "accountInfo" = "帐户信息"

web/translation/translate.zh_TW.toml

@@ -67,6 +67,9 @@
 "emptyReverseDesc" = "未添加反向代理。"
 
 [menu]
+"theme" = "主題"
+"dark" = "深色"
+"ultraDark" = "超深色"
 "dashboard" = "系統狀態"
 "inbounds" = "入站列表"
 "settings" = "面板設定"
@@ -431,6 +434,7 @@
 "type" = "類型"
 "bridge" = "Bridge"
 "portal" = "Portal"
+"link" = "連結"
 "intercon" = "互連"
 "settings" = "設定"
 "accountInfo" = "帳戶資訊"

x-ui.sh

@@ -1127,7 +1127,7 @@ ssl_cert_issue() {
 
     # issue the certificate
     ~/.acme.sh/acme.sh --set-default-ca --server letsencrypt
-    ~/.acme.sh/acme.sh --issue -d ${domain} --listen-v6 --standalone --httpport ${WebPort}
+    ~/.acme.sh/acme.sh --issue -d ${domain} --listen-v6 --standalone --httpport ${WebPort} --force
     if [ $? -ne 0 ]; then
         LOGE "Issuing certificate failed, please check logs."
         rm -rf ~/.acme.sh/${domain}
@@ -1208,13 +1208,6 @@ ssl_cert_issue_CF() {
         fi
 
         CF_Domain=""
-        certPath="/root/cert-CF"
-        if [ ! -d "$certPath" ]; then
-            mkdir -p $certPath
-        else
-            rm -rf $certPath
-            mkdir -p $certPath
-        fi
 
         LOGD "Please set a domain name:"
         read -p "Input your domain here: " CF_Domain
@@ -1242,7 +1235,7 @@ ssl_cert_issue_CF() {
         export CF_Email="${CF_AccountEmail}"
 
         # Issue the certificate using Cloudflare DNS
-        ~/.acme.sh/acme.sh --issue --dns dns_cf -d ${CF_Domain} -d *.${CF_Domain} --log
+        ~/.acme.sh/acme.sh --issue --dns dns_cf -d ${CF_Domain} -d *.${CF_Domain} --log --force
         if [ $? -ne 0 ]; then
             LOGE "Certificate issuance failed, script exiting..."
             exit 1
@@ -1250,17 +1243,45 @@ ssl_cert_issue_CF() {
             LOGI "Certificate issued successfully, Installing..."
         fi
 
-        # Install the certificate
-        mkdir -p ${certPath}/${CF_Domain}
+         # Install the certificate
+        certPath="/root/cert/${CF_Domain}"
+        if [ -d "$certPath" ]; then
+            rm -rf ${certPath}
+        fi
+
+        mkdir -p ${certPath}
         if [ $? -ne 0 ]; then
-            LOGE "Failed to create directory: ${certPath}/${CF_Domain}"
+            LOGE "Failed to create directory: ${certPath}"
             exit 1
         fi
 
-        ~/.acme.sh/acme.sh --installcert -d ${CF_Domain} -d *.${CF_Domain} \
-            --fullchain-file ${certPath}/${CF_Domain}/fullchain.pem \
-            --key-file ${certPath}/${CF_Domain}/privkey.pem
+        reloadCmd="x-ui restart"
 
+        LOGI "Default --reloadcmd for ACME is: ${yellow}x-ui restart"
+        LOGI "This command will run on every certificate issue and renew."
+        read -p "Would you like to modify --reloadcmd for ACME? (y/n): " setReloadcmd
+        if [[ "$setReloadcmd" == "y" || "$setReloadcmd" == "Y" ]]; then
+            echo -e "\n${green}\t1.${plain} Preset: x-ui restart ; systemctl reload nginx"
+            echo -e "${green}\t2.${plain} Input your own command"
+            echo -e "${green}\t0.${plain} Keep default reloadcmd"
+            read -p "Choose an option: " choice
+            case "$choice" in
+            1)
+                LOGI "Reloadcmd is: x-ui restart ; systemctl reload nginx"
+                reloadCmd="x-ui restart ; systemctl reload nginx"
+                ;;
+            2)
+                read -p "Please enter your reloadcmd (example: x-ui restart ; systemctl reload nginx): " reloadCmd
+                LOGI "Your reloadcmd is: ${reloadCmd}"
+                ;;
+            *)
+                LOGI "Keep default reloadcmd"
+                ;;
+            esac
+        fi
+        ~/.acme.sh/acme.sh --installcert -d ${CF_Domain} -d *.${CF_Domain} \
+            --key-file ${certPath}/privkey.pem \
+            --fullchain-file ${certPath}/fullchain.pem --reloadcmd "${reloadCmd}"
         if [ $? -ne 0 ]; then
             LOGE "Certificate installation failed, script exiting..."
             exit 1
@@ -1275,15 +1296,15 @@ ssl_cert_issue_CF() {
             exit 1
         else
             LOGI "The certificate is installed and auto-renewal is turned on. Specific information is as follows:"
-            ls -lah ${certPath}/${CF_Domain}
-            chmod 755 ${certPath}/${CF_Domain}
+            ls -lah ${certPath}/*
+            chmod 755 ${certPath}/*
         fi
 
         # Prompt user to set panel paths after successful certificate installation
         read -p "Would you like to set this certificate for the panel? (y/n): " setPanel
         if [[ "$setPanel" == "y" || "$setPanel" == "Y" ]]; then
-            local webCertFile="${certPath}/${CF_Domain}/fullchain.pem"
-            local webKeyFile="${certPath}/${CF_Domain}/privkey.pem"
+            local webCertFile="${certPath}/fullchain.pem"
+            local webKeyFile="${certPath}/privkey.pem"
 
             if [[ -f "$webCertFile" && -f "$webKeyFile" ]]; then
                 /usr/local/x-ui/x-ui cert -webCert "$webCertFile" -webCertKey "$webKeyFile"
@@ -1585,7 +1606,6 @@ install_iplimit() {
     # Launching fail2ban
     if ! systemctl is-active --quiet fail2ban; then
         systemctl start fail2ban
-        systemctl enable fail2ban
     else
         systemctl restart fail2ban
     fi