Merge 915fd27d61 into 42fa64770b

Code refactoring

web/assets/base64/base64.min.js

@@ -1 +0,0 @@
-(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory(global):typeof define==="function"&&define.amd?define(factory):factory(global)})(typeof self!=="undefined"?self:typeof window!=="undefined"?window:typeof global!=="undefined"?global:this,function(global){"use strict";var _Base64=global.Base64;var version="2.5.0";var buffer;if(typeof module!=="undefined"&&module.exports){try{buffer=eval("require('buffer').Buffer")}catch(err){buffer=undefined}}var b64chars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var b64tab=function(bin){var t={};for(var i=0,l=bin.length;i<l;i++)t[bin.charAt(i)]=i;return t}(b64chars);var fromCharCode=String.fromCharCode;var cb_utob=function(c){if(c.length<2){var cc=c.charCodeAt(0);return cc<128?c:cc<2048?fromCharCode(192|cc>>>6)+fromCharCode(128|cc&63):fromCharCode(224|cc>>>12&15)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}else{var cc=65536+(c.charCodeAt(0)-55296)*1024+(c.charCodeAt(1)-56320);return fromCharCode(240|cc>>>18&7)+fromCharCode(128|cc>>>12&63)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}};var re_utob=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;var utob=function(u){return u.replace(re_utob,cb_utob)};var cb_encode=function(ccc){var padlen=[0,2,1][ccc.length%3],ord=ccc.charCodeAt(0)<<16|(ccc.length>1?ccc.charCodeAt(1):0)<<8|(ccc.length>2?ccc.charCodeAt(2):0),chars=[b64chars.charAt(ord>>>18),b64chars.charAt(ord>>>12&63),padlen>=2?"=":b64chars.charAt(ord>>>6&63),padlen>=1?"=":b64chars.charAt(ord&63)];return chars.join("")};var btoa=global.btoa?function(b){return global.btoa(b)}:function(b){return b.replace(/[\s\S]{1,3}/g,cb_encode)};var _encode=buffer?buffer.from&&Uint8Array&&buffer.from!==Uint8Array.from?function(u){return(u.constructor===buffer.constructor?u:buffer.from(u)).toString("base64")}:function(u){return(u.constructor===buffer.constructor?u:new buffer(u)).toString("base64")}:function(u){return btoa(utob(u))};var encode=function(u,urisafe){return!urisafe?_encode(String(u)):_encode(String(u)).replace(/[+\/]/g,function(m0){return m0=="+"?"-":"_"}).replace(/=/g,"")};var encodeURI=function(u){return encode(u,true)};var re_btou=new RegExp(["[À-ß][€-¿]","[à-ï][€-¿]{2}","[ð-÷][€-¿]{3}"].join("|"),"g");var cb_btou=function(cccc){switch(cccc.length){case 4:var cp=(7&cccc.charCodeAt(0))<<18|(63&cccc.charCodeAt(1))<<12|(63&cccc.charCodeAt(2))<<6|63&cccc.charCodeAt(3),offset=cp-65536;return fromCharCode((offset>>>10)+55296)+fromCharCode((offset&1023)+56320);case 3:return fromCharCode((15&cccc.charCodeAt(0))<<12|(63&cccc.charCodeAt(1))<<6|63&cccc.charCodeAt(2));default:return fromCharCode((31&cccc.charCodeAt(0))<<6|63&cccc.charCodeAt(1))}};var btou=function(b){return b.replace(re_btou,cb_btou)};var cb_decode=function(cccc){var len=cccc.length,padlen=len%4,n=(len>0?b64tab[cccc.charAt(0)]<<18:0)|(len>1?b64tab[cccc.charAt(1)]<<12:0)|(len>2?b64tab[cccc.charAt(2)]<<6:0)|(len>3?b64tab[cccc.charAt(3)]:0),chars=[fromCharCode(n>>>16),fromCharCode(n>>>8&255),fromCharCode(n&255)];chars.length-=[0,0,2,1][padlen];return chars.join("")};var _atob=global.atob?function(a){return global.atob(a)}:function(a){return a.replace(/\S{1,4}/g,cb_decode)};var atob=function(a){return _atob(String(a).replace(/[^A-Za-z0-9\+\/]/g,""))};var _decode=buffer?buffer.from&&Uint8Array&&buffer.from!==Uint8Array.from?function(a){return(a.constructor===buffer.constructor?a:buffer.from(a,"base64")).toString()}:function(a){return(a.constructor===buffer.constructor?a:new buffer(a,"base64")).toString()}:function(a){return btou(_atob(a))};var decode=function(a){return _decode(String(a).replace(/[-_]/g,function(m0){return m0=="-"?"+":"/"}).replace(/[^A-Za-z0-9\+\/]/g,""))};var noConflict=function(){var Base64=global.Base64;global.Base64=_Base64;return Base64};global.Base64={VERSION:version,atob:atob,btoa:btoa,fromBase64:decode,toBase64:encode,utob:utob,encode:encode,encodeURI:encodeURI,btou:btou,decode:decode,noConflict:noConflict,__buffer__:buffer};if(typeof Object.defineProperty==="function"){var noEnum=function(v){return{value:v,enumerable:false,writable:true,configurable:true}};global.Base64.extendString=function(){Object.defineProperty(String.prototype,"fromBase64",noEnum(function(){return decode(this)}));Object.defineProperty(String.prototype,"toBase64",noEnum(function(urisafe){return encode(this,urisafe)}));Object.defineProperty(String.prototype,"toBase64URI",noEnum(function(){return encode(this,true)}))}}if(global["Meteor"]){Base64=global.Base64}if(typeof module!=="undefined"&&module.exports){module.exports.Base64=global.Base64}else if(typeof define==="function"&&define.amd){define([],function(){return global.Base64})}return{Base64:global.Base64}});

web/assets/js/langs.js

@@ -62,20 +62,20 @@ const supportLangs = [
 ];
 
 function getLang() {
-	let lang = getCookie("lang");
+	let lang = CookieManager.getCookie("lang");
 
 	if (!lang) {
 		if (window.navigator) {
 			lang = window.navigator.language || window.navigator.userLanguage;
 
 			if (isSupportLang(lang)) {
-				setCookie("lang", lang, 150);
+				CookieManager.setCookie("lang", lang, 150);
 			} else {
-				setCookie("lang", "en-US", 150);
+				CookieManager.setCookie("lang", "en-US", 150);
 				window.location.reload();
 			}
 		} else {
-			setCookie("lang", "en-US", 150);
+			CookieManager.setCookie("lang", "en-US", 150);
 			window.location.reload();
 		}
 	}
@@ -88,7 +88,7 @@ function setLang(lang) {
 		lang = "en-US";
 	}
 
-	setCookie("lang", lang, 150);
+	CookieManager.setCookie("lang", lang, 150);
 	window.location.reload();
 }
 

web/assets/js/model/dbinbound.js

@@ -25,11 +25,11 @@ class DBInbound {
     }
 
     get totalGB() {
-        return toFixed(this.total / ONE_GB, 2);
+        return NumberFormatter.toFixed(this.total / SizeFormatter.ONE_GB, 2);
     }
 
     set totalGB(gb) {
-        this.total = toFixed(gb * ONE_GB, 0);
+        this.total = NumberFormatter.toFixed(gb * SizeFormatter.ONE_GB, 0);
     }
 
     get isVMess() {

web/assets/js/model/inbound.js

@@ -1302,7 +1302,7 @@ class Inbound extends XrayCommonClass {
             }
         }
 
-        return 'vmess://' + base64(JSON.stringify(obj, null, 2));
+        return 'vmess://' + Base64.encode(JSON.stringify(obj, null, 2));
     }
 
     genVLESSLink(address = '', port = this.port, forceTls, remark = '', clientId, flow) {
@@ -1474,7 +1474,7 @@ class Inbound extends XrayCommonClass {
         if (this.isSS2022) password.push(settings.password);
         if (this.isSSMultiUser) password.push(clientPassword);
 
-        let link = `ss://${safeBase64(settings.method + ':' + password.join(':'))}@${address}:${port}`;
+        let link = `ss://${Base64.encode(`${settings.method}:${password.join(':')}`, true)}@${address}:${port}`;
         const url = new URL(link);
         for (const [key, value] of params) {
             url.searchParams.set(key, value)
@@ -1837,11 +1837,11 @@ Inbound.VmessSettings.VMESS = class extends XrayCommonClass {
         }
     }
     get _totalGB() {
-        return toFixed(this.totalGB / ONE_GB, 2);
+        return NumberFormatter.toFixed(this.totalGB / SizeFormatter.ONE_GB, 2);
     }
 
     set _totalGB(gb) {
-        this.totalGB = toFixed(gb * ONE_GB, 0);
+        this.totalGB = NumberFormatter.toFixed(gb * SizeFormatter.ONE_GB, 0);
     }
 
 };
@@ -1947,11 +1947,11 @@ Inbound.VLESSSettings.VLESS = class extends XrayCommonClass {
         }
     }
     get _totalGB() {
-        return toFixed(this.totalGB / ONE_GB, 2);
+        return NumberFormatter.toFixed(this.totalGB / SizeFormatter.ONE_GB, 2);
     }
 
     set _totalGB(gb) {
-        this.totalGB = toFixed(gb * ONE_GB, 0);
+        this.totalGB = NumberFormatter.toFixed(gb * SizeFormatter.ONE_GB, 0);
     }
 };
 Inbound.VLESSSettings.Fallback = class extends XrayCommonClass {
@@ -2099,11 +2099,11 @@ Inbound.TrojanSettings.Trojan = class extends XrayCommonClass {
         }
     }
     get _totalGB() {
-        return toFixed(this.totalGB / ONE_GB, 2);
+        return NumberFormatter.toFixed(this.totalGB / SizeFormatter.ONE_GB, 2);
     }
 
     set _totalGB(gb) {
-        this.totalGB = toFixed(gb * ONE_GB, 0);
+        this.totalGB = NumberFormatter.toFixed(gb * SizeFormatter.ONE_GB, 0);
     }
 
 };
@@ -2263,11 +2263,11 @@ Inbound.ShadowsocksSettings.Shadowsocks = class extends XrayCommonClass {
         }
     }
     get _totalGB() {
-        return toFixed(this.totalGB / ONE_GB, 2);
+        return NumberFormatter.toFixed(this.totalGB / SizeFormatter.ONE_GB, 2);
     }
 
     set _totalGB(gb) {
-        this.totalGB = toFixed(gb * ONE_GB, 0);
+        this.totalGB = NumberFormatter.toFixed(gb * SizeFormatter.ONE_GB, 0);
     }
 
 };

web/assets/js/util/common.js

