From 0a207b8a2c0629b7f1996025a40a10fbe58d05d0 Mon Sep 17 00:00:00 2001
From: "Shishkevich D." <135337715+shishkevichd@users.noreply.github.com>
Date: Fri, 7 Mar 2025 09:07:23 +0000
Subject: refactor: merging all util functions into classes

---
 web/html/common/js.html                |  3 +--
 web/html/xui/form/client.html          |  8 +++----
 web/html/xui/inbound_client_table.html | 22 ++++++++---------
 web/html/xui/inbound_info_modal.html   | 12 +++++-----
 web/html/xui/inbounds.html             | 44 +++++++++++++++++-----------------
 web/html/xui/index.html                | 28 +++++++++++-----------
 web/html/xui/settings.html             |  2 +-
 web/html/xui/warp_modal.html           |  6 ++---
 web/html/xui/xray.html                 |  8 +++----
 9 files changed, 66 insertions(+), 67 deletions(-)

(limited to 'web/html')

diff --git a/web/html/common/js.html b/web/html/common/js.html
index 301b1df7..2d93935f 100644
--- a/web/html/common/js.html
+++ b/web/html/common/js.html
@@ -5,9 +5,8 @@
 <script src="{{ .base_path }}assets/axios/axios.min.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/qs/qs.min.js"></script>
 <script src="{{ .base_path }}assets/js/axios-init.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/js/util/common.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/util/date-util.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/js/util/utils.js?{{ .cur_ver }}"></script>
+<script src="{{ .base_path }}assets/js/util/index.js?{{ .cur_ver }}"></script>
 <script src="{{ .base_path }}assets/js/langs.js"></script>
 <script>
     const basePath = '{{ .base_path }}';
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 0b894f01..c2bcace1 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -126,10 +126,10 @@
         <a-input-number v-model.number="client._totalGB" :min="0"></a-input-number>
     </a-form-item>
     <a-form-item v-if="isEdit && clientStats" label='{{ i18n "usage" }}'>
-        <a-tag :color="clientUsageColor(clientStats, app.trafficDiff)">
-            [[ sizeFormat(clientStats.up) ]] /
-            [[ sizeFormat(clientStats.down) ]]
-            ([[ sizeFormat(clientStats.up + clientStats.down) ]])
+        <a-tag :color="ColorUtils.clientUsageColor(clientStats, app.trafficDiff)">
+            [[ SizeFormatter.sizeFormat(clientStats.up) ]] /
+            [[ SizeFormatter.sizeFormat(clientStats.down) ]]
+            ([[ SizeFormatter.sizeFormat(clientStats.up + clientStats.down) ]])
         </a-tag>
         <a-tooltip>
             <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
diff --git a/web/html/xui/inbound_client_table.html b/web/html/xui/inbound_client_table.html
index 13593cea..fbf0699a 100644
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/inbound_client_table.html
@@ -55,18 +55,18 @@
     <template slot="content" v-if="client.email">
       <table cellpadding="2" width="100%">
         <tr>
-          <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
-          <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
+          <td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
+          <td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
         </tr>
         <tr v-if="client.totalGB > 0">
           <td>{{ i18n "remained" }}</td>
-          <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
+          <td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
         </tr>
       </table>
     </template>
     <table>
       <tr class="tr-table-box">
-        <td class="tr-table-rt"> [[ sizeFormat(getSumStats(record, client.email)) ]] </td>
+        <td class="tr-table-rt"> [[ SizeFormatter.sizeFormat(getSumStats(record, client.email)) ]] </td>
         <td class="tr-table-bar" v-if="!client.enable">
           <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
         </td>
@@ -124,9 +124,9 @@
           </template>
         </span>
       </template>
-      <a-tag style="min-width: 50px; border: none;" :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
+      <a-tag style="min-width: 50px; border: none;" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
     </a-popover>
-    <a-tag v-else :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" style="border: none;" class="infinite-tag">
+    <a-tag v-else :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)" style="border: none;" class="infinite-tag">
       <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
         <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
       </svg>
