bug fix - tgid #2214

vn has been removed

README.es_ES.md

@@ -28,10 +28,10 @@ bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.
 
 ## Instalar una Versión Personalizada
 
-Para instalar la versión deseada, agrega la versión al final del comando de instalación. Por ejemplo, ver `v2.2.6`:
+Para instalar la versión deseada, agrega la versión al final del comando de instalación. Por ejemplo, ver `v2.2.8`:
 
 ```
-bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.2.6
+bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.2.8
 ```
 
 ## Certificado SSL

README.md

@@ -28,10 +28,10 @@ bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.
 
 ## Install Custom Version
 
-To install your desired version, add the version to the end of the installation command. e.g., ver `v2.2.7`:
+To install your desired version, add the version to the end of the installation command. e.g., ver `v2.2.8`:
 
 ```
-bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.2.7
+bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.2.8
 ```
 
 ## SSL Certificate

README.zh.md

@@ -28,10 +28,10 @@ bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.
 
 ## 安装指定版本
 
-要安装所需的版本，请将该版本添加到安装命令的末尾。 e.g., ver `v2.2.6`:
+要安装所需的版本，请将该版本添加到安装命令的末尾。 e.g., ver `v2.2.8`:
 
 ```
-bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.2.6
+bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.2.8
 ```
 
 ## SSL 认证

config/version

@@ -1 +1 @@
-2.2.7
+2.2.8

database/model/model.go

@@ -91,7 +91,7 @@ type Client struct {
 	TotalGB    int64  `json:"totalGB" form:"totalGB"`
 	ExpiryTime int64  `json:"expiryTime" form:"expiryTime"`
 	Enable     bool   `json:"enable" form:"enable"`
-	TgID       string `json:"tgId" form:"tgId"`
+	TgID       int64  `json:"tgId" form:"tgId"`
 	SubID      string `json:"subId" form:"subId"`
 	Reset      int    `json:"reset" form:"reset"`
 }

go.mod