@@ -1,194 +0,0 @@
-const ONE_KB = 1024;
-const ONE_MB = ONE_KB * 1024;
-const ONE_GB = ONE_MB * 1024;
-const ONE_TB = ONE_GB * 1024;
-const ONE_PB = ONE_TB * 1024;
-
-function sizeFormat(size) {
-    if (size <= 0) return "0 B";
-
-    if (size < ONE_KB) {
-        return size.toFixed(0) + " B";
-    } else if (size < ONE_MB) {
-        return (size / ONE_KB).toFixed(2) + " KB";
-    } else if (size < ONE_GB) {
-        return (size / ONE_MB).toFixed(2) + " MB";
-    } else if (size < ONE_TB) {
-        return (size / ONE_GB).toFixed(2) + " GB";
-    } else if (size < ONE_PB) {
-        return (size / ONE_TB).toFixed(2) + " TB";
-    } else {
-        return (size / ONE_PB).toFixed(2) + " PB";
-    }
-}
-
-function cpuSpeedFormat(speed) {
-    if (speed > 1000) {
-        const GHz = speed / 1000;
-        return GHz.toFixed(2) + " GHz";
-    } else {
-        return speed.toFixed(2) + " MHz";
-    }
-}
-
-function cpuCoreFormat(cores) {
-    if (cores === 1) {
-        return "1 Core";
-    } else {
-        return cores + " Cores";
-    }
-}
-
-function base64(str) {
-    return Base64.encode(str);
-}
-
-function safeBase64(str) {
-    return base64(str)
-        .replace(/\+/g, '-')
-        .replace(/=/g, '')
-        .replace(/\//g, '_');
-}
-
-function formatSecond(second) {
-    if (second < 60) {
-        return second.toFixed(0) + 's';
-    } else if (second < 3600) {
-        return (second / 60).toFixed(0) + 'm';
-    } else if (second < 3600 * 24) {
-        return (second / 3600).toFixed(0) + 'h';
-    } else {
-        day = Math.floor(second / 3600 / 24);
-        remain = ((second / 3600) - (day * 24)).toFixed(0);
-        return day + 'd' + (remain > 0 ? ' ' + remain + 'h' : '');
-    }
-}
-
-function addZero(num) {
-    if (num < 10) {
-        return "0" + num;
-    } else {
-        return num;
-    }
-}
-
-function toFixed(num, n) {
-    n = Math.pow(10, n);
-    return Math.floor(num * n) / n;
-}
-
-function debounce(fn, delay) {
-    var timeoutID = null;
-    return function () {
-        clearTimeout(timeoutID);
-        var args = arguments;
-        var that = this;
-        timeoutID = setTimeout(function () {
-            fn.apply(that, args);
-        }, delay);
-    };
-}
-
-function getCookie(cname) {
-    let name = cname + '=';
-    let ca = document.cookie.split(';');
-    for (let i = 0; i < ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) == ' ') {
-            c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-            // decode cookie value only
-            return decodeURIComponent(c.substring(name.length, c.length));
-        }
-    }
-    return '';
-}
-
-
-function setCookie(cname, cvalue, exdays) {
-    const d = new Date();
-    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
-    let expires = 'expires=' + d.toUTCString();
-    // encode cookie value
-    document.cookie = cname + '=' + encodeURIComponent(cvalue) + ';' + expires + ';path=/';
-}
-
-function usageColor(data, threshold, total) {
-    switch (true) {
-        case data === null:
-            return "purple";
-        case total < 0:
-            return "green";
-        case total == 0:
-            return "purple";
-        case data < total - threshold:
-            return "green";
-        case data < total:
-            return "orange";
-        default:
-            return "red";
-    }
-}
-
-function clientUsageColor(clientStats, trafficDiff) {
-    switch (true) {
-        case !clientStats || clientStats.total == 0:
-            return "#7a316f"; // purple
-        case clientStats.up + clientStats.down < clientStats.total - trafficDiff:
-            return "#008771"; // Green
-        case clientStats.up + clientStats.down < clientStats.total:
-            return "#f37b24"; // Orange
-        default:
-            return "#cf3c3c"; // Red
-    }
-}
-
-function userExpiryColor(threshold, client, isDark = false) {
-    if (!client.enable) {
-        return isDark ? '#2c3950' : '#bcbcbc';
-    }
-    now = new Date().getTime(),
-        expiry = client.expiryTime;
-    switch (true) {
-        case expiry === null:
-            return "#7a316f"; // purple
-        case expiry < 0:
-            return "#008771"; // Green
-        case expiry == 0:
-            return "#7a316f"; // purple
-        case now < expiry - threshold:
-            return "#008771"; // Green
-        case now < expiry:
-            return "#f37b24"; // Orange
-        default:
-            return "#cf3c3c"; // Red
-    }
-}
-
-function doAllItemsExist(array1, array2) {
-    for (let i = 0; i < array1.length; i++) {
-        if (!array2.includes(array1[i])) {
-            return false;
-        }
-    }
-    return true;
-}
-
-function buildURL({ host, port, isTLS, base, path }) {
-    if (!host || host.length === 0) host = window.location.hostname;
-    if (!port || port.length === 0) port = window.location.port;
-
-    if (isTLS === undefined) isTLS = window.location.protocol === "https:";
-
-    const protocol = isTLS ? "https:" : "http:";
-
-    port = String(port);
-    if (port === "" || (isTLS && port === "443") || (!isTLS && port === "80")) {
-        port = "";
-    } else {
-        port = `:${port}`;
-    }
-
-    return `${protocol}//${host}${port}${base}${path}`;
-}

web/assets/js/util/date-util.js