@@ -172,7 +172,7 @@
           <td colspan="3" style="text-align: center;">{{ i18n "pages.inbounds.traffic" }}</td>
         </tr>
         <tr>
-          <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> [[ sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] </td>
+          <td width="80px" style="margin:0; text-align: right;font-size: 1em;"> [[ SizeFormatter.sizeFormat(getUpStats(record, client.email) + getDownStats(record, client.email)) ]] </td>
           <td width="120px" v-if="!client.enable">
             <a-progress :stroke-color="themeSwitcher.isDarkTheme ? 'rgb(72 84 105)' : '#bcbcbc'" :show-info="false" :percent="statsProgress(record, client.email)" />
           </td>
@@ -181,12 +181,12 @@
               <template slot="content" v-if="client.email">
                 <table cellpadding="2" width="100%">
                   <tr>
-                    <td>↑[[ sizeFormat(getUpStats(record, client.email)) ]]</td>
-                    <td>↓[[ sizeFormat(getDownStats(record, client.email)) ]]</td>
+                    <td>↑[[ SizeFormatter.sizeFormat(getUpStats(record, client.email)) ]]</td>
+                    <td>↓[[ SizeFormatter.sizeFormat(getDownStats(record, client.email)) ]]</td>
                   </tr>
                   <tr>
                     <td>{{ i18n "remained" }}</td>
-                    <td>[[ sizeFormat(getRemStats(record, client.email)) ]]</td>
+                    <td>[[ SizeFormatter.sizeFormat(getRemStats(record, client.email)) ]]</td>
                   </tr>
                 </table>
               </template>
@@ -244,7 +244,7 @@
                     </template>
                   </span>
                 </template>
-                <a-tag style="min-width: 50px; border: none;" :color="userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
+                <a-tag style="min-width: 50px; border: none;" :color="ColorUtils.userExpiryColor(app.expireDiff, client, themeSwitcher.isDarkTheme)"> [[ remainedDays(client.expiryTime) ]] </a-tag>
               </a-popover>
               <a-tag v-else :color="client.enable ? 'purple' : themeSwitcher.isDarkTheme ? '#2c3950' : '#bcbcbc'" class="infinite-tag">
                 <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
diff --git a/web/html/xui/inbound_info_modal.html b/web/html/xui/inbound_info_modal.html
index 1c561aa6..5ac5e9ab 100644
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -181,8 +181,8 @@
         <tr v-if="infoModal.clientStats">
           <td>{{ i18n "usage" }}</td>
           <td>
-            <a-tag color="green">[[ sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
-            <a-tag>↑ [[ sizeFormat(infoModal.clientStats.up) ]] / [[ sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
+            <a-tag color="green">[[ SizeFormatter.sizeFormat(infoModal.clientStats.up + infoModal.clientStats.down) ]]</a-tag>
+            <a-tag>↑ [[ SizeFormatter.sizeFormat(infoModal.clientStats.up) ]] / [[ SizeFormatter.sizeFormat(infoModal.clientStats.down) ]] ↓</a-tag>
           </td>
         </tr>
         <tr v-if="infoModal.clientSettings.comment">
@@ -224,7 +224,7 @@
             <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ getRemStats() ]] </a-tag>
           </td>
           <td>
-            <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ sizeFormat(infoModal.clientSettings.totalGB) ]] </a-tag>
+            <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)"> [[ SizeFormatter.sizeFormat(infoModal.clientSettings.totalGB) ]] </a-tag>
             <a-tag v-else color="purple" class="infinite-tag">
               <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
                 <path d="M484.4 96C407 96 349.2 164.1 320 208.5C290.8 164.1 233 96 155.6 96C69.75 96 0 167.8 0 256s69.75 160 155.6 160C233.1 416 290.8 347.9 320 303.5C349.2 347.9 407 416 484.4 416C570.3 416 640 344.2 640 256S570.3 96 484.4 96zM155.6 368C96.25 368 48 317.8 48 256s48.25-112 107.6-112c67.75 0 120.5 82.25 137.1 112C276 285.8 223.4 368 155.6 368zM484.4 368c-67.75 0-120.5-82.25-137.1-112C364 226.2 416.6 144 484.4 144C543.8 144 592 194.2 592 256S543.8 368 484.4 368z" fill="currentColor"></path>