@@ -7,12 +7,12 @@ require (
 	github.com/gin-contrib/gzip v1.0.0
 	github.com/gin-gonic/gin v1.9.1
 	github.com/goccy/go-json v0.10.2
-	github.com/mymmrac/telego v0.29.1
+	github.com/mymmrac/telego v0.29.2
 	github.com/nicksnyder/go-i18n/v2 v2.4.0
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
 	github.com/pelletier/go-toml/v2 v2.2.0
 	github.com/robfig/cron/v3 v3.0.1
-	github.com/shirou/gopsutil/v3 v3.24.2
+	github.com/shirou/gopsutil/v3 v3.24.3
 	github.com/valyala/fasthttp v1.52.0
 	github.com/xtls/xray-core v1.8.10
 	go.uber.org/atomic v1.11.0

go.sum

@@ -163,8 +163,8 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJ
 github.com/modern-go/reflect2 v1.0.1/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
 github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
-github.com/mymmrac/telego v0.29.1 h1:nsNnK0mS18OL+unoDjDI6BVfafJBbT8Wtj7rCzEWoM8=
-github.com/mymmrac/telego v0.29.1/go.mod h1:ZLD1+L2TQRr97NPOCoN1V2w8y9kmFov33OfZ3qT8cF4=
+github.com/mymmrac/telego v0.29.2 h1:5+fQ/b8d8Ld6ihCJ0OLe1CwUdT3t1sIUl3RaSaSvRJs=
+github.com/mymmrac/telego v0.29.2/go.mod h1:BsKr+GF9BHqaVaLBwsZeDnfuJcJx2olWuDEtKm4zHMc=
 github.com/neelance/astrewrite v0.0.0-20160511093645-99348263ae86/go.mod h1:kHJEU3ofeGjhHklVoIGuVj85JJwZ6kWPaJwCIxgnFmo=
 github.com/neelance/sourcemap v0.0.0-20151028013722-8c68805598ab/go.mod h1:Qr6/a/Q4r9LP1IltGz7tA7iOK1WonHEYhu1HRBA7ZiM=
 github.com/nicksnyder/go-i18n/v2 v2.4.0 h1:3IcvPOAvnCKwNm0TB0dLDTuawWEj+ax/RERNC+diLMM=
@@ -212,8 +212,8 @@ github.com/savsgio/gotils v0.0.0-20240303185622-093b76447511/go.mod h1:sM7Mt7uEo
 github.com/seiflotfy/cuckoofilter v0.0.0-20220411075957-e3b120b3f5fb h1:XfLJSPIOUX+osiMraVgIrMR27uMXnRJWGm1+GL8/63U=
 github.com/seiflotfy/cuckoofilter v0.0.0-20220411075957-e3b120b3f5fb/go.mod h1:bR6DqgcAl1zTcOX8/pE2Qkj9XO00eCNqmKb7lXP8EAg=
 github.com/sergi/go-diff v1.0.0/go.mod h1:0CfEIISq7TuYL3j771MWULgwwjU+GofnZX9QAmXWZgo=
-github.com/shirou/gopsutil/v3 v3.24.2 h1:kcR0erMbLg5/3LcInpw0X/rrPSqq4CDPyI6A6ZRC18Y=
-github.com/shirou/gopsutil/v3 v3.24.2/go.mod h1:tSg/594BcA+8UdQU2XcW803GWYgdtauFFPgJCJKZlVk=
+github.com/shirou/gopsutil/v3 v3.24.3 h1:eoUGJSmdfLzJ3mxIhmOAhgKEKgQkeOwKpz1NbhVnuPE=
+github.com/shirou/gopsutil/v3 v3.24.3/go.mod h1:JpND7O217xa72ewWz9zN2eIIkPWsDN/3pl0H8Qt0uwg=
 github.com/shoenig/go-m1cpu v0.1.6 h1:nxdKQNcEB6vzgA2E2bvzKIYRuNj7XNJ4S/aRSwKzFtM=
 github.com/shoenig/go-m1cpu v0.1.6/go.mod h1:1JJMcUBvfNwpq05QDQVAnx3gUHr9IYF7GNg9SUEw2VQ=
 github.com/shoenig/test v0.6.4 h1:kVTaSd7WLz5WZ2IaoM0RSzRsUD+m8wRR+5qvntpn4LU=
@@ -346,7 +346,6 @@ golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/sys v0.18.0 h1:DBdB3niSjOA/O0blCZBqDefyWNYveAYMNF1Wum0DYQ4=
 golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=

sub/subService.go

@@ -231,8 +231,13 @@ func (s *SubService) genVmessLink(inbound *model.Inbound, email string) string {
 		httpupgrade, _ := stream["httpupgradeSettings"].(map[string]interface{})
 		obj["path"] = httpupgrade["path"].(string)
 		obj["host"] = httpupgrade["host"].(string)
+		if headers, ok := httpupgrade["headers"].(map[string]interface{}); ok {
+			hostFromHeaders := searchHost(headers)
+			if hostFromHeaders != "" {
+				obj["host"] = hostFromHeaders
+			}
+		}
 	}
-
 	security, _ := stream["security"].(string)
 	obj["tls"] = security
 	if security == "tls" {
@@ -347,8 +352,8 @@ func (s *SubService) genVlessLink(inbound *model.Inbound, email string) string {
 	case "ws":
 		ws, _ := stream["wsSettings"].(map[string]interface{})
 		params["path"] = ws["path"].(string)
-		headers, _ := ws["headers"].(map[string]interface{})
 		params["host"] = ws["host"].(string)
+		headers, _ := ws["headers"].(map[string]interface{})
 		if headers != nil {
 			hostFromHeaders := searchHost(headers)
 			if hostFromHeaders != "" {
@@ -376,8 +381,14 @@ func (s *SubService) genVlessLink(inbound *model.Inbound, email string) string {
 		httpupgrade, _ := stream["httpupgradeSettings"].(map[string]interface{})
 		params["path"] = httpupgrade["path"].(string)
 		params["host"] = httpupgrade["host"].(string)
+		headers, _ := httpupgrade["headers"].(map[string]interface{})
+		if headers != nil {
+			hostFromHeaders := searchHost(headers)
+			if hostFromHeaders != "" {
+				params["host"] = hostFromHeaders
+			}
+		}
 	}
-
 	security, _ := stream["security"].(string)
 	if security == "tls" {
 		params["security"] = "tls"
@@ -570,8 +581,8 @@ func (s *SubService) genTrojanLink(inbound *model.Inbound, email string) string
 	case "ws":
 		ws, _ := stream["wsSettings"].(map[string]interface{})
 		params["path"] = ws["path"].(string)
-		headers, _ := ws["headers"].(map[string]interface{})
 		params["host"] = ws["host"].(string)
+		headers, _ := ws["headers"].(map[string]interface{})
 		if headers != nil {
 			hostFromHeaders := searchHost(headers)
 			if hostFromHeaders != "" {
@@ -599,8 +610,14 @@ func (s *SubService) genTrojanLink(inbound *model.Inbound, email string) string
 		httpupgrade, _ := stream["httpupgradeSettings"].(map[string]interface{})
 		params["path"] = httpupgrade["path"].(string)
 		params["host"] = httpupgrade["host"].(string)
+		headers, _ := httpupgrade["headers"].(map[string]interface{})
+		if headers != nil {
+			hostFromHeaders := searchHost(headers)
+			if hostFromHeaders != "" {
+				params["host"] = hostFromHeaders
+			}
+		}
 	}
-
 	security, _ := stream["security"].(string)
 	if security == "tls" {
 		params["security"] = "tls"
@@ -794,8 +811,8 @@ func (s *SubService) genShadowsocksLink(inbound *model.Inbound, email string) st
 	case "ws":
 		ws, _ := stream["wsSettings"].(map[string]interface{})
 		params["path"] = ws["path"].(string)
-		headers, _ := ws["headers"].(map[string]interface{})
 		params["host"] = ws["host"].(string)
+		headers, _ := ws["headers"].(map[string]interface{})
 		if headers != nil {
 			hostFromHeaders := searchHost(headers)
 			if hostFromHeaders != "" {
@@ -823,6 +840,13 @@ func (s *SubService) genShadowsocksLink(inbound *model.Inbound, email string) st
 		httpupgrade, _ := stream["httpupgradeSettings"].(map[string]interface{})
 		params["path"] = httpupgrade["path"].(string)
 		params["host"] = httpupgrade["host"].(string)
+		headers, _ := httpupgrade["headers"].(map[string]interface{})
+		if headers != nil {
+			hostFromHeaders := searchHost(headers)
+			if hostFromHeaders != "" {
+				params["host"] = hostFromHeaders
+			}
+		}
 	}
 
 	security, _ := stream["security"].(string)

web/assets/css/custom.css

@@ -252,7 +252,7 @@ style attribute {
     .ant-layout-sider {
         display: none;
     }
-    .ant-card {
+    .ant-card, .ant-alert-error {
         margin: 0.5rem;
     }
     .ant-tabs {
@@ -384,6 +384,9 @@ style attribute {
     .ant-tabs {
         padding: 2rem;
     }
+    .ant-alert-error {
+        margin-inline: 0.3rem;
+    }
 }
 
 .fade-in-enter,
@@ -1344,7 +1347,7 @@ b, strong {
     height: 20px;
 }
 
-.ant-menu-theme-switch:hover {
+.ant-menu-theme-switch, .ant-menu-theme-switch:hover {
     background-color: transparent !important;
     cursor: default !important;
 }
@@ -1457,3 +1460,9 @@ b, strong {
 .ant-menu-theme-switch.ant-menu-item .ant-switch:not(.ant-switch-disabled):active:after, .ant-switch:not(.ant-switch-disabled):active:before {
     width: 16px;
 }
+
+.dark .ant-select-disabled .ant-select-selection {
+    background: var(--dark-color-surface-100);
+    border-color: var(--dark-color-surface-200);
+    color: rgba(255, 255, 255, 0.25);
+}

web/assets/js/model/outbound.js

@@ -290,6 +290,7 @@ class HttpUpgradeStreamSettings extends CommonClass {
         return new HttpUpgradeStreamSettings(
             json.path,
             json.Host,
+            json.headers && !ObjectUtil.isEmpty(json.headers.Host) ? json.headers.Host : '',
         );
     }
 
@@ -297,6 +298,7 @@ class HttpUpgradeStreamSettings extends CommonClass {
         return {
             path: this.path,
             host: this.host,
+            headers: ObjectUtil.isEmpty(this.host) ? undefined : {Host: this.host},
         };
     }
 }

web/assets/js/model/xray.js

@@ -475,19 +475,38 @@ class GrpcStreamSettings extends XrayCommonClass {
     }
 }
 
-class HttpUpgradeStreamSettings extends XrayCommonClass {
-    constructor(acceptProxyProtocol=false, path='/', host='') {
+class HTTPUpgradeStreamSettings extends XrayCommonClass {
+    constructor(acceptProxyProtocol=false, path='/', host='', headers=[]) {
         super();
         this.acceptProxyProtocol = acceptProxyProtocol;
         this.path = path;
         this.host = host;
+        this.headers = headers;
+    }
+
+    addHeader(name, value) {
+        this.headers.push({ name: name, value: value });
+    }
+
+    getHeader(name) {
+        for (const header of this.headers) {
+            if (header.name.toLowerCase() === name.toLowerCase()) {
+                return header.value;
+            }
+        }
+        return null;
+    }
+
+    removeHeader(index) {
+        this.headers.splice(index, 1);
     }
 
     static fromJson(json={}) {
-        return new HttpUpgradeStreamSettings(
+        return new HTTPUpgradeStreamSettings(
             json.acceptProxyProtocol,
             json.path,
             json.host,
+            XrayCommonClass.toHeaders(json.headers),
         );
     }
 
@@ -496,6 +515,7 @@ class HttpUpgradeStreamSettings extends XrayCommonClass {
             acceptProxyProtocol: this.acceptProxyProtocol,
             path: this.path,
             host: this.host,
+            headers: XrayCommonClass.toV2Headers(this.headers, false),
         };
     }
 }
@@ -864,7 +884,7 @@ class StreamSettings extends XrayCommonClass {
         httpSettings=new HttpStreamSettings(),
         quicSettings=new QuicStreamSettings(),
         grpcSettings=new GrpcStreamSettings(),
-        httpupgradeSettings=new HttpUpgradeStreamSettings(),
+        httpupgradeSettings=new HTTPUpgradeStreamSettings(),
         sockopt = undefined,
         ) {
         super();
@@ -943,7 +963,7 @@ class StreamSettings extends XrayCommonClass {
             HttpStreamSettings.fromJson(json.httpSettings),
             QuicStreamSettings.fromJson(json.quicSettings),
             GrpcStreamSettings.fromJson(json.grpcSettings),
-            HttpUpgradeStreamSettings.fromJson(json.httpupgradeSettings),
+            HTTPUpgradeStreamSettings.fromJson(json.httpupgradeSettings),
             SockoptStreamSettings.fromJson(json.sockopt),
         );
     }
@@ -1120,7 +1140,12 @@ class Inbound extends XrayCommonClass {
         } else if (this.isH2) {
             return this.stream.http.host[0];
         } else if (this.isHttpupgrade) {
-            return this.stream.httpupgrade.host;
+            const hostHeader = this.stream.httpupgrade.getHeader("Host");
+            if (hostHeader !== null) {
+                return hostHeader;
+            } else {
+                return this.stream.httpupgrade.host;
+            }        
         }
         return null;
     }
@@ -1261,6 +1286,10 @@ class Inbound extends XrayCommonClass {
             let httpupgrade = this.stream.httpupgrade;
             obj.path = httpupgrade.path;
             obj.host = httpupgrade.host;
+            let index = httpupgrade.headers.findIndex(header => header.name.toLowerCase() === 'host');
+            if (index >= 0) {
+                obj.host = httpupgrade.headers[index].value;
+            }
         }
 
         if (security === 'tls') {
@@ -1293,9 +1322,9 @@ class Inbound extends XrayCommonClass {
                 if (tcp.type === 'http') {
                     const request = tcp.request;
                     params.set("path", request.path.join(','));
-                    const index = request.headers.findIndex(header => header.name.toLowerCase() === 'host');
-                    if (index >= 0) {
-                        const host = request.headers[index].value;
+                    const tcpIndex = request.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                    if (tcpIndex >= 0) {
+                        const host = request.headers[tcpIndex].value;
                         params.set("host", host);
                     }
                     params.set("headerType", 'http');
@@ -1310,9 +1339,9 @@ class Inbound extends XrayCommonClass {
                 const ws = this.stream.ws;
                 params.set("path", ws.path);
                 params.set("host", ws.host);
-                const index = ws.headers.findIndex(header => header.name.toLowerCase() === 'host');
-                if (index >= 0) {
-                    const host = ws.headers[index].value;
+                const wsIndex = ws.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                if (wsIndex >= 0) {
+                    const host = ws.headers[wsIndex].value;
                     params.set("host", host);
                 }
                 break;
@@ -1336,9 +1365,14 @@ class Inbound extends XrayCommonClass {
                 }
                 break;
             case "httpupgrade":
-                    const httpupgrade = this.stream.httpupgrade;
-                    params.set("path", httpupgrade.path);
-                    params.set("host", httpupgrade.host);
+                const httpupgrade = this.stream.httpupgrade;
+                params.set("path", httpupgrade.path);
+                params.set("host", httpupgrade.host);
+                const httpupgradeIndex = httpupgrade.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                if (httpupgradeIndex >= 0) {
+                    const host = httpupgrade.headers[httpupgradeIndex].value;
+                    params.set("host", host);
+                }
                 break;
         }
 
@@ -1402,7 +1436,7 @@ class Inbound extends XrayCommonClass {
         return url.toString();
     }
 
-    genSSLink(address='', port=this.port, forceTls, remark='', clientPassword) {
+    genSSLink(address = '', port = this.port, forceTls, remark = '', clientPassword) {
         let settings = this.settings;
         const type = this.stream.network;
         const security = forceTls == 'same' ? this.stream.security : forceTls;
@@ -1414,9 +1448,9 @@ class Inbound extends XrayCommonClass {
                 if (tcp.type === 'http') {
                     const request = tcp.request;
                     params.set("path", request.path.join(','));
-                    const index = request.headers.findIndex(header => header.name.toLowerCase() === 'host');
-                    if (index >= 0) {
-                        const host = request.headers[index].value;
+                    const tcpIndex = request.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                    if (tcpIndex >= 0) {
+                        const host = request.headers[tcpIndex].value;
                         params.set("host", host);
                     }
                     params.set("headerType", 'http');
@@ -1431,9 +1465,9 @@ class Inbound extends XrayCommonClass {
                 const ws = this.stream.ws;
                 params.set("path", ws.path);
                 params.set("host", ws.host);
-                const index = ws.headers.findIndex(header => header.name.toLowerCase() === 'host');
-                if (index >= 0) {
-                    const host = ws.headers[index].value;
+                const wsIndex = ws.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                if (wsIndex >= 0) {
+                    const host = ws.headers[wsIndex].value;
                     params.set("host", host);
                 }
                 break;
@@ -1452,26 +1486,31 @@ class Inbound extends XrayCommonClass {
                 const grpc = this.stream.grpc;
                 params.set("serviceName", grpc.serviceName);
                 params.set("authority", grpc.authority);
-                if(grpc.multiMode){
+                if (grpc.multiMode) {
                     params.set("mode", "multi");
                 }
                 break;
             case "httpupgrade":
-                    const httpupgrade = this.stream.httpupgrade;
-                    params.set("path", httpupgrade.path);
-                    params.set("host", httpupgrade.host);
+                const httpupgrade = this.stream.httpupgrade;
+                params.set("path", httpupgrade.path);
+                params.set("host", httpupgrade.host);
+                const httpupgradeIndex = httpupgrade.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                if (httpupgradeIndex >= 0) {
+                    const host = httpupgrade.headers[httpupgradeIndex].value;
+                    params.set("host", host);
+                }
                 break;
         }
 
         if (security === 'tls') {
             params.set("security", "tls");
-            if (this.stream.isTls){
-                params.set("fp" , this.stream.tls.settings.fingerprint);
+            if (this.stream.isTls) {
+                params.set("fp", this.stream.tls.settings.fingerprint);
                 params.set("alpn", this.stream.tls.alpn);
-                if(this.stream.tls.settings.allowInsecure){
+                if (this.stream.tls.settings.allowInsecure) {
                     params.set("allowInsecure", "1");
                 }
-                if (!ObjectUtil.isEmpty(this.stream.tls.sni)){
+                if (!ObjectUtil.isEmpty(this.stream.tls.sni)) {
                     params.set("sni", this.stream.tls.sni);
                 }
             }
@@ -1502,9 +1541,9 @@ class Inbound extends XrayCommonClass {
                 if (tcp.type === 'http') {
                     const request = tcp.request;
                     params.set("path", request.path.join(','));
-                    const index = request.headers.findIndex(header => header.name.toLowerCase() === 'host');
-                    if (index >= 0) {
-                        const host = request.headers[index].value;
+                    const tcpIndex = request.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                    if (tcpIndex >= 0) {
+                        const host = request.headers[tcpIndex].value;
                         params.set("host", host);
                     }
                     params.set("headerType", 'http');
@@ -1519,9 +1558,9 @@ class Inbound extends XrayCommonClass {
                 const ws = this.stream.ws;
                 params.set("path", ws.path);
                 params.set("host", ws.host);
-                const index = ws.headers.findIndex(header => header.name.toLowerCase() === 'host');
-                if (index >= 0) {
-                    const host = ws.headers[index].value;
+                const wsIndex = ws.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                if (wsIndex >= 0) {
+                    const host = ws.headers[wsIndex].value;
                     params.set("host", host);
                 }
                 break;
@@ -1545,9 +1584,14 @@ class Inbound extends XrayCommonClass {
                 }
                 break;
             case "httpupgrade":
-                    const httpupgrade = this.stream.httpupgrade;
-                    params.set("path", httpupgrade.path);
-                    params.set("host", httpupgrade.host);
+                const httpupgrade = this.stream.httpupgrade;
+                params.set("path", httpupgrade.path);
+                params.set("host", httpupgrade.host);
+                const httpUpgradeIndex = httpupgrade.headers.findIndex(header => header.name.toLowerCase() === 'host');
+                if (httpUpgradeIndex >= 0) {
+                    const host = httpupgrade.headers[httpUpgradeIndex].value;
+                    params.set("host", host);
+                }
                 break;
         }
 

web/html/xui/client_bulk_modal.html

@@ -143,7 +143,7 @@
         emailPrefix: "",
         emailPostfix: "",
         subId: "",
-        tgId: "",
+        tgId: 0,
         flow: "",
         delayedStart: false,
         reset: 0,
@@ -200,7 +200,7 @@
             this.emailPrefix = "";
             this.emailPostfix = "";
             this.subId = "";
-            this.tgId = "";
+            this.tgId  = 0;
             this.flow = "";
             this.dbInbound = new DBInbound(dbInbound);
             this.inbound = dbInbound.toInbound();

web/html/xui/form/client.html

@@ -61,7 +61,7 @@
                 <a-icon type="question-circle"></a-icon>
             </a-tooltip>
         </template>
-        <a-input v-model.trim="client.tgId"></a-input>
+        <a-input-number style="width: 50%" v-model="client.tgId" min="0"></a-input-number>
     </a-form-item>
     <a-form-item v-if="app.ipLimitEnable">
         <template slot="label">

web/html/xui/form/outbound.html

@@ -290,8 +290,8 @@
             <a-input v-model="outbound.stream.ws.host"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "path" }}'>
-            <a-form-item><a-input v-model.trim="outbound.stream.ws.path"></a-input>
-            </a-form-item>
+            <a-input v-model.trim="outbound.stream.ws.path"></a-input>
+        </a-form-item>
     </template>
 
     <!-- http -->
@@ -347,8 +347,8 @@
             <a-input v-model="outbound.stream.httpupgrade.host"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "path" }}'>
-            <a-form-item><a-input v-model.trim="outbound.stream.httpupgrade.path"></a-input>
-            </a-form-item>
+            <a-input v-model.trim="outbound.stream.httpupgrade.path"></a-input>
+        </a-form-item>
     </template>
 </template>
 

web/html/xui/form/stream/stream_httpupgrade.html

@@ -9,5 +9,18 @@
     <a-form-item label='{{ i18n "path" }}'>
         <a-input v-model.trim="inbound.stream.httpupgrade.path"></a-input>
     </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
+        <a-button size="small" @click="inbound.stream.httpupgrade.addHeader('host', '')">+</a-button>
+    </a-form-item>
+    <a-form-item :wrapper-col="{span:24}">
+        <a-input-group compact v-for="(header, index) in inbound.stream.httpupgrade.headers">
+            <a-input style="width: 50%" v-model.trim="header.name" placeholder='{{ i18n "pages.inbounds.stream.general.name"}}'>
+                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+            </a-input>
+            <a-input style="width: 50%" v-model.trim="header.value" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+                <a-button slot="addonAfter" size="small" @click="inbound.stream.httpupgrade.removeHeader(index)">-</a-button>
+            </a-input>
+        </a-input-group>
+    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_ws.html

@@ -10,7 +10,7 @@
         <a-input v-model.trim="inbound.stream.ws.path"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestHeader" }}'>
-        <a-button size="small" @click="inbound.stream.ws.addHeader('Host', '')">+</a-button>
+        <a-button size="small" @click="inbound.stream.ws.addHeader('host', '')">+</a-button>
     </a-form-item>
     <a-form-item :wrapper-col="{span:24}">
         <a-input-group compact v-for="(header, index) in inbound.stream.ws.headers">

web/html/xui/index.html

@@ -23,230 +23,231 @@
     {{ template "commonSider" . }}
     <a-layout id="content-layout">
       <a-layout-content>
-        <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"></a-spin>
-        <transition name="list" appear>
-          <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
-            message='{{ i18n "secAlertTitle" }}'
-            color="red"
-            description='{{ i18n "secAlertSsl" }}'
-            show-icon closable>
-          </a-alert>
-        </transition>
-        <transition name="list" appear>
-          <a-row>
-            <a-card hoverable>
-              <a-row>
-                <a-col :sm="24" :md="12">
-                  <a-row>
-                    <a-col :span="12" style="text-align: center">
-                      <a-progress type="dashboard" status="normal"
-                        :stroke-color="status.cpu.color"
-                        :percent="status.cpu.percent"></a-progress>
-                      <div><b>CPU:</b> [[ cpuCoreFormat(status.cpuCores) ]]</div>
-                      <div><b>Speed:</b> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
-                    </a-col>
-                    <a-col :span="12" style="text-align: center">
-                      <a-progress type="dashboard" status="normal"
-                        :stroke-color="status.mem.color"
-                        :percent="status.mem.percent"></a-progress>
-                      <div>
-                        <b>{{ i18n "pages.index.memory"}}:</b> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
-                      </div>
-                    </a-col>
-                  </a-row>
-                </a-col>
-                <a-col :sm="24" :md="12">
-                  <a-row>
-                    <a-col :span="12" style="text-align: center">
-                      <a-progress type="dashboard" status="normal"
-                        :stroke-color="status.swap.color"
-                        :percent="status.swap.percent"></a-progress>
-                      <div>
-                        <b>Swap:</b> [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
-                      </div>
-                    </a-col>
-                    <a-col :span="12" style="text-align: center">
-                      <a-progress type="dashboard" status="normal"
-                        :stroke-color="status.disk.color"
-                        :percent="status.disk.percent"></a-progress>
-                      <div>
-                        <b>{{ i18n "pages.index.hard"}}:</b> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
-                      </div>
-                    </a-col>
-                  </a-row>
-                </a-col>
-              </a-row>
-            </a-card>
-          </a-row>
-        </transition>
-        <transition name="list" appear>
-          <a-row>
-            <a-col :sm="24" :lg="12">
+        <a-spin :spinning="spinning" :delay="200" :tip="loadingTip">
+          <transition name="list" appear>
+            <a-alert type="error" v-if="showAlert" style="margin-bottom: 10px"
+              message='{{ i18n "secAlertTitle" }}'
+              color="red"
+              description='{{ i18n "secAlertSsl" }}'
+              show-icon closable>
+            </a-alert>
+          </transition>
+          <transition name="list" appear>
+            <a-row>
               <a-card hoverable>
-                <b>3X-UI:</b>
-                <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
-                <a rel="noopener" href="https://t.me/XrayUI" target="_blank"><a-tag color="green">@XrayUI</a-tag></a>
+                <a-row>
+                  <a-col :sm="24" :md="12">
+                    <a-row>
+                      <a-col :span="12" style="text-align: center">
+                        <a-progress type="dashboard" status="normal"
+                          :stroke-color="status.cpu.color"
+                          :percent="status.cpu.percent"></a-progress>
+                        <div><b>CPU:</b> [[ cpuCoreFormat(status.cpuCores) ]]</div>
+                        <div><b>Speed:</b> [[ cpuSpeedFormat(status.cpuSpeedMhz) ]]</div>
+                      </a-col>
+                      <a-col :span="12" style="text-align: center">
+                        <a-progress type="dashboard" status="normal"
+                          :stroke-color="status.mem.color"
+                          :percent="status.mem.percent"></a-progress>
+                        <div>
+                          <b>{{ i18n "pages.index.memory"}}:</b> [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
+                        </div>
+                      </a-col>
+                    </a-row>
+                  </a-col>
+                  <a-col :sm="24" :md="12">
+                    <a-row>
+                      <a-col :span="12" style="text-align: center">
+                        <a-progress type="dashboard" status="normal"
+                          :stroke-color="status.swap.color"
+                          :percent="status.swap.percent"></a-progress>
+                        <div>
+                          <b>Swap:</b> [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
+                        </div>
+                      </a-col>
+                      <a-col :span="12" style="text-align: center">
+                        <a-progress type="dashboard" status="normal"
+                          :stroke-color="status.disk.color"
+                          :percent="status.disk.percent"></a-progress>
+                        <div>
+                          <b>{{ i18n "pages.index.hard"}}:</b> [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
+                        </div>
+                      </a-col>
+                    </a-row>
+                  </a-col>
+                </a-row>
               </a-card>
-            </a-col>
-            <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-card>
-            </a-col>
-            <a-col :sm="24" :lg="12">
-              <a-card hoverable>
-                <b>{{ i18n "pages.index.xrayStatus" }}:</b>
-                <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]] </a-tag>
-                <a-popover v-if="status.xray.state === State.Error" :overlay-class-name="themeSwitcher.currentTheme">
-                  <span slot="title" style="font-size: 12pt">An error occurred while running Xray
-                    <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
-                  </span>
-                  <template slot="content">
-                    <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
-                  </template>
-                  <a-icon type="question-circle"></a-icon>
-                </a-popover>
-                <a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
-                <a-tag color="purple" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>
-                <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
-              </a-card>
-            </a-col>
-            <a-col :sm="24" :lg="12">
-              <a-card hoverable>
-                <b>{{ i18n "menu.link" }}:</b>
-                <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
-                <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
-                <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
-              </a-card>
-            </a-col>
-            <a-col :sm="24" :lg="12">
-              <a-card hoverable>
-                <b>{{ i18n "pages.index.systemLoad" }}:</b>
-                <a-tag color="green">
-                  <a-tooltip>
-                      [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
-                    <template slot="title">
-                      {{ i18n "pages.index.systemLoadDesc" }}
+            </a-row>
+          </transition>
+          <transition name="list" appear>
+            <a-row>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <b>3X-UI:</b>
+                  <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
+                  <a rel="noopener" href="https://t.me/XrayUI" target="_blank"><a-tag color="green">@XrayUI</a-tag></a>
+                </a-card>
+              </a-col>
+              <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-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <b>{{ i18n "pages.index.xrayStatus" }}:</b>
+                  <a-tag style="text-transform: capitalize;" :color="status.xray.color">[[ status.xray.state ]] </a-tag>
+                  <a-popover v-if="status.xray.state === State.Error" :overlay-class-name="themeSwitcher.currentTheme">
+                    <span slot="title" style="font-size: 12pt">An error occurred while running Xray
+                      <a-tag color="purple" style="cursor: pointer; float: right;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
+                    </span>
+                    <template slot="content">
+                      <p style="max-width: 400px" v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
                     </template>
-                  </a-tooltip>
-                </a-tag>
-              </a-card>
-            </a-col>
-            <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"> Threads: [[ status.appStats.threads ]] </a-tag>
-              </a-card>
-            </a-col>
-            <a-col :sm="24" :lg="12">
-              <a-card hoverable>
-                <a-row>
-                  <a-col :span="12">
-                    <a-tag>
-                      <a-tooltip>
-                        <a-icon type="global"></a-icon> IPv4
-                        <template slot="title">
+                    <a-icon type="question-circle"></a-icon>
+                  </a-popover>
+                  <a-tag color="purple" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
+                  <a-tag color="purple" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>
+                  <a-tag color="purple" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <b>{{ i18n "menu.link" }}:</b>
+                  <a-tag color="purple" style="cursor: pointer;" @click="openLogs()">{{ i18n "pages.index.logs" }}</a-tag>
+                  <a-tag color="purple" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
+                  <a-tag color="purple" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <b>{{ i18n "pages.index.systemLoad" }}:</b>
+                  <a-tag color="green">
+                    <a-tooltip>
+                          [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
+                      <template slot="title">
+                        {{ i18n "pages.index.systemLoadDesc" }}
+                      </template>
+                    </a-tooltip>
+                  </a-tag>
+                </a-card>
+              </a-col>
+              <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"> Threads: [[ status.appStats.threads ]] </a-tag>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <a-row>
+                    <a-col :span="12">
+                      <a-tag>
+                        <a-tooltip>
+                          <a-icon type="global"></a-icon> IPv4
+                          <template slot="title">
                             [[ status.publicIP.ipv4 ]]
-                        </template>
-                      </a-tooltip>
-                    </a-tag>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-tag>
-                      <a-tooltip>
-                        <a-icon type="global"></a-icon> IPv6
-                        <template slot="title">
+                          </template>
+                        </a-tooltip>
+                      </a-tag>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-tag>
+                        <a-tooltip>
+                          <a-icon type="global"></a-icon> IPv6
+                          <template slot="title">
                             [[ status.publicIP.ipv6 ]]
-                        </template>
-                      </a-tooltip>
-                    </a-tag>
-                  </a-col>
-                </a-row>
-              </a-card>
-            </a-col>
-            <a-col :sm="24" :lg="12">
-              <a-card hoverable>
-                <a-row>
-                  <a-col :span="12">
-                    <a-tag>
-                      <a-tooltip>
-                        <a-icon type="swap"></a-icon> TCP: [[ status.tcpCount ]]
-                        <template slot="title">
-                          {{ i18n "pages.index.connectionTcpCountDesc" }}
-                        </template>
-                      </a-tooltip>
-                    </a-tag>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-tag>
-                      <a-tooltip>
-                        <a-icon type="swap"></a-icon> UDP: [[ status.udpCount ]]
-                        <template slot="title">
-                          {{ i18n "pages.index.connectionUdpCountDesc" }}
-                        </template>
-                      </a-tooltip>
-                    </a-tag>
-                  </a-col>
-                </a-row>
-              </a-card>
-            </a-col>
-            <a-col :sm="24" :lg="12">
-              <a-card hoverable>
-                <a-row>
-                  <a-col :span="12">
-                    <a-tag>
-                      <a-tooltip>
-                        <a-icon type="arrow-up"></a-icon> Up: [[ sizeFormat(status.netIO.up) ]]/s
-                        <template slot="title">
-                          {{ i18n "pages.index.upSpeed" }}
-                        </template>
-                      </a-tooltip>
-                    </a-tag>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-tag>
-                      <a-tooltip>
-                        <a-icon type="arrow-down"></a-icon> Down: [[ sizeFormat(status.netIO.down) ]]/s
-                        <template slot="title">
-                          {{ i18n "pages.index.downSpeed" }}
-                        </template>
-                      </a-tooltip>
-                    </a-tag>
-                  </a-col>
-                </a-row>
-              </a-card>
-            </a-col>
-            <a-col :sm="24" :lg="12">
-              <a-card hoverable>
-                <a-row>
-                  <a-col :span="12">
-                    <a-tag>
-                      <a-tooltip>
-                        <a-icon type="cloud-upload"></a-icon>
-                        <template slot="title">
-                          {{ i18n "pages.index.totalSent" }}
-                        </template> Out: [[ sizeFormat(status.netTraffic.sent) ]]
-                      </a-tooltip>
-                    </a-tag>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-tag>
-                      <a-tooltip>
-                        <a-icon type="cloud-download"></a-icon>
-                        <template slot="title">
-                          {{ i18n "pages.index.totalReceive" }}
-                        </template> In: [[ sizeFormat(status.netTraffic.recv) ]]
-                      </a-tooltip>
-                    </a-tag>
-                  </a-col>
-                </a-row>
-              </a-card>
-            </a-col>
-          </a-row>
-        </transition>
+                          </template>
+                        </a-tooltip>
+                      </a-tag>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <a-row>
+                    <a-col :span="12">
+                      <a-tag>
+                        <a-tooltip>
+                          <a-icon type="swap"></a-icon> TCP: [[ status.tcpCount ]]
+                          <template slot="title">
+                            {{ i18n "pages.index.connectionTcpCountDesc" }}
+                          </template>
+                        </a-tooltip>
+                      </a-tag>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-tag>
+                        <a-tooltip>
+                          <a-icon type="swap"></a-icon> UDP: [[ status.udpCount ]]
+                          <template slot="title">
+                            {{ i18n "pages.index.connectionUdpCountDesc" }}
+                          </template>
+                        </a-tooltip>
+                      </a-tag>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <a-row>
+                    <a-col :span="12">
+                      <a-tag>
+                        <a-tooltip>
+                          <a-icon type="arrow-up"></a-icon> Up: [[ sizeFormat(status.netIO.up) ]]/s
+                          <template slot="title">
+                            {{ i18n "pages.index.upSpeed" }}
+                          </template>
+                        </a-tooltip>
+                      </a-tag>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-tag>
+                        <a-tooltip>
+                          <a-icon type="arrow-down"></a-icon> Down: [[ sizeFormat(status.netIO.down) ]]/s
+                          <template slot="title">
+                            {{ i18n "pages.index.downSpeed" }}
+                          </template>
+                        </a-tooltip>
+                      </a-tag>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+              <a-col :sm="24" :lg="12">
+                <a-card hoverable>
+                  <a-row>
+                    <a-col :span="12">
+                      <a-tag>
+                        <a-tooltip>
+                          <a-icon type="cloud-upload"></a-icon>
+                          <template slot="title">
+                            {{ i18n "pages.index.totalSent" }}
+                          </template> Out: [[ sizeFormat(status.netTraffic.sent) ]]
+                        </a-tooltip>
+                      </a-tag>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-tag>
+                        <a-tooltip>
+                          <a-icon type="cloud-download"></a-icon>
+                          <template slot="title">
+                            {{ i18n "pages.index.totalReceive" }}
+                          </template> In: [[ sizeFormat(status.netTraffic.recv) ]]
+                        </a-tooltip>
+                      </a-tag>
+                    </a-col>
+                  </a-row>
+                </a-card>
+              </a-col>
+            </a-row>
+          </transition>
+        </a-spin>
       </a-layout-content>
     </a-layout>
     <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}' :closable="true"

web/html/xui/settings.html

@@ -75,7 +75,7 @@
       <a-layout-content>
         <a-spin :spinning="spinning" :delay="500" tip='{{ i18n "loading"}}'>
           <transition name="list" appear>
-            <a-alert type="error" v-if="confAlerts.length>0" style="margin: 10px 5px;"
+            <a-alert type="error" v-if="confAlerts.length>0" style="margin-bottom: 10px;"
                 message='{{ i18n "secAlertTitle" }}'
                 color="red"
                 show-icon closable>
@@ -376,319 +376,325 @@
 {{template "component/password" .}}
 {{template "component/setting"}}
 <script>
-    const app = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#app',
-        data: {
-            siderDrawer,
-            themeSwitcher,
-            spinning: false,
-            changeSecret: false,
-            oldAllSetting: new AllSetting(),
-            allSetting: new AllSetting(),
-            saveBtnDisable: true,
-            user: {},
-            lang: getLang(),
-            remarkModels: {i:'Inbound',e:'Email',o:'Other'},
-            remarkSeparators: [' ','-','_','@',':','~','|',',','.','/'],
-            datepickerList: [{name:'Gregorian (Standard)', value: 'gregorian'}, {name:'Jalalian (شمسی)', value: 'jalalian'}],
-            remarkSample: '',
-            defaultFragment: {
-                tag: "fragment",
-                protocol: "freedom",
-                settings: {
-                    domainStrategy: "AsIs",
-                    fragment: {
-                        packets: "tlshello",
-                        length: "100-200",
-                        interval: "10-20"
-                    }
-                },
-                streamSettings: {
-                    sockopt: {
-                        tcpKeepAliveIdle: 100,
-                        tcpNoDelay: true
-                    }
-                }
-            },
-            defaultMux: {
-                enabled: true,
-                concurrency: 8,
-                xudpConcurrency: 16,
-                xudpProxyUDP443: "reject"
-            },
-            defaultRules: [
-                {
-                    type: "field",
-                    outboundTag: "direct",
-                    domain: [
-                        "geosite:category-ir",
-                        "geosite:cn"
-                    ],
-                    "enabled": true
-                },
-                {
-                    type: "field",
-                    outboundTag: "direct",
-                    ip: [
-                        "geoip:private",
-                        "geoip:ir",
-                        "geoip:cn"
-                    ],
-                    enabled: true
-                },
-            ],
-            countryOptions: [
-                { label: 'Private IP/Domain', value: 'private' },
-                { label: '🇮🇷 Iran', value: 'ir' },
-                { label: '🇨🇳 China', value: 'cn' },
-                { label: '🇷🇺 Russia', value: 'ru' },
-                { label: '🇻🇳 Vietnam', value: 'vn' },
-            ],
-            get remarkModel() {
-                rm = this.allSetting.remarkModel;
-                return rm.length>1 ? rm.substring(1).split('') : [];
-            },
-            set remarkModel(value) {
-                rs = this.allSetting.remarkModel[0];
-                this.allSetting.remarkModel = rs + value.join('');
-                this.changeRemarkSample();
-            },
-            get remarkSeparator() {
-                return this.allSetting.remarkModel.length > 1 ? this.allSetting.remarkModel.charAt(0) : '-';
-            },
-            set remarkSeparator(value) {
-                this.allSetting.remarkModel = value + this.allSetting.remarkModel.substring(1);
-                this.changeRemarkSample();
-            },
-            get datepicker() {
-                return this.allSetting.datepicker ? this.allSetting.datepicker : 'gregorian';
-            },
-            set datepicker(value) {
-                this.allSetting.datepicker = value;
-            },
-            changeRemarkSample(){
-                sample = []
-                this.remarkModel.forEach(r => sample.push(this.remarkModels[r]));
-                this.remarkSample = sample.length == 0 ? '' : sample.join(this.remarkSeparator);
-            }   
+  const app = new Vue({
+    delimiters: ['[[', ']]'],
+    el: '#app',
+    data: {
+      siderDrawer,
+      themeSwitcher,
+      spinning: false,
+      changeSecret: false,
+      oldAllSetting: new AllSetting(),
+      allSetting: new AllSetting(),
+      saveBtnDisable: true,
+      user: {},
+      lang: getLang(),
+      remarkModels: { i: 'Inbound', e: 'Email', o: 'Other' },
+      remarkSeparators: [' ', '-', '_', '@', ':', '~', '|', ',', '.', '/'],
+      datepickerList: [{ name: 'Gregorian (Standard)', value: 'gregorian' }, { name: 'Jalalian (شمسی)', value: 'jalalian' }],
+      remarkSample: '',
+      defaultFragment: {
+        tag: "fragment",
+        protocol: "freedom",
+        settings: {
+          domainStrategy: "AsIs",
+          fragment: {
+            packets: "tlshello",
+            length: "100-200",
+            interval: "10-20"
+          }
         },
-        methods: {
-            loading(spinning = true) {
-                this.spinning = spinning;
-            },
-            async getAllSetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/setting/all");
-                this.loading(false);
-                if (msg.success) {
-                    this.oldAllSetting = new AllSetting(msg.obj);
-                    this.allSetting = new AllSetting(msg.obj);
-                    app.changeRemarkSample();
-                    this.saveBtnDisable = true;
-                }
-                await this.fetchUserSecret();
-            },
-            async updateAllSetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/setting/update", this.allSetting);
-                this.loading(false);
-                if (msg.success) {
-                    await this.getAllSetting();
-                }
-            },
-            async updateUser() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/setting/updateUser", this.user);
-                this.loading(false);
-                if (msg.success) {
-                    this.user = {};
-                }
-            },
-            async restartPanel() {
-                await new Promise(resolve => {
-                    this.$confirm({
-                        title: '{{ i18n "pages.settings.restartPanel" }}',
-                        content: '{{ i18n "pages.settings.restartPanelDesc" }}',
-                        class: themeSwitcher.currentTheme,
-                        okText: '{{ i18n "sure" }}',
-                        cancelText: '{{ i18n "cancel" }}',
-                        onOk: () => resolve(),
-                    });
-                });
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/setting/restartPanel");
-                this.loading(false);
-                if (msg.success) {
-                    this.loading(true);
-                    await PromiseUtil.sleep(5000);
-                    let { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting;
-                    const isTLS = webCertFile !== "" || webKeyFile !== "";
-                    const url = buildURL({ host, port, isTLS, base, path: "panel/settings" });
-                    window.location.replace(url);
-                }
-            },
-            async fetchUserSecret() {
-                this.loading(true);
-                const userMessage = await HttpUtil.post("/panel/setting/getUserSecret", this.user);
-                if (userMessage.success) {
-                    this.user = userMessage.obj;
-                }
-                this.loading(false);
-            },
-            async updateSecret() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/panel/setting/updateUserSecret", this.user);
-                if (msg && msg.obj) {
-                    this.user = msg.obj;
-                }
-                this.loading(false);
-                await this.updateAllSetting();
-            },
-            generateRandomString(length) {
-                var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
-                let randomString = "";
-                for (let i = 0; i < length; i++) {
-                    randomString += chars[Math.floor(Math.random() * chars.length)];
-                }
-                return randomString;
-            },
-            async getNewSecret() {
-                if (!this.changeSecret) {
-                    this.changeSecret = true;
-                    this.user.loginSecret = '';
-                    const newSecret = this.generateRandomString(64);
-                    await PromiseUtil.sleep(1000);
-                    this.user.loginSecret = newSecret;
-                    this.changeSecret = false;
-                }
-            },
-            async toggleToken(value) {
-                if (value) {
-                await this.getNewSecret();
-                } else {
-                this.user.loginSecret = "";
-                }
-            },
-        },
-        computed: {
-            fragment: {
-                get: function() { return this.allSetting?.subJsonFragment != ""; },
-                set: function (v) {
-                    this.allSetting.subJsonFragment = v ? JSON.stringify(this.defaultFragment) : "";
-                }
-            },
-            fragmentPackets: {
-                get: function() { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.packets : ""; },
-                set: function(v) {
-                    if (v != ""){
-                        newFragment = JSON.parse(this.allSetting.subJsonFragment);
-                        newFragment.settings.fragment.packets = v;
-                        this.allSetting.subJsonFragment = JSON.stringify(newFragment);
-                    }
-                }
-            },
-            fragmentLength: {
-                get: function() { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.length : ""; },
-                set: function(v) {
-                    if (v != ""){
-                        newFragment = JSON.parse(this.allSetting.subJsonFragment);
-                        newFragment.settings.fragment.length = v;
-                        this.allSetting.subJsonFragment = JSON.stringify(newFragment);
-                    }
-                }
-            },
-            fragmentInterval: {
-                get: function() { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.interval : ""; },
-                set: function(v) {
-                    if (v != ""){
-                        newFragment = JSON.parse(this.allSetting.subJsonFragment);
-                        newFragment.settings.fragment.interval = v;
-                        this.allSetting.subJsonFragment = JSON.stringify(newFragment);
-                    }
-                }
-            },
-            enableMux: {
-                get: function() { return this.allSetting?.subJsonMux != ""; },
-                set: function (v) {
-                    this.allSetting.subJsonMux = v ? JSON.stringify(this.defaultMux) : "";
-                }
-            },
-            muxConcurrency: {
-                get: function() { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).concurrency : -1; },
-                set: function(v) {
-                    newMux = JSON.parse(this.allSetting.subJsonMux);
-                    newMux.concurrency = v;
-                    this.allSetting.subJsonMux = JSON.stringify(newMux);
-                }
-            },
-            muxXudpConcurrency: {
-                get: function() { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpConcurrency : -1; },
-                set: function(v) {
-                    newMux = JSON.parse(this.allSetting.subJsonMux);
-                    newMux.xudpConcurrency = v;
-                    this.allSetting.subJsonMux = JSON.stringify(newMux);
-                }
-            },
-            muxXudpProxyUDP443: {
-                get: function() { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpProxyUDP443 : "reject"; },
-                set: function(v) {
-                    newMux = JSON.parse(this.allSetting.subJsonMux);
-                    newMux.xudpProxyUDP443 = v;
-                    this.allSetting.subJsonMux = JSON.stringify(newMux);
-                }
-            },
-            enableDirect: {
-                get: function() { return this.allSetting?.subJsonRules != ""; },
-                set: function (v) {
-                    this.allSetting.subJsonRules = v ? JSON.stringify(this.defaultRules) : "";
-                }
-            },
-            directCountries: {
-                get: function() {
-                    if (!this.enableDirect) return [];
-                    rules = JSON.parse(this.allSetting.subJsonRules);
-                    return Array.isArray(rules) ? rules[1].ip.map(d => d.replace("geoip:","")) : [];
-                },
-                set: function (v) {
-                    rules = JSON.parse(this.allSetting.subJsonRules);
-                    if (!Array.isArray(rules)) return;
-                    rules[0].domain = [];
-                    rules[1].ip = [];
-                    v.forEach(d => {
-                        category = ["cn","private"].includes(d) ? "" : "category-";
-                        rules[0].domain.push("geosite:"+category+d);
-                        rules[1].ip.push("geoip:"+d);
-                    });
-                    this.allSetting.subJsonRules = JSON.stringify(rules);
-                }
-            },
-            confAlerts: {
-                get: function() {
-                    if (!this.allSetting) return [];
-                    var alerts = []
-                    if (window.location.protocol !== "https:") alerts.push('{{ i18n "secAlertSSL" }}');
-                    if (this.allSetting.webPort == 54321) alerts.push('{{ i18n "secAlertPanelPort" }}');
-                    panelPath = window.location.pathname.split('/').length<4
-                    if (panelPath && this.allSetting.webBasePath == '/') alerts.push('{{ i18n "secAlertPanelURI" }}');
-                    if (this.allSetting.subEnable) {
-                        subPath = this.allSetting.subURI.length >0 ? new URL(this.allSetting.subURI).pathname : this.allSetting.subPath;
-                        if (subPath == '/sub/') alerts.push('{{ i18n "secAlertSubURI" }}');
-                        subJsonPath = this.allSetting.subJsonURI.length >0 ? new URL(this.allSetting.subJsonURI).pathname : this.allSetting.subJsonPath;
-                        if (subJsonPath == '/json/') alerts.push('{{ i18n "secAlertSubJsonURI" }}');
-                    }
-                    return alerts
-                }
-            }
-        }, 
-        async mounted() {
-            await this.getAllSetting();
-            while (true) {
-                await PromiseUtil.sleep(1000);
-                this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
-            }
+        streamSettings: {
+          sockopt: {
+            tcpKeepAliveIdle: 100,
+            tcpNoDelay: true
+          }
         }
-    });
+      },
+      defaultMux: {
+        enabled: true,
+        concurrency: 8,
+        xudpConcurrency: 16,
+        xudpProxyUDP443: "reject"
+      },
+      defaultRules: [
+        {
+          type: "field",
+          outboundTag: "direct",
+          domain: [
+            "geosite:category-ir",
+            "geosite:cn"
+          ],
+          "enabled": true
+        },
+        {
+          type: "field",
+          outboundTag: "direct",
+          ip: [
+            "geoip:private",
+            "geoip:ir",
+            "geoip:cn"
+          ],
+          enabled: true
+        },
+      ],
+      countryOptions: [
+        { label: 'Private IP/Domain', value: 'private' },
+        { label: '🇮🇷 Iran', value: 'ir' },
+        { label: '🇨🇳 China', value: 'cn' },
+        { label: '🇷🇺 Russia', value: 'ru' },
+      ],
+      get remarkModel() {
+        rm = this.allSetting.remarkModel;
+        return rm.length > 1 ? rm.substring(1).split('') : [];
+      },
+      set remarkModel(value) {
+        rs = this.allSetting.remarkModel[0];
+        this.allSetting.remarkModel = rs + value.join('');
+        this.changeRemarkSample();
+      },
+      get remarkSeparator() {
+        return this.allSetting.remarkModel.length > 1 ? this.allSetting.remarkModel.charAt(0) : '-';
+      },
+      set remarkSeparator(value) {
+        this.allSetting.remarkModel = value + this.allSetting.remarkModel.substring(1);
+        this.changeRemarkSample();
+      },
+      get datepicker() {
+        return this.allSetting.datepicker ? this.allSetting.datepicker : 'gregorian';
+      },
+      set datepicker(value) {
+        this.allSetting.datepicker = value;
+      },
+      changeRemarkSample() {
+        sample = []
+        this.remarkModel.forEach(r => sample.push(this.remarkModels[r]));
+        this.remarkSample = sample.length == 0 ? '' : sample.join(this.remarkSeparator);
+      }
+    },
+    methods: {
+      loading(spinning = true) {
+        this.spinning = spinning;
+      },
+      async getAllSetting() {
+        this.loading(true);
+        const msg = await HttpUtil.post("/panel/setting/all");
+        this.loading(false);
+        if (msg.success) {
+          this.oldAllSetting = new AllSetting(msg.obj);
+          this.allSetting = new AllSetting(msg.obj);
+          app.changeRemarkSample();
+          this.saveBtnDisable = true;
+        }
+        await this.fetchUserSecret();
+      },
+      async updateAllSetting() {
+        this.loading(true);
+        const msg = await HttpUtil.post("/panel/setting/update", this.allSetting);
+        this.loading(false);
+        if (msg.success) {
+          await this.getAllSetting();
+        }
+      },
+      async updateUser() {
+        this.loading(true);
+        const msg = await HttpUtil.post("/panel/setting/updateUser", this.user);
+        this.loading(false);
+        if (msg.success) {
+          this.user = {};
+        }
+      },
+      async restartPanel() {
+        await new Promise(resolve => {
+          this.$confirm({
+            title: '{{ i18n "pages.settings.restartPanel" }}',
+            content: '{{ i18n "pages.settings.restartPanelDesc" }}',
+            class: themeSwitcher.currentTheme,
+            okText: '{{ i18n "sure" }}',
+            cancelText: '{{ i18n "cancel" }}',
+            onOk: () => resolve(),
+          });
+        });
+        this.loading(true);
+        const msg = await HttpUtil.post("/panel/setting/restartPanel");
+        this.loading(false);
+        if (msg.success) {
+          this.loading(true);
+          await PromiseUtil.sleep(5000);
+          let { webCertFile, webKeyFile, webDomain: host, webPort: port, webBasePath: base } = this.allSetting;
+          const isTLS = webCertFile !== "" || webKeyFile !== "";
+          const url = buildURL({ host, port, isTLS, base, path: "panel/settings" });
+          window.location.replace(url);
+        }
+      },
+      async fetchUserSecret() {
+        this.loading(true);
+        const userMessage = await HttpUtil.post("/panel/setting/getUserSecret", this.user);
+        if (userMessage.success) {
+          this.user = userMessage.obj;
+        }
+        this.loading(false);
+      },
+      async updateSecret() {
+        this.loading(true);
+        const msg = await HttpUtil.post("/panel/setting/updateUserSecret", this.user);
+        if (msg && msg.obj) {
+          this.user = msg.obj;
+        }
+        this.loading(false);
+        await this.updateAllSetting();
+      },
+      generateRandomString(length) {
+        var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
+        let randomString = "";
+        for (let i = 0; i < length; i++) {
+          randomString += chars[Math.floor(Math.random() * chars.length)];
+        }
+        return randomString;
+      },
+      async getNewSecret() {
+        if (!this.changeSecret) {
+          this.changeSecret = true;
+          this.user.loginSecret = '';
+          const newSecret = this.generateRandomString(64);
+          await PromiseUtil.sleep(1000);
+          this.user.loginSecret = newSecret;
+          this.changeSecret = false;
+        }
+      },
+      async toggleToken(value) {
+        if (value) {
+          await this.getNewSecret();
+        } else {
+          this.user.loginSecret = "";
+        }
+      },
+    },
+    computed: {
+      fragment: {
+        get: function () { return this.allSetting?.subJsonFragment != ""; },
+        set: function (v) {
+          this.allSetting.subJsonFragment = v ? JSON.stringify(this.defaultFragment) : "";
+        }
+      },
+      fragmentPackets: {
+        get: function () { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.packets : ""; },
+        set: function (v) {
+          if (v != "") {
+            newFragment = JSON.parse(this.allSetting.subJsonFragment);
+            newFragment.settings.fragment.packets = v;
+            this.allSetting.subJsonFragment = JSON.stringify(newFragment);
+          }
+        }
+      },
+      fragmentLength: {
+        get: function () { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.length : ""; },
+        set: function (v) {
+          if (v != "") {
+            newFragment = JSON.parse(this.allSetting.subJsonFragment);
+            newFragment.settings.fragment.length = v;
+            this.allSetting.subJsonFragment = JSON.stringify(newFragment);
+          }
+        }
+      },
+      fragmentInterval: {
+        get: function () { return this.fragment ? JSON.parse(this.allSetting.subJsonFragment).settings.fragment.interval : ""; },
+        set: function (v) {
+          if (v != "") {
+            newFragment = JSON.parse(this.allSetting.subJsonFragment);
+            newFragment.settings.fragment.interval = v;
+            this.allSetting.subJsonFragment = JSON.stringify(newFragment);
+          }
+        }
+      },
+      enableMux: {
+        get: function () { return this.allSetting?.subJsonMux != ""; },
+        set: function (v) {
+          this.allSetting.subJsonMux = v ? JSON.stringify(this.defaultMux) : "";
+        }
+      },
+      muxConcurrency: {
+        get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).concurrency : -1; },
+        set: function (v) {
+          newMux = JSON.parse(this.allSetting.subJsonMux);
+          newMux.concurrency = v;
+          this.allSetting.subJsonMux = JSON.stringify(newMux);
+        }
+      },
+      muxXudpConcurrency: {
+        get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpConcurrency : -1; },
+        set: function (v) {
+          newMux = JSON.parse(this.allSetting.subJsonMux);
+          newMux.xudpConcurrency = v;
+          this.allSetting.subJsonMux = JSON.stringify(newMux);
+        }
+      },
+      muxXudpProxyUDP443: {
+        get: function () { return this.enableMux ? JSON.parse(this.allSetting.subJsonMux).xudpProxyUDP443 : "reject"; },
+        set: function (v) {
+          newMux = JSON.parse(this.allSetting.subJsonMux);
+          newMux.xudpProxyUDP443 = v;
+          this.allSetting.subJsonMux = JSON.stringify(newMux);
+        }
+      },
+      enableDirect: {
+        get: function () { return this.allSetting?.subJsonRules != ""; },
+        set: function (v) {
+          this.allSetting.subJsonRules = v ? JSON.stringify(this.defaultRules) : "";
+        }
+      },
+      directCountries: {
+        get: function () {
+          if (!this.enableDirect) return [];
+          rules = JSON.parse(this.allSetting.subJsonRules);
+          return Array.isArray(rules) ? rules[1].ip.map(d => d.replace("geoip:", "")) : [];
+        },
+        set: function (v) {
+          rules = JSON.parse(this.allSetting.subJsonRules);
+          if (!Array.isArray(rules)) return;
+          rules[0].domain = [];
+          rules[1].ip = [];
+          v.forEach(d => {
+            let category = '';
+            if (["cn", "private"].includes(d)) {
+              category = "";
+            } else if (d === 'ru') {
+              category = "category-gov-";
+            } else {
+              category = "category-";
+            }
+            rules[0].domain.push("geosite:" + category + d);
+            rules[1].ip.push("geoip:" + d);
+          });
+          this.allSetting.subJsonRules = JSON.stringify(rules);
+        }
+      },
+      confAlerts: {
+        get: function () {
+          if (!this.allSetting) return [];
+          var alerts = []
+          if (window.location.protocol !== "https:") alerts.push('{{ i18n "secAlertSSL" }}');
+          if (this.allSetting.webPort == 54321) alerts.push('{{ i18n "secAlertPanelPort" }}');
+          panelPath = window.location.pathname.split('/').length < 4
+          if (panelPath && this.allSetting.webBasePath == '/') alerts.push('{{ i18n "secAlertPanelURI" }}');
+          if (this.allSetting.subEnable) {
+            subPath = this.allSetting.subURI.length > 0 ? new URL(this.allSetting.subURI).pathname : this.allSetting.subPath;
+            if (subPath == '/sub/') alerts.push('{{ i18n "secAlertSubURI" }}');
+            subJsonPath = this.allSetting.subJsonURI.length > 0 ? new URL(this.allSetting.subJsonURI).pathname : this.allSetting.subJsonPath;
+            if (subJsonPath == '/json/') alerts.push('{{ i18n "secAlertSubJsonURI" }}');
+          }
+          return alerts
+        }
+      }
+    },
+    async mounted() {
+      await this.getAllSetting();
+      while (true) {
+        await PromiseUtil.sleep(1000);
+        this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
+      }
+    }
+  });
 </script>
 </body>
 </html>

web/html/xui/xray.html

@@ -572,9 +572,9 @@
               <a-tab-pane key="tpl-dns" tab='DNS' style="padding-top: 20px;" force-render="true">
                 <setting-list-item type="switch" title='{{ i18n "pages.xray.dns.enable" }}' desc='{{ i18n "pages.xray.dns.enableDesc" }}' v-model="enableDNS"></setting-list-item>
                 <template v-if="enableDNS">
-                  <setting-list-item type="text" title='{{ i18n "pages.xray.dns.tag" }}' desc='{{ i18n "pages.xray.dns.tagDesc" }}' v-model="dnsTag"></setting-list-item>
-                  <a-list-item>
-                    <a-row style="padding: 20px">
+                  <setting-list-item style="padding: 10px 20px" type="text" title='{{ i18n "pages.xray.dns.tag" }}' desc='{{ i18n "pages.xray.dns.tagDesc" }}' v-model="dnsTag"></setting-list-item>
+                  <a-list-item style="padding: 10px 20px">
+                    <a-row>
                       <a-col :lg="24" :xl="12">
                         <a-list-item-meta title='{{ i18n "pages.xray.dns.strategy" }}' description='{{ i18n "pages.xray.dns.strategyDesc" }}' />
                       </a-col>
@@ -632,8 +632,7 @@
                     <template slot="action" slot-scope="text,fakedns,index">
                         [[ index+1 ]]
                       <a-dropdown :trigger="['click']">
-                        <a-icon @click="e => e.preventDefault()" type="more"
-                          style="font-size: 16px; text-decoration: bold;"></a-icon>
+                        <a-icon @click="e => e.preventDefault()" type="more" style="font-size: 16px; text-decoration: bold;"></a-icon>
                         <a-menu slot="overlay" :theme="themeSwitcher.currentTheme">
                           <a-menu-item @click="editFakedns(index)">
                             <a-icon type="edit"></a-icon>

web/html/xui/xray_balancer_modal.html

@@ -21,8 +21,8 @@
             <a-select v-model="balancerModal.balancer.strategy" :dropdown-class-name="themeSwitcher.currentTheme">
                 <a-select-option value="random">Random</a-select-option>
                 <a-select-option value="roundRobin">Round Robin</a-select-option>
-                <a-select-option value="leastload">Least Load</a-select-option>
-                <a-select-option value="leastping">Least Ping</a-select-option>
+                <a-select-option value="leastLoad">Least Load</a-select-option>
+                <a-select-option value="leastPing">Least Ping</a-select-option>
             </a-select>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.xray.balancer.balancerSelectors" }}' has-feedback 

web/service/inbound.go

@@ -1186,7 +1186,7 @@ func (s *InboundService) GetClientByEmail(clientEmail string) (*xray.ClientTraff
 	return nil, nil, common.NewError("Client Not Found In Inbound For Email:", clientEmail)
 }
 
-func (s *InboundService) SetClientTelegramUserID(trafficId int, tgId string) (bool, error) {
+func (s *InboundService) SetClientTelegramUserID(trafficId int, tgId int64) (bool, error) {
 	traffic, inbound, err := s.GetClientInboundByTrafficID(trafficId)
 	if err != nil {
 		return false, err
@@ -1687,10 +1687,10 @@ func (s *InboundService) DelDepletedClients(id int) (err error) {
 	return err
 }
 
-func (s *InboundService) GetClientTrafficTgBot(tgId string) ([]*xray.ClientTraffic, error) {
+func (s *InboundService) GetClientTrafficTgBot(tgId int64) ([]*xray.ClientTraffic, error) {
 	db := database.GetDB()
 	var inbounds []*model.Inbound
-	err := db.Model(model.Inbound{}).Where("settings like ?", fmt.Sprintf(`%%"tgId": "%s"%%`, tgId)).Find(&inbounds).Error
+	err := db.Model(model.Inbound{}).Where("settings like ?", fmt.Sprintf(`%%"tgId": %d%%`, tgId)).Find(&inbounds).Error
 	if err != nil && err != gorm.ErrRecordNotFound {
 		return nil, err
 	}

web/service/tgbot.go

@@ -6,7 +6,6 @@ import (
 	"net"
 	"net/url"
 	"os"
-	"slices"
 	"strconv"
 	"strings"
 	"time"
@@ -39,8 +38,9 @@ var (
 type LoginStatus byte
 
 const (
-	LoginSuccess LoginStatus = 1
-	LoginFail    LoginStatus = 0
+	LoginSuccess        LoginStatus = 1
+	LoginFail           LoginStatus = 0
+	EmptyTelegramUserID             = int64(0)
 )
 
 type Tgbot struct {
@@ -207,21 +207,20 @@ func (t *Tgbot) OnReceive() {
 	botHandler.HandleMessage(func(_ *telego.Bot, message telego.Message) {
 		if message.UsersShared != nil {
 			if checkAdmin(message.From.ID) {
-				userIDsStr := ""
-				for _, userID := range message.UsersShared.UserIDs {
-					userIDsStr += strconv.FormatInt(userID, 10) + " "
+				for _, sharedUser := range message.UsersShared.Users {
+					userID := sharedUser.UserID
+					needRestart, err := t.inboundService.SetClientTelegramUserID(message.UsersShared.RequestID, userID)
+					if needRestart {
+						t.xrayService.SetToNeedRestart()
+					}
+					output := ""
+					if err != nil {
+						output += t.I18nBot("tgbot.messages.selectUserFailed")
+					} else {
+						output += t.I18nBot("tgbot.messages.userSaved")
+					}
+					t.SendMsgToTgbot(message.Chat.ID, output, tu.ReplyKeyboardRemove())
 				}
-				needRestart, err := t.inboundService.SetClientTelegramUserID(message.UsersShared.RequestID, userIDsStr)
-				if needRestart {
-					t.xrayService.SetToNeedRestart()
-				}
-				output := ""
-				if err != nil {
-					output += t.I18nBot("tgbot.messages.selectUserFailed")
-				} else {
-					output += t.I18nBot("tgbot.messages.userSaved")
-				}
-				t.SendMsgToTgbot(message.Chat.ID, output, tu.ReplyKeyboardRemove())
 			} else {
 				t.SendMsgToTgbot(message.Chat.ID, t.I18nBot("tgbot.noResult"), tu.ReplyKeyboardRemove())
 			}
@@ -259,7 +258,9 @@ func (t *Tgbot) answerCommand(message *telego.Message, chatId int64, isAdmin boo
 			if isAdmin {
 				t.searchClient(chatId, commandArgs[0])
 			} else {
-				t.getClientUsage(chatId, strconv.FormatInt(message.From.ID, 10), commandArgs[0])
+				// Convert message.From.ID to int64
+				fromID := int64(message.From.ID)
+				t.getClientUsage(chatId, fromID, commandArgs[0])
 			}
 		} else {
 			msg += t.I18nBot("tgbot.commands.usage")
@@ -726,7 +727,7 @@ func (t *Tgbot) asnwerCallback(callbackQuery *telego.CallbackQuery, isAdmin bool
 					t.sendCallbackAnswerTgBot(callbackQuery.ID, t.I18nBot("tgbot.answers.errorOperation"))
 					return
 				}
-				needRestart, err := t.inboundService.SetClientTelegramUserID(traffic.Id, "")
+				needRestart, err := t.inboundService.SetClientTelegramUserID(traffic.Id, EmptyTelegramUserID)
 				if needRestart {
 					t.xrayService.SetToNeedRestart()
 				}
@@ -783,8 +784,9 @@ func (t *Tgbot) asnwerCallback(callbackQuery *telego.CallbackQuery, isAdmin bool
 		t.sendCallbackAnswerTgBot(callbackQuery.ID, t.I18nBot("tgbot.buttons.getBanLogs"))
 		t.sendBanLogs(chatId, true)
 	case "client_traffic":
+		tgUserID := callbackQuery.From.ID
 		t.sendCallbackAnswerTgBot(callbackQuery.ID, t.I18nBot("tgbot.buttons.clientUsage"))
-		t.getClientUsage(chatId, strconv.FormatInt(callbackQuery.From.ID, 10))
+		t.getClientUsage(chatId, tgUserID)
 	case "client_commands":
 		t.sendCallbackAnswerTgBot(callbackQuery.ID, t.I18nBot("tgbot.buttons.commands"))
 		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.commands.helpClientCommands"))
@@ -1135,7 +1137,7 @@ func (t *Tgbot) clientInfoMsg(
 	return output
 }
 
-func (t *Tgbot) getClientUsage(chatId int64, tgUserID string, email ...string) {
+func (t *Tgbot) getClientUsage(chatId int64, tgUserID int64, email ...string) {
 	traffics, err := t.inboundService.GetClientTrafficTgBot(tgUserID)
 	if err != nil {
 		logger.Warning(err)
@@ -1145,7 +1147,7 @@ func (t *Tgbot) getClientUsage(chatId int64, tgUserID string, email ...string) {
 	}
 
 	if len(traffics) == 0 {
-		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.askToAddUserId", "TgUserID=="+tgUserID))
+		t.SendMsgToTgbot(chatId, t.I18nBot("tgbot.answers.askToAddUserId", "TgUserID=="+strconv.FormatInt(tgUserID, 10)))
 		return
 	}
 
@@ -1218,8 +1220,8 @@ func (t *Tgbot) clientTelegramUserInfo(chatId int64, email string, messageID ...
 		return
 	}
 	tgId := "None"
-	if len(client.TgID) > 0 {
-		tgId = client.TgID
+	if client.TgID != 0 {
+		tgId = strconv.FormatInt(client.TgID, 10)
 	}
 
 	output := ""
@@ -1452,24 +1454,20 @@ func (t *Tgbot) notifyExhausted() {
 		logger.Warning("Unable to load Inbounds", err)
 	}
 
-	var chatIDsDone []string
+	var chatIDsDone []int64
 	for _, inbound := range inbounds {
 		if inbound.Enable {
 			if len(inbound.ClientStats) > 0 {
 				clients, err := t.inboundService.GetClients(inbound)
 				if err == nil {
 					for _, client := range clients {
-						if client.TgID != "" {
-							chatID, err := strconv.ParseInt(client.TgID, 10, 64)
-							if err != nil {
-								logger.Warning("TgID is not a number: ", client.TgID)
-								continue
-							}
-							if !slices.Contains(chatIDsDone, client.TgID) && !checkAdmin(chatID) {
+						if client.TgID != 0 {
+							chatID := client.TgID
+							if !int64Contains(chatIDsDone, chatID) && !checkAdmin(chatID) {
 								var disabledClients []xray.ClientTraffic
 								var exhaustedClients []xray.ClientTraffic
 								traffics, err := t.inboundService.GetClientTrafficTgBot(client.TgID)
-								if err == nil  && len(traffics) > 0 {
+								if err == nil && len(traffics) > 0 {
 									output := t.I18nBot("tgbot.messages.exhaustedCount", "Type=="+t.I18nBot("tgbot.clients"))
 									for _, traffic := range traffics {
 										if traffic.Enable {
@@ -1498,7 +1496,7 @@ func (t *Tgbot) notifyExhausted() {
 										}
 										t.SendMsgToTgbot(chatID, output)
 									}
-									chatIDsDone = append(chatIDsDone, client.TgID)
+									chatIDsDone = append(chatIDsDone, chatID)
 								}
 							}
 						}
@@ -1509,6 +1507,15 @@ func (t *Tgbot) notifyExhausted() {
 	}
 }
 
+func int64Contains(slice []int64, item int64) bool {
+	for _, s := range slice {
+		if s == item {
+			return true
+		}
+	}
+	return false
+}
+
 func (t *Tgbot) onlineClients(chatId int64, messageID ...int) {
 	if !p.IsRunning() {
 		return