@@ -108,14 +108,14 @@ Date.prototype.setMaxTime = function () {
  * Formatting date
  */
 Date.prototype.formatDate = function () {
-    return this.getFullYear() + "-" + addZero(this.getMonth() + 1) + "-" + addZero(this.getDate());
+    return this.getFullYear() + "-" + NumberFormatter.addZero(this.getMonth() + 1) + "-" + NumberFormatter.addZero(this.getDate());
 };
 
 /**
  * Format time
  */
 Date.prototype.formatTime = function () {
-    return addZero(this.getHours()) + ":" + addZero(this.getMinutes()) + ":" + addZero(this.getSeconds());
+    return NumberFormatter.addZero(this.getHours()) + ":" + NumberFormatter.addZero(this.getMinutes()) + ":" + NumberFormatter.addZero(this.getSeconds());
 };
 
 /**

web/assets/js/util/index.js

@@ -479,3 +479,194 @@ class Wireguard {
         };
     }
 }
+
+class ClipboardManager {
+    static copyText(content = "") {
+        // !! here old way of copying is used because not everyone can afford https connection
+        return new Promise((resolve) => {
+            try {
+                const textarea = window.document.createElement('textarea');
+    
+                textarea.style.fontSize = '12pt';
+                textarea.style.border = '0';
+                textarea.style.padding = '0';
+                textarea.style.margin = '0';
+                textarea.style.position = 'absolute';
+                textarea.style.left = '-9999px';
+                textarea.style.top = `${window.pageYOffset || document.documentElement.scrollTop}px`;
+                textarea.setAttribute('readonly', '');
+                textarea.value = content;
+    
+                window.document.body.appendChild(textarea);
+    
+                textarea.select();
+                window.document.execCommand("copy");
+    
+                window.document.body.removeChild(textarea);
+    
+                resolve(true)
+            } catch {
+                resolve(false)
+            }
+        })
+    }
+}
+
+class Base64 {
+    static encode(content = "", safe = false) {
+        if (safe) {
+            return window.btoa(content)
+                .replace(/\+/g, '-')
+                .replace(/=/g, '')
+                .replace(/\//g, '_')
+        }
+
+        return window.btoa(content)
+    }
+
+    static decode(content = "") {
+        return window.atob(content)
+    }
+}
+
+class SizeFormatter {
+    static ONE_KB = 1024;
+    static ONE_MB = this.ONE_KB * 1024;
+    static ONE_GB = this.ONE_MB * 1024;
+    static ONE_TB = this.ONE_GB * 1024;
+    static ONE_PB = this.ONE_TB * 1024;
+
+    static sizeFormat(size) {
+        if (size <= 0) return "0 B";
+        if (size < this.ONE_KB) return size.toFixed(0) + " B";
+        if (size < this.ONE_MB) return (size / this.ONE_KB).toFixed(2) + " KB";
+        if (size < this.ONE_GB) return (size / this.ONE_MB).toFixed(2) + " MB";
+        if (size < this.ONE_TB) return (size / this.ONE_GB).toFixed(2) + " GB";
+        if (size < this.ONE_PB) return (size / this.ONE_TB).toFixed(2) + " TB";
+        return (size / this.ONE_PB).toFixed(2) + " PB";
+    }
+}
+
+class CPUFormatter {
+    static cpuSpeedFormat(speed) {
+        return speed > 1000 ? (speed / 1000).toFixed(2) + " GHz" : speed.toFixed(2) + " MHz";
+    }
+    
+    static cpuCoreFormat(cores) {
+        return cores === 1 ? "1 Core" : cores + " Cores";
+    }
+}
+
+class TimeFormatter {
+    static formatSecond(second) {
+        if (second < 60) return second.toFixed(0) + 's';
+        if (second < 3600) return (second / 60).toFixed(0) + 'm';
+        if (second < 3600 * 24) return (second / 3600).toFixed(0) + 'h';
+        let day = Math.floor(second / 3600 / 24);
+        let remain = ((second / 3600) - (day * 24)).toFixed(0);
+        return day + 'd' + (remain > 0 ? ' ' + remain + 'h' : '');
+    }
+}
+
+class NumberFormatter {
+    static addZero(num) {
+        return num < 10 ? "0" + num : num;
+    }
+    
+    static toFixed(num, n) {
+        n = Math.pow(10, n);
+        return Math.floor(num * n) / n;
+    }
+}
+
+class Utils {
+    static debounce(fn, delay) {
+        let timeoutID = null;
+        return function () {
+            clearTimeout(timeoutID);
+            let args = arguments;
+            let that = this;
+            timeoutID = setTimeout(() => fn.apply(that, args), delay);
+        };
+    }
+}
+
+class CookieManager {
+    static getCookie(cname) {
+        let name = cname + '=';
+        let ca = document.cookie.split(';');
+        for (let c of ca) {
+            c = c.trim();
+            if (c.indexOf(name) === 0) {
+                return decodeURIComponent(c.substring(name.length, c.length));
+            }
+        }
+        return '';
+    }
+    
+    static setCookie(cname, cvalue, exdays) {
+        const d = new Date();
+        d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
+        let expires = 'expires=' + d.toUTCString();
+        document.cookie = cname + '=' + encodeURIComponent(cvalue) + ';' + expires + ';path=/';
+    }
+}
+
+class ColorUtils {
+    static usageColor(data, threshold, total) {
+        switch (true) {
+            case data === null: return "purple";
+            case total < 0: return "green";
+            case total == 0: return "purple";
+            case data < total - threshold: return "green";
+            case data < total: return "orange";
+            default: return "red";
+        }
+    }
+    
+    static clientUsageColor(clientStats, trafficDiff) {
+        switch (true) {
+            case !clientStats || clientStats.total == 0: return "#7a316f";
+            case clientStats.up + clientStats.down < clientStats.total - trafficDiff: return "#008771";
+            case clientStats.up + clientStats.down < clientStats.total: return "#f37b24";
+            default: return "#cf3c3c";
+        }
+    }
+    
+    static userExpiryColor(threshold, client, isDark = false) {
+        if (!client.enable) return isDark ? '#2c3950' : '#bcbcbc';
+        let now = new Date().getTime(), expiry = client.expiryTime;
+        switch (true) {
+            case expiry === null: return "#7a316f";
+            case expiry < 0: return "#008771";
+            case expiry == 0: return "#7a316f";
+            case now < expiry - threshold: return "#008771";
+            case now < expiry: return "#f37b24";
+            default: return "#cf3c3c";
+        }
+    }
+}
+
+class ArrayUtils {
+    static doAllItemsExist(array1, array2) {
+        return array1.every(item => array2.includes(item));
+    }
+}
+
+class URLBuilder {
+    static buildURL({ host, port, isTLS, base, path }) {
+        if (!host || host.length === 0) host = window.location.hostname;
+        if (!port || port.length === 0) port = window.location.port;
+        if (isTLS === undefined) isTLS = window.location.protocol === "https:";
+        
+        const protocol = isTLS ? "https:" : "http:";
+        port = String(port);
+        if (port === "" || (isTLS && port === "443") || (!isTLS && port === "80")) {
+            port = "";
+        } else {
+            port = `:${port}`;
+        }
+        
+        return `${protocol}//${host}${port}${base}${path}`;
+    }
+}

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

web/html/common/qrcode_modal.html

@@ -10,7 +10,7 @@
         <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}}</span></a-tag>
         <tr-qr-bg class="qr-bg-sub">
           <tr-qr-bg-inner class="qr-bg-sub-inner">
-            <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
+            <canvas @click="qrModal.copy(genSubLink(qrModal.client.subId))" id="qrCode-sub" class="qr-cv"></canvas>
           </tr-qr-bg-inner>
         </tr-qr-bg>
       </tr-qr-box>
@@ -18,7 +18,7 @@
         <a-tag color="purple" class="qr-tag"><span>{{ i18n "pages.settings.subSettings"}} Json</span></a-tag>
         <tr-qr-bg class="qr-bg-sub">
           <tr-qr-bg-inner class="qr-bg-sub-inner">
-            <canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
+            <canvas @click="qrModal.copy(genSubJsonLink(qrModal.client.subId))" id="qrCode-subJson" class="qr-cv"></canvas>
           </tr-qr-bg-inner>
         </tr-qr-bg>
       </tr-qr-box>
@@ -27,7 +27,7 @@
       <tr-qr-box class="qr-box">
         <a-tag color="green" class="qr-tag"><span>[[ row.remark ]]</span></a-tag>
         <tr-qr-bg class="qr-bg">
-          <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
+          <canvas @click="qrModal.copy(row.link)" :id="'qrCode-'+index" class="qr-cv"></canvas>
         </tr-qr-bg>
       </tr-qr-box>
     </template>
@@ -41,7 +41,6 @@
     dbInbound: new DBInbound(),
     client: null,
     qrcodes: [],
-    clipboard: null,
     visible: false,
     subId: '',
     show: function(title = '', dbInbound, client) {
@@ -79,14 +78,12 @@
       qrModal: qrModal,
     },
     methods: {
-      copyToClipboard(elementId, content) {
-        this.qrModal.clipboard = new ClipboardJS('#' + elementId, {
-          text: () => content,
-        });
-        this.qrModal.clipboard.on('success', () => {
+      copy(content) {
+        ClipboardManager
+          .copyText(content)
+          .then(() => {
             app.$message.success('{{ i18n "copied" }}')
-          this.qrModal.clipboard.destroy();
-        });
+          })
       },
       setQrCode(elementId, content) {
         new QRious({

web/html/common/text_modal.html

@@ -7,7 +7,7 @@
             :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
             :download="txtModal.fileName">[[ txtModal.fileName ]]
         </a-button>
-            <a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button>
+        <a-button type="primary" @click="txtModal.copy(txtModal.content)">{{ i18n "copy" }}</a-button>
     </template>
     <a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content"
         :autosize="{ minRows: 10, maxRows: 20}"></a-input>
@@ -20,24 +20,20 @@
         content: '',
         fileName: '',
         qrcode: null,
-        clipboard: null,
         visible: false,
         show: function (title = '', content = '', fileName = '') {
             this.title = title;
             this.content = content;
             this.fileName = fileName;
             this.visible = true;
-            textModalApp.$nextTick(() => {
-                if (this.clipboard === null) {
-                    this.clipboard = new ClipboardJS('#copy-btn', {
-                        text: () => this.content,
-                    });
-                    this.clipboard.on('success', () => {
+        },
+        copy: function (content = '') {
+            ClipboardManager
+                .copyText(content)
+                .then(() => {
                     app.$message.success('{{ i18n "copied" }}')
                     this.close();
-                    });
-                }
-            });
+                })
         },
         close: function () {
             this.visible = false;

web/html/xui/component/setting.html

@@ -1,26 +1,18 @@
 {{define "component/settingListItem"}}
-<a-list-item style="padding: 20px">
-    <a-row v-if="type === 'textarea'">
-        <a-col>
-            <a-list-item-meta :title="title" :description="desc"/>
-            <a-textarea class="ant-setting-textarea" :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10 }"></a-textarea>
-            <!--a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 30 }"></a-textarea-->
-        </a-col>
-    </a-row>
-    <a-row v-else>
+<a-list-item :style="{ padding: padding }">
+    <a-row>
         <a-col :lg="24" :xl="12">
-            <a-list-item-meta :title="title" :description="desc"/>
+            <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">
-            <template v-if="type === 'text'">
-                <a-input :value="value" @input="$emit('input', $event.target.value)" :placeholder="placeholder"></a-input>
-            </template>
-            <template v-else-if="type === 'number'">
-                <a-input-number :value="value" :step="step" @change="value => $emit('input', value)" :min="min" :max="max" style="width: 100%;"></a-input-number>
-            </template>
-            <template v-else-if="type === 'switch'">
-                <a-switch :checked="value" @change="value => $emit('input', value)"></a-switch>
-            </template>
+            <slot name="control"></slot>
         </a-col>
     </a-row>
 </a-list-item>
@@ -28,9 +20,21 @@
 
 {{define "component/setting"}}
 <script>
-    Vue.component('setting-list-item', {
-        props: ["type", "title", "desc", "value", "min", "max" , "step", "placeholder"],
-        template: `{{template "component/settingListItem"}}`,
-    });
+    Vue.component('a-setting-list-item', {
+        props: ["title", "description", "paddings"],
+        template: `{{ template "component/settingListItem" }}`,
+        computed: {
+            padding() {
+                switch (this.paddings) {
+                    case "small":
+                        return "10px 20px !important"
+                        break;
+                    default:
+                        return "20px !important"
+                        break;
+                }
+            }
+        }
+    })
 </script>
 {{end}}

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>

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

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>
@@ -258,7 +258,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag color="purple">Subscription Link</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" id="copy-sub-link" @click="copyToClipboard('copy-sub-link', infoModal.subLink)"></a-button>
+              <a-button size="small" icon="snippets" @click="copy(infoModal.subLink)"></a-button>
             </a-tooltip>
           </tr-info-title>
           <a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a>
@@ -267,7 +267,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag color="purple">Json Link</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" id="copy-subJson-link" @click="copyToClipboard('copy-subJson-link', infoModal.subJsonLink)"></a-button>
+              <a-button size="small" icon="snippets" @click="copy(infoModal.subJsonLink)"></a-button>
             </a-tooltip>
           </tr-info-title>
           <a :href="[[ infoModal.subJsonLink ]]" target="_blank">[[ infoModal.subJsonLink ]]</a>
@@ -279,7 +279,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag color="blue">[[ infoModal.clientSettings.tgId ]]</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button size="small" icon="snippets" id="copy-tg-link" @click="copyToClipboard('copy-tg-link', infoModal.clientSettings.tgId)"></a-button>
+              <a-button size="small" icon="snippets" @click="copy(infoModal.clientSettings.tgId)"></a-button>
             </a-tooltip>
           </tr-info-title>
         </tr-info-row>
@@ -290,7 +290,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button style="min-width: 24px;" size="small" icon="snippets" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)"></a-button>
+              <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copy(link.link)"></a-button>
             </a-tooltip>
           </tr-info-title>
           <code>[[ link.link ]]</code>
@@ -304,7 +304,7 @@
           <tr-info-title class="tr-info-title">
             <a-tag class="tr-info-tag" color="green">[[ link.remark ]]</a-tag>
             <a-tooltip title='{{ i18n "copy" }}'>
-              <a-button style="min-width: 24px;" size="small" icon="snippets" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)"></a-button>
+              <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copy(link.link)"></a-button>
             </a-tooltip>
           </tr-info-title>
           <code>[[ link.link ]]</code>
@@ -431,7 +431,7 @@
                 <tr-info-title class="tr-info-title">
                   <a-tag color="blue">Config</a-tag>
                   <a-tooltip title='{{ i18n "copy" }}'>
-                    <a-button style="min-width: 24px;" size="small" icon="snippets" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, infoModal.links[index])"></a-button>
+                    <a-button style="min-width: 24px;" size="small" icon="snippets" @click="copy(infoModal.links[index])"></a-button>
                   </a-tooltip>
                 </tr-info-title>
                 <div v-html="infoModal.links[index].replaceAll(`\n`,`<br />`)" style="border-radius: 1rem; padding: 0.5rem;" class="client-table-odd-row">
@@ -464,7 +464,6 @@
     clientStats: [],
     upStats: 0,
     downStats: 0,
-    clipboard: null,
     links: [],
     index: null,
     isExpired: false,
@@ -533,21 +532,19 @@
       },
     },
     methods: {
-      copyToClipboard(elementId, content) {
-        this.infoModal.clipboard = new ClipboardJS('#' + elementId, {
-          text: () => content,
-        });
-        this.infoModal.clipboard.on('success', () => {
+      copy(content) {
+        ClipboardManager
+          .copyText(content)
+          .then(() => {
             app.$message.success('{{ i18n "copied" }}')
-          this.infoModal.clipboard.destroy();
-        });
+          })
       },
       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;

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">
@@ -544,9 +544,7 @@
   </a-layout>
 </a-layout>
 {{template "js" .}}
-<script src="{{ .base_path }}assets/base64/base64.min.js"></script>
 <script src="{{ .base_path }}assets/qrcode/qrious2.min.js?{{ .cur_ver }}"></script>
-<script src="{{ .base_path }}assets/clipboard/clipboard.min.js?{{ .cur_ver }}"></script>
 <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>
@@ -885,7 +883,7 @@
                         this.exportSubs(dbInbound.id);
                         break;
                     case "clipboard":
-                        this.copyToClipboard(dbInbound.id);
+                        this.copy(dbInbound.id);
                         break;
                     case "resetTraffic":
                         this.resetTraffic(dbInbound.id);
@@ -1276,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;
@@ -1296,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
@@ -1384,7 +1382,7 @@
                 }
                 txtModal.show('{{ i18n "pages.inbounds.export"}}', copyText.join('\r\n'), 'All-Inbounds');
             },
-            copyToClipboard(dbInboundId) {
+            copy(dbInboundId) {
               dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
               txtModal.show('{{ i18n "pages.inbounds.inboundData" }}', JSON.stringify(dbInbound, null, 2));
             },
@@ -1440,7 +1438,7 @@
             }
         },
         watch: {
-            searchKey: debounce(function (newVal) {
+            searchKey: Utils.debounce(function (newVal) {
                 this.searchInbounds(newVal);
             }, 500)
         },

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>
@@ -332,7 +332,6 @@
     </a-modal>
   </a-layout>
 {{template "js" .}}
-<script src="{{ .base_path }}assets/clipboard/clipboard.min.js?{{ .cur_ver }}"></script>
 {{template "component/themeSwitcher" .}}
 {{template "textModal"}}
 <script>
@@ -354,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() {
@@ -397,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;

web/html/xui/settings.html

@@ -108,16 +108,17 @@
               </a-row>
             </a-card>
             <a-tabs default-active-key="1">
-              <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings"}}'>
-                <a-list item-layout="horizontal">
-                  <a-list-item>
-                    <a-row style="padding: 20px">
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title='{{ i18n "pages.settings.remarkModel"}}'>
-                          <template slot="description">{{ i18n "pages.settings.sampleRemark"}}: <i>#[[ remarkSample ]]</i></template>
-                        </a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
+              <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings" }}' style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>
+                        {{ i18n "pages.settings.remarkModel"}}
+                      </template>
+                      <template #description>
+                        {{ i18n "pages.settings.sampleRemark"}}: <i>#[[ remarkSample ]]</i>
+                      </template>
+                      <template #control>
                         <a-input-group style="width: 100%;">
                           <a-select style="padding-right: .5rem; min-width: 80%; width: auto;"
                               mode="multiple"
@@ -129,47 +130,53 @@
                             <a-select-option v-for="key in remarkSeparators" :value="key">[[ key ]]</a-select-option>
                           </a-select>
                         </a-input-group>
-                      </a-col>
-                    </a-row>
-                  </a-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningIP"}}' desc='{{ i18n "pages.settings.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningDomain"}}' desc='{{ i18n "pages.settings.panelListeningDomainDesc"}}' v-model="allSetting.webDomain"></setting-list-item>
-                  <setting-list-item type="number" title='{{ i18n "pages.settings.panelPort"}}' desc='{{ i18n "pages.settings.panelPortDesc"}}' v-model="allSetting.webPort" :min="1" :max="65531"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.publicKeyPath"}}' desc='{{ i18n "pages.settings.publicKeyPathDesc"}}' v-model="allSetting.webCertFile"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.privateKeyPath"}}' desc='{{ i18n "pages.settings.privateKeyPathDesc"}}' v-model="allSetting.webKeyFile"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.panelUrlPath"}}' desc='{{ i18n "pages.settings.panelUrlPathDesc"}}' v-model="allSetting.webBasePath"></setting-list-item>
-                  <setting-list-item type="number" title='{{ i18n "pages.settings.sessionMaxAge" }}' desc='{{ i18n "pages.settings.sessionMaxAgeDesc" }}' v-model="allSetting.sessionMaxAge" :min="60"></setting-list-item>
-                  <setting-list-item type="number" title='{{ i18n "pages.settings.pageSize" }}' desc='{{ i18n "pages.settings.pageSizeDesc" }}' v-model="allSetting.pageSize" :min="0" :step="5"></setting-list-item>
-                  <setting-list-item type="number" title='{{ i18n "pages.settings.expireTimeDiff" }}' desc='{{ i18n "pages.settings.expireTimeDiffDesc" }}' v-model="allSetting.expireDiff" :min="0"></setting-list-item>
-                  <setting-list-item type="number" title='{{ i18n "pages.settings.trafficDiff" }}' desc='{{ i18n "pages.settings.trafficDiffDesc" }}' v-model="allSetting.trafficDiff" :min="0"></setting-list-item>
-                  <setting-list-item type="switch" title='{{ i18n "pages.settings.externalTrafficInformEnable"}}' desc='{{ i18n "pages.settings.externalTrafficInformEnableDesc"}}' v-model="allSetting.externalTrafficInformEnable"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.externalTrafficInformURI"}}' desc='{{ i18n "pages.settings.externalTrafficInformURIDesc"}}' v-model="allSetting.externalTrafficInformURI" placeholder="(http|https)://domain[:port]/path/"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.timeZone"}}' desc='{{ i18n "pages.settings.timeZoneDesc"}}' v-model="allSetting.timeLocation"></setting-list-item>
-                  <a-list-item>
-                    <a-row style="padding: 20px">
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title='{{ i18n "pages.settings.datepicker"}}'>
-                          <template slot="description">{{ i18n "pages.settings.datepickerDescription"}}</template>
-                        </a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
-                        <template>
-                          <a-select style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme" v-model="datepicker">
-                            <a-select-option v-for="item in datepickerList" :value="item.value">
-                              <span v-text="item.name"></span>
-                            </a-select-option>
-                          </a-select>
                       </template>
-                      </a-col>
-                    </a-row>
-                  </a-list-item>
-                  <a-list-item>
-                    <a-row style="padding: 20px">
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title="Language"></a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
-                        <template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.panelListeningIP"}}</template>
+                      <template #description>{{ i18n "pages.settings.panelListeningIPDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webListen"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.panelListeningDomain"}}</template>
+                      <template #description>{{ i18n "pages.settings.panelListeningDomainDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webDomain"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.panelPort"}}</template>
+                      <template #description>{{ i18n "pages.settings.panelPortDesc"}}</template>
+                      <template #control>
+                        <a-input-number :min="1" :min="65531" v-model="allSetting.webPort" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.panelUrlPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.panelUrlPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webBasePath"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.sessionMaxAge" }}</template>
+                      <template #description>{{ i18n "pages.settings.sessionMaxAgeDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="60" v-model="allSetting.sessionMaxAge" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.pageSize" }}</template>
+                      <template #description>{{ i18n "pages.settings.pageSizeDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="0" step="5" v-model="allSetting.pageSize" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.language"}}</template>
+                      <template #control>
                         <a-select ref="selectLang"
                             v-model="lang"
                             @change="setLang(lang)"
@@ -180,299 +187,466 @@
                           </a-select-option>
                         </a-select>
                       </template>
-                      </a-col>
-                    </a-row>
-                  </a-list-item>
-                </a-list>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.notifications" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.expireTimeDiff" }}</template>
+                      <template #description>{{ i18n "pages.settings.expireTimeDiffDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="0" v-model="allSetting.expireDiff" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.trafficDiff" }}</template>
+                      <template #description>{{ i18n "pages.settings.trafficDiffDesc" }}</template>
+                      <template #control>
+                        <a-input-number :min="0" v-model="allSetting.trafficDiff" style="width: 100%;"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.certs" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.publicKeyPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.publicKeyPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webCertFile"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.privateKeyPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.privateKeyPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.webKeyFile"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.externalTraffic" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.externalTrafficInformEnable"}}</template>
+                      <template #description>{{ i18n "pages.settings.externalTrafficInformEnableDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.externalTrafficInformEnable"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.externalTrafficInformURI"}}</template>
+                      <template #description>{{ i18n "pages.settings.externalTrafficInformURIDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.externalTrafficInformURI"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.dateAndTime" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.timeZone"}}</template>
+                      <template #description>{{ i18n "pages.settings.timeZoneDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.timeLocation"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.datepicker"}}</template>
+                      <template #description>{{ i18n "pages.settings.datepickerDescription"}}</template>
+                      <template #control>
+                        <a-select style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme" v-model="datepicker">
+                          <a-select-option v-for="item in datepickerList" :value="item.value">
+                            <span v-text="item.name"></span>
+                          </a-select-option>
+                        </a-select>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                </a-collapse>
               </a-tab-pane>
-              <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding-top: 20px;">
+              <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings" }}' style="padding-top: 20px;">
                 <a-collapse>
                   <a-collapse-panel header='{{ i18n "pages.settings.security.admin"}}'>
-                    <a-list-item>
-                      <a-row style="padding: 0 20px; padding-bottom: 10px;">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.settings.oldUsername"}}'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.oldUsername"}}</template>
+                      <template #control>
                         <a-input autocomplete="username" v-model="user.oldUsername"></a-input>
                       </template>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.settings.currentPassword"}}'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.currentPassword"}}</template>
+                      <template #control>
                         <password-input autocomplete="current-password" v-model="user.oldPassword"></password-input>
                       </template>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.settings.newUsername"}}'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.newUsername"}}</template>
+                      <template #control>
                         <a-input v-model="user.newUsername"></a-input>
                       </template>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.settings.newPassword"}}'></a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.newPassword"}}</template>
+                      <template #control>
                         <password-input autocomplete="new-password" v-model="user.newPassword"></password-input>
                       </template>
-                        </a-col>
-                      </a-row>
-                      <a-space direction="horizontal" style="padding: 0 20px; padding-top: 20px;">
+                    </a-setting-list-item>
+                    <a-list-item>
+                      <a-space direction="horizontal" style="padding: 0 20px;">
                         <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
                       </a-space>
                     </a-list-item>
                   </a-collapse-panel>
                   <a-collapse-panel header='{{ i18n "pages.settings.security.secret"}}'>
-                    <a-list-item>
-                      <a-row style="padding: 0 20px; padding-bottom: 10px;">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.settings.security.loginSecurity" }}'
-                            description='{{ i18n "pages.settings.security.loginSecurityDesc" }}'>
-                          </a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.security.loginSecurity" }}</template>
+                      <template #description>{{ i18n "pages.settings.security.loginSecurityDesc" }}</template>
+                      <template #control>
                         <a-switch @change="toggleToken(allSetting.secretEnable)" v-model="allSetting.secretEnable"></a-switch>
                         <a-icon style="margin-left: 1rem;" v-if="allSetting.secretEnable" :spin="this.changeSecret" type="sync" @click="getNewSecret"></a-icon>
                       </template>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.settings.security.secretToken" }}'
-                            description='{{ i18n "pages.settings.security.secretTokenDesc" }}'>
-                          </a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.security.secretToken" }}</template>
+                      <template #description>{{ i18n "pages.settings.security.secretTokenDesc" }}</template>
+                      <template #control>
                         <a-textarea type="text" :disabled="!allSetting.secretEnable" v-model="user.loginSecret"></a-textarea>
                       </template>
-                        </a-col>
-                      </a-row>
-                      <a-space direction="horizontal" style="padding: 0 20px; padding-top: 20px;">
+                    </a-setting-list-item>
+                    <a-list-item>
+                      <a-space direction="horizontal" style="padding: 0 20px;">
                         <a-button type="primary" :loading="this.changeSecret" @click="updateSecret">{{ i18n "confirm" }}</a-button>
                       </a-space>
                     </a-list-item>
                   </a-collapse-panel>
                 </a-collapse>
-                <!--
-                <a-divider>{{ i18n "pages.settings.security.secret"}}</a-divider>
-                <a-form style="padding: 0 20px;">
-                  <a-list-item>
-                    <a-row>
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title='{{ i18n "pages.settings.security.loginSecurity" }}'
-                          description='{{ i18n "pages.settings.security.loginSecurityDesc" }}'>
-                        </a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
-                        <template>
-                          <a-switch @change="toggleToken(allSetting.secretEnable)" v-model="allSetting.secretEnable"></a-switch>
-                          <a-icon style="margin-left: 1rem;" v-if="allSetting.secretEnable" :spin="this.changeSecret" type="sync" @click="getNewSecret"></a-icon>
-                        </template>
-                      </a-col>
-                    </a-row>
-                  </a-list-item>
-                  
-                  <a-button type="primary" :loading="this.changeSecret" @click="updateSecret">{{ i18n "confirm" }}</a-button>
-                </a-form> -->
               </a-tab-pane>
-              <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings"}}'>
-                <a-list item-layout="horizontal">
-                  <setting-list-item type="switch" title='{{ i18n "pages.settings.telegramBotEnable" }}' desc='{{ i18n "pages.settings.telegramBotEnableDesc" }}' v-model="allSetting.tgBotEnable"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.telegramToken"}}' desc='{{ i18n "pages.settings.telegramTokenDesc"}}' v-model="allSetting.tgBotToken"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.telegramChatId"}}' desc='{{ i18n "pages.settings.telegramChatIdDesc"}}' v-model="allSetting.tgBotChatId"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.telegramNotifyTime"}}' desc='{{ i18n "pages.settings.telegramNotifyTimeDesc"}}' v-model="allSetting.tgRunTime"></setting-list-item>
-                  <setting-list-item type="switch" title='{{ i18n "pages.settings.tgNotifyBackup" }}' desc='{{ i18n "pages.settings.tgNotifyBackupDesc" }}' v-model="allSetting.tgBotBackup"></setting-list-item>
-                  <setting-list-item type="switch" title='{{ i18n "pages.settings.tgNotifyLogin" }}' desc='{{ i18n "pages.settings.tgNotifyLoginDesc" }}' v-model="allSetting.tgBotLoginNotify"></setting-list-item>
-                  <setting-list-item type="number" title='{{ i18n "pages.settings.tgNotifyCpu" }}' desc='{{ i18n "pages.settings.tgNotifyCpuDesc" }}' v-model="allSetting.tgCpu" :min="0" :max="100"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.telegramProxy"}}' desc='{{ i18n "pages.settings.telegramProxyDesc"}}' v-model="allSetting.tgBotProxy" placeholder="socks5://user:pass@host:port"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.telegramAPIServer"}}' desc='{{ i18n "pages.settings.telegramAPIServerDesc"}}' v-model="allSetting.tgBotAPIServer" placeholder="https://api.example.com"></setting-list-item>
-                  <a-list-item>
-                    <a-row style="padding: 20px">
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title="Telegram Bot Language" />
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
-                        <template>
+              <a-tab-pane key="3" tab='{{ i18n "pages.settings.TGBotSettings" }}' style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramBotEnable" }}</template>
+                      <template #description>{{ i18n "pages.settings.telegramBotEnableDesc" }}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.tgBotEnable"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramToken"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramTokenDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.tgBotToken"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramChatId"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramChatIdDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.tgBotChatId"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramBotLanguage"}}</template>
+                      <template #control>
                         <a-select ref="selectBotLang" v-model="allSetting.tgLang" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
                           <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
                             <span role="img" :aria-label="l.name" v-text="l.icon"></span> &nbsp;&nbsp; <span v-text="l.name"></span>
                           </a-select-option>
                         </a-select>
                       </template>
-                      </a-col>
-                    </a-row>
-                  </a-list-item>
-                </a-list>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.notifications" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramNotifyTime"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramNotifyTimeDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.tgRunTime"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.tgNotifyBackup" }}</template>
+                      <template #description>{{ i18n "pages.settings.tgNotifyBackupDesc" }}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.tgBotBackup"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.tgNotifyLogin" }}</template>
+                      <template #description>{{ i18n "pages.settings.tgNotifyLoginDesc" }}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.tgBotLoginNotify"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <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>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.proxyAndServer" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramProxy"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramProxyDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="socks5://user:pass@host:port" v-model="allSetting.tgBotProxy"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.telegramAPIServer"}}</template>
+                      <template #description>{{ i18n "pages.settings.telegramAPIServerDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="https://api.example.com" v-model="allSetting.tgBotAPIServer"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                </a-collapse>
               </a-tab-pane>
-              <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}'>
-                <a-list item-layout="horizontal">
-                  <setting-list-item type="switch" title='{{ i18n "pages.settings.subEnable"}}' desc='{{ i18n "pages.settings.subEnableDesc"}}' v-model="allSetting.subEnable"></setting-list-item>
-                  <setting-list-item type="switch" title='{{ i18n "pages.settings.subEncrypt"}}' desc='{{ i18n "pages.settings.subEncryptDesc"}}' v-model="allSetting.subEncrypt"></setting-list-item>
-                  <setting-list-item type="switch" title='{{ i18n "pages.settings.subShowInfo"}}' desc='{{ i18n "pages.settings.subShowInfoDesc"}}' v-model="allSetting.subShowInfo"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.subListen"}}' desc='{{ i18n "pages.settings.subListenDesc"}}' v-model="allSetting.subListen"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.subDomain"}}' desc='{{ i18n "pages.settings.subDomainDesc"}}' v-model="allSetting.subDomain"></setting-list-item>
-                  <setting-list-item type="number" title='{{ i18n "pages.settings.subPort"}}' desc='{{ i18n "pages.settings.subPortDesc"}}' v-model.number="allSetting.subPort" :min="1" :max="65531"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.subPath"}}' desc='{{ i18n "pages.settings.subPathDesc"}}' v-model="allSetting.subPath"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.subCertPath"}}' desc='{{ i18n "pages.settings.subCertPathDesc"}}' v-model="allSetting.subCertFile"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.subKeyPath"}}' desc='{{ i18n "pages.settings.subKeyPathDesc"}}' v-model="allSetting.subKeyFile"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.subURI"}}' desc='{{ i18n "pages.settings.subURIDesc"}}' v-model="allSetting.subURI" placeholder="(http|https)://domain[:port]/path/"></setting-list-item>
-                  <setting-list-item type="number" title='{{ i18n "pages.settings.subUpdates"}}' desc='{{ i18n "pages.settings.subUpdatesDesc"}}' v-model="allSetting.subUpdates" :min="1"></setting-list-item>
-                </a-list>
+              <a-tab-pane key="4" tab='{{ i18n "pages.settings.subSettings" }}' style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subEnable"}}</template>
+                      <template #description>{{ i18n "pages.settings.subEnableDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.subEnable"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subListen"}}</template>
+                      <template #description>{{ i18n "pages.settings.subListenDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subListen"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subDomain"}}</template>
+                      <template #description>{{ i18n "pages.settings.subDomainDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subDomain"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subPort"}}</template>
+                      <template #description>{{ i18n "pages.settings.subPortDesc"}}</template>
+                      <template #control>
+                        <a-input-number v-model="allSetting.subPort" :min="1" :min="65531" style="width: 100%;"></a-input-number>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subPath"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subURI"}}</template>
+                      <template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.subURI"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.information" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subEncrypt"}}</template>
+                      <template #description>{{ i18n "pages.settings.subEncryptDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.subEncrypt"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subShowInfo"}}</template>
+                      <template #description>{{ i18n "pages.settings.subShowInfoDesc"}}</template>
+                      <template #control>
+                        <a-switch v-model="allSetting.subShowInfo"></a-switch>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.certs" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subCertPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.subCertPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subCertFile"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subKeyPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.subKeyPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subKeyFile"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.intervals"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subUpdates"}}</template>
+                      <template #description>{{ i18n "pages.settings.subUpdatesDesc"}}</template>
+                      <template #control>
+                        <a-input-number :min="1" v-model="allSetting.subUpdates" style="width: 100%;"></a-input-number>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                </a-collapse>
               </a-tab-pane>
-              <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable">
-                <a-list item-layout="horizontal">
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.subPath"}}' desc='{{ i18n "pages.settings.subPathDesc"}}' v-model="allSetting.subJsonPath"></setting-list-item>
-                  <setting-list-item type="text" title='{{ i18n "pages.settings.subURI"}}' desc='{{ i18n "pages.settings.subURIDesc"}}' v-model="allSetting.subJsonURI" placeholder="(http|https)://domain[:port]/path/"></setting-list-item>
-                  <a-list-item style="padding: 20px">
-                    <a-row>
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title='{{ i18n "pages.settings.fragment"}}'>
-                          <template slot="description">{{ i18n "pages.settings.fragmentDesc"}}</template>
-                        </a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
+              <a-tab-pane key="5" tab='{{ i18n "pages.settings.subSettings" }} Json' v-if="allSetting.subEnable" style="padding-top: 20px;">
+                <a-collapse>
+                  <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subPath"}}</template>
+                      <template #description>{{ i18n "pages.settings.subPathDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" v-model="allSetting.subJsonPath"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.subURI"}}</template>
+                      <template #description>{{ i18n "pages.settings.subURIDesc"}}</template>
+                      <template #control>
+                        <a-input type="text" placeholder="(http|https)://domain[:port]/path/" v-model="allSetting.subJsonURI"></a-input>
+                      </template>
+                    </a-setting-list-item>
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.fragment"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.fragment"}}</template>
+                      <template #description>{{ i18n "pages.settings.fragmentDesc"}}</template>
+                      <template #control>
                         <a-switch v-model="fragment"></a-switch>
-                      </a-col>
-                    </a-row>
-                    <a-collapse v-if="fragment" style="margin-top: 14px;">
+                      </template>
+                    </a-setting-list-item>
+                    <a-list-item v-if="fragment" style="padding: 10px 20px;">
+                      <a-collapse>
                         <a-collapse-panel header='{{ i18n "pages.settings.fragmentSett"}}' v-if="fragment">
-                        <setting-list-item style="padding: 10px 20px" type="text" title='Packets' v-model="fragmentPackets" placeholder="1-1 | 1-3 | tlshello | ..."></setting-list-item>
-                        <setting-list-item style="padding: 10px 20px" type="text" title='Length' v-model="fragmentLength" placeholder="100-200"></setting-list-item>
-                        <setting-list-item style="padding: 10px 20px" type="text" title='Interval' v-model="fragmentInterval" placeholder="10-20"></setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Packets</template>
+                            <template #control>
+                              <a-input type="text" v-model="fragmentPackets" placeholder="1-1 | 1-3 | tlshello | ..."></a-input>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Length</template>
+                            <template #control>
+                              <a-input type="text" v-model="fragmentLength" placeholder="100-200"></a-input>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Interval</template>
+                            <template #control>
+                              <a-input type="text" v-model="fragmentInterval" placeholder="10-20"></a-input>
+                            </template>
+                          </a-setting-list-item>
                         </a-collapse-panel>
                       </a-collapse>
                     </a-list-item>
-                  <a-list-item style="padding: 20px">
-                    <a-row>
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title='Noises'>
-                          <template slot="description">{{ i18n "pages.settings.noisesDesc"}}</template>
-                        </a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
+                  </a-collapse-panel>
+                  <a-collapse-panel header="Noises">
+                    <a-setting-list-item paddings="small">
+                      <template #title>Noises</template>
+                      <template #description>{{ i18n "pages.settings.noisesDesc"}}</template>
+                      <template #control>
                         <a-switch v-model="noises"></a-switch>
-                      </a-col>
-                    </a-row>
-                    <a-collapse v-if="noises" style="margin-top: 14px;">
-                      <a-collapse-panel v-for="(noise, index) in noisesArray" :key="index" :header="`Noise ${index + 1}`">
-                        <a-list-item style="padding: 10px 20px">
-                          <a-row>
-                            <a-col :lg="24" :xl="12">
-                              <a-list-item-meta title='Type'></a-list-item-meta>
-                            </a-col>
-                            <a-col :lg="24" :xl="12">
+                      </template>
+                    </a-setting-list-item>
+                    <a-list-item v-if="noises" style="padding: 10px 20px;">
+                      <a-collapse>
+                        <a-collapse-panel v-for="(noise, index) in noisesArray" :key="index" :header="`Noise №${index + 1}`">
+                          <a-setting-list-item paddings="small">
+                            <template #title>Type</template>
+                            <template #control>
                               <a-select :value="noise.type" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme"
                                 @change="(value) => updateNoiseType(index, value)">
                                 <a-select-option :value="p" :label="p" v-for="p in ['rand', 'base64', 'str', 'hex']" :key="p">
                                   [[ p ]] </a-select-option>
                               </a-select>
-                            </a-col>
-                          </a-row>
-                        </a-list-item>
-                        <setting-list-item style="padding: 10px 20px" type="text" title='Packet' :value="noise.packet"
-                          @input="(value) => updateNoisePacket(index, value)" placeholder="5-10"></setting-list-item>
-                        <setting-list-item style="padding: 10px 20px" type="text" title='Delay (ms)' :value="noise.delay"
-                          @input="(value) => updateNoiseDelay(index, value)" placeholder="10-20"></setting-list-item>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Packet</template>
+                            <template #control>
+                              <a-input type="text" :value="noise.packet" @input="(value) => updateNoisePacket(index, event.target.value)" placeholder="5-10"></a-input>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>Delay (ms)</template>
+                            <template #control>
+                              <a-input type="text" :value="noise.delay" @input="(value) => updateNoiseDelay(index, event.target.value)" placeholder="10-20"></a-input>
+                            </template>
+                          </a-setting-list-item>
+                          <a-space direction="horizontal" style="padding: 10px 20px;">
                             <a-button v-if="noisesArray.length > 1" type="danger" @click="removeNoise(index)">Remove</a-button>
+                          </a-space>
                         </a-collapse-panel>
                       </a-collapse>
                       <a-button v-if="noises" type="primary" @click="addNoise" style="margin-top: 10px">Add Noise</a-button>
                     </a-list-item>
-                  <a-list-item style="padding: 20px">
-                    <a-row>
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title='{{ i18n "pages.settings.mux"}}'>
-                          <template slot="description">{{ i18n "pages.settings.muxDesc"}}</template>
-                        </a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.mux"}}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.mux"}}</template>
+                      <template #description>{{ i18n "pages.settings.muxDesc"}}</template>
+                      <template #control>
                         <a-switch v-model="enableMux"></a-switch>
-                      </a-col>
-                    </a-row>
-                    <a-collapse v-if="enableMux" style="margin-top: 14px;">
+                      </template>
+                    </a-setting-list-item>
+                    <a-list-item v-if="enableMux" style="padding: 10px 20px;">
+                      <a-collapse>
                         <a-collapse-panel header='{{ i18n "pages.settings.muxSett"}}'>
-                        <setting-list-item style="padding: 10px 20px" type="number" title='Concurrency' v-model="muxConcurrency" :min="-1" :max="1024"></setting-list-item>
-                        <setting-list-item style="padding: 10px 20px" type="number" title='xudp Concurrency' v-model="muxXudpConcurrency" :min="-1" :max="1024"></setting-list-item>
-                        <a-list-item style="padding: 10px 20px">
-                          <a-row>
-                            <a-col :lg="24" :xl="12">
-                              <a-list-item-meta title='xudp UDP 443'></a-list-item-meta>
-                            </a-col>
-                            <a-col :lg="24" :xl="12">
+                          <a-setting-list-item paddings="small">
+                            <template #title>Concurrency</template>
+                            <template #control>
+                              <a-input-number v-model="muxConcurrency" :min="-1" :max="1024" style="width: 100%;"></a-input-number>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>xudp Concurrency</template>
+                            <template #control>
+                              <a-input-number v-model="muxXudpConcurrency" :min="-1" :max="1024" style="width: 100%;"></a-input-number>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>xudp UDP 443</template>
+                            <template #control>
                               <a-select v-model="muxXudpProxyUDP443" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
                                 <a-select-option :value="p" :label="p" v-for="p in ['reject', 'allow', 'skip']"> [[ p ]] </a-select-option>
                               </a-select>
-                            </a-col>
-                          </a-row>
-                        </a-list-item>
+                            </template>
+                          </a-setting-list-item>
                         </a-collapse-panel>
                       </a-collapse>
                     </a-list-item>
-                  <a-list-item style="padding: 20px">
-                    <a-row>
-                      <a-col :lg="24" :xl="12">
-                        <a-list-item-meta title='{{ i18n "pages.settings.direct"}}'>
-                          <template slot="description">{{ i18n "pages.settings.directDesc"}}</template>
-                        </a-list-item-meta>
-                      </a-col>
-                      <a-col :lg="24" :xl="12">
+                  </a-collapse-panel>
+                  <a-collapse-panel header='{{ i18n "pages.settings.direct" }}'>
+                    <a-setting-list-item paddings="small">
+                      <template #title>{{ i18n "pages.settings.direct"}}</template>
+                      <template #description>{{ i18n "pages.settings.directDesc"}}</template>
+                      <template #control>
                         <a-switch v-model="enableDirect"></a-switch>
-                      </a-col>
-                    </a-row>
-                    <a-collapse v-if="enableDirect" style="margin-top: 14px;">
+                      </template>
+                    </a-setting-list-item>
+                    <a-list-item v-if="enableDirect" style="padding: 10px 20px;">
+                      <a-collapse>
                         <a-collapse-panel header='{{ i18n "pages.settings.direct"}}'>
-                        <a-list-item>
-                            <a-row style="padding: 0 20px">
-                                <a-col :lg="24" :xl="12">
-                                    <a-list-item-meta 
-                                        title='{{ i18n "pages.xray.directips" }}'/>
-                                </a-col>
-                                <a-col :lg="24" :xl="12">
-                                    <a-select mode="tags" style="width: 100%"
-                                    v-model="directIPs"
-                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="p.value" :label="p.label"
-                                            v-for="p in directIPsOptions"> [[ p.label ]]
-                                        </a-select-option>
+                          <a-setting-list-item paddings="small">
+                            <template #title>{{ i18n "pages.xray.directips" }}</template>
+                            <template #control>
+                              <a-select mode="tags" style="width: 100%" v-model="directIPs" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in directIPsOptions">[[ p.label ]]</a-select-option>
                               </a-select>
-                                </a-col>
-                            </a-row>
-                        </a-list-item>
-                        <a-list-item>
-                            <a-row style="padding: 0 20px">
-                                <a-col :lg="24" :xl="12">
-                                    <a-list-item-meta 
-                                        title='{{ i18n "pages.xray.directdomains" }}'/>
-                                </a-col>
-                                <a-col :lg="24" :xl="12">
-                                    <a-select mode="tags" style="width: 100%"
-                                    v-model="directDomains"
-                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="p.value" :label="p.label"
-                                            v-for="p in diretDomainsOptions"> [[ p.label ]]
-                                        </a-select-option>
+                            </template>
+                          </a-setting-list-item>
+                          <a-setting-list-item paddings="small">
+                            <template #title>{{ i18n "pages.xray.directdomains" }}</template>
+                            <template #control>
+                              <a-select mode="tags" style="width: 100%" v-model="directDomains" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in diretDomainsOptions">[[ p.label ]]</a-select-option>
                               </a-select>
-                                </a-col>
-                            </a-row>
-                        </a-list-item>
+                            </template>
+                          </a-setting-list-item>
                         </a-collapse-panel>
                       </a-collapse>
                     </a-list-item>
-                </a-list>
+                  </a-collapse-panel>
+                </a-collapse>
               </a-tab-pane>
             </a-tabs>
           </a-space>
@@ -658,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);
         }
       },

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>

web/html/xui/xray.html

@@ -114,44 +114,54 @@
                         </template>
                       </a-alert>
                     </a-row>
-                    <a-list-item>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.xray.FreedomStrategy" }}'
-                            description='{{ i18n "pages.xray.FreedomStrategyDesc" }}'>
-                          </a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
-                            <a-select v-model="freedomStrategy" :dropdown-class-name="themeSwitcher.currentTheme"
-                                style="width: 100%">
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.FreedomStrategy" }}</template>
+                        <template #description>{{ i18n "pages.xray.FreedomStrategyDesc" }}</template>
+                        <template #control>
+                            <a-select v-model="freedomStrategy" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
                               <a-select-option v-for="s in OutboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
                             </a-select>
                         </template>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.xray.RoutingStrategy" }}'
-                            description='{{ i18n "pages.xray.RoutingStrategyDesc" }}'>
-                          </a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <a-select v-model="routingStrategy" :dropdown-class-name="themeSwitcher.currentTheme"
-                              style="width: 100%">
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.RoutingStrategy" }}</template>
+                        <template #description>{{ i18n "pages.xray.RoutingStrategyDesc" }}</template>
+                        <template #control>
+                            <a-select v-model="routingStrategy" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
                                 <a-select-option v-for="s in routingDomainStrategies" :value="s">[[ s ]]</a-select-option>
                             </a-select>
-                        </a-col>
-                      </a-row>
-                    </a-list-item>
+                        </template>
+                    </a-setting-list-item>
                   </a-collapse-panel>
                   <a-collapse-panel header='{{ i18n "pages.xray.statistics" }}'>
-                    <a-list-item>
-                      <setting-list-item type="switch" title='{{ i18n "pages.xray.statsInboundUplink" }}' desc='{{ i18n "pages.xray.statsInboundUplinkDesc" }}' style="padding-top: 0 !important;" v-model="statsInboundUplink"></setting-list-item>
-                      <setting-list-item type="switch" title='{{ i18n "pages.xray.statsInboundDownlink" }}' desc='{{ i18n "pages.xray.statsInboundDownlinkDesc" }}' v-model="statsInboundDownlink"></setting-list-item>
-                      <setting-list-item type="switch" title='{{ i18n "pages.xray.statsOutboundUplink" }}' desc='{{ i18n "pages.xray.statsOutboundUplinkDesc" }}' v-model="statsOutboundUplink"></setting-list-item>
-                      <setting-list-item type="switch" title='{{ i18n "pages.xray.statsOutboundDownlink" }}' desc='{{ i18n "pages.xray.statsOutboundDownlinkDesc" }}' v-model="statsOutboundDownlink"></setting-list-item>
-                    </a-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.statsInboundUplink" }}</template>
+                        <template #description>{{ i18n "pages.xray.statsInboundUplinkDesc" }}</template>
+                        <template #control>
+                            <a-switch v-model="statsInboundUplink"></a-switch>
+                        </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.statsInboundDownlink" }}</template>
+                        <template #description>{{ i18n "pages.xray.statsInboundDownlinkDesc" }}</template>
+                        <template #control>
+                            <a-switch v-model="statsInboundDownlink"></a-switch>
+                        </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.statsOutboundUplink" }}</template>
+                        <template #description>{{ i18n "pages.xray.statsOutboundUplinkDesc" }}</template>
+                        <template #control>
+                            <a-switch v-model="statsOutboundUplink"></a-switch>
+                        </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.statsOutboundDownlink" }}</template>
+                        <template #description>{{ i18n "pages.xray.statsOutboundDownlinkDesc" }}</template>
+                        <template #control>
+                            <a-switch v-model="statsOutboundDownlink"></a-switch>
+                        </template>
+                    </a-setting-list-item>
                   </a-collapse-panel>
                   <a-collapse-panel header='{{ i18n "pages.xray.logConfigs" }}'>
                     <a-row :xs="24" :sm="24" :lg="12">
@@ -162,68 +172,52 @@
                         </template>
                       </a-alert>
                     </a-row>
-                    <a-list-item>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.xray.logLevel" }}'
-                            description='{{ i18n "pages.xray.logLevelDesc" }}'>
-                          </a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.logLevel" }}</template>
+                        <template #description>{{ i18n "pages.xray.logLevelDesc" }}</template>
+                        <template #control>
                             <a-select v-model="logLevel" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
                                 <a-select-option v-for="s in log.loglevel" :value="s">[[ s ]]</a-select-option>
                             </a-select>
                         </template>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.xray.accessLog" }}'
-                            description='{{ i18n "pages.xray.accessLogDesc" }}'>
-                          </a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.accessLog" }}</template>
+                        <template #description>{{ i18n "pages.xray.accessLogDesc" }}</template>
+                        <template #control>
                             <a-select v-model="accessLog" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
                                 <a-select-option value=''>Empty</a-select-option>
                                 <a-select-option v-for="s in log.access" :value="s">[[ s ]]</a-select-option>
                             </a-select>
                         </template>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.xray.errorLog" }}'
-                            description='{{ i18n "pages.xray.errorLogDesc" }}'>
-                          </a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.errorLog" }}</template>
+                        <template #description>{{ i18n "pages.xray.errorLogDesc" }}</template>
+                        <template #control>
                             <a-select v-model="errorLog" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
                                 <a-select-option value=''>Empty</a-select-option>
                                 <a-select-option v-for="s in log.error" :value="s">[[ s ]]</a-select-option>
                             </a-select>
                         </template>
-                        </a-col>
-                      </a-row>
-                      <a-row style="padding: 10px 20px">
-                        <a-col :lg="24" :xl="12">
-                          <a-list-item-meta title='{{ i18n "pages.xray.maskAddress" }}'
-                            description='{{ i18n "pages.xray.maskAddressDesc" }}'>
-                          </a-list-item-meta>
-                        </a-col>
-                        <a-col :lg="24" :xl="12">
-                          <template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.maskAddress" }}</template>
+                        <template #description>{{ i18n "pages.xray.maskAddressDesc" }}</template>
+                        <template #control>
                             <a-select v-model="maskAddressLog" :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100%">
                                 <a-select-option value=''>Empty</a-select-option>
                                 <a-select-option v-for="s in log.maskAddress" :value="s">[[ s ]]</a-select-option>
                             </a-select>
                         </template>
-                        </a-col>
-                      </a-row>
-                      <setting-list-item type="switch" title='{{ i18n "pages.xray.dnsLog"}}' desc='{{ i18n "pages.xray.dnsLogDesc"}}' v-model="dnslog"></setting-list-item>
-                    </a-list-item>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.dnsLog"}}</template>
+                        <template #description>{{ i18n "pages.xray.dnsLogDesc"}}</template>
+                        <template #control>
+                            <a-switch v-model="dnslog"></a-switch>
+                        </template>
+                    </a-setting-list-item>
                   </a-collapse-panel>
                   <a-collapse-panel header='{{ i18n "pages.xray.blockConfigs"}}'>
                     <a-row :xs="24" :sm="24" :lg="12">
@@ -234,10 +228,20 @@
                         </template>
                       </a-alert>
                     </a-row>
-                    <a-list-item>
-                      <setting-list-item type="switch" title='{{ i18n "pages.xray.Torrent"}}' desc='{{ i18n "pages.xray.TorrentDesc"}}' v-model="torrentSettings"></setting-list-item>
-                      <setting-list-item type="switch" title='{{ i18n "pages.xray.Family"}}' desc='{{ i18n "pages.xray.FamilyDesc"}}' v-model="familyProtectSettings"></setting-list-item>
-                    </a-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.Torrent"}}</template>
+                        <template #description>{{ i18n "pages.xray.TorrentDesc"}}</template>
+                        <template #control>
+                            <a-switch v-model="torrentSettings"></a-switch>
+                        </template>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.Family"}}</template>
+                        <template #description>{{ i18n "pages.xray.FamilyDesc"}}</template>
+                        <template #control>
+                            <a-switch v-model="familyProtectSettings"></a-switch>
+                        </template>
+                    </a-setting-list-item>
                   </a-collapse-panel>
                   <a-collapse-panel header='{{ i18n "pages.xray.basicRouting"}}'>
                     <a-row :xs="24" :sm="24" :lg="12">
@@ -248,43 +252,22 @@
                         </template>
                       </a-alert>
                     </a-row>
-                    <a-list-item>
-                        <a-row style="padding: 0 20px">
-                            <a-col :lg="24" :xl="12">
-                                <a-list-item-meta 
-                                    title='{{ i18n "pages.xray.blockips" }}'/>
-                            </a-col>
-                            <a-col :lg="24" :xl="12">
-                                <template>
-                                    <a-select mode="tags" v-model="blockedIPs" style="width: 100%"
-                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="p.value" :label="p.label"
-                                            v-for="p in settingsData.IPsOptions"> [[ p.label ]]
-                                        </a-select-option>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.blockips" }}</template>
+                        <template #control>
+                            <a-select mode="tags" v-model="blockedIPs" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.IPsOptions">[[ p.label ]]</a-select-option>
                             </a-select>
                         </template>
-                            </a-col>
-                        </a-row>
-                    </a-list-item>
-                    <a-list-item>
-                        <a-row style="padding: 0 20px">
-                            <a-col :lg="24" :xl="12">
-                                <a-list-item-meta 
-                                    title='{{ i18n "pages.xray.blockdomains" }}'/>
-                            </a-col>
-                            <a-col :lg="24" :xl="12">
-                                <template>
-                                    <a-select mode="tags" style="width: 100%"
-                                    v-model="blockedDomains"
-                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="p.value" :label="p.label"
-                                            v-for="p in settingsData.BlockDomainsOptions"> [[ p.label ]]
-                                        </a-select-option>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.blockdomains" }}</template>
+                        <template #control>
+                            <a-select mode="tags" v-model="blockedDomains" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.BlockDomainsOptions">[[ p.label ]]</a-select-option>
                             </a-select>
                         </template>
-                            </a-col>
-                        </a-row>
-                    </a-list-item>
+                    </a-setting-list-item>
                     <a-row :xs="24" :sm="24" :lg="12">
                       <a-alert type="warning" style="text-align: center; margin-top: 20px;">
                         <template slot="message">
@@ -293,44 +276,22 @@
                         </template>
                       </a-alert>
                     </a-row>
-                    <a-list-item>
-                        <a-row style="padding: 0 20px">
-                            <a-col :lg="24" :xl="12">
-                                <a-list-item-meta 
-                                    title='{{ i18n "pages.xray.directips" }}'/>
-                            </a-col>
-                            <a-col :lg="24" :xl="12">
-                                <template>
-                                    <a-select mode="tags" style="width: 100%"
-                                    v-model="directIPs"
-                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="p.value" :label="p.label"
-                                            v-for="p in settingsData.IPsOptions"> [[ p.label ]]
-                                        </a-select-option>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.directips" }}</template>
+                        <template #control>
+                            <a-select mode="tags" style="width: 100%" v-model="directIPs" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.IPsOptions">[[ p.label ]]</a-select-option>
                             </a-select>
                         </template>
-                            </a-col>
-                        </a-row>
-                    </a-list-item>
-                    <a-list-item>
-                        <a-row style="padding: 0 20px">
-                            <a-col :lg="24" :xl="12">
-                                <a-list-item-meta 
-                                    title='{{ i18n "pages.xray.directdomains" }}'/>
-                            </a-col>
-                            <a-col :lg="24" :xl="12">
-                                <template>
-                                    <a-select mode="tags" style="width: 100%"
-                                    v-model="directDomains"
-                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="p.value" :label="p.label"
-                                            v-for="p in settingsData.DomainsOptions"> [[ p.label ]]
-                                        </a-select-option>
+                    </a-setting-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.directdomains" }}</template>
+                        <template #control>
+                            <a-select mode="tags" style="width: 100%" v-model="directDomains" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.DomainsOptions">[[ p.label ]]</a-select-option>
                             </a-select>
                         </template>
-                            </a-col>
-                        </a-row>
-                    </a-list-item>
+                    </a-setting-list-item>
                     <a-row :xs="24" :sm="24" :lg="12">
                       <a-alert type="warning" style="text-align: center; margin-top: 20px;">
                         <template slot="message">
@@ -339,25 +300,14 @@
                         </template>
                       </a-alert>
                     </a-row>
-                    <a-list-item>
-                        <a-row style="padding: 0 20px">
-                            <a-col :lg="24" :xl="12">
-                                <a-list-item-meta 
-                                    title='{{ i18n "pages.xray.ipv4Routing" }}'/>
-                            </a-col>
-                            <a-col :lg="24" :xl="12">
-                                <template>
-                                    <a-select mode="tags" style="width: 100%"
-                                    v-model="ipv4Domains"
-                                    :dropdown-class-name="themeSwitcher.currentTheme">
-                                        <a-select-option :value="p.value" :label="p.label"
-                                            v-for="p in settingsData.ServicesOptions"> [[ p.label ]]
-                                        </a-select-option>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.ipv4Routing" }}</template>
+                        <template #control>
+                            <a-select mode="tags" style="width: 100%" v-model="ipv4Domains" :dropdown-class-name="themeSwitcher.currentTheme">
+                                <a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.ServicesOptions">[[ p.label ]]</a-select-option>
                             </a-select>
                         </template>
-                            </a-col>
-                        </a-row>
-                    </a-list-item>
+                    </a-setting-list-item>
                     <a-row :xs="24" :sm="24" :lg="12">
                       <a-alert type="warning" style="text-align: center; margin-top: 20px;">
                         <template slot="message">
@@ -366,30 +316,19 @@
                         </template>
                       </a-alert>
                     </a-row>
-                    <a-list-item>
+                    <a-setting-list-item paddings="small">
+                        <template #title>{{ i18n "pages.xray.warpRouting" }}</template>
+                        <template #control>
                             <template v-if="WarpExist">
-                        <a-list-item>
-                            <a-row style="padding: 0 20px">
-                                <a-col :lg="24" :xl="12">
-                                    <a-list-item-meta 
-                                        title='{{ i18n "pages.xray.warpRouting" }}'/>
-                                </a-col>
-                                <a-col :lg="24" :xl="12">
-                                    <template>
-                                        <a-select mode="tags" style="width: 100%"
-                                        v-model="warpDomains"
-                                        :dropdown-class-name="themeSwitcher.currentTheme">
-                                            <a-select-option :value="p.value" :label="p.label"
-                                                v-for="p in settingsData.ServicesOptions"> [[ p.label ]]
-                                            </a-select-option>
+                                <a-select mode="tags" style="width: 100%" v-model="warpDomains" :dropdown-class-name="themeSwitcher.currentTheme">
+                                    <a-select-option :value="p.value" :label="p.label" v-for="p in settingsData.ServicesOptions">[[ p.label ]]</a-select-option>
                                 </a-select>
                             </template>
-                                </a-col>
-                            </a-row>
-                        </a-list-item>
+                            <template v-else>
+                                <a-button type="primary" icon="cloud" @click="showWarp()">WARP</a-button>
                             </template>
-                      <a-button style="margin-left: 20px;" v-else type="primary" icon="cloud" @click="showWarp()">WARP</a-button>
-                    </a-list-item>
+                        </template>
+                    </a-setting-list-item>
                   </a-collapse-panel>
                   <a-collapse-panel header='{{ i18n "pages.settings.resetDefaultConfig"}}'>
                     <a-space direction="horizontal" style="padding: 0 20px">
@@ -670,78 +609,61 @@
             <a-tab-pane key="tpl-dns" tab='DNS' style="padding-top: 20px;" force-render="true">
                 <a-collapse>
                     <a-collapse-panel header='{{ i18n "pages.xray.generalConfigs"}}'>
-                        <a-list-item>
-                            <a-row style="padding: 10px 20px; padding-top: 0;">
-                                <a-col :lg="24" :xl="12">
-                                    <a-list-item-meta title='{{ i18n "pages.xray.dns.enable" }}'
-                                        description='{{ i18n "pages.xray.dns.enableDesc" }}' />
-                                </a-col>
-                                <a-col :lg="24" :xl="12">
+                        <a-setting-list-item paddings="small">
+                            <template #title>{{ i18n "pages.xray.dns.enable" }}</template>
+                            <template #description>{{ i18n "pages.xray.dns.enableDesc" }}</template>
+                            <template #control>
                                 <a-switch v-model="enableDNS"></a-switch>
-                                </a-col>
-                            </a-row>
+                            </template>
+                        </a-setting-list-item>
                         <template v-if="enableDNS">
-                                <a-row style="padding: 10px 20px;">
-                                    <a-col :lg="24" :xl="12">
-                                        <a-list-item-meta title='{{ i18n "pages.xray.dns.tag" }}'
-                                            description='{{ i18n "pages.xray.dns.tagDesc" }}' />
-                                    </a-col>
-                                    <a-col :lg="24" :xl="12">
+                            <a-setting-list-item paddings="small">
+                                <template #title>{{ i18n "pages.xray.dns.tag" }}</template>
+                                <template #description>{{ i18n "pages.xray.dns.tagDesc" }}</template>
+                                <template #control>
                                     <a-input type="text" v-model="dnsTag"></a-input>
-                                    </a-col>
-                                </a-row>
-                                <a-row style="padding: 10px 20px;">
-                                    <a-col :lg="24" :xl="12">
-                                        <a-list-item-meta title='{{ i18n "pages.xray.dns.clientIp" }}' 
-                                            description='{{ i18n "pages.xray.dns.clientIpDesc" }}'/>
-                                    </a-col>
-                                    <a-col :lg="24" :xl="12">
+                                </template>
+                            </a-setting-list-item>
+                            <a-setting-list-item paddings="small">
+                                <template #title>{{ i18n "pages.xray.dns.clientIp" }}</template>
+                                <template #description>{{ i18n "pages.xray.dns.clientIpDesc" }}</template>
+                                <template #control>
                                     <a-input type="text" v-model="dnsClientIp"></a-input>
-                                    </a-col>
-                                </a-row>
-                                <a-row style="padding: 10px 20px;">
-                                    <a-col :lg="24" :xl="12">
-                                        <a-list-item-meta title='{{ i18n "pages.xray.dns.strategy" }}'
-                                            description='{{ i18n "pages.xray.dns.strategyDesc" }}' />
-                                    </a-col>
-                                    <a-col :lg="24" :xl="12">
-                                        <a-select v-model="dnsStrategy" style="width: 100%"
-                                            :dropdown-class-name="themeSwitcher.currentTheme">
+                                </template>
+                            </a-setting-list-item>
+                            <a-setting-list-item paddings="small">
+                                <template #title>{{ i18n "pages.xray.dns.strategy" }}</template>
+                                <template #description>{{ i18n "pages.xray.dns.strategyDesc" }}</template>
+                                <template #control>
+                                    <a-select v-model="dnsStrategy" style="width: 100%" :dropdown-class-name="themeSwitcher.currentTheme">
                                         <a-select-option :value="l" :label="l" v-for="l in ['UseIP', 'UseIPv4', 'UseIPv6']">
                                             [[ l ]]
                                         </a-select-option>
                                     </a-select>
-                                    </a-col>
-                                </a-row>
-                                <a-row style="padding: 10px 20px;">
-                                    <a-col :lg="24" :xl="12">
-                                        <a-list-item-meta title='{{ i18n "pages.xray.dns.disableCache" }}' 
-                                            description='{{ i18n "pages.xray.dns.disableCacheDesc" }}'/>
-                                    </a-col>
-                                    <a-col :lg="24" :xl="12">
-                                        <a-switch v-model="dnsDisableCache"></a-switch>
-                                    </a-col>
-                                </a-row>
-                                <a-row style="padding: 10px 20px;">
-                                    <a-col :lg="24" :xl="12">
-                                        <a-list-item-meta title='{{ i18n "pages.xray.dns.disableFallback" }}' 
-                                            description='{{ i18n "pages.xray.dns.disableFallbackDesc" }}'/>
-                                    </a-col>
-                                    <a-col :lg="24" :xl="12">
-                                        <a-switch v-model="dnsDisableFallback"></a-switch>
-                                    </a-col>
-                                </a-row>
-                                <a-row style="padding: 10px 20px;">
-                                    <a-col :lg="24" :xl="12">
-                                        <a-list-item-meta title='{{ i18n "pages.xray.dns.disableFallbackIfMatch" }}' 
-                                            description='{{ i18n "pages.xray.dns.disableFallbackIfMatchDesc" }}'/>
-                                    </a-col>
-                                    <a-col :lg="24" :xl="12">
-                                        <a-switch v-model="dnsDisableFallbackIfMatch"></a-switch>
-                                    </a-col>
-                                </a-row>
                                 </template>
-                        </a-list-item>
+                            </a-setting-list-item>
+                            <a-setting-list-item paddings="small">
+                                <template #title>{{ i18n "pages.xray.dns.disableCache" }}</template>
+                                <template #description>{{ i18n "pages.xray.dns.disableCacheDesc" }}</template>
+                                <template #control>
+                                    <a-switch v-model="dnsDisableCache"></a-switch>
+                                </template>
+                            </a-setting-list-item>
+                            <a-setting-list-item paddings="small">
+                                <template #title>{{ i18n "pages.xray.dns.disableFallback" }}</template>
+                                <template #description>{{ i18n "pages.xray.dns.disableFallbackDesc" }}</template>
+                                <template #control>
+                                    <a-switch v-model="dnsDisableFallback"></a-switch>
+                                </template>
+                            </a-setting-list-item>
+                            <a-setting-list-item paddings="small">
+                                <template #title>{{ i18n "pages.xray.dns.disableFallbackIfMatch" }}</template>
+                                <template #description>{{ i18n "pages.xray.dns.disableFallbackIfMatchDesc" }}</template>
+                                <template #control>
+                                    <a-switch v-model="dnsDisableFallbackIfMatch"></a-switch>
+                                </template>
+                            </a-setting-list-item>
+                        </template>
                     </a-collapse-panel>
                     <template v-if="enableDNS">
                         <a-collapse-panel header='DNS'>
@@ -1255,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;
@@ -1462,7 +1384,6 @@
                         }
                         newTemplateSettings.routing.balancers.push(tmpBalancer);
                         this.templateSettings = newTemplateSettings;
-                        if (balancer.strategy == 'leastPing' || balancer.strategy == 'leastLoad')
                         this.updateObservatorySelectors();
                         balancerModal.close();
                         this.changeObsCode();
@@ -1511,7 +1432,6 @@
                             });
                         }
                         this.templateSettings = newTemplateSettings;
-                        if (balancer.strategy == 'leastPing' || balancer.strategy == 'leastLoad')
                         this.updateObservatorySelectors();
                         balancerModal.close();
                         this.changeObsCode();
@@ -1522,7 +1442,11 @@
             updateObservatorySelectors(){
                 newTemplateSettings = this.templateSettings;
                 const leastPings = this.balancersData.filter((b) => b.strategy == 'leastPing');
-                const leastLoads = this.balancersData.filter((b) => b.strategy == 'leastLoad');
+                const leastLoads = this.balancersData.filter((b) =>
+                    b.strategy === 'leastLoad' ||
+                    b.strategy === 'roundRobin' ||
+                    b.strategy === 'random'
+                );
                 if (leastPings.length>0){
                     if (!newTemplateSettings.observatory)
                         newTemplateSettings.observatory = this.defaultObservatory;
@@ -2005,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) {
@@ -2018,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;

web/job/check_cpu_usage.go

@@ -23,7 +23,7 @@ func (j *CheckCpuJob) Run() {
 	threshold, _ := j.settingService.GetTgCpu()
 
 	// get latest status of server
-	percent, err := cpu.Percent(1*time.Second, false)
+	percent, err := cpu.Percent(1*time.Minute, false)
 	if err == nil && percent[0] > float64(threshold) {
 		msg := j.tgbotService.I18nBot("tgbot.messages.cpuThreshold",
 			"Percent=="+strconv.FormatFloat(percent[0], 'f', 2, 64),

web/translation/translate.en_US.toml

@@ -321,7 +321,15 @@
 "muxSett" = "Mux Settings"
 "direct" = "Direct Connection"
 "directDesc" = "Directly establishes connections with domains or IP ranges of a specific country."
-
+"notifications" = "Notifications"
+"certs" = "Certificaties"
+"externalTraffic" = "External Traffic"
+"dateAndTime" = "Date and Time"
+"proxyAndServer" = "Proxy and Server"
+"intervals" = "Intervals"
+"information" = "Information"
+"language" = "Language"
+"telegramBotLanguage" = "Telegram Bot Language"
 
 [pages.xray]
 "title" = "Xray Configs"
@@ -462,7 +470,7 @@
 "poolSize" = "Pool Size"
 
 [pages.settings.security]
-"admin" = "Admin"
+"admin" = "Admin credentials"
 "secret" = "Secret Token"
 "loginSecurity" = "Secure Login"
 "loginSecurityDesc" = "Adds an additional layer of authentication to provide more security."

web/translation/translate.es_ES.toml

@@ -321,7 +321,15 @@
 "muxSett" = "Configuración Mux"
 "direct" = "Conexión Directa"
 "directDesc" = "Establece conexiones directas con dominios o rangos de IP de un país específico."
-
+"notifications" = "Notificaciones"
+"certs" = "Certificados"
+"externalTraffic" = "Tráfico Externo"
+"dateAndTime" = "Fecha y Hora"
+"proxyAndServer" = "Proxy y Servidor"
+"intervals" = "Intervalos"
+"information" = "Información"
+"language" = "Idioma"
+"telegramBotLanguage" = "Idioma del Bot de Telegram"
 
 [pages.xray]
 "title" = "Xray Configuración"
@@ -462,7 +470,7 @@
 "poolSize" = "Tamaño del grupo"
 
 [pages.settings.security]
-"admin" = "Administrador"
+"admin" = "Credenciales de administrador"
 "secret" = "Token Secreto"
 "loginSecurity" = "Seguridad de Inicio de Sesión"
 "loginSecurityDesc" = "Habilitar un paso adicional de seguridad para el inicio de sesión de usuarios."

web/translation/translate.fa_IR.toml

@@ -321,7 +321,15 @@
 "muxSett" = "تنظیمات ماکس"
 "direct" = "اتصال مستقیم"
 "directDesc" = "به طور مستقیم با دامنه ها یا محدوده آی‌پی یک کشور خاص ارتباط برقرار می کند"
-
+"notifications" = "اعلان‌ها"
+"certs" = "گواهی‌ها"
+"externalTraffic" = "ترافیک خارجی"
+"dateAndTime" = "تاریخ و زمان"
+"proxyAndServer" = "پراکسی و سرور"
+"intervals" = "فواصل"
+"information" = "اطلاعات"
+"language" = "زبان"
+"telegramBotLanguage" = "زبان ربات تلگرام"
 
 [pages.xray]
 "title" = "پیکربندی ایکس‌ری"
@@ -462,7 +470,7 @@
 "poolSize" = "اندازه استخر"
 
 [pages.settings.security]
-"admin" = "مدیر"
+"admin" = "اعتبارنامه‌های ادمین"
 "secret" = "توکن مخفی"
 "loginSecurity" = "ورود ایمن"
 "loginSecurityDesc" = "یک لایه اضافی از احراز هویت برای ایجاد امنیت بیشتر اضافه می کند"

web/translation/translate.id_ID.toml

@@ -320,7 +320,15 @@
 "muxSett" = "Pengaturan Mux"
 "direct" = "Koneksi langsung"
 "directDesc" = "Secara langsung membuat koneksi dengan domain atau rentang IP negara tertentu."
-
+"notifications" = "Notifikasi"
+"certs" = "Sertifikat"
+"externalTraffic" = "Lalu Lintas Eksternal"
+"dateAndTime" = "Tanggal dan Waktu"
+"proxyAndServer" = "Proxy dan Server"
+"intervals" = "Interval"
+"information" = "Informasi"
+"language" = "Bahasa"
+"telegramBotLanguage" = "Bahasa Bot Telegram"
 
 [pages.xray]
 "title" = "Konfigurasi Xray"
@@ -461,7 +469,7 @@
 "poolSize" = "Ukuran Kolam"
 
 [pages.settings.security]
-"admin" = "Admin"
+"admin" = "Kredensial admin"
 "secret" = "Token Rahasia"
 "loginSecurity" = "Login Aman"
 "loginSecurityDesc" = "Menambahkan lapisan otentikasi tambahan untuk memberikan keamanan lebih."

web/translation/translate.ja_JP.toml

@@ -321,7 +321,15 @@
 "muxSett" = "マルチプレクサ設定"
 "direct" = "直接接続"
 "directDesc" = "特定の国のドメインまたはIP範囲に直接接続する"
-
+"notifications" = "通知"
+"certs" = "証明書"
+"externalTraffic" = "外部トラフィック"
+"dateAndTime" = "日付と時刻"
+"proxyAndServer" = "プロキシとサーバー"
+"intervals" = "間隔"
+"information" = "情報"
+"language" = "言語"
+"telegramBotLanguage" = "Telegram Botの言語"
 
 [pages.xray]
 "title" = "Xray 設定"
@@ -462,7 +470,7 @@
 "poolSize" = "プールサイズ"
 
 [pages.settings.security]
-"admin" = "管理者"
+"admin" = "管理者の資格情報"
 "secret" = "セキュリティトークン"
 "loginSecurity" = "ログインセキュリティ"
 "loginSecurityDesc" = "追加の認証を追加してセキュリティを向上させる"

web/translation/translate.pt_BR.toml

@@ -321,7 +321,15 @@
 "muxSett" = "Configurações de Mux"
 "direct" = "Conexão Direta"
 "directDesc" = "Estabelece conexões diretamente com domínios ou intervalos de IP de um país específico."
-
+"notifications" = "Notificações"
+"certs" = "Certificados"
+"externalTraffic" = "Tráfego Externo"
+"dateAndTime" = "Data e Hora"
+"proxyAndServer" = "Proxy e Servidor"
+"intervals" = "Intervalos"
+"information" = "Informação"
+"language" = "Idioma"
+"telegramBotLanguage" = "Idioma do Bot do Telegram"
 
 [pages.xray]
 "title" = "Configurações Xray"
@@ -462,7 +470,7 @@
 "poolSize" = "Tamanho do Pool"
 
 [pages.settings.security]
-"admin" = "Admin"
+"admin" = "Credenciais de administrador"
 "secret" = "Token Secreto"
 "loginSecurity" = "Login Seguro"
 "loginSecurityDesc" = "Adiciona uma camada extra de autenticação para fornecer mais segurança."

web/translation/translate.ru_RU.toml

@@ -321,7 +321,15 @@
 "muxSett" = "Mux Настройки"
 "direct" = "Прямая связь"
 "directDesc" = "Устанавливает прямые соединения с доменами или IP-адресами определённой страны."
-
+"notifications" = "Уведомления"
+"certs" = "Сертификаты"
+"externalTraffic" = "Внешний трафик"
+"dateAndTime" = "Дата и время"
+"proxyAndServer" = "Прокси и сервер"
+"intervals" = "Интервалы"
+"information" = "Информация"
+"language" = "Язык"
+"telegramBotLanguage" = "Язык Telegram-бота"
 
 [pages.xray]
 "title" = "Настройки Xray"
@@ -462,7 +470,7 @@
 "poolSize" = "Размер пула"
 
 [pages.settings.security]
-"admin" = "Админ"
+"admin" = "Учетные данные администратора"
 "secret" = "Секретный токен"
 "loginSecurity" = "Безопасность входа"
 "loginSecurityDesc" = "Включить дополнительные меры безопасности входа пользователя"

web/translation/translate.tr_TR.toml

@@ -321,7 +321,15 @@
 "muxSett" = "Mux Ayarları"
 "direct" = "Doğrudan Bağlantı"
 "directDesc" = "Belirli bir ülkenin alan adları veya IP aralıkları ile doğrudan bağlantı kurar."
-
+"notifications" = "Bildirimler"
+"certs" = "Sertifikalar"
+"externalTraffic" = "Harici Trafik"
+"dateAndTime" = "Tarih ve Saat"
+"proxyAndServer" = "Proxy ve Sunucu"
+"intervals" = "Aralıklar"
+"information" = "Bilgi"
+"language" = "Dil"
+"telegramBotLanguage" = "Telegram Bot Dili"
 
 [pages.xray]
 "title" = "Xray Yapılandırmaları"
@@ -462,7 +470,7 @@
 "poolSize" = "Havuz Boyutu"
 
 [pages.settings.security]
-"admin" = "Yönetici"
+"admin" = "Yönetici kimlik bilgileri"
 "secret" = "Gizli Anahtar"
 "loginSecurity" = "Güvenli Giriş"
 "loginSecurityDesc" = "Daha fazla güvenlik sağlamak için ek bir kimlik doğrulama katmanı ekler."

web/translation/translate.uk_UA.toml

@@ -321,7 +321,15 @@
 "muxSett" = "Налаштування Mux"
 "direct" = "Пряме підключення"
 "directDesc" = "Безпосередньо встановлює з’єднання з доменами або діапазонами IP певної країни."
-
+"notifications" = "Сповіщення"
+"certs" = "Сертифікати"
+"externalTraffic" = "Зовнішній трафік"
+"dateAndTime" = "Дата та час"
+"proxyAndServer" = "Проксі та сервер"
+"intervals" = "Інтервали"
+"information" = "Інформація"
+"language" = "Мова"
+"telegramBotLanguage" = "Мова Telegram-бота"
 
 [pages.xray]
 "title" = "Xray конфігурації"
@@ -462,7 +470,7 @@
 "poolSize" = "Розмір пулу"
 
 [pages.settings.security]
-"admin" = "Адміністратор"
+"admin" = "Облікові дані адміністратора"
 "secret" = "Секретний маркер"
 "loginSecurity" = "Безпечний вхід"
 "loginSecurityDesc" = "Додає додатковий рівень автентифікації для забезпечення більшої безпеки."

web/translation/translate.vi_VN.toml

@@ -321,7 +321,15 @@
 "muxSett" = "Mux Cài đặt"
 "direct" = "Kết nối trực tiếp"
 "directDesc" = "Trực tiếp thiết lập kết nối với tên miền hoặc dải IP của một quốc gia cụ thể."
-
+"notifications" = "Thông báo"
+"certs" = "Chứng chỉ"
+"externalTraffic" = "Lưu lượng bên ngoài"
+"dateAndTime" = "Ngày và giờ"
+"proxyAndServer" = "Proxy và máy chủ"
+"intervals" = "Khoảng thời gian"
+"information" = "Thông tin"
+"language" = "Ngôn ngữ"
+"telegramBotLanguage" = "Ngôn ngữ của Bot Telegram"
 
 [pages.xray]
 "title" = "Cài đặt Xray"
@@ -462,7 +470,7 @@
 "poolSize" = "Kích thước bể bơi"
 
 [pages.settings.security]
-"admin" = "Quản trị viên"
+"admin" = "Thông tin đăng nhập quản trị viên"
 "secret" = "Mã thông báo bí mật"
 "loginSecurity" = "Bảo mật đăng nhập"
 "loginSecurityDesc" = "Bật bước bảo mật đăng nhập bổ sung cho người dùng"

web/translation/translate.zh_CN.toml

@@ -321,7 +321,15 @@
 "muxSett" = "复用器设置"
 "direct" = "直接连接"
 "directDesc" = "直接与特定国家的域或IP范围建立连接"
-
+"notifications" = "通知"
+"certs" = "证书"
+"externalTraffic" = "外部流量"
+"dateAndTime" = "日期和时间"
+"proxyAndServer" = "代理和服务器"
+"intervals" = "间隔"
+"information" = "信息"
+"language" = "语言"
+"telegramBotLanguage" = "Telegram 机器人语言"
 
 [pages.xray]
 "title" = "Xray 配置"
@@ -462,7 +470,7 @@
 "poolSize" = "池大小"
 
 [pages.settings.security]
-"admin" = "管理员"
+"admin" = "管理员凭据"
 "secret" = "安全令牌"
 "loginSecurity" = "登录安全"
 "loginSecurityDesc" = "添加额外的身份验证以提高安全性"

web/translation/translate.zh_TW.toml

@@ -321,7 +321,15 @@
 "muxSett" = "複用器設定"
 "direct" = "直接連線"
 "directDesc" = "直接與特定國家的域或IP範圍建立連線"
-
+"notifications" = "通知"
+"certs" = "證書"
+"externalTraffic" = "外部流量"
+"dateAndTime" = "日期和時間"
+"proxyAndServer" = "代理和伺服器"
+"intervals" = "間隔"
+"information" = "資訊"
+"language" = "語言"
+"telegramBotLanguage" = "Telegram 機器人語言"
 
 [pages.xray]
 "title" = "Xray 配置"
@@ -462,7 +470,7 @@
 "poolSize" = "池大小"
 
 [pages.settings.security]
-"admin" = "管理員"
+"admin" = "管理員憑證"
 "secret" = "安全令牌"
 "loginSecurity" = "登入安全"
 "loginSecurityDesc" = "新增額外的身份驗證以提高安全性"