@@ -233,7 +233,7 @@
           </td>
           <td>
             <template v-if="infoModal.clientSettings.expiryTime > 0">
-              <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)"> 
+              <a-tag :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)"> 
                 <template v-if="app.datepicker === 'gregorian'">
                   [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
                 </template>
@@ -540,11 +540,11 @@
           })
       },
       statsColor(stats) {
-        return usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
+        return ColorUtils.usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
       },
       getRemStats() {
         remained = this.infoModal.clientStats.total - this.infoModal.clientStats.up - this.infoModal.clientStats.down;
-        return remained > 0 ? sizeFormat(remained) : '-';
+        return remained > 0 ? SizeFormatter.sizeFormat(remained) : '-';
       },
       refreshIPs() {
         this.refreshing = true;
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 7dc5ff5f..677a3074 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -141,11 +141,11 @@
             <a-row>
               <a-col :xs="24" :sm="24" :lg="12">
                 {{ i18n "pages.inbounds.totalDownUp" }}:
-                <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
+                <a-tag color="green">[[ SizeFormatter.sizeFormat(total.up) ]] / [[ SizeFormatter.sizeFormat(total.down) ]]</a-tag>
               </a-col>
               <a-col :xs="24" :sm="24" :lg="12">
                 {{ i18n "pages.inbounds.totalUsage" }}:
-                <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
+                <a-tag color="green">[[ SizeFormatter.sizeFormat(total.up + total.down) ]]</a-tag>
               </a-col>
               <a-col :xs="24" :sm="24" :lg="12">
                 {{ i18n "pages.inbounds.inboundCount" }}:
@@ -375,19 +375,19 @@
                   <template slot="content">
                     <table cellpadding="2" width="100%">
                       <tr>
-                        <td>↑[[ sizeFormat(dbInbound.up) ]]</td>
-                        <td>↓[[ sizeFormat(dbInbound.down) ]]</td>
+                        <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
+                        <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
                       </tr>
                       <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
                         <td>{{ i18n "remained" }}</td>
-                        <td>[[ sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                        <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
                       </tr>
                     </table>
                   </template>
-                  <a-tag :color="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
-                    [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
+                  <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                    [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
                     <template v-if="dbInbound.total > 0">
-                        [[ sizeFormat(dbInbound.total) ]]
+                        [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
                     </template>
                     <template v-else>
                       <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
@@ -408,7 +408,7 @@
                   <template v-else slot="content">
                     [[ DateUtil.convertToJalalian(moment(dbInbound.expiryTime)) ]]
                   </template>
-                  <a-tag style="min-width: 50px;" :color="usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
+                  <a-tag style="min-width: 50px;" :color="ColorUtils.usageColor(new Date().getTime(), app.expireDiff, dbInbound._expiryTime)">
                     [[ remainedDays(dbInbound._expiryTime) ]]
                   </a-tag>
                 </a-popover>
@@ -474,19 +474,19 @@
                             <template slot="content">
                               <table cellpadding="2" width="100%">
                                 <tr>
-                                  <td>↑[[ sizeFormat(dbInbound.up) ]]</td>
-                                  <td>↓[[ sizeFormat(dbInbound.down) ]]</td>
+                                  <td>↑[[ SizeFormatter.sizeFormat(dbInbound.up) ]]</td>
+                                  <td>↓[[ SizeFormatter.sizeFormat(dbInbound.down) ]]</td>
                                 </tr>
                                 <tr v-if="dbInbound.total > 0 &&  dbInbound.up + dbInbound.down < dbInbound.total">
                                   <td>{{ i18n "remained" }}</td>
-                                  <td>[[ sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
+                                  <td>[[ SizeFormatter.sizeFormat(dbInbound.total - dbInbound.up - dbInbound.down) ]]</td>
                                 </tr>
                               </table>
                             </template>
-                            <a-tag :color="usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
-                                [[ sizeFormat(dbInbound.up + dbInbound.down) ]] /
+                            <a-tag :color="ColorUtils.usageColor(dbInbound.up + dbInbound.down, app.trafficDiff, dbInbound.total)">
+                                [[ SizeFormatter.sizeFormat(dbInbound.up + dbInbound.down) ]] /
                                 <template v-if="dbInbound.total > 0">
-                                    [[ sizeFormat(dbInbound.total) ]]
+                                    [[ SizeFormatter.sizeFormat(dbInbound.total) ]]
                                 </template>
                               <template v-else>
                                 <svg height="10px" width="14px" viewBox="0 0 640 512" fill="currentColor">
@@ -1274,9 +1274,9 @@
                 return remained>0 ? remained : 0;
             },
             clientStatsColor(dbInbound, email) {
-                if (email.length == 0) return clientUsageColor();
+                if (email.length == 0) return ColorUtils.clientUsageColor();
                 clientStats = dbInbound.clientStats.find(stats => stats.email === email);
-                return clientUsageColor(clientStats, app.trafficDiff)
+                return ColorUtils.clientUsageColor(clientStats, app.trafficDiff)
             },
             statsProgress(dbInbound, email) {
                 if (email.length == 0) return 100;
@@ -1294,17 +1294,17 @@
             },
             remainedDays(expTime){
                 if (expTime == 0) return null;
-                if (expTime < 0) return formatSecond(expTime/-1000);
+                if (expTime < 0) return TimeFormatter.formatSecond(expTime/-1000);
                 now = new Date().getTime();
                 if (expTime < now) return '{{ i18n "depleted" }}';
-                return formatSecond((expTime-now)/1000);
+                return TimeFormatter.formatSecond((expTime-now)/1000);
             },
             statsExpColor(dbInbound, email){
                 if (email.length == 0) return '#7a316f';
                 clientStats = dbInbound.clientStats.find(stats => stats.email === email);
                 if (!clientStats) return '#7a316f';
-                statsColor = usageColor(clientStats.down + clientStats.up, this.trafficDiff, clientStats.total);
-                expColor = usageColor(new Date().getTime(), this.expireDiff, clientStats.expiryTime);
+                statsColor = ColorUtils.usageColor(clientStats.down + clientStats.up, this.trafficDiff, clientStats.total);
+                expColor = ColorUtils.usageColor(new Date().getTime(), this.expireDiff, clientStats.expiryTime);
                 switch (true) {
                     case statsColor == "red" || expColor == "red":
                         return "#cf3c3c"; // Red
@@ -1438,7 +1438,7 @@
             }
         },
         watch: {
-            searchKey: debounce(function (newVal) {
+            searchKey: Utils.debounce(function (newVal) {
                 this.searchInbounds(newVal);
             }, 500)
         },
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 8f89da90..89146932 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -45,11 +45,11 @@
                         <a-progress type="dashboard" status="normal"
                           :stroke-color="status.cpu.color"
                           :percent="status.cpu.percent"></a-progress>
-                        <div><b>CPU:</b> [[ cpuCoreFormat(status.cpuCores) ]] <a-tooltip>
+                        <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> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
+                            <div><b>Speed:</b> [[ CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
                           </template>
                         </a-tooltip></div>
                       </a-col>
@@ -58,7 +58,7 @@
                           :stroke-color="status.mem.color"
                           :percent="status.mem.percent"></a-progress>
                         <div>
-                          <b>{{ i18n "pages.index.memory"}}:</b> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
+                          <b>{{ i18n "pages.index.memory"}}:</b> [[ SizeFormatter.sizeFormat(status.mem.current) ]] / [[ SizeFormatter.sizeFormat(status.mem.total) ]]
                         </div>
                       </a-col>
                     </a-row>
@@ -70,7 +70,7 @@
                           :stroke-color="status.swap.color"
                           :percent="status.swap.percent"></a-progress>
                         <div>
-                          <b>Swap:</b> [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
+                          <b>Swap:</b> [[ SizeFormatter.sizeFormat(status.swap.current) ]] / [[ SizeFormatter.sizeFormat(status.swap.total) ]]
                         </div>
                       </a-col>
                       <a-col :span="12" style="text-align: center">
@@ -78,7 +78,7 @@
                           :stroke-color="status.disk.color"
                           :percent="status.disk.percent"></a-progress>
                         <div>
-                          <b>{{ i18n "pages.index.hard"}}:</b> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
+                          <b>{{ i18n "pages.index.hard"}}:</b> [[ SizeFormatter.sizeFormat(status.disk.current) ]] / [[ SizeFormatter.sizeFormat(status.disk.total) ]]
                         </div>
                       </a-col>
                     </a-row>
@@ -99,8 +99,8 @@
               <a-col :sm="24" :lg="12">
                 <a-card hoverable>
                   <b>{{ i18n "pages.index.operationHours" }}:</b>
-                  <a-tag :color="status.xray.color">Xray: [[ formatSecond(status.appStats.uptime) ]]</a-tag>
-                  <a-tag color="green">OS: [[ formatSecond(status.uptime) ]]</a-tag>
+                  <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]]</a-tag>
+                  <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
                 </a-card>
               </a-col>
               <a-col :sm="24" :lg="12">
@@ -145,7 +145,7 @@
               <a-col :sm="24" :lg="12">
                 <a-card hoverable>
                   <b>{{ i18n "usage"}}:</b>
-                  <a-tag color="green"> RAM: [[ sizeFormat(status.appStats.mem) ]] </a-tag>
+                  <a-tag color="green"> RAM: [[ SizeFormatter.sizeFormat(status.appStats.mem) ]] </a-tag>
                   <a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
                 </a-card>
               </a-col>
@@ -207,7 +207,7 @@
                     <a-col :span="12">
                       <a-tag>
                         <a-tooltip>
-                          <a-icon type="arrow-up"></a-icon> Up: [[ sizeFormat(status.netIO.up) ]]/s
+                          <a-icon type="arrow-up"></a-icon> Up: [[ SizeFormatter.sizeFormat(status.netIO.up) ]]/s
                           <template slot="title">
                             {{ i18n "pages.index.upSpeed" }}
                           </template>
@@ -217,7 +217,7 @@
                     <a-col :span="12">
                       <a-tag>
                         <a-tooltip>
-                          <a-icon type="arrow-down"></a-icon> Down: [[ sizeFormat(status.netIO.down) ]]/s
+                          <a-icon type="arrow-down"></a-icon> Down: [[ SizeFormatter.sizeFormat(status.netIO.down) ]]/s
                           <template slot="title">
                             {{ i18n "pages.index.downSpeed" }}
                           </template>
@@ -236,7 +236,7 @@
                           <a-icon type="cloud-upload"></a-icon>
                           <template slot="title">
                             {{ i18n "pages.index.totalSent" }}
-                          </template> Out: [[ sizeFormat(status.netTraffic.sent) ]]
+                          </template> Out: [[ SizeFormatter.sizeFormat(status.netTraffic.sent) ]]
                         </a-tooltip>
                       </a-tag>
                     </a-col>
@@ -246,7 +246,7 @@
                           <a-icon type="cloud-download"></a-icon>
                           <template slot="title">
                             {{ i18n "pages.index.totalReceive" }}
-                          </template> In: [[ sizeFormat(status.netTraffic.recv) ]]
+                          </template> In: [[ SizeFormatter.sizeFormat(status.netTraffic.recv) ]]
                         </a-tooltip>
                       </a-tag>
                     </a-col>
@@ -353,7 +353,7 @@
             if (this.total === 0) {
                 return 0;
             }
-            return toFixed(this.current / this.total * 100, 2);
+            return NumberFormatter.toFixed(this.current / this.total * 100, 2);
         }
 
         get color() {
@@ -396,7 +396,7 @@
             this.logicalPro = data.logicalPro;
             this.cpuSpeedMhz = data.cpuSpeedMhz;
             this.disk = new CurTotal(data.disk.current, data.disk.total);
-            this.loads = data.loads.map(load => toFixed(load, 2));
+            this.loads = data.loads.map(load => NumberFormatter.toFixed(load, 2));
             this.mem = new CurTotal(data.mem.current, data.mem.total);
             this.netIO = data.netIO;
             this.netTraffic = data.netTraffic;
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
index 1cccd28d..58a1bf8a 100644
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -832,7 +832,7 @@
           if (host == this.oldAllSetting.webDomain) host = null;
           if (port == this.oldAllSetting.webPort) port = null;
           const isTLS = webCertFile !== "" || webKeyFile !== "";
-          const url = buildURL({ host, port, isTLS, base, path: "panel/settings" });
+          const url = URLBuilder.buildURL({ host, port, isTLS, base, path: "panel/settings" });
           window.location.replace(url);
         }
       },
diff --git a/web/html/xui/warp_modal.html b/web/html/xui/warp_modal.html
index 3acd49e8..467f9854 100644
--- a/web/html/xui/warp_modal.html
+++ b/web/html/xui/warp_modal.html
@@ -65,15 +65,15 @@
                     </tr>
                     <tr>
                         <td>WARP+ Data</td>
-                        <td>[[ sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
+                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.premium_data) ]]</td>
                     </tr>
                     <tr class="client-table-odd-row">
                         <td>Quota</td>
-                        <td>[[ sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
+                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.quota) ]]</td>
                     </tr>
                     <tr v-if="!ObjectUtil.isEmpty(warpModal.warpConfig.account.usage)">
                         <td>Usage</td>
-                        <td>[[ sizeFormat(warpModal.warpConfig.account.usage) ]]</td>
+                        <td>[[ SizeFormatter.sizeFormat(warpModal.warpConfig.account.usage) ]]</td>
                     </tr>
                 </template>
             </table>
diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
index 288b69fc..6a367228 100644
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -1177,10 +1177,10 @@
             findOutboundTraffic(o) {
                 for (const otraffic of this.outboundsTraffic) {
                     if (otraffic.tag == o.tag) {
-                        return sizeFormat(otraffic.up) + ' / ' + sizeFormat(otraffic.down);
+                        return SizeFormatter.sizeFormat(otraffic.up) + ' / ' + SizeFormatter.sizeFormat(otraffic.down);
                     }
                 }
-                return sizeFormat(0) + ' / ' + sizeFormat(0);
+                return SizeFormatter.sizeFormat(0) + ' / ' + SizeFormatter.sizeFormat(0);
             },
             findOutboundAddress(o) {
                 serverObj = null;
@@ -1929,7 +1929,7 @@
             },
             torrentSettings: {
                 get: function () {
-                    return doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols);
+                    return ArrayUtils.doAllItemsExist(this.settingsData.protocols.bittorrent, this.blockedProtocols);
                 },
                 set: function (newValue) {
                     if (newValue) {
@@ -1942,7 +1942,7 @@
             familyProtectSettings: {
                 get: function () {
                     if (!this.templateSettings || !this.templateSettings.dns || !this.templateSettings.dns.servers) return false;
-                    return doAllItemsExist(this.settingsData.familyProtectDNS.servers, this.templateSettings.dns.servers);
+                    return ArrayUtils.doAllItemsExist(this.settingsData.familyProtectDNS.servers, this.templateSettings.dns.servers);
                 },
                 set: function (newValue) {
                     newTemplateSettings = this.templateSettings;
-- 
cgit v1.2.3