Better login page & css correction (#1368)

* Update custom.css

* Update login.html

* Update inbounds.html

* Update custom.css

* Update custom.css

Dockerfile

@@ -5,6 +5,7 @@ FROM --platform=$BUILDPLATFORM golang:1.21-alpine AS builder
 WORKDIR /app
 ARG TARGETARCH
 ENV CGO_ENABLED=1
+ENV CGO_CFLAGS="-D_LARGEFILE64_SOURCE"
 
 RUN apk --no-cache --update add \
   build-base \

README.md

@@ -23,10 +23,10 @@ bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.
 
 # Install custom version
 
-To install your desired version you can add the version to the end of install command. Example for ver `v2.0.0`:
+To install your desired version you can add the version to the end of install command. Example for ver `v2.0.1`:
 
 ```
-bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.0.0
+bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v2.0.1
 ```
 
 # SSL
@@ -371,6 +371,7 @@ XUI_BIN_FOLDER="bin" XUI_DB_FOLDER="/etc/x-ui" go build main.go
 ![4](./media/4.png)
 ![5](./media/5.png)
 ![6](./media/6.png)
+![7](./media/7.png)
 
 ## Stargazers over time
 

config/version

@@ -1 +1 @@
-2.0.0
+2.0.1

go.mod

@@ -10,13 +10,13 @@ require (
 	github.com/mymmrac/telego v0.28.0
 	github.com/nicksnyder/go-i18n/v2 v2.3.0
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
-	github.com/pelletier/go-toml/v2 v2.1.0
+	github.com/pelletier/go-toml/v2 v2.1.1
 	github.com/robfig/cron/v3 v3.0.1
 	github.com/shirou/gopsutil/v3 v3.23.11
 	github.com/xtls/xray-core v1.8.6
 	go.uber.org/atomic v1.11.0
 	golang.org/x/text v0.14.0
-	google.golang.org/grpc v1.59.0
+	google.golang.org/grpc v1.60.0
 	gorm.io/driver/sqlite v1.5.4
 	gorm.io/gorm v1.25.5
 )

go.sum

@@ -191,8 +191,8 @@ github.com/openzipkin/zipkin-go v0.1.1/go.mod h1:NtoC/o8u3JlF1lSlyPNswIbeQH9bJTm
 github.com/pelletier/go-toml v1.9.5 h1:4yBQzkHv+7BHq2PQUZF3Mx0IYxG7LsP222s7Agd3ve8=
 github.com/pelletier/go-toml v1.9.5/go.mod h1:u1nR/EPcESfeI/szUZKdtJ0xRNbUoANCkoOuaOx1Y+c=
 github.com/pelletier/go-toml/v2 v2.0.1/go.mod h1:r9LEWfGN8R5k0VXJ+0BkIe7MYkRdwZOjgMj2KwnJFUo=
-github.com/pelletier/go-toml/v2 v2.1.0 h1:FnwAJ4oYMvbT/34k9zzHuZNrhlz48GB3/s6at6/MHO4=
-github.com/pelletier/go-toml/v2 v2.1.0/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
+github.com/pelletier/go-toml/v2 v2.1.1 h1:LWAJwfNvjQZCFIDKWYQaM62NcYeYViCmWIwmOStowAI=
+github.com/pelletier/go-toml/v2 v2.1.1/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
 github.com/pires/go-proxyproto v0.7.0 h1:IukmRewDQFWC7kfnb66CSomk2q/seBuilHBYFwyq0Hs=
 github.com/pires/go-proxyproto v0.7.0/go.mod h1:Vz/1JPY/OACxWGQNIRY2BeyDmpoaWmEP40O9LbuiFR4=
 github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
@@ -412,8 +412,8 @@ google.golang.org/grpc v1.14.0/go.mod h1:yo6s7OP7yaDglbqo1J04qKzAhqBH6lvTonzMVmE
 google.golang.org/grpc v1.16.0/go.mod h1:0JHn/cJsOMiMfNA9+DeHDlAU7KAAB5GDlYFpa9MZMio=
 google.golang.org/grpc v1.17.0/go.mod h1:6QZJwpn2B+Zp71q/5VxRsJ6NXXVCE5NRUHRo+f3cWCs=
 google.golang.org/grpc v1.19.0/go.mod h1:mqu4LbDTu4XGKhr4mRzUsmM4RtVoemTSY81AxZiDr8c=
-google.golang.org/grpc v1.59.0 h1:Z5Iec2pjwb+LEOqzpB2MR12/eKFhDPhuqW91O+4bwUk=
-google.golang.org/grpc v1.59.0/go.mod h1:aUPDwccQo6OTjy7Hct4AfBPD1GptF4fyUjIkQ9YtF98=
+google.golang.org/grpc v1.60.0 h1:6FQAR0kM31P6MRdeluor2w2gPaS4SVNrD/DNTxrQ15k=
+google.golang.org/grpc v1.60.0/go.mod h1:OlCHIeLYqSSsLi6i49B5QGdzaMZK9+M7LXN2FKz4eGM=
 google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
 google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
 google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=

sub/subService.go

@@ -876,7 +876,7 @@ func (s *SubService) genRemark(inbound *model.Inbound, email string, extra strin
 		orders['i'] = inbound.Remark
 	}
 	if len(extra) > 0 {
-		orders['e'] = extra
+		orders['o'] = extra
 	}
 
 	var remark []string

web/assets/css/custom.css

@@ -55,7 +55,7 @@ style attribute {
 }
 .ant-table-tbody > tr > td,
 .ant-table-thead > tr > th {
-    padding: 12px 16px;
+    padding: 12px 8px;
     overflow-wrap: break-word;
 }
 .ant-table-thead > tr > th {
@@ -93,11 +93,6 @@ style attribute {
 .ant-table-body {
     overflow-x: auto !important;
 }
-
-tr.ant-table-expanded-row td>.ant-table-wrapper {
-    margin: -12px -16px -13px;
-}
-
 .ant-card-hoverable {
     cursor: auto;
     cursor: pointer;
@@ -137,6 +132,13 @@ tr.ant-table-expanded-row td>.ant-table-wrapper {
         margin: 0.5rem;
         padding: 0.5rem;
     }
+    .ant-modal-body {
+        padding: 10px;
+    }
+    .ant-form-item-label {
+        line-height: 1.5;
+        padding: 8px 0 0;
+    }
 }
 
 .ant-layout-content {
@@ -414,6 +416,10 @@ tr.ant-table-expanded-row td>.ant-table-wrapper {
     background-color: white;
 }
 
+.ant-form-item {
+    margin-bottom: 0;
+}
+
 .ant-setting-textarea {
     margin-top: 1.5rem;
 }
@@ -794,16 +800,16 @@ tr.ant-table-expanded-row td>.ant-table-wrapper {
 
 .has-warning .ant-input,
 .has-warning .ant-input:hover {
-    background-color: #fff6e6;
-    border-color: #ffd98c;
+    background-color: #ffeee1;
+    border-color: #fec093;
 }
 
 .has-warning .ant-input::placeholder {
-    color: #faad14;
+    color: #f37b24;
 }
 
 .has-warning .ant-input:not([disabled]):hover {
-    border-color: #ffd98c;
+    border-color: #fec093;
 }
 
 .dark .has-warning .ant-input,
@@ -846,6 +852,13 @@ tr.ant-table-expanded-row td>.ant-table-wrapper {
     user-select: none;
 }
 
+.ant-calendar-date,
+.ant-calendar-year-panel-year,
+.ant-calendar-decade-panel-decade,
+.ant-calendar-month-panel-month {
+    border-radius: 5px;
+}
+
 .ant-calendar-date:hover {
     background-color: rgb(232 244 242);
 }
@@ -902,7 +915,7 @@ li.ant-select-dropdown-menu-item:empty:after {
 .ant-select-dropdown.ant-select-dropdown--multiple
     .ant-select-dropdown-menu-item-selected:hover
     .ant-select-selected-icon {
-    color: #3c89e8;
+    color: #008771;
 }
 .ant-select-selection:hover,
 .ant-input-number-focused,
@@ -1044,6 +1057,11 @@ li.ant-select-dropdown-menu-item:empty:after {
     overflow: clip;
 }
 
+.ant-modal-body,
+.ant-collapse-content>.ant-collapse-content-box {
+    overflow-x: auto;
+}
+
 .ant-calendar-year-panel-year:hover,
 .ant-calendar-decade-panel-decade:hover,
 .ant-calendar-month-panel-month:hover,
@@ -1076,3 +1094,8 @@ li.ant-select-dropdown-menu-item:empty:after {
 .dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
     background-color: #313f5a;
 }
+
+.ant-popover-inner-content {
+    max-height: 400px;
+    overflow-y: auto;
+}

web/assets/js/model/dbinbound.js

@@ -137,7 +137,7 @@ class DBInbound {
         }
     }
     
-	genInboundLinks() {
+	genInboundLinks(remarkModel) {
         const inbound = this.toInbound();
         return inbound.genInboundLinks(this.remark,remarkModel);
     }

web/assets/js/model/outbound.js

@@ -476,7 +476,7 @@ class Outbound extends CommonClass {
         if(data.length !=2) return null;
         switch(data[0].toLowerCase()){
             case Protocols.VMess:
-                return this.fromVmessLink(JSON.parse(atob(data[1])));
+                return this.fromVmessLink(JSON.parse(Base64.decode(data[1])));
             case Protocols.VLESS:
             case Protocols.Trojan:
             case 'ss':
@@ -493,8 +493,8 @@ class Outbound extends CommonClass {
         if (network === 'tcp') {
             stream.tcp = new TcpStreamSettings(
                 json.type,
-                json.host ? json.host.split(','): [],
-                json.path ? json.path.split(','): []);
+                json.host ?? '',
+                json.path ?? '');
         } else if (network === 'kcp') {
             stream.kcp = new KcpStreamSettings();
             stream.type = json.type;
@@ -505,7 +505,7 @@ class Outbound extends CommonClass {
             stream.network = 'http'
             stream.http = new HttpStreamSettings(
                 json.path,
-                json.host ? json.host.split(',') : []);
+                json.host);
         } else if (network === 'quic') {
             stream.quic = new QuicStreamSettings(
                 json.host ? json.host : 'none',
@@ -570,7 +570,7 @@ class Outbound extends CommonClass {
             let sni=url.searchParams.get('sni') ?? '';
             let sid=url.searchParams.get('sid') ?? '';
             let spx=url.searchParams.get('spx') ?? '';
-            stream.tls = new RealityStreamSettings(pbk, fp, sni, sid, spx);
+            stream.reality  = new RealityStreamSettings(pbk, fp, sni, sid, spx);
         }
 
         let data = link.split('?');

web/assets/js/model/xray.js

@@ -477,7 +477,7 @@ class TlsStreamSettings extends XrayCommonClass {
                 alpn=[ALPN_OPTION.HTTP1,ALPN_OPTION.H2],
                 settings=new TlsStreamSettings.Settings()) {
         super();
-        this.server = serverName;
+        this.sni = serverName;
         this.minVersion = minVersion;
         this.maxVersion = maxVersion;
         this.cipherSuites = cipherSuites;
@@ -519,7 +519,7 @@ class TlsStreamSettings extends XrayCommonClass {
 
     toJson() {
         return {
-            serverName: this.server,
+            serverName: this.sni,
             minVersion: this.minVersion,
             maxVersion: this.maxVersion,
             cipherSuites: this.cipherSuites,
@@ -602,7 +602,7 @@ class XtlsStreamSettings extends XrayCommonClass {
                 alpn=[ALPN_OPTION.H2,ALPN_OPTION.HTTP1],
                 settings=new XtlsStreamSettings.Settings()) {
         super();
-        this.server = serverName;
+        this.sni = serverName;
         this.certs = certificates;
         this.alpn = alpn;
         this.settings = settings;
@@ -636,7 +636,7 @@ class XtlsStreamSettings extends XrayCommonClass {
 
     toJson() {
         return {
-            serverName: this.server,
+            serverName: this.sni,
             certificates: XtlsStreamSettings.toJsonArray(this.certs),
             alpn: this.alpn,
             settings: this.settings,
@@ -1080,8 +1080,8 @@ class Inbound extends XrayCommonClass {
     }
 
     get serverName() {
-        if (this.stream.isTls) return this.stream.tls.server;
-        if (this.stream.isXtls) return this.stream.xtls.server;
+        if (this.stream.isTls) return this.stream.tls.sni;
+        if (this.stream.isXtls) return this.stream.xtls.sni;
         if (this.stream.isReality) return this.stream.reality.serverNames;
         return "";
     }
@@ -1233,7 +1233,7 @@ class Inbound extends XrayCommonClass {
 
         if (security === 'tls') {
             if (!ObjectUtil.isEmpty(this.stream.tls.sni)){
-                obj.sni = this.stream.tls.server;
+                obj.sni = this.stream.tls.sni;
             }
             if (!ObjectUtil.isEmpty(this.stream.tls.settings.fingerprint)){
                 obj.fp = this.stream.tls.settings.fingerprint;
@@ -1311,8 +1311,8 @@ class Inbound extends XrayCommonClass {
                 if(this.stream.tls.settings.allowInsecure){
                     params.set("allowInsecure", "1");
                 }
-                if (!ObjectUtil.isEmpty(this.stream.tls.server)){
-                    params.set("sni", this.stream.tls.server);
+                if (!ObjectUtil.isEmpty(this.stream.tls.sni)){
+                    params.set("sni", this.stream.tls.sni);
                 }
                 if (type == "tcp" && !ObjectUtil.isEmpty(flow)) {
                     params.set("flow", flow);
@@ -1326,8 +1326,8 @@ class Inbound extends XrayCommonClass {
             if(this.stream.xtls.settings.allowInsecure){
                 params.set("allowInsecure", "1");
             }
-            if (!ObjectUtil.isEmpty(this.stream.xtls.server)){
-                params.set("sni", this.stream.xtls.server);
+            if (!ObjectUtil.isEmpty(this.stream.xtls.sni)){
+                params.set("sni", this.stream.xtls.sni);
 			}
             params.set("flow", flow);
         }
@@ -1425,8 +1425,8 @@ class Inbound extends XrayCommonClass {
                 if(this.stream.tls.settings.allowInsecure){
                     params.set("allowInsecure", "1");
                 }
-                if (!ObjectUtil.isEmpty(this.stream.tls.server)){
-                    params.set("sni", this.stream.tls.server);
+                if (!ObjectUtil.isEmpty(this.stream.tls.sni)){
+                    params.set("sni", this.stream.tls.sni);
                 }
             }
         }
@@ -1506,8 +1506,8 @@ class Inbound extends XrayCommonClass {
                 if(this.stream.tls.settings.allowInsecure){
                     params.set("allowInsecure", "1");
                 }
-                if (!ObjectUtil.isEmpty(this.stream.tls.server)){
-                    params.set("sni", this.stream.tls.server);
+                if (!ObjectUtil.isEmpty(this.stream.tls.sni)){
+                    params.set("sni", this.stream.tls.sni);
                 }
             }
         }
@@ -1533,8 +1533,8 @@ class Inbound extends XrayCommonClass {
             if(this.stream.xtls.settings.allowInsecure){
                 params.set("allowInsecure", "1");
             }
-            if (this.stream.xtls.settings.serverName !== ''){
-                params.set("sni", this.stream.xtls.settings.serverName);
+            if (!ObjectUtil.isEmpty(this.stream.xtls.sni)){
+                params.set("sni", this.stream.xtls.sni);
 			}
             params.set("flow", flow);
         }
@@ -1601,7 +1601,7 @@ class Inbound extends XrayCommonClass {
         if(this.clients){
            let links = [];
            this.clients.forEach((client) => {
-                genAllLinks(remark,remarkModel,client).forEach(l => {
+                this.genAllLinks(remark,remarkModel,client).forEach(l => {
                     links.push(l.link);
                 })
             });
@@ -1797,8 +1797,7 @@ Inbound.VLESSSettings = class extends Inbound.Settings {
             Protocols.VLESS,
             json.clients.map(client => Inbound.VLESSSettings.VLESS.fromJson(client)),
             json.decryption || 'none',
-            json.fallbacks.map(fallback => Inbound.VLESSSettings.Fallback.fromJson(fallback)),
-        );
+            Inbound.VLESSSettings.Fallback.fromJson(json.fallbacks),);
     }
 
     toJson() {
@@ -1925,8 +1924,7 @@ Inbound.TrojanSettings = class extends Inbound.Settings {
         return new Inbound.TrojanSettings(
             Protocols.TROJAN,
             json.clients.map(client => Inbound.TrojanSettings.Trojan.fromJson(client)),
-            json.fallbacks.map(fallback => Inbound.TrojanSettings.Fallback.fromJson(fallback))
-            );
+            Inbound.TrojanSettings.Fallback.fromJson(json.fallbacks),);
         }
 
     toJson() {

web/html/common/qrcode_modal.html

@@ -72,7 +72,7 @@
                 });
             },
             genSubLink(subID) {
-                return app.subSettings.subURI+subID+'?name='+subID;
+                return app.subSettings.subURI+subID;
             }
         },
         updated() {

web/html/login.html

@@ -27,6 +27,7 @@
     text-align: center;
     align-items: center;
     justify-content: center;
+    width: 100%;
   }
   .title {
     font-size: 32px;
@@ -55,35 +56,26 @@
       opacity: 1;
     }
   }
-  @keyframes wave {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
   .wave {
     opacity: 0.6;
     position: absolute;
-    bottom: 40%;
-    left: 50%;
+    top: 80%;
+    left: 60%;
     width: 6000px;
     height: 6000px;
     background-color: rgba(0, 135, 113, 0.08);
     margin-left: -3000px;
-    transform-origin: 50% 48%;
-    border-radius: 46%;
-    animation: wave 72s infinite linear;
+    transform-origin: 50% 50%;
     pointer-events: none;
+    rotate: 115deg;
   }
   .wave2 {
-    animation: wave 88s infinite linear;
-    opacity: 0.3;
+    opacity: 0.4;
+    rotate: 105deg;
   }
   .wave3 {
-    animation: wave 80s infinite linear;
-    opacity: 0.1;
+    opacity: 0.2;
+    rotate: 62deg;
   }
   .under {
     background-color: #dbf5ed;
@@ -100,12 +92,11 @@
   .dark h1 {
     color: rgba(255, 255, 255, 0.85);
   }
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+
   .ant-btn-primary-login {
-    color: #008771;
-    background-color: #eef9f7;
-    border-color: #89d9cc;
-    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-    box-shadow: none;
     width: 100%;
   }
   .ant-btn-primary-login:focus,
@@ -156,10 +147,10 @@
     background-origin: border-box;
     background-clip: padding-box, border-box;
     background-size: 300%;
-    animation: wave-btn-tara 4s ease infinite;
     transition: all 0.5s ease;
     width: 100%;
   }
+  .dark .wave-btn-bg:hover {animation: wave-btn-tara 4s ease infinite;}
   .dark .wave-btn-bg-cl {
     background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
       radial-gradient(circle at left top, #006655, #009980, #006655) !important;

web/html/xui/client_bulk_modal.html

@@ -2,206 +2,123 @@
 <a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title"
     @ok="clientsBulkModal.ok" :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false"
     :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-    <a-form layout="inline">
-        <table width="100%" class="ant-table-tbody">
-            <tr>
-                <td>{{ i18n "pages.client.method" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option :value="0">Random</a-select-option>
-                            <a-select-option :value="1">Random+Prefix</a-select-option>
-                            <a-select-option :value="2">Random+Prefix+Num</a-select-option>
-                            <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
-                            <a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod>1">
-                <td>{{ i18n "pages.client.first" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod>1">
-                <td>{{ i18n "pages.client.last" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.lastNum"
-                            :min="clientsBulkModal.firstNum"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod>0">
-                <td>{{ i18n "pages.client.prefix" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="clientsBulkModal.emailPrefix" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod>2">
-                <td>{{ i18n "pages.client.postfix" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="clientsBulkModal.emailPostfix" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.emailMethod < 2">
-                <td>{{ i18n "pages.client.clientCount" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.inbound.canEnableTlsFlow()">
-                <td>Flow</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="clientsBulkModal.flow" style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                            <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="app.subSettings.enable">
-                <td>Subscription
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                        </template>
-                        <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
-                    </a-tooltip>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="clientsBulkModal.subId" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="app.tgBotEnable">
-                <td>Telegram ID
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="clientsBulkModal.tgId" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label>
-                        <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                        <a-tooltip>
-                            <template slot="title">
-                                <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                            </template>
-                            <a-icon type="question-circle" theme="filled"></a-icon>
-                        </a-tooltip>
-                    </label>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.limitIp" min="0"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td v-if="clientsBulkModal.inbound.xtls">
-                    <label>Flow</label>
-                </td>
-                <td v-if="clientsBulkModal.inbound.xtls">
-                    <a-form-item>
-                        <a-select v-model="clientsBulkModal.flow" style="width: 200px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option value="">{{ i18n "none" }}</a-select-option>
-                            <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                    <a-tooltip>
-                        <template slot="title">
-                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>{{ i18n "pages.client.delayedStart" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-switch v-model="clientsBulkModal.delayedStart"
-                            @click="clientsBulkModal.expiryTime=0"></a-switch>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.delayedStart">
-                <td>{{ i18n "pages.client.expireDays" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-else>
-                <td>
-                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                            :dropdown-class-name="themeSwitcher.currentTheme" v-model="clientsBulkModal.expiryTime"
-                            style="width: 250px;"></a-date-picker>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr v-if="clientsBulkModal.expiryTime != 0">
-                <td>
-                    <span>{{ i18n "pages.client.renew" }}</span>
-                    <a-tooltip>
-                        <template slot="title">
-                            <span>{{ i18n "pages.client.renewDesc" }}</span>
-                        </template>
-                        <a-icon type="question-circle" theme="filled"></a-icon>
-                    </a-tooltip>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model.number="clientsBulkModal.reset" :min="0"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-        </table>
+    <a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "pages.client.method" }}'>
+            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid"
+                :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option :value="0">Random</a-select-option>
+                <a-select-option :value="1">Random+Prefix</a-select-option>
+                <a-select-option :value="2">Random+Prefix+Num</a-select-option>
+                <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
+                <a-select-option :value="4">Prefix+Num+Postfix</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.first" }}' v-if="clientsBulkModal.emailMethod>1">
+            <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.last" }}' v-if="clientsBulkModal.emailMethod>1">
+            <a-input-number v-model="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.prefix" }}' v-if="clientsBulkModal.emailMethod>0">
+            <a-input v-model="clientsBulkModal.emailPrefix"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.postfix" }}' v-if="clientsBulkModal.emailMethod>2">
+            <a-input v-model="clientsBulkModal.emailPostfix"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.clientCount" }}' v-if="clientsBulkModal.emailMethod < 2">
+            <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
+        </a-form-item>
+        <a-form-item label='Flow' v-if="clientsBulkModal.inbound.canEnableTlsFlow()">
+            <a-select v-model="clientsBulkModal.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+                <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Flow' v-if="clientsBulkModal.inbound.xtls">
+            <a-select v-model="clientsBulkModal.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+                <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item v-if="app.subSettings.enable">
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+                    </template>
+                    Subscription
+                    <a-icon @click="clientsBulkModal.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input v-model.trim="clientsBulkModal.subId"></a-input>
+        </a-form-item>
+        <a-form-item v-if="app.tgBotEnable">
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+                    </template>
+                    Telegram ID
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input v-model.trim="clientsBulkModal.tgId"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
+                    </template>
+                    <span>{{ i18n "pages.inbounds.IPLimit" }} </span>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input-number v-model="clientsBulkModal.limitIp" min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                    </template>
+                    {{ i18n "pages.inbounds.totalFlow" }} (GB)
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+            <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientsBulkModal.delayedStart">
+            <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item v-else>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                    </template>
+                    {{ i18n "pages.inbounds.expireDate" }}
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                :dropdown-class-name="themeSwitcher.currentTheme" v-model="clientsBulkModal.expiryTime"></a-date-picker>
+        </a-form-item>
+        <a-form-item v-if="clientsBulkModal.expiryTime != 0">
+            <template slot="label">
+                <span>{{ i18n "pages.client.renew" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.client.renewDesc" }}</span>
+                    </template>
+                    <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </template>
+            <a-input-number v-model.number="clientsBulkModal.reset" :min="0"></a-input-number>
+        </a-form-item>
     </a-form>
 </a-modal>
 <script>

web/html/xui/form/client.html

@@ -1,223 +1,168 @@
 {{define "form/client"}}
-<a-form layout="inline" v-if="client">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.inbounds.enable" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="client.enable"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span>{{ i18n "pages.inbounds.email" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
-                    </template>
-                    <a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="client.email" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
-            <td>password
-                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-                <a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)" type="sync"> </a-icon>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="client.password" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
-            <td>ID <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon></td>
-            <td>
-                <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
-            </td>
-        </tr>
-        <tr v-if="client.email && app.subSettings.enable">
-            <td>Subscription <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon></td>
-            <td>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
-                    </template>
-                </a-tooltip>
-                <a-form-item>
-                    <a-input v-model.trim="client.subId" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="client.email && app.tgBotEnable">
-            <td>Telegram ID
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="client.tgId" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model="client.limitIp" min="0"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="client.email && client.limitIp > 0 && isEdit">
-            <td>
-                <span>{{ i18n "pages.inbounds.IPLimitlog" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.IPLimitlogDesc" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
-                    </template>
-                    <span style="color: #FF4D4F">
-                        <a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
-                    </span>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form layout="block">
-                    <a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email)"
-                        placeholder="Click To Get IPs" :auto-size="{ minRows: 5, maxRows: 10 }">
-                    </a-textarea>
-                </a-form>
-            </td>
-        </tr>
-        <tr v-if="inbound.xtls">
-            <td>Flow</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="client.flow" style="width: 200px"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="">{{ i18n "none" }}</a-select-option>
-                        <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-else-if="inbound.canEnableTlsFlow()">
-            <td>Flow</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="client.flow" style="width: 200px"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                        <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
-                </a-form-item>
-                <template v-if="isEdit && clientStats">
-                    <br>
-                    <span> {{ i18n "usage" }}:</span>
-                    <a-tag :color="clientUsageColor(clientStats, app.trafficDiff)">
-                        [[ sizeFormat(clientStats.up) ]] /
-                        [[ sizeFormat(clientStats.down) ]]
-                        ([[ sizeFormat(clientStats.up + clientStats.down) ]])
-                    </a-tag>
-                    <a-tooltip>
-                        <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-                        <a-icon type="retweet"
-                            @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
-                            v-if="client.email.length > 0"></a-icon>
-                    </a-tooltip>
+<a-form layout="horizontal" v-if="client" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
+        <a-switch v-model="client.enable"></a-switch>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                 </template>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.client.delayedStart" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="delayedStart">
-            <td>{{ i18n "pages.client.expireDays" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model="delayedExpireDays" :min="0"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-else>
-            <td>
-                <span>{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                        :dropdown-class-name="themeSwitcher.currentTheme" v-model="client._expiryTime"
-                        style="width: 170px;"></a-date-picker>
-                    <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="client.expiryTime != 0">
-            <td>
-                <span>{{ i18n "pages.client.renew" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.client.renewDesc" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="client.reset" :min="0"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+                {{ i18n "pages.inbounds.email" }}
+                <a-icon type="sync" @click="client.email = RandomUtil.randomLowerAndNum(9)"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.email"></a-input>
+    </a-form-item>
+    <a-form-item v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.client.renew" }}</span>
+                </template>
+                {{ i18n "password" }}
+                <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS"@click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
+                <a-icon v-if="inbound.protocol === Protocols.TROJAN" @click="client.password = RandomUtil.randomSeq(10)"type="sync"> </a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.password"></a-input>
+    </a-form-item>
+    <a-form-item v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.client.renew" }}</span>
+                </template>
+                ID <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.id"></a-input>
+    </a-form-item>
+    <a-form-item v-if="client.email && app.subSettings.enable">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+                </template>
+                Subscription
+                <a-icon @click="client.subId = RandomUtil.randomLowerAndNum(16)" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.subId"></a-input>
+    </a-form-item>
+    <a-form-item v-if="client.email && app.tgBotEnable">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+                </template>
+                Telegram ID
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="client.tgId"></a-input>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.IPLimitDesc"}}</span>
+                </template>
+                    <span>{{ i18n "pages.inbounds.IPLimit"}} </span>
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model="client.limitIp" min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item v-if="client.email && client.limitIp > 0 && isEdit">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.IPLimitlogDesc" }}</span>
+                </template>
+                    <span>{{ i18n "pages.inbounds.IPLimitlog" }}</span>
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-tooltip>
+            <template slot="title">
+                <span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
+            </template>
+            <span style="color: #FF4D4F">
+                <a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
+            </span>
+        </a-tooltip>
+        <a-form layout="block">
+            <a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email)" placeholder="Click To Get IPs"
+                :auto-size="{ minRows: 5, maxRows: 10 }">
+            </a-textarea>
+        </a-form>
+    </a-form-item>
+    <a-form-item v-if="inbound.xtls" label='Flow'>
+        <a-select v-model="client.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+            <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item v-if="inbound.canEnableTlsFlow()" label='Flow'>
+        <a-select v-model="client.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+            <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                </template>
+                {{ i18n "pages.inbounds.totalFlow" }}(GB)
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model="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>
+        <a-tooltip>
+            <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
+            <a-icon type="retweet"
+                @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
+                v-if="client.email.length > 0"></a-icon>
+        </a-tooltip>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+        <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+    </a-form-item>
+    <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
+        <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item v-else>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</template>
+                {{ i18n "pages.inbounds.expireDate" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+            :dropdown-class-name="themeSwitcher.currentTheme" v-model="client._expiryTime"></a-date-picker>
+        <a-tag color="red" v-if="isEdit && isExpiry">Expired</a-tag>
+    </a-form-item>
+    <a-form-item v-if="client.expiryTime != 0">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">{{ i18n "pages.client.renewDesc" }}</template>
+                {{ i18n "pages.client.renew" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model.number="client.reset" :min="0"></a-input-number>
+    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/inbound.html

@@ -1,93 +1,64 @@
 {{define "form/inbound"}}
 <!-- base -->
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "enable" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="dbInbound.enable"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "remark" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="dbInbound.remark" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "protocol" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.protocol" style="width: 250px;" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "monitor" }}
-                <a-tooltip>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "enable" }}'>
+        <a-switch v-model="dbInbound.enable"></a-switch>
+    </a-form-item>
+    <a-form-item label='{{ i18n "remark" }}'>
+        <a-input v-model.trim="dbInbound.remark"></a-input>
+    </a-form-item>
+
+    <a-form-item label='{{ i18n "protocol" }}'>
+        <a-select v-model="inbound.protocol" :disabled="isEdit" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
+        </a-select>
+    </a-form-item>
+
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
                 <template slot="title">
                     <span>{{ i18n "pages.inbounds.monitorDesc" }}</span>
                 </template>
-                <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.listen" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.port" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.port"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span>{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model="dbInbound.totalGB" :min="0"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>
-                <span>{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                   :dropdown-class-name="themeSwitcher.currentTheme"
-                                   v-model="dbInbound._expiryTime" style="width: 250px;"></a-date-picker>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
-</a-form>
+                {{ i18n "monitor" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.listen"></a-input>
+    </a-form-item>
 
+    <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
+        <a-input-number v-model.number="inbound.port"></a-input-number>
+    </a-form-item>
+
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                </template>
+                {{ i18n "pages.inbounds.totalFlow" }}(GB)
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input-number v-model="dbInbound.totalGB" :min="0"></a-input-number>
+    </a-form-item>
+
+    <a-form-item>
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                </template>
+                {{ i18n "pages.inbounds.expireDate" }}
+                <a-icon type="question-circle"></a-icon>
+            </a-tooltip>
+        </template>
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                :dropdown-class-name="themeSwitcher.currentTheme"
+                v-model="dbInbound._expiryTime"></a-date-picker>
+        </a-form-item>
+</a-form>
 
 <!-- vmess settings -->
 <template v-if="inbound.protocol === Protocols.VMESS">

web/html/xui/form/outbound.html

@@ -2,535 +2,298 @@
 <!-- base -->
 <a-tabs :active-key="outModal.activeKey"  style="padding: 0; background-color: transparent;" @change="(activeKey) => {outModal.toggleJson(activeKey == '2'); }">
 <a-tab-pane key="1" tab="Form">
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "protocol" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.protocol" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.xray.outbound.tag" }}</td>
-            <td>
-                <a-form-item has-feedback :validate-status="outModal.duplicateTag? 'warning' : 'success'">
-                    <a-input v-model.trim="outbound.tag" style="width: 250px" @change="outModal.check()" placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
-                </a-form-item>
-            </td>
-        </tr>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "protocol" }}'>
+            <a-select v-model="outbound.protocol" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x,y in Protocols" :value="x">[[ y ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}' has-feedback :validate-status="outModal.duplicateTag? 'warning' : 'success'">
+            <a-input v-model.trim="outbound.tag" @change="outModal.check()" placeholder='{{ i18n "pages.xray.outbound.tagDesc" }}'></a-input>
+        </a-form-item>
 
 <!-- freedom settings-->
 <template v-if="outbound.protocol === Protocols.Freedom">
-        <tr>
-            <td>Strategy</td>
-            <td>
-                <a-form-item>
-                    <a-select
-                    v-model="outbound.settings.domainStrategy"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="s in outboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Fragment</td>
-            <td>
-                <a-form-item>
-                    <a-switch
-                        :checked="Object.keys(outbound.settings.fragment).length >0"
-                        @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
-                    </a-switch>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='Strategy'>
+            <a-select
+            v-model="outbound.settings.domainStrategy"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="s in outboundDomainStrategies" :value="s">[[ s ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Fragment'>
+            <a-switch
+                :checked="Object.keys(outbound.settings.fragment).length >0"
+                @change="checked => outbound.settings.fragment = checked ? new Outbound.FreedomSettings.Fragment() : {}">
+            </a-switch>
+        </a-form-item>
     <template v-if="Object.keys(outbound.settings.fragment).length >0">
-        <tr>
-            <td>Packets</td>
-            <td>
-                <a-form-item>
-                    <a-select
-                    v-model="outbound.settings.fragment.packets"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Length</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.settings.fragment.length" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Interval</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.settings.fragment.interval" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='Packets'>
+            <a-select
+            v-model="outbound.settings.fragment.packets"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="s in ['1-3','tlshello']" :value="s">[[ s ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Length'>
+            <a-input v-model.trim="outbound.settings.fragment.length"></a-input>
+        </a-form-item>
+        <a-form-item label='Interval'>
+            <a-input v-model.trim="outbound.settings.fragment.interval"></a-input>
+        </a-form-item>
     </template>
 </template>
 
 <!-- blackhole settings -->
 <template v-if="outbound.protocol === Protocols.Blackhole">
-        <tr>
-            <td>Response Type</td>
-            <td>
-                <a-form-item>
-                    <a-select
-                    v-model="outbound.settings.type"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="s in ['', 'none','http']" :value="s">[[ s ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='Response Type'>
+            <a-select
+            v-model="outbound.settings.type"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="s in ['', 'none','http']" :value="s">[[ s ]]</a-select-option>
+            </a-select>
+        </a-form-item>
 </template>
 
 <!-- dns settings -->
 <template v-if="outbound.protocol === Protocols.DNS">
-        <tr>
-            <td>{{ i18n "pages.inbounds.network" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select
-                    v-model="outbound.settings.network"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="s in ['udp','tcp']" :value="s">[[ s ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
+            <a-select
+            v-model="outbound.settings.network"
+            :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="s in ['udp','tcp']" :value="s">[[ s ]]</a-select-option>
+            </a-select>
+        </a-form-item>
 </template>
 
 <!-- Address + Port -->
 <template v-if="outbound.hasAddressPort()">
-        <tr>
-            <td>{{ i18n "pages.inbounds.address" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.settings.address" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.port" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="outbound.settings.port" :min="1" :max="65532"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "pages.inbounds.address" }}'>
+            <a-input v-model.trim="outbound.settings.address"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
+            <a-input-number v-model.number="outbound.settings.port" :min="1" :max="65532"></a-input-number>
+        </a-form-item>
 </template>
 
 <!-- Vnext (vless/vmess) settings -->
 <template v-if="[Protocols.VMess, Protocols.VLESS].includes(outbound.protocol)">
-        <tr>
-            <td>ID</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.settings.id" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='ID'>
+            <a-input v-model.trim="outbound.settings.id"></a-input>
+        </a-form-item>
     <!-- vless settings -->
     <template v-if="outbound.canEnableTlsFlow()">
-        <tr>
-            <td>Flow</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.settings.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
-                        <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='Flow'>
+            <a-select v-model="outbound.settings.flow" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
+                <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
     </template>
 </template>
 
 <!-- Servers (trojan/shadowsocks/socks/http) settings -->
 <template v-if="outbound.hasServers()">
-        <tr v-if="outbound.hasUsername()">
-            <td>{{ i18n "username" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.settings.user" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.settings.password" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
+    <template v-if="outbound.hasUsername()">
+        <a-form-item label='{{ i18n "username" }}'>
+            <a-input v-model.trim="outbound.settings.user"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "password" }}'>
+            <a-input v-model.trim="outbound.settings.password"></a-input>
+        </a-form-item>
+    </template>
     <!-- shadowsocks -->
     <template v-if="outbound.protocol === Protocols.Shadowsocks">
-        <tr>
-            <td>{{ i18n "encryption" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.settings.method" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>UDP over TCP</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="outbound.settings.uot"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "encryption" }}'>
+            <a-select v-model="outbound.settings.method" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='UDP over TCP'>
+            <a-switch v-model="outbound.settings.uot"></a-switch>
+        </a-form-item>
     </template>
 </template>
 
 <!-- stream settings -->
 <template v-if="outbound.canEnableStream()">
-        <tr>
-            <td>{{ i18n "transmission" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
-                    style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="tcp">TCP</a-select-option>
-                        <a-select-option value="kcp">KCP</a-select-option>
-                        <a-select-option value="ws">WebSocket</a-select-option>
-                        <a-select-option value="http">HTTP2</a-select-option>
-                        <a-select-option value="quic">QUIC</a-select-option>
-                        <a-select-option value="grpc">gRPC</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "transmission" }}'>
+            <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
+                    :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="tcp">TCP</a-select-option>
+                <a-select-option value="kcp">KCP</a-select-option>
+                <a-select-option value="ws">WS</a-select-option>
+                <a-select-option value="http">HTTP2</a-select-option>
+                <a-select-option value="quic">QUIC</a-select-option>
+                <a-select-option value="grpc">gRPC</a-select-option>
+            </a-select>
+        </a-form-item>
     <template v-if="outbound.stream.network === 'tcp'">
-        <tr>
-            <td>http {{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch
-                            :checked="outbound.stream.tcp.type === 'http'"
-                            @change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'">
-                    </a-switch>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='HTTP {{ i18n "camouflage" }}'>
+            <a-switch
+                :checked="outbound.stream.tcp.type === 'http'"
+                @change="checked => outbound.stream.tcp.type = checked ? 'http' : 'none'">
+            </a-switch>
+        </a-form-item>
         <template v-if="outbound.stream.tcp.type == 'http'">
-        <tr>
-            <td>{{ i18n "host" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input style="width: 250px;" v-model.trim="outbound.stream.tcp.host"></a-input>
-                </a-form-item> 
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "path" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input style="width: 250px;" v-model.trim="outbound.stream.tcp.path"></a-input>
-                </a-form-item> 
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "host" }}'>
+            <a-input v-model.trim="outbound.stream.tcp.host"></a-input>
+        </a-form-item> 
+        <a-form-item label='{{ i18n "path" }}'>
+            <a-input v-model.trim="outbound.stream.tcp.path"></a-input>
+        </a-form-item> 
         </template>
     </template>
     
     <!-- kcp -->
     <template v-if="outbound.stream.network === 'kcp'">
-        <tr>
-            <td>{{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.stream.kcp.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">none (not camouflage)</a-select-option>
-                        <a-select-option value="srtp">srtp (video call)</a-select-option>
-                        <a-select-option value="utp">utp (BT download)</a-select-option>
-                        <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
-                        <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
-                        <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model="outbound.stream.kcp.seed" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>mtu</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="outbound.stream.kcp.mtu"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>tti (ms)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="outbound.stream.kcp.tti"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>uplink capacity (MB/S)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="outbound.stream.kcp.upCap"></a-input-number>
-                </a-form-item> 
-            </td>
-        </tr>
-        <tr>
-            <td>downlink capacity (MB/S)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="outbound.stream.kcp.downCap"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>congestion</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="outbound.stream.kcp.congestion"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>read buffer size (MB)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="outbound.stream.kcp.readBuffer"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>write buffer size (MB)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="outbound.stream.kcp.writeBuffer"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "camouflage" }}'>
+            <a-select v-model="outbound.stream.kcp.type" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="none">none (not camouflage)</a-select-option>
+                <a-select-option value="srtp">srtp (video call)</a-select-option>
+                <a-select-option value="utp">utp (BT download)</a-select-option>
+                <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+                <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
+                <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "password" }}'>
+            <a-input v-model="outbound.stream.kcp.seed"></a-input>
+        </a-form-item>
+        <a-form-item label='mtu'>
+            <a-input-number v-model.number="outbound.stream.kcp.mtu"></a-input-number>
+        </a-form-item>
+        <a-form-item label='tti (ms)'>
+            <a-input-number v-model.number="outbound.stream.kcp.tti"></a-input-number>
+        </a-form-item>
+        <a-form-item label='uplink capacity (MB/S)'>
+            <a-input-number v-model.number="outbound.stream.kcp.upCap"></a-input-number>
+        </a-form-item> 
+        <a-form-item label='downlink capacity (MB/S)'>
+            <a-input-number v-model.number="outbound.stream.kcp.downCap"></a-input-number>
+        </a-form-item>
+        <a-form-item label='congestion'>
+            <a-switch v-model="outbound.stream.kcp.congestion"></a-switch>
+        </a-form-item>
+        <a-form-item label='read buffer size (MB)'>
+            <a-input-number v-model.number="outbound.stream.kcp.readBuffer"></a-input-number>
+        </a-form-item>
+        <a-form-item label='write buffer size (MB)'>
+            <a-input-number v-model.number="outbound.stream.kcp.writeBuffer"></a-input-number>
+        </a-form-item>
     </template>
     
     <!-- ws -->
     <template v-if="outbound.stream.network === 'ws'">
-        <tr>
-            <td>{{ i18n "host" }}</td>
-            <td><a-form-item><a-input style="width: 250px" v-model="outbound.stream.ws.host"></a-input></a-form-item></td>
-        </tr>
-        <tr>
-            <td>{{ i18n "path" }}</td>
-            <td><a-form-item><a-input style="width: 250px;" v-model.trim="outbound.stream.ws.path"></a-input></a-form-item></td>
-        </tr>
+        <a-form-item label='{{ i18n "host" }}'>
+            <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>
     </template>
     
     <!-- http -->
     <template v-if="outbound.stream.network === 'http'">
-        <tr>
-            <td>{{ i18n "host" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.stream.http.host" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "path" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.stream.http.path" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "host" }}'>
+            <a-input v-model.trim="outbound.stream.http.host"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "path" }}'>
+            <a-input v-model.trim="outbound.stream.http.path"></a-input>
+        </a-form-item>
     </template>
     
     <!-- quic -->
     <template v-if="outbound.stream.network === 'quic'">
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.quic.encryption" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.stream.quic.security" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">none</a-select-option>
-                        <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
-                        <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.stream.quic.key" style="width: 250px;"></a-input>
-                </a-form-item> 
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="outbound.stream.quic.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">none (not camouflage)</a-select-option>
-                        <a-select-option value="srtp">srtp (video call)</a-select-option>
-                        <a-select-option value="utp">utp (BT download)</a-select-option>
-                        <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
-                        <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
-                        <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
+            <a-select v-model="outbound.stream.quic.security" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="none">none</a-select-option>
+                <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
+                <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "password" }}'>
+            <a-input v-model.trim="outbound.stream.quic.key"></a-input>
+        </a-form-item> 
+        <a-form-item label='{{ i18n "camouflage" }}'>
+            <a-select v-model="outbound.stream.quic.type" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="none">none (not camouflage)</a-select-option>
+                <a-select-option value="srtp">srtp (video call)</a-select-option>
+                <a-select-option value="utp">utp (BT download)</a-select-option>
+                <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+                <a-select-option value="dtls">dtls (DTLS 1.2 packages)</a-select-option>
+                <a-select-option value="wireguard">wireguard (wireguard packages)</a-select-option>
+            </a-select>
+        </a-form-item>
     </template>
     
     <!-- grpc -->
     <template v-if="outbound.stream.network === 'grpc'">
-        <tr>
-            <td>serviceName</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="outbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>MultiMode</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="outbound.stream.grpc.multiMode"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='serviceName'>
+            <a-input v-model.trim="outbound.stream.grpc.serviceName"></a-input>
+        </a-form-item>
+        <a-form-item label='MultiMode'>
+            <a-switch v-model="outbound.stream.grpc.multiMode"></a-switch>
+        </a-form-item>
     </template>
 </template>
 
 <!-- tls settings -->
 <template v-if="outbound.canEnableTls()">
-        <tr>
-            <td>{{ i18n "security" }}</td>
-            <td>
-                <a-form-item>
-                    <a-radio-group v-model="outbound.stream.security" button-style="solid">
-                        <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
-                        <a-radio-button value="tls">TLS</a-radio-button>
-                        <a-radio-button v-if="outbound.canEnableReality()" value="reality">Reality</a-radio-button>
-                    </a-radio-group>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "security" }}'>
+            <a-radio-group v-model="outbound.stream.security" button-style="solid">
+                <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
+                <a-radio-button value="tls">TLS</a-radio-button>
+                <a-radio-button v-if="outbound.canEnableReality()" value="reality">Reality</a-radio-button>
+            </a-radio-group>
+        </a-form-item>
         <template v-if="outbound.stream.isTls">
-            <tr>
-                <td>SNI</td>
-                <td>
-                    <a-form-item placeholder="Server Name Indication">
-                        <a-input v-model.trim="outbound.stream.tls.serverName" style="width: 250px"></a-input>
-                    </a-form-item>                
-                </td>
-            </tr>
-            <tr>
-                <td>uTLS</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="outbound.stream.tls.fingerprint"
-                                    style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option value=''>None</a-select-option>
-                            <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>ALPN</td>
-                <td>
-                    <a-form-item>
-                        <a-select
-                            mode="multiple"
-                            style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme"
-                            v-model="outbound.stream.tls.alpn">
-                            <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Allow insecure</td>
-                <td>
-                    <a-form-item>
-                        <a-switch v-model="outbound.stream.tls.allowInsecure"></a-switch>
-                    </a-form-item>
-                </td>
-            </tr>
+            <a-form-item label="SNI" placeholder="Server Name Indication">
+                <a-input v-model.trim="outbound.stream.tls.serverName"></a-input>
+            </a-form-item>
+            <a-form-item label="uTLS">
+                <a-select v-model="outbound.stream.tls.fingerprint"
+                            :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option value=''>None</a-select-option>
+                    <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item label="ALPN">
+                <a-select
+                    mode="multiple"
+                   
+                    :dropdown-class-name="themeSwitcher.currentTheme"
+                    v-model="outbound.stream.tls.alpn">
+                    <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item label="Allow insecure">
+                <a-switch v-model="outbound.stream.tls.allowInsecure"></a-switch>
+            </a-form-item>
         </template>
         
         <!-- reality settings -->
         <template v-if="outbound.stream.isReality">
-                <tr>
-                    <td>{{ i18n "domainName" }}</td>
-                    <td>
-                        <a-form-item>
-                            <a-input v-model.trim="outbound.stream.reality.serverName" style="width: 250px"></a-input>
-                        </a-form-item>
-                    </td>
-                </tr>
-                <tr>
-                    <td>uTLS</td>
-                    <td>
-                        <a-form-item>
-                            <a-select v-model="outbound.stream.reality.fingerprint"
-                                      style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                            </a-select>
-                        </a-form-item>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Short Id</td>
-                    <td>
-                        <a-form-item>
-                            <a-input v-model.trim="outbound.stream.reality.shortId" style="width:250px"></a-input>
-                        </a-form-item>
-                    </td>
-                </tr>
-                <tr>
-                    <td>SpiderX</td>
-                    <td>
-                        <a-form-item>
-                            <a-input v-model.trim="outbound.stream.reality.spiderX" style="width:250px"></a-input>
-                        </a-form-item>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Public Key</td>
-                    <td>
-                        <a-form-item>
-                            <a-input v-model.trim="outbound.stream.reality.publicKey" style="width: 250px"></a-input>
-                        </a-form-item>
-                    </td>
-                </tr>
+                <a-form-item label='{{ i18n "domainName" }}'>
+                    <a-input v-model.trim="outbound.stream.reality.serverName"></a-input>
+                </a-form-item>
+                <a-form-item label="uTLS">
+                    <a-select v-model="outbound.stream.reality.fingerprint"
+                                :dropdown-class-name="themeSwitcher.currentTheme">
+                        <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item label="Short Id">
+                    <a-input v-model.trim="outbound.stream.reality.shortId" style="width:250px"></a-input>
+                </a-form-item>
+                <a-form-item label="SpiderX">
+                    <a-input v-model.trim="outbound.stream.reality.spiderX" style="width:250px"></a-input>
+                </a-form-item>
+                <a-form-item label="Public Key">
+                            <a-input v-model.trim="outbound.stream.reality.publicKey"></a-input>
+                </a-form-item>
         </template>
 </template>
-    </table>
 </a-form>
 </a-tab-pane>
 <a-tab-pane key="2" tab="JSON" force-render="true">

web/html/xui/form/protocol/dokodemo.html

@@ -1,42 +1,20 @@
 {{define "form/dokodemo"}}
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.inbounds.targetAddress"}}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.settings.address"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.destinationPort"}}</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.settings.port"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.network"}}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="tcp,udp">tcp+udp</a-select-option>
-                        <a-select-option value="tcp">tcp</a-select-option>
-                        <a-select-option value="udp">udp</a-select-option>
-                    </a-select>
-                </a-form-item>           
-            </td>
-        </tr>
-        <tr>
-            <td>FollowRedirect</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="inbound.settings.followRedirect"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.targetAddress"}}'>
+        <a-input v-model.trim="inbound.settings.address"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
+        <a-input-number v-model.number="inbound.settings.port"></a-input-number>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
+        <a-select v-model="inbound.settings.network" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="tcp,udp">TCP+UDP</a-select-option>
+            <a-select-option value="tcp">TCP</a-select-option>
+            <a-select-option value="udp">UDP</a-select-option>
+        </a-select>
+    </a-form-item>           
+    <a-form-item label='FollowRedirect'>
+        <a-switch v-model="inbound.settings.followRedirect"></a-switch>
+    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/protocol/http.html

@@ -1,5 +1,5 @@
 {{define "form/http"}}
-<a-form layout="inline">
+<a-form>
         <table style="width: 100%; text-align: center; margin-bottom: 10px;">
             <tr>
                 <td width="45%">{{ i18n "username" }}</td>

web/html/xui/form/protocol/shadowsocks.html

@@ -1,6 +1,5 @@
 {{define "form/shadowsocks"}}
-<a-form layout="inline">
-    <template v-if="inbound.isSSMultiUser">
+<template v-if="inbound.isSSMultiUser">
     <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.shadowsockses.slice(0,1)" v-if="!isEdit">  
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
             {{template "form/client"}}
@@ -20,40 +19,39 @@
             </table>
         </a-collapse-panel>
     </a-collapse>
-    </template>
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "encryption" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.settings.method" style="width: 250px;" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.isSS2022">
-            <td>{{ i18n "password" }}
-                <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.settings.password" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.network" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="tcp,udp">tcp+udp</a-select-option>
-                        <a-select-option value="tcp">tcp</a-select-option>
-                        <a-select-option value="udp">udp</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
-</a-form>
+</template>
+<table width="100%" class="ant-table-tbody">
+    <tr>
+        <td>{{ i18n "encryption" }}</td>
+        <td>
+            <a-form-item>
+                <a-select v-model="inbound.settings.method" style="width: 250px;" @change="SSMethodChange" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
+                </a-select>
+            </a-form-item>
+        </td>
+    </tr>
+    <tr v-if="inbound.isSS2022">
+        <td>{{ i18n "password" }}
+            <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
+        </td>
+        <td>
+            <a-form-item>
+                <a-input v-model.trim="inbound.settings.password" style="width: 250px"></a-input>
+            </a-form-item>
+        </td>
+    </tr>
+    <tr>
+        <td>{{ i18n "pages.inbounds.network" }}</td>
+        <td>
+            <a-form-item>
+                <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option value="tcp,udp">tcp+udp</a-select-option>
+                    <a-select-option value="tcp">tcp</a-select-option>
+                    <a-select-option value="udp">udp</a-select-option>
+                </a-select>
+            </a-form-item>
+        </td>
+    </tr>
+</table>
 {{end}}

web/html/xui/form/protocol/socks.html

@@ -1,52 +1,33 @@
 {{define "form/socks"}}
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td style="width: 30%;">{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-switch :checked="inbound.settings.auth === 'password'"
-                              @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.settings.auth === 'password'">
-            <td colspan="2">
-                <table style="width: 100%; text-align: center; margin-bottom: 10px;">
-                    <tr>
-                        <td width="45%">{{ i18n "username" }}</td>
-                        <td width="45%">{{ i18n "password" }}</td>
-                        <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())">+</a-button></td>
-                    </tr>
-                </table>
-                <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
-                    <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
-                        <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
-                    </a-input>
-                    <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
-                        <template slot="addonAfter">
-                            <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
-                        </template>
-                    </a-input>
-                </a-input-group>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.enable" }} udp</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="inbound.settings.udp"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr v-if="inbound.settings.udp">
-            <td>IP</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.settings.ip"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }} udp'>
+        <a-switch v-model="inbound.settings.udp"></a-switch>
+    </a-form-item>
+    <a-form-item label="IP" v-if="inbound.settings.udp">
+        <a-input v-model.trim="inbound.settings.ip"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "password" }}'>
+        <a-switch :checked="inbound.settings.auth === 'password'"
+        @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
+    </a-form-item>
+    <template v-if="inbound.settings.auth === 'password'">
+        <table style="width: 100%; text-align: center; margin-bottom: 10px;">
+            <tr>
+                <td width="45%">{{ i18n "username" }}</td>
+                <td width="45%">{{ i18n "password" }}</td>
+                <td><a-button size="small" @click="inbound.settings.addAccount(new Inbound.SocksSettings.SocksAccount())">+</a-button></td>
+            </tr>
+        </table>
+        <a-input-group compact v-for="(account, index) in inbound.settings.accounts" style="margin-bottom: 10px;">
+            <a-input style="width: 50%" v-model.trim="account.user" placeholder='{{ i18n "username" }}'>
+                <template slot="addonBefore" style="margin: 0;">[[ index+1 ]]</template>
+            </a-input>
+            <a-input style="width: 50%" v-model.trim="account.pass" placeholder='{{ i18n "password" }}'>
+                <template slot="addonAfter">
+                    <a-button size="small" @click="inbound.settings.delAccount(index)">-</a-button>
+                </template>
+            </a-input>
+        </a-input-group>
+    </template>
 </a-form>
 {{end}}

web/html/xui/form/protocol/trojan.html

@@ -1,30 +1,29 @@
 {{define "form/trojan"}}
-<a-form layout="inline" style="padding: 10px 0px;">
-    <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.trojans.slice(0,1)" v-if="!isEdit">
-        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-            {{template "form/client"}}
-        </a-collapse-panel>
-    </a-collapse>
-    <a-collapse v-else>
-        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
-            <table width="100%">
-                <tr class="client-table-header">
-                    <th>{{ i18n "pages.inbounds.email" }}</th>
-                    <th>Password</th>
-                </tr>
-                <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td>[[ client.email ]]</td>
-                    <td>[[ client.password ]]</td>
-                </tr>
-            </table>
-        </a-collapse-panel>
-    </a-collapse>
-</a-form>
-<template v-if="inbound.isTcp">
+<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.trojans.slice(0,1)" v-if="!isEdit">  
+    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
+        {{template "form/client"}}
+    </a-collapse-panel>
+</a-collapse>
+<a-collapse v-else>
+    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
+        <table width="100%">
+            <tr class="client-table-header">
+                <th>{{ i18n "pages.inbounds.email" }}</th>
+                <th>Password</th>
+            </tr>
+            <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                <td>[[ client.email ]]</td>
+                <td>[[ client.password ]]</td>
+            </tr>
+        </table>
+    </a-collapse-panel>
+</a-collapse>
+<template v-if="inbound.isTcp && !inbound.stream.isReality">
     <a-form layout="inline">
         <a-form-item label="Fallbacks">
             <a-row>
-                <a-button type="primary" size="small" @click="inbound.settings.addFallback()">
+                <a-button type="primary" size="small"
+                        @click="inbound.settings.addFallback()">
                     +
                 </a-button>
             </a-row>
@@ -32,54 +31,27 @@
     </a-form>
 
     <!-- trojan fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
         <a-divider style="margin:0;">
-            fallback[[ index + 1 ]]
+            Fallback[[ index + 1 ]]
             <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                     style="color: rgb(255, 77, 79);cursor: pointer;"/>
         </a-divider>
-        <table width="100%">
-            <tr>
-                <td style="width: 20%;">Name</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.name" style="width: 250px"></a-input>
-                    </a-form-item>            
-                </td>
-            </tr>
-            <tr>
-                <td>Alpn</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.alpn" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Path</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.path" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Dest</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.dest" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>xVer</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-    </table>
+        <a-form-item label='Name'>
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>            
+        <a-form-item label='Alpn'>
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label='Path'>
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label='Dest'>
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='xVer'>
+            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
+        </a-form-item>
     </a-form>
     <a-divider style="margin:0;"></a-divider>
 </template>

web/html/xui/form/protocol/vless.html

@@ -1,87 +1,59 @@
 {{define "form/vless"}}
-<a-form layout="inline" style="padding: 10px 0px;">
-    <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
-        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-            {{template "form/client"}}
-        </a-collapse-panel>     
-    </a-collapse>
-    <a-collapse v-else>
-        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
-            <table width="100%">
-                <tr class="client-table-header">
-                    <th>{{ i18n "pages.inbounds.email" }}</th>
-                    <th>Flow</th>
-                    <th>ID</th>
-                </tr>
-                <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td>[[ client.email ]]</td>
-                    <td>[[ client.flow ]]</td>
-                    <td>[[ client.id ]]</td>
-                </tr>
-            </table>
-        </a-collapse-panel>
-    </a-collapse>
-</a-form>
-<template v-if="inbound.isTcp">
+<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">    
+    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
+        {{template "form/client"}}
+    </a-collapse-panel>
+</a-collapse>
+<a-collapse v-else>
+    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
+        <table width="100%">
+            <tr class="client-table-header">
+                <th>{{ i18n "pages.inbounds.email" }}</th>
+                <th>Flow</th>
+                <th>ID</th>
+            </tr>
+            <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                <td>[[ client.email ]]</td>
+                <td>[[ client.flow ]]</td>
+                <td>[[ client.id ]]</td>
+            </tr>
+        </table>
+    </a-collapse-panel>
+</a-collapse>
+<template v-if="inbound.isTcp && !inbound.stream.isReality">
     <a-form layout="inline">
         <a-form-item label="Fallbacks">
             <a-row>
-                <a-button type="primary" size="small" @click="inbound.settings.addFallback()">
+                <a-button type="primary" size="small"
+                        @click="inbound.settings.addFallback()">
                     +
                 </a-button>
             </a-row>
         </a-form-item>
     </a-form>
-    
+
     <!-- vless fallbacks -->
-    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
         <a-divider style="margin:0;">
-            fallback[[ index + 1 ]]
+            Fallback[[ index + 1 ]]
             <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
                     style="color: rgb(255, 77, 79);cursor: pointer;"/>
         </a-divider>
-        <table width="100%">
-            <tr>
-                <td style="width: 20%;">Name</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.name" style="width: 250px"></a-input>
-                    </a-form-item>            
-                </td>
-            </tr>
-            <tr>
-                <td>Alpn</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.alpn" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Path</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.path" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Dest</td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model="fallback.dest" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>xVer</td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-    </table>
+        <a-form-item label='Name'>
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>            
+        <a-form-item label='Alpn'>
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label='Path'>
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label='Dest'>
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='xVer'>
+            <a-input-number v-model="fallback.xver" :min="0" :max="2"></a-input-number>
+        </a-form-item>
     </a-form>
     <a-divider style="margin:0;"></a-divider>
 </template>

web/html/xui/form/protocol/vmess.html

@@ -1,23 +1,21 @@
 {{define "form/vmess"}}
-<a-form layout="inline" style="padding: 10px 0px;">
-    <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vmesses.slice(0,1)" v-if="!isEdit">
-        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
-            {{template "form/client"}}
-        </a-collapse-panel>     
-    </a-collapse>
-    <a-collapse v-else>
-        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount" }}: ' + inbound.settings.vmesses.length">
-            <table width="100%">
-                    <tr class="client-table-header">
-                        <th>{{ i18n "pages.inbounds.email" }}</th>
-                        <th>ID</th>
-                </tr>
-                <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
-                    <td>[[ client.email ]]</td>
-                    <td>[[ client.id ]]</td>
-                </tr>
-            </table>
-        </a-collapse-panel>
-    </a-collapse>
-</a-form>
+<a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vmesses.slice(0,1)" v-if="!isEdit">    
+    <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
+        {{template "form/client"}}
+    </a-collapse-panel>
+</a-collapse>
+<a-collapse v-else>
+    <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vmesses.length">
+        <table width="100%">
+            <tr class="client-table-header">
+                <th>{{ i18n "pages.inbounds.email" }}</th>
+                <th>ID</th>
+            </tr>
+            <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                <td>[[ client.email ]]</td>
+                <td>[[ client.id ]]</td>
+            </tr>
+        </table>
+    </a-collapse-panel>
+</a-collapse>
 {{end}}

web/html/xui/form/sniffing.html

@@ -1,21 +1,22 @@
 {{define "form/sniffing"}}
-<a-form layout="inline">
-    <a-form-item>
-        <span slot="label">
-            Sniffing
-            <a-tooltip>
-                <template slot="title">
-                    <span>{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
-                </template>
-                <a-icon type="question-circle" theme="filled"></a-icon>
-            </a-tooltip>
-        </span>
-        <a-switch v-model="inbound.sniffing.enabled"></a-switch>
-    </a-form-item>
-    <a-form-item>
-        <a-checkbox-group v-model="inbound.sniffing.destOverride" v-if="inbound.sniffing.enabled">
-            <a-checkbox v-for="key,value in SNIFFING_OPTION" :value="key">[[ value ]]</a-checkbox>
-        </a-checkbox-group>
-    </a-form-item>
+<a-divider style="margin:0;"></a-divider>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+  <a-form-item>
+    <span slot="label">
+        Sniffing
+        <a-tooltip>
+            <template slot="title">
+                <span>{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
+            </template>
+            <a-icon type="question-circle"></a-icon>
+        </a-tooltip>
+    </span>
+    <a-switch v-model="inbound.sniffing.enabled"></a-switch>
+  </a-form-item>
+  <a-form-item :wrapper-col="{span:24}">
+    <a-checkbox-group v-model="inbound.sniffing.destOverride" v-if="inbound.sniffing.enabled">
+      <a-checkbox v-for="key,value in SNIFFING_OPTION" :value="key">[[ value ]]</a-checkbox>
+    </a-checkbox-group>
+  </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/external_proxy.html

@@ -1,32 +1,26 @@
 {{define "form/externalProxy"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-divider style="margin:0;"></a-divider>
     <a-form-item label="External Proxy">
-    <a-switch v-model="externalProxy"></a-switch>
-    <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
+        <a-switch v-model="externalProxy"></a-switch>
+        <a-button v-if="externalProxy" type="primary" style="margin-left: 10px" size="small" @click="inbound.stream.externalProxy.push({forceTls: 'same', dest: '', port: 443, remark: ''})">+</a-button>
     </a-form-item>
-    <table width="100%" class="ant-table-tbody" v-if="externalProxy" style="margin-bottom:5px">
-        <tr style="line-height: 40px;">
-            <td width="100%">
-                <a-input-group style="margin: 0 5px;" compact v-for="(row, index) in inbound.stream.externalProxy">
-                    <template>
-                        <a-tooltip title="Force TLS">
-                            <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
-                                <a-select-option value="none">{{ i18n "none" }}</a-select-option>
-                                <a-select-option value="tls">TLS</a-select-option>
-                            </a-select>
-                        </a-tooltip>
-                    </template>
-                    <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
-                    <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
-                        <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
-                    </a-tooltip>
-                    <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
-                    <a-button style="width: 10%; margin: 0px" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
-                </a-input-group>
-            </td>
-        </tr>
-    </table>
+    <a-input-group style="margin: 5px 0;" compact v-for="(row, index) in inbound.stream.externalProxy">
+        <template>
+            <a-tooltip title="Force TLS">
+                <a-select v-model="row.forceTls" style="width:20%; margin: 0px" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option value="same">{{ i18n "pages.inbounds.same" }}</a-select-option>
+                    <a-select-option value="none">{{ i18n "none" }}</a-select-option>
+                    <a-select-option value="tls">TLS</a-select-option>
+                </a-select>
+            </a-tooltip>
+        </template>
+        <a-input style="width: 35%" v-model.trim="row.dest" placeholder='{{ i18n "host" }}'></a-input>
+        <a-tooltip title='{{ i18n "pages.inbounds.port" }}'>
+            <a-input-number style="width: 15%;" v-model.number="row.port" min="1" max="65531"></a-input-number>
+        </a-tooltip>
+        <a-input style="width: 20%" v-model.trim="row.remark" placeholder='{{ i18n "remark" }}'></a-input>
+        <a-button style="width: 10%; margin: 0px" @click="inbound.stream.externalProxy.splice(index, 1)">-</a-button>
+    </a-input-group>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_grpc.html

@@ -1,22 +1,10 @@
 {{define "form/streamGRPC"}}
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>serviceName</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>MultiMode</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="Service Name">
+        <a-input v-model.trim="inbound.stream.grpc.serviceName" style="width: 250px;"></a-input>
+    </a-form-item>
+    <a-form-item label="MultiMode">
+        <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
+    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_http.html

@@ -1,24 +1,19 @@
 {{define "form/streamHTTP"}}
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "path" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.http.path" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>host</td>
-            <td>
-                <a-form-item>
-                    <a-row v-for="(host, index) in inbound.stream.http.host">
-                        <a-input v-model.trim="inbound.stream.http.host[index]" style="width: 250px;"></a-input>
-                    </a-row>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "path" }}'>
+        <a-input v-model.trim="inbound.stream.http.path"></a-input>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">{{ i18n "host" }}
+            <a-button size="small" @click="inbound.stream.http.addHost()">+</a-button>
+        </template>
+        <template v-for="(host, index) in inbound.stream.http.host">
+            <a-input v-model.trim="inbound.stream.http.host[index]">
+                <a-button size="small" slot="addonAfter"
+                @click="inbound.stream.http.removeHost(index)"
+                v-if="inbound.stream.http.host.length>1">-</a-button>
+            </a-input>
+        </template>
+    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_kcp.html

@@ -1,86 +1,38 @@
 {{define "form/streamKCP"}}
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.stream.kcp.type" style="width: 250px;"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">None (Not Camouflage)</a-select-option>
-                        <a-select-option value="srtp">SRTP (Camouflage Video Call)</a-select-option>
-                        <a-select-option value="utp">UTP (Camouflage BT Download)</a-select-option>
-                        <a-select-option value="wechat-video">Wechat-Video (Camouflage WeChat Video)</a-select-option>
-                        <a-select-option value="dtls">DTLS (Camouflage DTLS 1.2 Packages)</a-select-option>
-                        <a-select-option value="wireguard">Wireguard (Camouflage Wireguard Packages)</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model="inbound.stream.kcp.seed" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>MTU</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.stream.kcp.mtu"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>TTI (ms)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.stream.kcp.tti"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Uplink Capacity (MB/S)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.stream.kcp.upCap"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Downlink Capacity (MB/S)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.stream.kcp.downCap"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Congestion</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Read Buffer Size (MB)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.stream.kcp.readBuffer"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Write Buffer Size (MB)</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model.number="inbound.stream.kcp.writeBuffer"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "camouflage" }}'>
+        <a-select v-model="inbound.stream.kcp.type" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="none">none (not camouflage)</a-select-option>
+            <a-select-option value="srtp">SRTP (video call)</a-select-option>
+            <a-select-option value="utp">UTP (BT DownloaD)</a-select-option>
+            <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+            <a-select-option value="dtls">DTLS (DTLS 1.2 packages)</a-select-option>
+            <a-select-option value="wireguard">WireGuard (WireGuard packages)</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item label='{{ i18n "password" }}'>
+        <a-input v-model="inbound.stream.kcp.seed"></a-input>
+    </a-form-item>
+    <a-form-item label='MTU'>
+        <a-input-number v-model.number="inbound.stream.kcp.mtu"></a-input-number>
+    </a-form-item>
+    <a-form-item label='TTI(ms)'>
+        <a-input-number v-model.number="inbound.stream.kcp.tti"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Uplink(Mb/s)'>
+        <a-input-number v-model.number="inbound.stream.kcp.upCap"></a-input-number>
+    </a-form-item> 
+    <a-form-item label='Downlink(Mb/s)'>
+        <a-input-number v-model.number="inbound.stream.kcp.downCap"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Congestion'>
+        <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
+    </a-form-item>
+    <a-form-item label='Read buffer(MB)'>
+        <a-input-number v-model.number="inbound.stream.kcp.readBuffer"></a-input-number>
+    </a-form-item>
+    <a-form-item label='Write buffer(MB)'>
+        <a-input-number v-model.number="inbound.stream.kcp.writeBuffer"></a-input-number>
+    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_quic.html

@@ -1,43 +1,24 @@
 {{define "form/streamQUIC"}}
-<a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.quic.encryption" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.stream.quic.security" style="width: 250px;"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">none</a-select-option>
-                        <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
-                        <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "password" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.quic.key" style="width: 250px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "camouflage" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.stream.quic.type" style="width: 280px;"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="none">none (not camouflage)</a-select-option>
-                        <a-select-option value="srtp">srtp (camouflage video call)</a-select-option>
-                        <a-select-option value="utp">utp (camouflage BT download)</a-select-option>
-                        <a-select-option value="wechat-video">wechat-video (camouflage WeChat video)</a-select-option>
-                        <a-select-option value="dtls">dtls (camouflage DTLS 1.2 packages)</a-select-option>
-                        <a-select-option value="wireguard">wireguard (camouflage wireguard packages)</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
+        <a-select v-model="inbound.stream.quic.security" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="none">none</a-select-option>
+            <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
+            <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
+        </a-select>
+    </a-form-item>
+    <a-form-item label='{{ i18n "password" }}'>
+        <a-input v-model.trim="inbound.stream.quic.key"></a-input>
+    </a-form-item> 
+    <a-form-item label='{{ i18n "camouflage" }}'>
+        <a-select v-model="inbound.stream.quic.type" :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="none">none (not camouflage)</a-select-option>
+            <a-select-option value="srtp">SRTP (video call)</a-select-option>
+            <a-select-option value="utp">UTP (BT Download)</a-select-option>
+            <a-select-option value="wechat-video">wechat-video (WeChat video)</a-select-option>
+            <a-select-option value="dtls">DTLS (DTLS 1.2 packages)</a-select-option>
+            <a-select-option value="wireguard">WireGuard (WireGuard Packages)</a-select-option>
+        </a-select>
+    </a-form-item>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_settings.html

@@ -1,9 +1,9 @@
 {{define "form/streamSettings"}}
 <!-- select stream network -->
-<a-form layout="inline">
-    <a-form-item label='{{ i18n "transmission" }}'>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="{{ i18n "transmission" }}">
         <a-select v-model="inbound.stream.network" @change="streamNetworkChange"
-            :dropdown-class-name="themeSwitcher.currentTheme" style="width: 100px;">
+            :dropdown-class-name="themeSwitcher.currentTheme">
             <a-select-option value="tcp">TCP</a-select-option>
             <a-select-option value="kcp">KCP</a-select-option>
             <a-select-option value="ws">WS</a-select-option>
@@ -43,7 +43,6 @@
 <template v-if="inbound.stream.network === 'grpc'">
     {{template "form/streamGRPC"}}
 </template>
-
 <!-- sockopt -->
 <template>
     {{template "form/streamSockopt"}}

web/html/xui/form/stream/stream_sockopt.html

@@ -1,46 +1,26 @@
 {{define "form/streamSockopt"}}
-<a-form layout="inline">
+<a-divider style="margin:0;"></a-divider>
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label="Transparent Proxy">
         <a-switch v-model="inbound.stream.sockoptSwitch"></a-switch>
     </a-form-item>
-    <table width="100%" class="ant-table-tbody" v-if="inbound.stream.sockoptSwitch">
-        <tr>
-            <td>Accept Proxy Protocol</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>TCP FastOpen</td>
-            <td>
-                <a-form-item>
-                    <a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Route Mark</td>
-            <td>
-                <a-form-item>
-                    <a-input-number v-model="inbound.stream.sockopt.mark" :min="0"></a-input-number>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>T-Proxy</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="inbound.stream.sockopt.tproxy" style="width: 250px;"
-                        :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option value="off">OFF</a-select-option>
-                        <a-select-option value="redirect">Redirect</a-select-option>
-                        <a-select-option value="tproxy">T-Proxy</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+    <template v-if="inbound.stream.sockoptSwitch">
+        <a-form-item label="Accept Proxy Protocol">
+            <a-switch v-model="inbound.stream.sockopt.acceptProxyProtocol"></a-switch>
+        </a-form-item>
+        <a-form-item label="TCP FastOpen">
+            <a-switch v-model.trim="inbound.stream.sockopt.tcpFastOpen"></a-switch>
+        </a-form-item>
+        <a-form-item label="Route Mark">
+            <a-input-number v-model="inbound.stream.sockopt.mark" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="T-Proxy">
+            <a-select v-model="inbound.stream.sockopt.tproxy" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="off">OFF</a-select-option>
+                <a-select-option value="redirect">Redirect</a-select-option>
+                <a-select-option value="tproxy">T-Proxy</a-select-option>
+            </a-select>
+        </a-form-item>
+    </template>
 </a-form>
 {{end}}

web/html/xui/form/stream/stream_tcp.html

@@ -1,113 +1,76 @@
 {{define "form/streamTCP"}}
 <!-- tcp type -->
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label="Accept Proxy Protocol" v-if="inbound.canEnableTls()">
         <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
     </a-form-item>
     <a-form-item label='HTTP {{ i18n "camouflage" }}'>
         <a-switch
-                :checked="inbound.stream.tcp.type === 'http'"
-                @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
+            :checked="inbound.stream.tcp.type === 'http'"
+            @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
         </a-switch>
     </a-form-item>
 </a-form>
 
 <!-- tcp request -->
-<a-form v-if="inbound.stream.tcp.type === 'http'" layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.requestVersion" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.request.version" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.requestMethod" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.request.method" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td style="vertical-align: top; padding-top: 10px;">{{ i18n "pages.inbounds.stream.tcp.requestPath" }}
-                <a-button size="small" @click="inbound.stream.tcp.request.addPath('/')">+</a-button>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-row v-for="(path, index) in inbound.stream.tcp.request.path">
-                        <a-input v-model.trim="inbound.stream.tcp.request.path[index]" style="width: 200px;">
-                            <a-button size="small" slot="addonAfter"
-                            @click="inbound.stream.tcp.request.removePath(index)"
-                            v-if="inbound.stream.tcp.request.path.length>1">-</a-button>
-                        </a-input>
-                    </a-row>
-                </a-form-item> 
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2" width="100%">
-                <a-form-item>
-                    <span>{{ i18n "pages.inbounds.stream.general.requestHeader" }}:</span>
-                    <a-button size="small" style="margin-left: 10px" @click="inbound.stream.tcp.request.addHeader('', '')">+</a-button>
-                    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.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.tcp.request.removeHeader(index)">-</a-button>
-                        </a-input>
-                    </a-input-group>
-                </a-form-item>
-            </td>
-        </tr>
+<a-form v-if="inbound.stream.tcp.type === 'http'" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestVersion" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestMethod" }}'>
+                    <a-input v-model.trim="inbound.stream.tcp.request.method"></a-input>
+    </a-form-item>
+    <a-form-item>
+        <template slot="label">{{ i18n "pages.inbounds.stream.tcp.requestPath" }}
+            <a-button size="small" @click="inbound.stream.tcp.request.addPath('/')">+</a-button>
+        </template>
+        <template v-for="(path, index) in inbound.stream.tcp.request.path">
+            <a-input v-model.trim="inbound.stream.tcp.request.path[index]">
+                <a-button size="small" slot="addonAfter"
+                @click="inbound.stream.tcp.request.removePath(index)"
+                v-if="inbound.stream.tcp.request.path.length>1">-</a-button>
+            </a-input>
+        </template>
+    </a-form-item> 
+    <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
+        <a-button size="small" @click="inbound.stream.tcp.request.addHeader('', '')">+</a-button>
+    </a-form-item>
+    <a-form-item :wrapper-col="{span:24}">
+        <a-input-group compact v-for="(header, index) in inbound.stream.tcp.request.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.tcp.request.removeHeader(index)">-</a-button>
+            </a-input>
+        </a-input-group>
+    </a-form-item>
         <!-- tcp response -->
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseVersion" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.response.version" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseStatus" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.response.status" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.inbounds.stream.tcp.responseStatusDescription" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="inbound.stream.tcp.response.reason" style="width: 200px;"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2" width="100%">
-                <a-form-item>
-                    <span>{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}:</span>
-                    <a-button size="small" style="margin-left: 10px"
-                        @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">+</a-button>
-                    <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.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" }}'>
-                            <template slot="addonAfter">
-                                <a-button size="small" @click="inbound.stream.tcp.response.removeHeader(index)">-</a-button>
-                            </template>
-                        </a-input>
-                    </a-input-group>
-                </a-form-item>
-            </td>
-        </tr>
-    </table>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseVersion" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseStatus" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.response.status"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseStatusDescription" }}'>
+        <a-input v-model.trim="inbound.stream.tcp.response.reason"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
+        <a-button size="small"
+            @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">+</a-button>
+    </a-form-item>
+    <a-form-item :wrapper-col="{span:24}">
+        <a-input-group compact v-for="(header, index) in inbound.stream.tcp.response.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" }}'>
+                <template slot="addonAfter">
+                    <a-button size="small" @click="inbound.stream.tcp.response.removeHeader(index)">-</a-button>
+                </template>
+            </a-input>
+        </a-input-group>
+    </a-form-item>
 </a-form>
 {{end}}

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

@@ -1,28 +1,21 @@
 {{define "form/streamWS"}}
-<a-form layout="inline">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-form-item label="AcceptProxyProtocol">
         <a-switch v-model="inbound.stream.ws.acceptProxyProtocol"></a-switch>
     </a-form-item>
-    <br>
     <a-form-item label='{{ i18n "path" }}'>
         <a-input v-model.trim="inbound.stream.ws.path"></a-input>
     </a-form-item>
-    <br>
-    <a-form-item>
-        <a-row>
-            <span>{{ i18n "pages.inbounds.stream.general.requestHeader" }}:</span>
-            <a-button type="primary" size="small" style="margin-left: 10px"
-                @click="inbound.stream.ws.addHeader('Host', '')">+</a-button>
-        </a-row>
-        <a-input-group v-for="(header, index) in inbound.stream.ws.headers">
-            <a-input style="width: 50%" v-model.trim="header.name"
-                addon-before='{{ i18n "pages.inbounds.stream.general.name"}}'></a-input>
-            <a-input style="width: 50%" v-model.trim="header.value"
-                addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                <template slot="addonAfter">
-                    <a-button type="primary" size="small" style="margin-left: 10px"
-                        @click="inbound.stream.ws.removeHeader(index)">-</a-button>
-                </template>
+    <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
+        <a-button size="small" @click="inbound.stream.ws.addHeader()">+</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">
+            <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.ws.removeHeader(index)">-</a-button>
             </a-input>
         </a-input-group>
     </a-form-item>

web/html/xui/form/tls_settings.html

@@ -1,395 +1,194 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
-
-<a-form v-if="inbound.canEnableTls()" layout="inline">
+<a-form v-if="inbound.canEnableTls()" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
     <a-divider style="margin:0;"></a-divider>
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td colspan="2">
-                <a-form-item label='{{ i18n "security" }}'>
-                    <a-radio-group v-model="inbound.stream.security" button-style="solid">
-                        <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
-                        <a-tooltip>
-                            <template slot="title">
-                                <span>{{ i18n "pages.inbounds.xtlsDesc" }}</span>
-                            </template>
-                            <a-radio-button v-if="inbound.canEnableXtls()" value="xtls">XTLS</a-radio-button>
-                        </a-tooltip>
-                        <a-tooltip>
-                            <template slot="title">
-                                <span>{{ i18n "pages.inbounds.realityDesc" }}</span>
-                            </template>
-                            <a-radio-button v-if="inbound.canEnableReality()" value="reality">Reality</a-radio-button>
-                        </a-tooltip>
-                        <a-radio-button value="tls">TLS</a-radio-button>
-                    </a-radio-group>
+    <a-form-item label='{{ i18n "security" }}'>
+        <a-radio-group v-model="inbound.stream.security" button-style="solid">
+            <a-radio-button value="none">{{ i18n "none" }}</a-radio-button>
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.xtlsDesc" }}</span>
+                </template>
+                <a-radio-button v-if="inbound.canEnableXtls()" value="xtls">XTLS</a-radio-button>
+            </a-tooltip>
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.realityDesc" }}</span>
+                </template>
+                <a-radio-button v-if="inbound.canEnableReality()" value="reality">Reality</a-radio-button>
+            </a-tooltip>
+            <a-radio-button value="tls">TLS</a-radio-button>
+        </a-radio-group>
+    </a-form-item>
+
+    <!-- tls settings -->
+    <template v-if="inbound.stream.isTls">
+        <a-form-item label="SNI" placeholder="Server Name Indication">
+            <a-input v-model.trim="inbound.stream.tls.sni"></a-input>
+        </a-form-item>
+        <a-form-item label="CipherSuites">
+            <a-select v-model="inbound.stream.tls.cipherSuites" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value="">auto</a-select-option>
+                <a-select-option v-for="key,value in TLS_CIPHER_OPTION" :value="key">[[ value ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="Min/Max Version">
+            <a-input-group compact>
+                <a-select v-model="inbound.stream.tls.minVersion" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+                </a-select>
+                <a-select v-model="inbound.stream.tls.maxVersion" :dropdown-class-name="themeSwitcher.currentTheme">
+                    <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
+                </a-select>
+            </a-input-group>
+        </a-form-item>
+        <a-form-item label="uTLS">
+            <a-select v-model="inbound.stream.tls.settings.fingerprint"
+                :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option value=''>None</a-select-option>
+                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="ALPN">
+            <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme"
+                v-model="inbound.stream.tls.alpn">
+                <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="Allow insecure">
+            <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
+        </a-form-item>
+        <a-form-item label="Reject Unknown SNI">
+            <a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
+        </a-form-item>
+        <template v-for="cert,index in inbound.stream.tls.certs">
+            <a-form-item label='{{ i18n "certificate" }}'>
+                <a-radio-group v-model="cert.useFile" button-style="solid">
+                    <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+                    <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+                </a-radio-group>
+                <a-button v-if="index === 0" type="primary" size="small" @click="inbound.stream.tls.addCert()"
+                    style="margin-left: 10px">+</a-button>
+                <a-button v-if="inbound.stream.tls.certs.length>1" type="primary" size="small"
+                    @click="inbound.stream.tls.removeCert(index)" style="margin-left: 10px">-</a-button>
+            </a-form-item>
+            <template v-if="cert.useFile">
+                <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
+                    <a-input v-model.trim="cert.certFile" style="width:250px;"></a-input>
                 </a-form-item>
-            </td>
-        </tr>
+                <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
+                    <a-input v-model.trim="cert.keyFile" style="width:250px;"></a-input>
+                </a-form-item>
+                <a-form-item label=" ">
+                    <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n
+                        "pages.inbounds.setDefaultCert" }}</a-button>
+                </a-form-item>
+            </template>
+            <template v-else>
+                <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
+                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
+                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.key"></a-input>
+                </a-form-item>
+            </template>
+            <a-form-item label='ocspStapling'>
+                <a-input-number v-model.number="cert.ocspStapling" :min="0"></a-input-number>
+            </a-form-item>
+        </template>
+    </template>
 
-        <!-- tls settings -->
-        <template v-if="inbound.stream.isTls">
-            <tr>
-                <td>SNI</td>
-                <td>
-                    <a-form-item placeholder="Server Name Indication">
-                        <a-input v-model.trim="inbound.stream.tls.sni" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>CipherSuites</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option value="">auto</a-select-option>
-                            <a-select-option v-for="key,value in TLS_CIPHER_OPTION" 
-                            :value="key">[[ value]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Min/Max Version</td>
-                <td>
-                    <a-form-item>
-                        <a-input-group compact>
-                            <a-select style="width: 125px" v-model="inbound.stream.tls.minVersion"
-                                :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option v-for="key in TLS_VERSION_OPTION" 
-                                :value="key">[[ key ]]</a-select-option>
-                            </a-select>
-                            <a-select style="width: 125px" v-model="inbound.stream.tls.maxVersion"
-                                :dropdown-class-name="themeSwitcher.currentTheme">
-                                <a-select-option v-for="key in TLS_VERSION_OPTION" 
-                                :value="key">[[ key ]]</a-select-option>
-                            </a-select>
-                        </a-input-group>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>uTLS</td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="inbound.stream.tls.settings.fingerprint" style="width: 250px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option value=''>None</a-select-option>
-                            <a-select-option v-for="key in UTLS_FINGERPRINT" 
-                            :value="key">[[ key ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>ALPN</td>
-                <td>
-                    <a-form-item>
-                        <a-select mode="multiple" style="width: 250px" 
-                            :dropdown-class-name="themeSwitcher.currentTheme"
-                            v-model="inbound.stream.tls.alpn">
-                            <a-select-option v-for="alpn in ALPN_OPTION" 
-                            :value="alpn">[[ alpn ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Allow insecure</td>
-                <td>
-                    <a-form-item>
-                        <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>Reject Unknown SNI</td>
-                <td>
-                    <a-form-item>
-                        <a-switch v-model="inbound.stream.tls.rejectUnknownSni"></a-switch>
-                    </a-form-item>
-                </td>
-            </tr>
-            <template v-for="cert,index in inbound.stream.tls.certs">
-                <tr>
-                    <td>{{ i18n "certificate" }}</td>
-                    <td>
-                        <a-form-item>
-                            <a-radio-group v-model="cert.useFile" button-style="solid">
-                                <a-radio-button 
-                                    :value="true">{{ i18n "pages.inbounds.certificatePath"}}
-                                </a-radio-button>
-                                <a-radio-button 
-                                    :value="false">{{ i18n "pages.inbounds.certificateContent"}}
-                                </a-radio-button>
-                            </a-radio-group>
-                            <a-button v-if="index === 0" type="primary" size="small"
-                                @click="inbound.stream.tls.addCert()" style="margin-left: 10px">+</a-button>
-                            <a-button v-if="inbound.stream.tls.certs.length>1" type="primary" size="small"
-                                @click="inbound.stream.tls.removeCert(index)" style="margin-left: 10px">-</a-button>
-                        </a-form-item>
-                    </td>
-                </tr>
-                <template v-if="cert.useFile">
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.publicKeyPath" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input v-model.trim="cert.certFile" style="width:250px;"></a-input>
-                            </a-form-item>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.keyPath" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input v-model.trim="cert.keyFile" style="width:250px;"></a-input>
-                            </a-form-item>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td></td>
-                        <td>
-                            <a-button type="primary" icon="import" @click="setDefaultCertData(index)">
-                                {{ i18n "pages.inbounds.setDefaultCert" }}
-                            </a-button>
-                        </td>
-                    </tr>
-                </template>
-                <template v-else>
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.publicKeyContent" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
-                            </a-form-item>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.keyContent" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.key"></a-input>
-                            </a-form-item>
-                        </td>
-                    </tr>
-                </template>
-                <tr>
-                    <td>ocspStapling</td>
-                    <td>
-                        <a-form-item>
-                            <a-input-number v-model.number="cert.ocspStapling" :min="0"></a-input-number>
-                        </a-form-item>
-                    </td>
-                </tr>
+    <!-- xtls settings -->
+    <template v-else-if="inbound.xtls">
+        <a-form-item label="SNI" placeholder="Server Name Indication">
+            <a-input v-model.trim="inbound.stream.xtls.sni"></a-input>
+        </a-form-item>
+        <a-form-item label="ALPN">
+            <a-select mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme"
+                v-model="inbound.stream.xtls.alpn">
+                <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="Allow insecure">
+            <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
+        </a-form-item>
+        <template v-for="cert,index in inbound.stream.xtls.certs">
+            <a-form-item label='{{ i18n "certificate" }}'>
+                <a-radio-group v-model="cert.useFile" button-style="solid">
+                    <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+                    <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+                </a-radio-group>
+                <a-button v-if="index === 0" type="primary" size="small" @click="inbound.stream.xtls.addCert()"
+                    style="margin-left: 10px">+</a-button>
+                <a-button v-if="inbound.stream.xtls.certs.length>1" type="primary" size="small"
+                    @click="inbound.stream.xtls.removeCert(index)" style="margin-left: 10px">-</a-button>
+            </a-form-item>
+            <template v-if="cert.useFile">
+                <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
+                    <a-input v-model.trim="cert.certFile" style="width:250px;"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
+                    <a-input v-model.trim="cert.keyFile" style="width:250px;"></a-input>
+                </a-form-item>
+                <a-form-item label=" ">
+                    <a-button type="primary" icon="import" @click="setDefaultCertXtls(index)">{{ i18n
+                        "pages.inbounds.setDefaultCert" }}</a-button>
+                </a-form-item>
+            </template>
+            <template v-else>
+                <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
+                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
+                    <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.key"></a-input>
+                </a-form-item>
             </template>
         </template>
-
-        <!-- xtls settings -->
-        <template v-else-if="inbound.xtls">
-            <tr>
-                <td>
-                    <span>SNI</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.xtls.server" style="width: 250px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Alpn</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-select mode="multiple" style="width: 250px" :dropdown-class-name="themeSwitcher.currentTheme"
-                            v-model="inbound.stream.xtls.alpn">
-                            <a-select-option v-for="alpn in ALPN_OPTION" :value="alpn">[[ alpn ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Allow insecure</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
-                    </a-form-item>
-                </td>
-            </tr>
-            <template v-for="cert,index in inbound.stream.xtls.certs">
-                <tr>
-                    <td>{{ i18n "certificate" }}</td>
-                    <td>
-                        <a-form-item>
-                            <a-radio-group v-model="cert.useFile" button-style="solid">
-                                <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath"
-                                    }}</a-radio-button>
-                                <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent"
-                                    }}</a-radio-button>
-                            </a-radio-group>
-                            <a-button v-if="index === 0" type="primary" size="small"
-                                @click="inbound.stream.xtls.addCert()" style="margin-left: 10px">+</a-button>
-                            <a-button v-if="inbound.stream.xtls.certs.length>1" type="primary" size="small"
-                                @click="inbound.stream.xtls.removeCert(index)" style="margin-left: 10px">-</a-button>
-                        </a-form-item>
-                    </td>
-                </tr>
-                <template v-if="cert.useFile">
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.publicKeyPath" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input v-model.trim="cert.certFile" style="width:250px;"></a-input>
-                            </a-form-item>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.keyPath" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input v-model.trim="cert.keyFile" style="width:250px;"></a-input>
-                            </a-form-item>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td></td>
-                        <td>
-                            <a-button type="primary" icon="import" @click="setDefaultCertData(index)">{{ i18n
-                                "pages.inbounds.setDefaultCert" }}</a-button>
-                        </td>
-                    </tr>
-                </template>
-                <template v-else>
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.publicKeyContent" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.cert"></a-input>
-                            </a-form-item>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>{{ i18n "pages.inbounds.keyContent" }}</td>
-                        <td>
-                            <a-form-item>
-                                <a-input type="textarea" :rows="3" style="width:250px;" v-model="cert.key"></a-input>
-                            </a-form-item>
-                        </td>
-                    </tr>
-                </template>
+    </template>
+    <!-- reality settings -->
+    <template v-if="inbound.stream.isReality">
+        <a-form-item label='Show'>
+            <a-switch v-model="inbound.stream.reality.show"></a-switch>
+        </a-form-item>
+        <a-form-item label='Xver'>
+            <a-input-number v-model.number="inbound.stream.reality.xver" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label='uTLS'>
+            <a-select v-model="inbound.stream.reality.settings.fingerprint"
+                :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Dest'>
+            <a-input v-model.trim="inbound.stream.reality.dest"></a-input>
+        </a-form-item>
+        <a-form-item label='Server Names'>
+            <a-input v-model.trim="inbound.stream.reality.serverNames"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.client.renew" }}</span>
+                    </template>
+                    Short Ids
+                    <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()" type="sync"> </a-icon>
+                    </a-icon>
             </template>
-        </template>
-
-        <!-- reality settings -->
-        <template v-else-if="inbound.reality">
-            <tr>
-                <td>
-                    <span>Show</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-switch v-model="inbound.stream.reality.show"></a-switch>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>xVer</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input-number v-model="inbound.stream.reality.xver" :min="0"
-                            style="width: 60px"></a-input-number>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>uTLS</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-select v-model="inbound.stream.reality.settings.fingerprint" style="width: 135px"
-                            :dropdown-class-name="themeSwitcher.currentTheme">
-                            <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
-                        </a-select>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Dest</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.dest" style="width: 300px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Server Names</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.serverNames" style="width: 300px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>ShortIds</span> <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()"
-                        type="sync"> </a-icon>
-                </td>
-                <td>
-                    <a-form-item>
-
-                        <a-input v-model.trim="inbound.stream.reality.shortIds" style="width: 150px;"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>SpiderX</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.settings.spiderX" style="width: 150px;"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Private Key</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.privateKey" style="width: 300px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <span>Public Key</span>
-                </td>
-                <td>
-                    <a-form-item>
-                        <a-input v-model.trim="inbound.stream.reality.settings.publicKey"
-                            style="width: 300px"></a-input>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <a-button type="primary" icon="import" @click="getNewX25519Cert">Get New Key</a-button>
-                </td>
-            </tr>
-        </template>
-    </table>
+            <a-input v-model.trim="inbound.stream.reality.shortIds" style="width:250px"></a-input>
+        </a-form-item>
+        <a-form-item label='SpiderX'>
+            <a-input v-model.trim="inbound.stream.reality.settings.spiderX" style="width:250px"></a-input>
+        </a-form-item>
+        <a-form-item label='Private Key'>
+            <a-input v-model.trim="inbound.stream.reality.privateKey"></a-input>
+        </a-form-item>
+        <a-form-item label='Public Key'>
+            <a-input v-model.trim="inbound.stream.reality.settings.publicKey"></a-input>
+        </a-form-item>
+        <a-form-item label=" ">
+            <a-button type="primary" icon="import" @click="getNewX25519Cert">Get new cert</a-button>
+        </a-form-item>
+    </template>
 </a-form>
 {{end}}

web/html/xui/inbound_client_table.html

@@ -19,7 +19,7 @@
             :overlay-class-name="themeSwitcher.currentTheme"
             ok-text='{{ i18n "reset"}}'
             cancel-text='{{ i18n "cancel"}}'>
-            <a-icon slot="icon" type="question-circle-o" :style="themeSwitcher.isDarkTheme ? 'color: #3c89e8' : 'color: blue'"></a-icon>
+            <a-icon slot="icon" type="question-circle-o" :style="themeSwitcher.isDarkTheme ? 'color: #008771' : 'color: #008771'"></a-icon>
             <a-icon style="font-size: 24px; cursor: pointer;" class="normal-icon" type="retweet" v-if="client.email.length > 0"></a-icon>
         </a-popconfirm>
     </a-tooltip>

web/html/xui/inbound_info_modal.html

@@ -3,72 +3,89 @@
     v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
     :closable="true"
     :mask-closable="true"
-    :class="themeSwitcher.currentTheme"
     :footer="null"
     width="600px"
+    :class="themeSwitcher.currentTheme"
     >
-    <table style="margin-bottom: 10px; width: 100%;">
-        <tr><td>
-                <table>
-                    <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="purple">[[ dbInbound.protocol ]]</a-tag></td></tr>
-                    <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag>[[ dbInbound.address ]]</a-tag></td></tr>
-                    <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag>[[ dbInbound.port ]]</a-tag></td></tr>
-                </table>
-            </td>
-            <td v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                <table>
-                    <tr>
-                        <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
-                    </tr>
-                    <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
-                        <tr>
-                            <td>{{ i18n "host" }}</td>
-                            <td v-if="inbound.host"><a-tag>[[ inbound.host ]]</a-tag></td>
-                            <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
-                        </tr>
-                        <tr>
-                            <td>{{ i18n "path" }}</td>
-                            <td v-if="inbound.path"><a-tag>[[ inbound.path ]]</a-tag></td>
-                            <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td>
-                        </tr>
-                    </template>
-
-                    <template v-if="inbound.isQuic">
-                        <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.quicSecurity ]]</a-tag></td></tr>
-                        <tr><td>quic {{ i18n "password" }}</td><td><a-tag>[[ inbound.quicKey ]]</a-tag></td></tr>
-                        <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag>[[ inbound.quicType ]]</a-tag></td></tr>
-                    </template>
-        
-                    <template v-if="inbound.isKcp">
-                        <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.kcpType ]]</a-tag></td></tr>
-                        <tr><td>kcp {{ i18n "password" }}</td><td><a-tag>[[ inbound.kcpSeed ]]</a-tag></td></tr>
-                    </template>
-        
-                    <template v-if="inbound.isGrpc">
-                        <tr><td>grpc serviceName</td><td><a-tag>[[ inbound.serviceName ]]</a-tag></td></tr>
-                        <tr><td>grpc multiMode</td><td><a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
-                    </template>
-                </table>
-            </td></tr>
-        <tr colspan="2" v-if="dbInbound.hasLink()">
-            <td>
-                {{ i18n "security" }}
-                <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'blue'">[[ inbound.stream.security ]]</a-tag>
-                <br />
-                <template v-if="inbound.stream.security != 'none'">
-                {{ i18n "domainName" }}
-                <a-tag :color="inbound.serverName ? 'blue' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-                </template>
-            </td>
-        </tr>
-    </table>
+    <a-row>
+        <a-col :xs="24" :md="12">
+            <table>
+                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="purple">[[ dbInbound.protocol ]]</a-tag></td></tr>
+                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td>
+                    <a-tooltip :title="[[ dbInbound.address ]]">
+                        <a-tag class="info-large-tag">[[ dbInbound.address ]]</a-tag>
+                    </a-tooltip>
+                </td></tr>
+                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag>[[ dbInbound.port ]]</a-tag></td></tr>
+            </table>
+        </a-col>
+        <a-col :xs="24" :md="12">
+        <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
+            <table>
+                <tr>
+                    <td>{{ i18n "transmission" }}</td><td><a-tag color="green">[[ inbound.network ]]</a-tag></td>
+                </tr>
+            <template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
+                <tr>
+                    <td>{{ i18n "host" }}</td>
+                    <td v-if="inbound.host">
+                        <a-tooltip :title="[[ inbound.host ]]">
+                            <a-tag class="info-large-tag">[[ inbound.host ]]</a-tag>
+                        </a-tooltip>
+                    </td>
+                    <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
+                </tr>
+                <tr>
+                    <td>{{ i18n "path" }}</td>
+                    <td v-if="inbound.path">
+                        <a-tooltip :title="[[ inbound.path ]]">
+                            <a-tag class="info-large-tag">[[ inbound.path ]]</a-tag>
+                        </a-tooltip>
+                    <td v-else><a-tag color="orange">{{ i18n "none" }}</a-tag></td>
+                </tr>
+            </template>
+            
+            <template v-if="inbound.isQuic">
+                <tr><td>quic {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.quicSecurity ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "password" }}</td><td><a-tag>[[ inbound.quicKey ]]</a-tag></td></tr>
+                <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag>[[ inbound.quicType ]]</a-tag></td></tr>
+            </template>
+            
+            <template v-if="inbound.isKcp">
+                <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag>[[ inbound.kcpType ]]</a-tag></td></tr>
+                <tr><td>kcp {{ i18n "password" }}</td><td><a-tag>[[ inbound.kcpSeed ]]</a-tag></td></tr>
+            </template>
+            
+            <template v-if="inbound.isGrpc">
+                <tr><td>grpc serviceName</td><td>
+                    <a-tooltip :title="[[ inbound.serviceName ]]">
+                        <a-tag class="info-large-tag">[[ inbound.serviceName ]]</a-tag>
+                    </a-tooltip>
+                <tr><td>grpc multiMode</td><td><a-tag>[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
+            </template>
+            </table>
+        </template>
+        </a-col>
+        <template v-if="dbInbound.hasLink()">
+            {{ i18n "security" }}
+            <a-tag :color="inbound.stream.security == 'none' ? 'red' : 'green'">[[ inbound.stream.security ]]</a-tag>
+            <br />
+            <template v-if="inbound.stream.security != 'none'">
+            {{ i18n "domainName" }}
+            <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+            </template>
+        </template>
     <table v-if="dbInbound.isSS" style="margin-bottom: 10px; width: 100%;">
         <tr>
             <td>{{ i18n "encryption" }}</td>
             <td><a-tag color="green">[[ inbound.settings.method ]]</a-tag></td>
         </tr><tr v-if="inbound.isSS2022">
             <td>{{ i18n "password" }}</td>
-            <td><a-tag>[[ inbound.settings.password ]]</a-tag></td>
+            <td>
+                <a-tooltip :title="[[ inbound.settings.password  ]]">
+                    <a-tag class="info-large-tag">[[ inbound.settings.password  ]]</a-tag>
+                </a-tooltip>
+            </td>
         </tr><tr>
             <td>{{ i18n "pages.inbounds.network" }}</td>
             <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
@@ -89,9 +106,17 @@
                 <td>Flow</td>
                 <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
             </tr>
+            <tr v-if="infoModal.inbound.xtls">
+                <td>Flow</td>
+                <td><a-tag>[[ infoModal.clientSettings.flow ]]</a-tag></td>
+            </tr>
             <tr v-if="infoModal.clientSettings.password">
-                <td>Password</td>
-                <td><a-tag>[[ infoModal.clientSettings.password ]]</a-tag></td>
+                <td>{{ i18n "password" }}</td>
+                <td>
+                    <a-tooltip :title="[[ infoModal.clientSettings.password  ]]">
+                        <a-tag class="info-large-tag">[[ infoModal.clientSettings.password  ]]</a-tag>
+                    </a-tooltip>
+                </td>
             </tr>
             <tr>
                 <td>{{ i18n "status" }}</td>
@@ -115,69 +140,69 @@
                 <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
                 <th>{{ i18n "pages.inbounds.expireDate" }}</th>
             </tr>
-        <tr>
-            <td>
-                <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
-                    [[ sizeFormat(infoModal.clientSettings.totalGB - infoModal.clientStats.up - infoModal.clientStats.down) ]]
-                </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-else color="purple" class="infinite-tag">&infin;</a-tag>
-            </td>
-            <td>
-                <template v-if="infoModal.clientSettings.expiryTime > 0">
-                    <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
-                        [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
+            <tr>
+                <td>
+                    <a-tag v-if="infoModal.clientStats && infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
+                        [[ sizeFormat(infoModal.clientSettings.totalGB - infoModal.clientStats.up - infoModal.clientStats.down) ]]
                     </a-tag>
-                </template>
-                <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
-                <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
-            </td>
-        </tr>
-    </table>
-    <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
-        <a-divider>Subscription link</a-divider>
-        <a-row>
-            <a-col :span="22"><a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a></a-col>
-            <a-col :span="2">
-                <a-tooltip title='{{ i18n "copy" }}'>
-                    <button class="ant-btn ant-btn-primary" id="copy-sub-link" @click="copyToClipboard('copy-sub-link', infoModal.subLink)">
-                        <a-icon type="snippets"></a-icon>
-                    </button>
-                </a-tooltip>
-            </a-col>
-        </a-row>
+                </td>
+                <td>
+                    <a-tag v-if="infoModal.clientSettings.totalGB > 0" :color="statsColor(infoModal.clientStats)">
+                        [[ sizeFormat(infoModal.clientSettings.totalGB) ]]
+                    </a-tag>
+                    <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
+                </td>
+                <td>
+                    <template v-if="infoModal.clientSettings.expiryTime > 0">
+                        <a-tag :color="usageColor(new Date().getTime(), app.expireDiff, infoModal.clientSettings.expiryTime)">
+                            [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
+                        </a-tag>
+                    </template>
+                    <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="green">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
+                    <a-tag v-else color="purple" class="infinite-tag">&infin;</a-tag>
+                </td>
+            </tr>
+        </table>
+        <template v-if="app.subSettings.enable && infoModal.clientSettings.subId">
+            <a-divider>Subscription link</a-divider>
+            <a-row>
+                <a-col :sx="24" :md="22"><a :href="[[ infoModal.subLink ]]" target="_blank">[[ infoModal.subLink ]]</a></a-col>
+                <a-col :sx="24" :md="2" style="text-align: right;">
+                    <a-tooltip title='{{ i18n "copy" }}'>
+                        <button class="ant-btn ant-btn-primary" id="copy-sub-link" @click="copyToClipboard('copy-sub-link', infoModal.subLink)">
+                            <a-icon type="snippets"></a-icon>
+                        </button>
+                    </a-tooltip>
+                </a-col>
+            </a-row>
+        </template>
+        <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
+            <a-divider>Telegram ID</a-divider>
+            <a-row>
+                <a-col :sx="24" :md="22"><a :href="[[ infoModal.tgLink ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a></a-col>
+                <a-col :sx="24" :md="2" style="text-align: right;">
+                    <a-tooltip title='{{ i18n "copy" }}'>
+                        <button class="ant-btn ant-btn-primary" id="copy-tg-link" @click="copyToClipboard('copy-tg-link', '@' + infoModal.clientSettings.tgId)">
+                            <a-icon type="snippets"></a-icon>
+                        </button>
+                    </a-tooltip>
+                </a-col>
+            </a-row>
+        </template>
+        <template v-if="dbInbound.hasLink()">
+            <a-divider>URL</a-divider>
+            <a-row v-for="(link,index) in infoModal.links">
+                <a-col :sx="24" :md="22"><a-tag color="green">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
+                <a-col :sx="24" :md="2" style="text-align: right;">
+                    <a-tooltip title='{{ i18n "copy" }}'>
+                        <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
+                            <a-icon type="snippets"></a-icon>
+                        </button>
+                    </a-tooltip>
+                </a-col>
+            </a-row>
+        </template>
     </template>
-    <template v-if="app.tgBotEnable && infoModal.clientSettings.tgId">
-        <a-divider>Telegram Username</a-divider>
-        <a-row>
-            <a-col :span="22"><a :href="[[ infoModal.tgLink ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a></a-col>
-            <a-col :span="2">
-                <a-tooltip title='{{ i18n "copy" }}'>
-                    <button class="ant-btn ant-btn-primary" id="copy-tg-link" @click="copyToClipboard('copy-tg-link', '@' + infoModal.clientSettings.tgId)">
-                        <a-icon type="snippets"></a-icon>
-                    </button>
-                </a-tooltip>
-            </a-col>
-        </a-row>
-    </template>
-    <template v-if="dbInbound.hasLink()">
-        <a-divider>URL</a-divider>
-        <a-row v-for="(link,index) in infoModal.links">
-            <a-col :span="22"><a-tag color="green">[[ link.remark ]]</a-tag><br />[[ link.link ]]</a-col>
-            <a-col :span="2" style="text-align: right;">
-                <a-tooltip title='{{ i18n "copy" }}'>
-                    <button class="ant-btn ant-btn-primary" :id="'copy-url-link-'+index" @click="copyToClipboard('copy-url-link-'+index, link.link)">
-                        <a-icon type="snippets"></a-icon>
-                    </button>
-                </a-tooltip>
-            </a-col>
-        </a-row>
-    </template>
-</template>
     <template v-else>
         <template v-if="dbInbound.isSS && !inbound.isSSMultiUser">
             <a-divider>URL</a-divider>
@@ -217,7 +242,7 @@
                 <td><a-tag color="green">[[ inbound.settings.ip ]]</a-tag></td>
             </tr>
             <template v-if="inbound.settings.auth == 'password'">
-                <tr>
+            <tr>
                 <td> </td>
                 <td>{{ i18n "username" }}</td>
                 <td>{{ i18n "password" }}</td>
@@ -226,9 +251,9 @@
                 <td><a-tag color="green">[[ account.user ]]</a-tag></td>
                 <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
             </tr>
-        </template>
-    </table>
-    <table v-if="dbInbound.isHTTP" style="margin-bottom: 10px; width: 100%;">
+            </template>
+        </table>
+        <table v-if="dbInbound.isHTTP" style="margin-bottom: 10px; width: 100%;">
             <tr>
                 <th> </th>
                 <th>{{ i18n "username" }}</th>
@@ -246,7 +271,6 @@
         visible: false,
         inbound: new Inbound(),
         dbInbound: new DBInbound(),
-        settings: null,
         clientSettings: null,
         clientStats: [],
         upStats: 0,
@@ -279,7 +303,7 @@
             infoModal.visible = false;
         },
         genSubLink(subID) {
-            return app.subSettings.subURI+subID+'?name='+subID;
+            return app.subSettings.subURI+subID;
         }
     };
 
@@ -295,24 +319,24 @@
                 return this.infoModal.inbound;
             },
             get isActive() {
-                if (infoModal.clientStats) {
+                if(infoModal.clientStats){
                     return infoModal.clientStats.enable;
                 }
                 return true;
             },
             get isEnable() {
-                if (infoModal.clientSettings) {
+                if(infoModal.clientSettings){
                     return infoModal.clientSettings.enable;
                 }
                 return infoModal.dbInbound.isEnable;
             },
         },
         methods: {
-            copyToClipboard(elmentId, content) {
+            copyToClipboard(elmentId,content) {
                 this.infoModal.clipboard = new ClipboardJS('#' + elmentId, {
-                    text: () => content,
-                });
-                this.infoModal.clipboard.on('success', () => {
+                        text: () => content,
+                    });
+                this.infoModal.clipboard.on('success', () => { 
                     app.$message.success('{{ i18n "copied" }}')
                     this.infoModal.clipboard.destroy();
                 });
@@ -321,6 +345,7 @@
                 return usageColor(stats.up + stats.down, app.trafficDiff, stats.total);
             }
         },
+        
     });
 
 </script>

web/html/xui/inbound_modal.html

@@ -98,6 +98,11 @@
                         client.flow = "";
                     });
                 }
+                if ((this.inModal.inbound.protocol == Protocols.VLESS || this.inModal.inbound.protocol == Protocols.TROJAN) && !inModal.inbound.xtls) {
+                    this.inModal.inbound.settings.vlesses.forEach(client => {
+                        client.flow = "";
+                    });
+                }
             },
             SSMethodChange() {
                 if (this.inModal.inbound.isSSMultiUser) {

web/html/xui/inbounds.html

@@ -43,6 +43,10 @@
         0%, 50%, 100%   { transform: scale(1);  opacity:  1; }
         10%             { transform: scale(1.5); opacity: .2; }
     }
+    .info-large-tag {
+        max-width: 200px;
+        overflow: hidden;
+    }
 </style>
 
 <body>
@@ -419,11 +423,11 @@
                             </template>
                             <template slot="expandedRowRender" slot-scope="record">
                                 <a-table
-                                :row-key="client => client.id"
-                                :columns="isMobile ? innerMobileColumns : innerColumns"
-                                :data-source="getInboundClients(record)"
-                                :pagination=pagination(getInboundClients(record))
-                                :style="isMobile ? 'margin: -12px -5px -13px;' : 'margin-left: 10px;'">
+                                    :row-key="client => client.id"
+                                    :columns="isMobile ? innerMobileColumns : innerColumns"
+                                    :data-source="getInboundClients(record)"
+                                    :pagination=pagination(getInboundClients(record))
+                                    style="margin: -12px 2px -13px;">
                                     {{template "client_table"}}
                                 </a-table>
                             </template>
@@ -1089,7 +1093,7 @@
                     title: '{{ i18n "pages.inbounds.delDepletedClientsTitle"}}',
                     content: '{{ i18n "pages.inbounds.delDepletedClientsContent"}}',
                     class: themeSwitcher.currentTheme,
-                    okText: '{{ i18n "reset"}}',
+                    okText: '{{ i18n "delete"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => this.submit('/panel/inbound/delDepletedClients/' + dbInboundId),
                 })
@@ -1175,7 +1179,7 @@
             inboundLinks(dbInboundId) {
                 dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                 newDbInbound = this.checkFallback(dbInbound);
-                txtModal.show('{{ i18n "pages.inbounds.export"}}', newDbInbound.genInboundLinks, newDbInbound.remark);
+                txtModal.show('{{ i18n "pages.inbounds.export"}}', newDbInbound.genInboundLinks(), newDbInbound.remark);
             },
             importInbound() {
                 promptModal.open({
@@ -1306,4 +1310,4 @@
 {{template "clientsBulkModal"}}
 
 </body>
-</html>
+</html>

web/html/xui/index.html

@@ -102,7 +102,7 @@
                                 <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" theme="filled"></a-icon>
+                                <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>                    
@@ -125,7 +125,7 @@
                                 <template slot="title">
                                     {{ i18n "pages.index.systemLoadDesc" }}
                                 </template>
-                                <a-icon type="question-circle" theme="filled"></a-icon>
+                                <a-icon type="question-circle"></a-icon>
                             </a-tooltip>
                         </a-card>
                     </a-col>
@@ -146,7 +146,7 @@
                                         <template slot="title">
                                             [[ status.publicIP.ipv4 ]]
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
                                 </a-col>
                                 <a-col :span="12">
@@ -155,7 +155,7 @@
                                         <template slot="title">
                                             [[ status.publicIP.ipv6 ]]
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
                                 </a-col>
                             </a-row>
@@ -170,7 +170,7 @@
                                         <template slot="title">
                                             {{ i18n "pages.index.connectionTcpCountDesc" }}
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
                                 </a-col>
                                 <a-col :span="12">
@@ -179,7 +179,7 @@
                                         <template slot="title">
                                             {{ i18n "pages.index.connectionUdpCountDesc" }}
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
                                 </a-col>
                             </a-row>
@@ -195,7 +195,7 @@
                                         <template slot="title">
                                             {{ i18n "pages.index.upSpeed" }}
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
                                 </a-col>
                                 <a-col :span="12">
@@ -205,7 +205,7 @@
                                         <template slot="title">
                                             {{ i18n "pages.index.downSpeed" }}
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
                                 </a-col>
                             </a-row>
@@ -221,7 +221,7 @@
                                         <template slot="title">
                                             {{ i18n "pages.index.totalSent" }}
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
                                 </a-col>
                                 <a-col :span="12">
@@ -231,7 +231,7 @@
                                         <template slot="title">
                                             {{ i18n "pages.index.totalReceive" }}
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-tooltip>
                                 </a-col>
                             </a-row>

web/html/xui/xray.html

@@ -3,7 +3,7 @@
 {{template "head" .}}
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/codemirror.css">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/fold/foldgutter.css">
-<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.css">
+<link rel="stylesheet" href="{{ .base_path }}assets/codemirror/xq.css?{{ .cur_ver }}">
 <link rel="stylesheet" href="{{ .base_path }}assets/codemirror/lint/lint.css">
 
 <script src="{{ .base_path }}assets/js/model/outbound.js"></script>
@@ -29,6 +29,10 @@
             margin: 0;
             padding: 12px .5rem;
         }
+        .ant-table-thead > tr > th,
+        .ant-table-tbody > tr > td {
+            padding: 10px 0px;
+        }
     }
 
     .ant-tabs-bar {
@@ -71,7 +75,7 @@
                                         <template slot="content">
                                             <p style="max-width: 400px" v-for="line in restartResult.split('\n')">[[ line ]]</p>
                                         </template>
-                                        <a-icon type="question-circle" theme="filled"></a-icon>
+                                        <a-icon type="question-circle"></a-icon>
                                     </a-popover>
                                 </a-space>
                             </a-col>
@@ -106,8 +110,8 @@
                                         <a-row style="padding: 20px">
                                             <a-col :lg="24" :xl="12">
                                                 <a-list-item-meta 
-                                                    title='{{ i18n "pages.xray.xrayConfigFreedomStrategy" }}'
-                                                    description='{{ i18n "pages.xray.xrayConfigFreedomStrategyDesc" }}'/>
+                                                    title='{{ i18n "pages.xray.FreedomStrategy" }}'
+                                                    description='{{ i18n "pages.xray.FreedomStrategyDesc" }}'/>
                                             </a-col>
                                             <a-col :lg="24" :xl="12">
                                                 <template>
@@ -124,8 +128,8 @@
                                     <a-row style="padding: 20px">
                                         <a-col :lg="24" :xl="12">
                                             <a-list-item-meta 
-                                                title='{{ i18n "pages.xray.xrayConfigRoutingStrategy" }}'
-                                                description='{{ i18n "pages.xray.xrayConfigRoutingStrategyDesc" }}'/>
+                                                title='{{ i18n "pages.xray.RoutingStrategy" }}'
+                                                description='{{ i18n "pages.xray.RoutingStrategyDesc" }}'/>
                                         </a-col>
                                         <a-col :lg="24" :xl="12">
                                             <template>
@@ -149,11 +153,11 @@
                                             </template>
                                         </a-alert>
                                     </a-row>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigTorrent"}}' desc='{{ i18n "pages.xray.xrayConfigTorrentDesc"}}' v-model="torrentSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigPrivateIp"}}' desc='{{ i18n "pages.xray.xrayConfigPrivateIpDesc"}}' v-model="privateIpSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigAds"}}' desc='{{ i18n "pages.xray.xrayConfigAdsDesc"}}' v-model="AdsSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigFamily"}}' desc='{{ i18n "pages.xray.xrayConfigFamilyDesc"}}' v-model="familyProtectSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigSpeedtest"}}' desc='{{ i18n "pages.xray.xrayConfigSpeedtestDesc"}}' v-model="SpeedTestSettings"></setting-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.PrivateIp"}}' desc='{{ i18n "pages.xray.PrivateIpDesc"}}' v-model="privateIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.Ads"}}' desc='{{ i18n "pages.xray.AdsDesc"}}' v-model="AdsSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.Family"}}' desc='{{ i18n "pages.xray.FamilyDesc"}}' v-model="familyProtectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.Speedtest"}}' desc='{{ i18n "pages.xray.SpeedtestDesc"}}' v-model="SpeedTestSettings"></setting-list-item>
                                 </a-collapse-panel>
                                 <a-collapse-panel header='{{ i18n "pages.xray.blockCountryConfigs"}}'>
                                     <a-row :xs="24" :sm="24" :lg="12">
@@ -164,12 +168,12 @@
                                             </template>
                                         </a-alert>
                                     </a-row>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigIRIp"}}' desc='{{ i18n "pages.xray.xrayConfigIRIpDesc"}}' v-model="IRIpSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigIRDomain"}}' desc='{{ i18n "pages.xray.xrayConfigIRDomainDesc"}}' v-model="IRDomainSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigChinaIp"}}' desc='{{ i18n "pages.xray.xrayConfigChinaIpDesc"}}' v-model="ChinaIpSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigChinaDomain"}}' desc='{{ i18n "pages.xray.xrayConfigChinaDomainDesc"}}' v-model="ChinaDomainSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigRussiaIp"}}' desc='{{ i18n "pages.xray.xrayConfigRussiaIpDesc"}}' v-model="RussiaIpSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigRussiaDomain"}}' desc='{{ i18n "pages.xray.xrayConfigRussiaDomainDesc"}}' v-model="RussiaDomainSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.IRIp"}}' desc='{{ i18n "pages.xray.IRIpDesc"}}' v-model="IRIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.IRDomain"}}' desc='{{ i18n "pages.xray.IRDomainDesc"}}' v-model="IRDomainSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.ChinaIp"}}' desc='{{ i18n "pages.xray.ChinaIpDesc"}}' v-model="ChinaIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.ChinaDomain"}}' desc='{{ i18n "pages.xray.ChinaDomainDesc"}}' v-model="ChinaDomainSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.RussiaIp"}}' desc='{{ i18n "pages.xray.RussiaIpDesc"}}' v-model="RussiaIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.RussiaDomain"}}' desc='{{ i18n "pages.xray.RussiaDomainDesc"}}' v-model="RussiaDomainSettings"></setting-list-item>
                                 </a-collapse-panel>
                                 <a-collapse-panel header='{{ i18n "pages.xray.directCountryConfigs"}}'>
                                     <a-row :xs="24" :sm="24" :lg="12">
@@ -180,12 +184,12 @@
                                             </template>
                                         </a-alert>
                                     </a-row>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigDirectIRIp"}}' desc='{{ i18n "pages.xray.xrayConfigDirectIRIpDesc"}}' v-model="IRIpDirectSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigDirectIRDomain"}}' desc='{{ i18n "pages.xray.xrayConfigDirectIRDomainDesc"}}' v-model="IRDomainDirectSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigDirectChinaIp"}}' desc='{{ i18n "pages.xray.xrayConfigDirectChinaIpDesc"}}' v-model="ChinaIpDirectSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigDirectChinaDomain"}}' desc='{{ i18n "pages.xray.xrayConfigDirectChinaDomainDesc"}}' v-model="ChinaDomainDirectSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigDirectRussiaIp"}}' desc='{{ i18n "pages.xray.xrayConfigDirectRussiaIpDesc"}}' v-model="RussiaIpDirectSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigDirectRussiaDomain"}}' desc='{{ i18n "pages.xray.xrayConfigDirectRussiaDomainDesc"}}' v-model="RussiaDomainDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectIRIp"}}' desc='{{ i18n "pages.xray.DirectIRIpDesc"}}' v-model="IRIpDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectIRDomain"}}' desc='{{ i18n "pages.xray.DirectIRDomainDesc"}}' v-model="IRDomainDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectChinaIp"}}' desc='{{ i18n "pages.xray.DirectChinaIpDesc"}}' v-model="ChinaIpDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectChinaDomain"}}' desc='{{ i18n "pages.xray.DirectChinaDomainDesc"}}' v-model="ChinaDomainDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectRussiaIp"}}' desc='{{ i18n "pages.xray.DirectRussiaIpDesc"}}' v-model="RussiaIpDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectRussiaDomain"}}' desc='{{ i18n "pages.xray.DirectRussiaDomainDesc"}}' v-model="RussiaDomainDirectSettings"></setting-list-item>
                                 </a-collapse-panel>
                                 <a-collapse-panel header='{{ i18n "pages.xray.ipv4Configs"}}'>
                                     <a-row :xs="24" :sm="24" :lg="12">
@@ -196,8 +200,8 @@
                                             </template>
                                         </a-alert>
                                     </a-row>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigGoogleIPv4"}}' desc='{{ i18n "pages.xray.xrayConfigGoogleIPv4Desc"}}' v-model="GoogleIPv4Settings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigNetflixIPv4"}}' desc='{{ i18n "pages.xray.xrayConfigNetflixIPv4Desc"}}' v-model="NetflixIPv4Settings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.GoogleIPv4"}}' desc='{{ i18n "pages.xray.GoogleIPv4Desc"}}' v-model="GoogleIPv4Settings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.NetflixIPv4"}}' desc='{{ i18n "pages.xray.NetflixIPv4Desc"}}' v-model="NetflixIPv4Settings"></setting-list-item>
                                 </a-collapse-panel>
                                 <a-collapse-panel header='{{ i18n "pages.xray.warpConfigs"}}'>
                                     <a-row :xs="24" :sm="24" :lg="12">
@@ -208,10 +212,10 @@
                                             </template>
                                         </a-alert>
                                     </a-row>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigGoogleWARP"}}' desc='{{ i18n "pages.xray.xrayConfigGoogleWARPDesc"}}' v-model="GoogleWARPSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigOpenAIWARP"}}' desc='{{ i18n "pages.xray.xrayConfigOpenAIWARPDesc"}}' v-model="OpenAIWARPSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigNetflixWARP"}}' desc='{{ i18n "pages.xray.xrayConfigNetflixWARPDesc"}}' v-model="NetflixWARPSettings"></setting-list-item>
-                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.xrayConfigSpotifyWARP"}}' desc='{{ i18n "pages.xray.xrayConfigSpotifyWARPDesc"}}' v-model="SpotifyWARPSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.GoogleWARP"}}' desc='{{ i18n "pages.xray.GoogleWARPDesc"}}' v-model="GoogleWARPSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.OpenAIWARP"}}' desc='{{ i18n "pages.xray.OpenAIWARPDesc"}}' v-model="OpenAIWARPSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.NetflixWARP"}}' desc='{{ i18n "pages.xray.NetflixWARPDesc"}}' v-model="NetflixWARPSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.SpotifyWARP"}}' desc='{{ i18n "pages.xray.SpotifyWARPDesc"}}' v-model="SpotifyWARPSettings"></setting-list-item>
                                 </a-collapse-panel>
                             </a-collapse>
                         </a-tab-pane>
@@ -527,7 +531,7 @@
                 ips: {
                     local: ["geoip:private"],
                     cn: ["geoip:cn"],
-                    ir: ["ext:geoip_IR.dat:ir","ext:geoip_IR.dat:arvancloud","ext:geoip_IR.dat:derakcloud","ext:geoip_IR.dat:iranserver"],
+                    ir: ["ext:geoip_IR.dat:ir"],
                     ru: ["geoip:ru"],
                 },
                 domains: {
@@ -1398,4 +1402,4 @@
     });
 </script>
 </body>
-</html>
+</html>

web/html/xui/xray_reverse_modal.html

@@ -2,77 +2,41 @@
 <a-modal id="reverse-modal" v-model="reverseModal.visible" :title="reverseModal.title" @ok="reverseModal.ok"
          :confirm-loading="reverseModal.confirmLoading" :closable="true" :mask-closable="false"
          :ok-text="reverseModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-    <a-form layout="inline">
-    <table width="100%" class="ant-table-tbody">
-        <tr>
-            <td>{{ i18n "pages.xray.outbound.type" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="reverseModal.reverse.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x,y in reverseTypes" :value="y">[[ x ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.xray.outbound.tag" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="reverseModal.reverse.tag" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.xray.outbound.domain" }}</td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="reverseModal.reverse.domain" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
+    <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='{{ i18n "pages.xray.outbound.type" }}'>
+            <a-select v-model="reverseModal.reverse.type" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x,y in reverseTypes" :value="y">[[ x ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.outbound.tag" }}'>
+            <a-input v-model.trim="reverseModal.reverse.tag"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.outbound.domain" }}'>
+            <a-input v-model.trim="reverseModal.reverse.domain"></a-input>
+        </a-form-item>
         <template v-if="reverseModal.reverse.type=='bridge'">
-        <tr>
-            <td>{{ i18n "pages.xray.outbound.intercon" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="reverseModal.rules[0].outboundTag" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>{{ i18n "pages.xray.rules.outbound" }}</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="reverseModal.rules[1].outboundTag" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+        <a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
+            <a-select v-model="reverseModal.rules[0].outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.xray.rules.outbound" }}'>
+            <a-select v-model="reverseModal.rules[1].outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x in reverseModal.outboundTags" :value="x">[[ x ]]</a-select-option>
+            </a-select>
+        </a-form-item>
         </template>
         <template v-else>
-            <tr>
-                <td>{{ i18n "pages.xray.outbound.intercon" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-checkbox-group
-                            v-model="reverseModal.rules[0].inboundTag"
-                            :options="reverseModal.inboundTags"></a-checkbox-group>
-                    </a-form-item>
-                </td>
-            </tr>
-            <tr>
-                <td>{{ i18n "pages.xray.rules.inbound" }}</td>
-                <td>
-                    <a-form-item>
-                        <a-checkbox-group
-                            v-model="reverseModal.rules[1].inboundTag"
-                            :options="reverseModal.inboundTags"></a-checkbox-group>
-                    </a-form-item>
-                </td>
-            </tr>
+            <a-form-item label='{{ i18n "pages.xray.outbound.intercon" }}'>
+                <a-checkbox-group
+                    v-model="reverseModal.rules[0].inboundTag"
+                    :options="reverseModal.inboundTags"></a-checkbox-group>
+            </a-form-item>
+            <a-form-item label='{{ i18n "pages.xray.rules.inbound" }}'>
+                <a-checkbox-group
+                    v-model="reverseModal.rules[1].inboundTag"
+                    :options="reverseModal.inboundTags"></a-checkbox-group>
+            </a-form-item>
         </template>
     </table>
     </a-form>
@@ -173,4 +137,4 @@
     });
 
 </script>
-{{end}}
+{{end}}

web/html/xui/xray_rule_modal.html

@@ -2,149 +2,100 @@
 <a-modal id="rule-modal" v-model="ruleModal.visible" :title="ruleModal.title" @ok="ruleModal.ok"
          :confirm-loading="ruleModal.confirmLoading" :closable="true" :mask-closable="false"
          :ok-text="ruleModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
-    <a-form layout="inline">
-        <table width="100%" class="ant-table-tbody">
-            <tr>
-            <td style="width: 30%;">Domain Matcher</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="ruleModal.rule.domainMatcher" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
+    <a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+        <a-form-item label='Domain Matcher'>
+                    <a-select v-model="ruleModal.rule.domainMatcher" :dropdown-class-name="themeSwitcher.currentTheme">
                         <a-select-option v-for="dm in ['','hybrid','linear']" :value="dm">[[ dm ]]</a-select-option>
                     </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Source IPs
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
                 <a-tooltip>
                     <template slot="title">
                         <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                     </template>
-                    <a-icon type="question-circle"></a-icon>
+                    Source IPs <a-icon type="question-circle"></a-icon>
                 </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.source" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Source Port
+            </template>
+            <a-input v-model.trim="ruleModal.rule.source"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">Source Port
                 <a-tooltip>
                     <template slot="title">
                         <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                     </template>
-                    <a-icon type="question-circle"></a-icon>
+                    Source Port <a-icon type="question-circle"></a-icon>
                 </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.sourcePort" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Network</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="ruleModal.rule.network" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x in ['','tcp','tdp','tcp,udp']" :value="x">[[ x ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Protocol</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="ruleModal.rule.protocol" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="x in ['','http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td colspan="2">
-                <a-form-item>
-                    <span>Attributes</span>
-                    <a-button size="small" style="margin-left: 10px" @click="ruleModal.rule.attrs.push(['', ''])">+</a-button>
-                    <a-input-group compact v-for="(attr,index) in ruleModal.rule.attrs">
-                        <a-input style="width: 50%" v-model="attr[0]" 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="attr[1]" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
-                            <a-button slot="addonAfter" size="small" @click="ruleModal.rule.attrs.splice(index,1)">-</a-button>
-                        </a-input>
-                    </a-input-group>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>IP
+            </template>
+            <a-input v-model.trim="ruleModal.rule.sourcePort"></a-input>
+        </a-form-item>
+        <a-form-item label='Network'>
+            <a-select v-model="ruleModal.rule.network" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x in ['','tcp','tdp','tcp,udp']" :value="x">[[ x ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Protocol'>
+            <a-select v-model="ruleModal.rule.protocol" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="x in ['','http','tls','bittorrent']" :value="x">[[ x ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Attributes'>
+            <a-button size="small" style="margin-left: 10px" @click="ruleModal.rule.attrs.push(['', ''])">+</a-button>
+        </a-form-item>
+        <a-form-item :wrapper-col="{span: 24}">
+            <a-input-group compact v-for="(attr,index) in ruleModal.rule.attrs">
+                <a-input style="width: 50%" v-model="attr[0]" 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="attr[1]" placeholder='{{ i18n "pages.inbounds.stream.general.value" }}'>
+                    <a-button slot="addonAfter" size="small" @click="ruleModal.rule.attrs.splice(index,1)">-</a-button>
+                </a-input>
+            </a-input-group>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
                 <a-tooltip>
                     <template slot="title">
                         <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                     </template>
-                    <a-icon type="question-circle"></a-icon>
+                    IP <a-icon type="question-circle"></a-icon>
                 </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.ip" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Domain
+            </template>
+            <a-input v-model.trim="ruleModal.rule.ip"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
                 <a-tooltip>
                     <template slot="title">
                         <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                     </template>
-                    <a-icon type="question-circle"></a-icon>
+                    Domain <a-icon type="question-circle"></a-icon>
                 </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.domain" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Port
+            </template>
+            <a-input v-model.trim="ruleModal.rule.domain"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
                 <a-tooltip>
                     <template slot="title">
                         <span>{{ i18n "pages.xray.rules.useComma" }}</span>
                     </template>
-                    <a-icon type="question-circle"></a-icon>
+                    Port <a-icon type="question-circle"></a-icon>
                 </a-tooltip>
-            </td>
-            <td>
-                <a-form-item>
-                    <a-input v-model.trim="ruleModal.rule.port" style="width: 250px"></a-input>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Inbound Tags</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
-        <tr>
-            <td>Outbound Tag</td>
-            <td>
-                <a-form-item>
-                    <a-select v-model="ruleModal.rule.outboundTag" style="width: 250px;" :dropdown-class-name="themeSwitcher.currentTheme">
-                        <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
-                    </a-select>
-                </a-form-item>
-            </td>
-        </tr>
+            </template>
+            <a-input v-model.trim="ruleModal.rule.port"></a-input>
+        </a-form-item>
+        <a-form-item label='Inbound Tags'>
+            <a-select v-model="ruleModal.rule.inboundTag" mode="multiple" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="tag in ruleModal.inboundTags" :value="tag">[[ tag ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label='Outbound Tag'>
+            <a-select v-model="ruleModal.rule.outboundTag" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="tag in ruleModal.outboundTags" :value="tag">[[ tag ]]</a-select-option>
+            </a-select>
+        </a-form-item>
     </table>
     </a-form>
 </a-modal>
@@ -274,4 +225,4 @@
     });
 
 </script>
-{{end}}
+{{end}}

web/translation/translate.en_US.toml

@@ -315,71 +315,67 @@
 "ipv4ConfigsDesc" = "These options will route to target domains only via IPv4."
 "warpConfigs" = "WARP Configs"
 "warpConfigsDesc" = "Caution: Before using these options, install WARP in socks5 proxy mode on your server by following the steps on the panel's GitHub. WARP will route traffic to websites through Cloudflare servers."
-"xrayConfigTemplate" = "Xray Configuration Template"
-"xrayConfigTemplateDesc" = "Generate the final Xray configuration file based on this template."
-"xrayConfigFreedomStrategy" = "Configure Strategy for Freedom Protocol"
-"xrayConfigFreedomStrategyDesc" = "Set the output strategy of the network in the Freedom Protocol."
-"xrayConfigRoutingStrategy" = "Configure Domains Routing Strategy"
-"xrayConfigRoutingStrategyDesc" = "Set the overall routing strategy for DNS resolving."
-"xrayConfigTorrent" = "Ban BitTorrent Usage"
-"xrayConfigTorrentDesc" = "Change the configuration template to avoid using BitTorrent by users."
-"xrayConfigPrivateIp" = "Ban Private IP Ranges to Connect"
-"xrayConfigPrivateIpDesc" = "Change the configuration template to avoid connecting to private IP ranges."
-"xrayConfigAds" = "Block Ads"
-"xrayConfigAdsDesc" = "Change the configuration template to block ads."
-"xrayConfigFamily" = "Block Malware and Adult Content"
-"xrayConfigFamilyDesc" = "DNS resolvers to block malware and adult content for family protection."
-"xrayConfigSpeedtest" = "Block Speedtest Websites"
-"xrayConfigSpeedtestDesc" = "Change the configuration template to avoid connecting to speedtest websites."
-"xrayConfigIRIp" = "Disable connection to Iran IP ranges"
-"xrayConfigIRIpDesc" = "Change the configuration template to avoid connecting to Iran IP ranges."
-"xrayConfigIRDomain" = "Disable connection to Iran domains"
-"xrayConfigIRDomainDesc" = "Change the configuration template to avoid connecting to Iran domains."
-"xrayConfigChinaIp" = "Disable connection to China IP ranges"
-"xrayConfigChinaIpDesc" = "Change the configuration template to avoid connecting to China IP ranges."
-"xrayConfigChinaDomain" = "Disable connection to China domains"
-"xrayConfigChinaDomainDesc" = "Change the configuration template to avoid connecting to China domains."
-"xrayConfigRussiaIp" = "Disable connection to Russia IP ranges"
-"xrayConfigRussiaIpDesc" = "Change the configuration template to avoid connecting to Russia IP ranges."
-"xrayConfigRussiaDomain" = "Disable connection to Russia domains"
-"xrayConfigRussiaDomainDesc" = "Change the configuration template to avoid connecting to Russia domains."
-"xrayConfigDirectIRIp" = "Direct connection to Iran IP ranges"
-"xrayConfigDirectIRIpDesc" = "Change the configuration template for direct connecting to Iran IP ranges."
-"xrayConfigDirectIRDomain" = "Direct connection to Iran domains"
-"xrayConfigDirectIRDomainDesc" = "Change the configuration template for direct connecting to Iran domains."
-"xrayConfigDirectChinaIp" = "Direct connection to China IP ranges"
-"xrayConfigDirectChinaIpDesc" = "Change the configuration template for direct connecting to China IP ranges."
-"xrayConfigDirectChinaDomain" = "Direct connection to China domains"
-"xrayConfigDirectChinaDomainDesc" = "Change the configuration template for direct connecting to China domains."
-"xrayConfigDirectRussiaIp" = "Direct connection to Russia IP ranges"
-"xrayConfigDirectRussiaIpDesc" = "Change the configuration template for direct connecting to Russia IP ranges."
-"xrayConfigDirectRussiaDomain" = "Direct connection to Russia domains"
-"xrayConfigDirectRussiaDomainDesc" = "Change the configuration template for direct connecting to Russia domains."
-"xrayConfigGoogleIPv4" = "Use IPv4 for Google"
-"xrayConfigGoogleIPv4Desc" = "Add routing for Google to connect with IPv4."
-"xrayConfigNetflixIPv4" = "Use IPv4 for Netflix"
-"xrayConfigNetflixIPv4Desc" = "Add routing for Netflix to connect with IPv4."
-"xrayConfigGoogleWARP" = "Route Google through WARP."
-"xrayConfigGoogleWARPDesc" = "Add routing for Google via WARP."
-"xrayConfigOpenAIWARP" = "Route OpenAI (ChatGPT) through WARP."
-"xrayConfigOpenAIWARPDesc" = "Add routing for OpenAI (ChatGPT) via WARP."
-"xrayConfigNetflixWARP" = "Route Netflix through WARP."
-"xrayConfigNetflixWARPDesc" = "Add routing for Netflix via WARP."
-"xrayConfigSpotifyWARP" = "Route Spotify through WARP."
-"xrayConfigSpotifyWARPDesc" = "Add routing for Spotify via WARP."
-"xrayConfigIRWARP" = "Route Iran domains through WARP."
-"xrayConfigIRWARPDesc" = "Add routing for Iran domains via WARP."
-"xrayConfigInbounds" = "Configuration of Inbounds"
-"xrayConfigInboundsDesc" = "Change the configuration template to accept specific clients."
-"xrayConfigOutbounds" = "Configuration of Outbounds"
-"xrayConfigOutboundsDesc" = "Change the configuration template to define outgoing ways for this server."
-"xrayConfigRoutings" = "Configuration of routing rules."
-"xrayConfigRoutingsDesc" = "Change the configuration template to define routing rules for this server."
-"completeTemplate" = "All"
+"Template" = "Xray Configuration Template"
+"TemplateDesc" = "Generate the final Xray configuration file based on this template."
+"FreedomStrategy" = "Configure Strategy for Freedom Protocol"
+"FreedomStrategyDesc" = "Set the output strategy of the network in the Freedom Protocol."
+"RoutingStrategy" = "Configure Domains Routing Strategy"
+"RoutingStrategyDesc" = "Set the overall routing strategy for DNS resolving."
+"Torrent" = "Ban BitTorrent Usage"
+"TorrentDesc" = "Change the configuration template to avoid using BitTorrent by users."
+"PrivateIp" = "Ban Private IP Ranges to Connect"
+"PrivateIpDesc" = "Change the configuration template to avoid connecting to private IP ranges."
+"Ads" = "Block Ads"
+"AdsDesc" = "Change the configuration template to block ads."
+"Family" = "Block Malware and Adult Content"
+"FamilyDesc" = "DNS resolvers to block malware and adult content for family protection."
+"Speedtest" = "Block Speedtest Websites"
+"SpeedtestDesc" = "Change the configuration template to avoid connecting to speedtest websites."
+"IRIp" = "Disable connection to Iran IP ranges"
+"IRIpDesc" = "Change the configuration template to avoid connecting to Iran IP ranges."
+"IRDomain" = "Disable connection to Iran domains"
+"IRDomainDesc" = "Change the configuration template to avoid connecting to Iran domains."
+"ChinaIp" = "Disable connection to China IP ranges"
+"ChinaIpDesc" = "Change the configuration template to avoid connecting to China IP ranges."
+"ChinaDomain" = "Disable connection to China domains"
+"ChinaDomainDesc" = "Change the configuration template to avoid connecting to China domains."
+"RussiaIp" = "Disable connection to Russia IP ranges"
+"RussiaIpDesc" = "Change the configuration template to avoid connecting to Russia IP ranges."
+"RussiaDomain" = "Disable connection to Russia domains"
+"RussiaDomainDesc" = "Change the configuration template to avoid connecting to Russia domains."
+"DirectIRIp" = "Direct connection to Iran IP ranges"
+"DirectIRIpDesc" = "Change the configuration template for direct connecting to Iran IP ranges."
+"DirectIRDomain" = "Direct connection to Iran domains"
+"DirectIRDomainDesc" = "Change the configuration template for direct connecting to Iran domains."
+"DirectChinaIp" = "Direct connection to China IP ranges"
+"DirectChinaIpDesc" = "Change the configuration template for direct connecting to China IP ranges."
+"DirectChinaDomain" = "Direct connection to China domains"
+"DirectChinaDomainDesc" = "Change the configuration template for direct connecting to China domains."
+"DirectRussiaIp" = "Direct connection to Russia IP ranges"
+"DirectRussiaIpDesc" = "Change the configuration template for direct connecting to Russia IP ranges."
+"DirectRussiaDomain" = "Direct connection to Russia domains"
+"DirectRussiaDomainDesc" = "Change the configuration template for direct connecting to Russia domains."
+"GoogleIPv4" = "Use IPv4 for Google"
+"GoogleIPv4Desc" = "Add routing for Google to connect with IPv4."
+"NetflixIPv4" = "Use IPv4 for Netflix"
+"NetflixIPv4Desc" = "Add routing for Netflix to connect with IPv4."
+"GoogleWARP" = "Route Google through WARP."
+"GoogleWARPDesc" = "Add routing for Google via WARP."
+"OpenAIWARP" = "Route OpenAI (ChatGPT) through WARP."
+"OpenAIWARPDesc" = "Add routing for OpenAI (ChatGPT) via WARP."
+"NetflixWARP" = "Route Netflix through WARP."
+"NetflixWARPDesc" = "Add routing for Netflix via WARP."
+"SpotifyWARP" = "Route Spotify through WARP."
+"SpotifyWARPDesc" = "Add routing for Spotify via WARP."
+"IRWARP" = "Route Iran domains through WARP."
+"IRWARPDesc" = "Add routing for Iran domains via WARP."
 "Inbounds" = "Inbounds"
+"InboundsDesc" = "Change the configuration template to accept specific clients."
 "Outbounds" = "Outbounds"
-"Routings" = "Routing rules"
+"OutboundsDesc" = "Change the configuration template to define outgoing ways for this server."
+"Routings" = "routing rules."
 "RoutingsDesc" = "The priority of each rule is important!"
+"completeTemplate" = "All"
 
 [pages.xray.rules]
 "first" = "First"

web/translation/translate.es_ES.toml

@@ -315,71 +315,67 @@
 "ipv4ConfigsDesc" = "Estas opciones solo enrutarán a los dominios objetivo a través de IPv4."
 "warpConfigs" = "Configuraciones de WARP"
 "warpConfigsDesc" = "Precaución: Antes de usar estas opciones, instale WARP en modo de proxy socks5 en su servidor siguiendo los pasos en el GitHub del panel. WARP enrutará el tráfico a los sitios web a través de los servidores de Cloudflare."
-"xrayConfigTemplate" = "Plantilla de Configuración de Xray"
-"xrayConfigTemplateDesc" = "Genera el archivo de configuración final de Xray basado en esta plantilla."
-"xrayConfigFreedomStrategy" = "Configurar Estrategia para el Protocolo Freedom"
-"xrayConfigFreedomStrategyDesc" = "Establece la estrategia de salida de la red en el Protocolo Freedom."
-"xrayConfigRoutingStrategy" = "Configurar Estrategia de Enrutamiento de Dominios"
-"xrayConfigRoutingStrategyDesc" = "Establece la estrategia general de enrutamiento para la resolución de DNS."
-"xrayConfigTorrent" = "Prohibir Uso de BitTorrent"
-"xrayConfigTorrentDesc" = "Cambia la plantilla de configuración para evitar el uso de BitTorrent por parte de los usuarios."
-"xrayConfigPrivateIp" = "Prohibir Conexiones a Rangos de IP Privadas"
-"xrayConfigPrivateIpDesc" = "Cambia la plantilla de configuración para evitar la conexión a rangos de IP privadas."
-"xrayConfigAds" = "Bloquear Anuncios"
-"xrayConfigAdsDesc" = "Cambia la plantilla de configuración para bloquear anuncios."
-"xrayConfigFamily" = "Bloquear Malware y Contenido para Adultos"
-"xrayConfigFamilyDesc" = "Resolvedores de DNS para bloquear malware y contenido para adultos para protección familiar."
-"xrayConfigSpeedtest" = "Bloquear Sitios Web de Pruebas de Velocidad"
-"xrayConfigSpeedtestDesc" = "Cambia la plantilla de configuración para evitar la conexión a sitios web de pruebas de velocidad."
-"xrayConfigIRIp" = "Desactivar Conexión a Rangos de IP de Irán"
-"xrayConfigIRIpDesc" = "Cambia la plantilla de configuración para evitar la conexión a rangos de IP de Irán."
-"xrayConfigIRDomain" = "Desactivar Conexión a Dominios de Irán"
-"xrayConfigIRDomainDesc" = "Cambia la plantilla de configuración para evitar la conexión a dominios de Irán."
-"xrayConfigChinaIp" = "Desactivar Conexión a Rangos de IP de China"
-"xrayConfigChinaIpDesc" = "Cambia la plantilla de configuración para evitar la conexión a rangos de IP de China."
-"xrayConfigChinaDomain" = "Desactivar Conexión a Dominios de China"
-"xrayConfigChinaDomainDesc" = "Cambia la plantilla de configuración para evitar la conexión a dominios de China."
-"xrayConfigRussiaIp" = "Desactivar Conexión a Rangos de IP de Rusia"
-"xrayConfigRussiaIpDesc" = "Cambia la plantilla de configuración para evitar la conexión a rangos de IP de Rusia."
-"xrayConfigRussiaDomain" = "Desactivar Conexión a Dominios de Rusia"
-"xrayConfigRussiaDomainDesc" = "Cambia la plantilla de configuración para evitar la conexión a dominios de Rusia."
-"xrayConfigDirectIRIp" = "Conexión Directa a Rangos de IP de Irán"
-"xrayConfigDirectIRIpDesc" = "Cambia la plantilla de configuración para conectarse directamente a rangos de IP de Irán."
-"xrayConfigDirectIRDomain" = "Conexión Directa a Dominios de Irán"
-"xrayConfigDirectIRDomainDesc" = "Cambia la plantilla de configuración para conectarse directamente a dominios de Irán."
-"xrayConfigDirectChinaIp" = "Conexión Directa a Rangos de IP de China"
-"xrayConfigDirectChinaIpDesc" = "Cambia la plantilla de configuración para conectarse directamente a rangos de IP de China."
-"xrayConfigDirectChinaDomain" = "Conexión Directa a Dominios de China"
-"xrayConfigDirectChinaDomainDesc" = "Cambia la plantilla de configuración para conectarse directamente a dominios de China."
-"xrayConfigDirectRussiaIp" = "Conexión Directa a Rangos de IP de Rusia"
-"xrayConfigDirectRussiaIpDesc" = "Cambia la plantilla de configuración para conectarse directamente a rangos de IP de Rusia."
-"xrayConfigDirectRussiaDomain" = "Conexión Directa a Dominios de Rusia"
-"xrayConfigDirectRussiaDomainDesc" = "Cambia la plantilla de configuración para conectarse directamente a dominios de Rusia."
-"xrayConfigGoogleIPv4" = "Usar IPv4 para Google"
-"xrayConfigGoogleIPv4Desc" = "Agregar enrutamiento para que Google se conecte con IPv4."
-"xrayConfigNetflixIPv4" = "Usar IPv4 para Netflix"
-"xrayConfigNetflixIPv4Desc" = "Agregar enrutamiento para que Netflix se conecte con IPv4."
-"xrayConfigGoogleWARP" = "Rutear Google a través de WARP."
-"xrayConfigGoogleWARPDesc" = "Agregar enrutamiento para Google a través de WARP."
-"xrayConfigOpenAIWARP" = "Rutear OpenAI (ChatGPT) a través de WARP."
-"xrayConfigOpenAIWARPDesc" = "Agregar enrutamiento para OpenAI (ChatGPT) a través de WARP."
-"xrayConfigNetflixWARP" = "Rutear Netflix a través de WARP."
-"xrayConfigNetflixWARPDesc" = "Agregar enrutamiento para Netflix a través de WARP."
-"xrayConfigSpotifyWARP" = "Rutear Spotify a través de WARP."
-"xrayConfigSpotifyWARPDesc" = "Agregar enrutamiento para Spotify a través de WARP."
-"xrayConfigIRWARP" = "Rutear dominios de Irán a través de WARP."
-"xrayConfigIRWARPDesc" = "Agregar enrutamiento para dominios de Irán a través de WARP."
-"xrayConfigInbounds" = "Configuración de Entradas"
-"xrayConfigInboundsDesc" = "Cambia la plantilla de configuración para aceptar clientes específicos."
-"xrayConfigOutbounds" = "Configuración de Salidas"
-"xrayConfigOutboundsDesc" = "Cambia la plantilla de configuración para definir formas de salida para este servidor."
-"xrayConfigRoutings" = "Configuración de Reglas de Enrutamiento"
-"xrayConfigRoutingsDesc" = "Cambia la plantilla de configuración para definir reglas de enrutamiento para este servidor."
-"completeTemplate" = "Todos"
+"Template" = "Plantilla de Configuración de Xray"
+"TemplateDesc" = "Genera el archivo de configuración final de Xray basado en esta plantilla."
+"FreedomStrategy" = "Configurar Estrategia para el Protocolo Freedom"
+"FreedomStrategyDesc" = "Establece la estrategia de salida de la red en el Protocolo Freedom."
+"RoutingStrategy" = "Configurar Estrategia de Enrutamiento de Dominios"
+"RoutingStrategyDesc" = "Establece la estrategia general de enrutamiento para la resolución de DNS."
+"Torrent" = "Prohibir Uso de BitTorrent"
+"TorrentDesc" = "Cambia la plantilla de configuración para evitar el uso de BitTorrent por parte de los usuarios."
+"PrivateIp" = "Prohibir Conexiones a Rangos de IP Privadas"
+"PrivateIpDesc" = "Cambia la plantilla de configuración para evitar la conexión a rangos de IP privadas."
+"Ads" = "Bloquear Anuncios"
+"AdsDesc" = "Cambia la plantilla de configuración para bloquear anuncios."
+"Family" = "Bloquear Malware y Contenido para Adultos"
+"FamilyDesc" = "Resolvedores de DNS para bloquear malware y contenido para adultos para protección familiar."
+"Speedtest" = "Bloquear Sitios Web de Pruebas de Velocidad"
+"SpeedtestDesc" = "Cambia la plantilla de configuración para evitar la conexión a sitios web de pruebas de velocidad."
+"IRIp" = "Desactivar Conexión a Rangos de IP de Irán"
+"IRIpDesc" = "Cambia la plantilla de configuración para evitar la conexión a rangos de IP de Irán."
+"IRDomain" = "Desactivar Conexión a Dominios de Irán"
+"IRDomainDesc" = "Cambia la plantilla de configuración para evitar la conexión a dominios de Irán."
+"ChinaIp" = "Desactivar Conexión a Rangos de IP de China"
+"ChinaIpDesc" = "Cambia la plantilla de configuración para evitar la conexión a rangos de IP de China."
+"ChinaDomain" = "Desactivar Conexión a Dominios de China"
+"ChinaDomainDesc" = "Cambia la plantilla de configuración para evitar la conexión a dominios de China."
+"RussiaIp" = "Desactivar Conexión a Rangos de IP de Rusia"
+"RussiaIpDesc" = "Cambia la plantilla de configuración para evitar la conexión a rangos de IP de Rusia."
+"RussiaDomain" = "Desactivar Conexión a Dominios de Rusia"
+"RussiaDomainDesc" = "Cambia la plantilla de configuración para evitar la conexión a dominios de Rusia."
+"DirectIRIp" = "Conexión Directa a Rangos de IP de Irán"
+"DirectIRIpDesc" = "Cambia la plantilla de configuración para conectarse directamente a rangos de IP de Irán."
+"DirectIRDomain" = "Conexión Directa a Dominios de Irán"
+"DirectIRDomainDesc" = "Cambia la plantilla de configuración para conectarse directamente a dominios de Irán."
+"DirectChinaIp" = "Conexión Directa a Rangos de IP de China"
+"DirectChinaIpDesc" = "Cambia la plantilla de configuración para conectarse directamente a rangos de IP de China."
+"DirectChinaDomain" = "Conexión Directa a Dominios de China"
+"DirectChinaDomainDesc" = "Cambia la plantilla de configuración para conectarse directamente a dominios de China."
+"DirectRussiaIp" = "Conexión Directa a Rangos de IP de Rusia"
+"DirectRussiaIpDesc" = "Cambia la plantilla de configuración para conectarse directamente a rangos de IP de Rusia."
+"DirectRussiaDomain" = "Conexión Directa a Dominios de Rusia"
+"DirectRussiaDomainDesc" = "Cambia la plantilla de configuración para conectarse directamente a dominios de Rusia."
+"GoogleIPv4" = "Usar IPv4 para Google"
+"GoogleIPv4Desc" = "Agregar enrutamiento para que Google se conecte con IPv4."
+"NetflixIPv4" = "Usar IPv4 para Netflix"
+"NetflixIPv4Desc" = "Agregar enrutamiento para que Netflix se conecte con IPv4."
+"GoogleWARP" = "Rutear Google a través de WARP."
+"GoogleWARPDesc" = "Agregar enrutamiento para Google a través de WARP."
+"OpenAIWARP" = "Rutear OpenAI (ChatGPT) a través de WARP."
+"OpenAIWARPDesc" = "Agregar enrutamiento para OpenAI (ChatGPT) a través de WARP."
+"NetflixWARP" = "Rutear Netflix a través de WARP."
+"NetflixWARPDesc" = "Agregar enrutamiento para Netflix a través de WARP."
+"SpotifyWARP" = "Rutear Spotify a través de WARP."
+"SpotifyWARPDesc" = "Agregar enrutamiento para Spotify a través de WARP."
+"IRWARP" = "Rutear dominios de Irán a través de WARP."
+"IRWARPDesc" = "Agregar enrutamiento para dominios de Irán a través de WARP."
 "Inbounds" = "Entrante"
+"InboundsDesc" = "Cambia la plantilla de configuración para aceptar clientes específicos."
 "Outbounds" = "Salidas"
+"OutboundsDesc" = "Cambia la plantilla de configuración para definir formas de salida para este servidor."
 "Routings" = "Reglas de enrutamiento"
 "RoutingsDesc" = "¡La prioridad de cada regla es importante!"
+"completeTemplate" = "Todos"
 
 [pages.xray.rules]
 "first" = "Primero"

web/translation/translate.fa_IR.toml

@@ -315,71 +315,67 @@
 "ipv4ConfigsDesc" = "این گزینه فقط از طریق آیپی ورژن ۴ به دامنه های هدف هدایت می شود"
 "warpConfigs" = "تنظیمات برای WARP"
 "warpConfigsDesc" = "هشدار: قبل از استفاده از این گزینه، WARP را در حالت پراکسی socks5 با دنبال کردن مراحل در GitHub پنل روی سرور خود نصب کنید. WARP ترافیک را از طریق سرورهای Cloudflare به وب سایت ها هدایت می کند"
-"xrayConfigTemplate" = "تنظیمات الگو ایکس ری"
-"xrayConfigTemplateDesc" = "فایل پیکربندی ایکس ری نهایی بر اساس این الگو ایجاد میشود. لطفاً این را تغییر ندهید مگر اینکه دقیقاً بدانید که چه کاری انجام می دهید!"
-"xrayConfigFreedomStrategy" = "روش استفاده از شبکه خروجی مستقیم"
-"xrayConfigFreedomStrategyDesc" = "تعیین روش استفاده از خروجی برای پرتکل مستقیم"
-"xrayConfigRoutingStrategy" = "پیکربندی استراتژی حل دامنه در مسیریابی"
-"xrayConfigRoutingStrategyDesc" = "تعیین استراتژی مسیریابی کلی برای پیدا کردن دامنه"
-"xrayConfigTorrent" = "فیلتر کردن بیت تورنت"
-"xrayConfigTorrentDesc" = "الگوی تنظیمات را برای فیلتر کردن پروتکل بیت تورنت برای کاربران تغییر میدهد"
-"xrayConfigPrivateIp" = "جلوگیری از اتصال آیپی های خصوصی یا محلی"
-"xrayConfigPrivateIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های خصوصی یا محلی و بسته های سرگردان تغییر میدهد"
-"xrayConfigAds" = "مسدود کردن تبلیغات"
-"xrayConfigAdsDesc" = "الگوی تنظیمات را برای مسدود کردن تبلیغات تغییر میدهد"
-"xrayConfigFamily" = "فعال کردن حالت خانواده"
-"xrayConfigFamilyDesc" = "برای جلوگیری از ارتباط با وبسایت های ناامن"
-"xrayConfigSpeedtest" = "جلوگیری از اتصال به سایت های تست سرعت"
-"xrayConfigSpeedtestDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال به سایت های تست سرعت تغییر میدهد"
-"xrayConfigIRIp" = "جلوگیری از اتصال آیپی های ایران"
-"xrayConfigIRIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های ایران تغییر میدهد"
-"xrayConfigIRDomain" = "جلوگیری از اتصال دامنه های ایران"
-"xrayConfigIRDomainDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال دامنه های ایران تغییر میدهد"
-"xrayConfigChinaIp" = "جلوگیری از اتصال آیپی های چین"
-"xrayConfigChinaIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های چین تغییر میدهد"
-"xrayConfigChinaDomain" = "جلوگیری از اتصال دامنه های چین"
-"xrayConfigChinaDomainDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال دامنه های چین تغییر میدهد"
-"xrayConfigRussiaIp" = "جلوگیری از اتصال آیپی های روسیه"
-"xrayConfigRussiaIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های روسیه تغییر میدهد"
-"xrayConfigRussiaDomain" = "جلوگیری از اتصال دامنه های روسیه"
-"xrayConfigRussiaDomainDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال دامنه های روسیه تغییر میدهد"
-"xrayConfigDirectIRIp" = "ارتباط مستقیم به آیپی های ایران"
-"xrayConfigDirectIRIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های ایران تغییر میدهد"
-"xrayConfigDirectIRDomain" = "ارتباط مستقیم به دامنه های ایران"
-"xrayConfigDirectIRDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های ایران تغییر میدهد"
-"xrayConfigDirectChinaIp" = "ارتباط مستقیم به آیپی های چین"
-"xrayConfigDirectChinaIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های چین تغییر میدهد"
-"xrayConfigDirectChinaDomain" = "ارتباط مستقیم به دامنه های چین"
-"xrayConfigDirectChinaDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های چین تغییر میدهد"
-"xrayConfigDirectRussiaIp" = "ارتباط مستقیم به آیپی های روسیه"
-"xrayConfigDirectRussiaIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های روسیه تغییر میدهد"
-"xrayConfigDirectRussiaDomain" = "ارتباط مستقیم به دامنه های روسیه"
-"xrayConfigDirectRussiaDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های روسیه تغییر میدهد"
-"xrayConfigGoogleIPv4" = "استفاده از آیپی ورژن 4 برای اتصال به گوگل"
-"xrayConfigGoogleIPv4Desc" = "مسیردهی جدید برای اتصال به گوگل با آیپی ورژن 4 اضافه میکند"
-"xrayConfigNetflixIPv4" = "استفاده از آیپی ورژن 4 برای اتصال به نتفلیکس"
-"xrayConfigNetflixIPv4Desc" = "مسیردهی جدید برای اتصال به نتفلیکس با آیپی ورژن 4 اضافه میکند"
-"xrayConfigGoogleWARP" = "مسیردهی گوگل به WARP"
-"xrayConfigGoogleWARPDesc" = "مسیردهی جدید برای اتصال به گوگل به WARP اضافه میکند"
-"xrayConfigOpenAIWARP" = "مسیردهی OpenAI (ChatGPT) به WARP"
-"xrayConfigOpenAIWARPDesc" = "مسیردهی جدید برای اتصال به OpenAI (ChatGPT) به WARP اضافه میکند"
-"xrayConfigNetflixWARP" = "مسیردهی نتفلیکس به WARP"
-"xrayConfigNetflixWARPDesc" = "مسیردهی جدید برای اتصال به نتفلیکس به WARP اضافه میکند"
-"xrayConfigSpotifyWARP" = "مسیردهی اسپاتیفای به WARP"
-"xrayConfigSpotifyWARPDesc" = "مسیردهی جدید برای اتصال به اسپاتیفای به WARP اضافه میکند"
-"xrayConfigIRWARP" = "مسیردهی دامنه های ایران به WARP"
-"xrayConfigIRWARPDesc" = "مسیردهی جدید برای اتصال به دامنه های ایران به WARP اضافه میکند"
-"xrayConfigInbounds" = "تنظیمات ورودی"
-"xrayConfigInboundsDesc" = "میتوانید الگوی تنظیمات را برای ورودی های خاص تنظیم نمایید"
-"xrayConfigOutbounds" = "تنظیمات خروجی"
-"xrayConfigOutboundsDesc" = "میتوانید الگوی تنظیمات را برای خروجی اینترنت تنظیم نمایید"
-"xrayConfigRoutings" = "تنظیمات قوانین مسیریابی"
-"xrayConfigRoutingsDesc" = "میتوانید الگوی تنظیمات را برای مسیریابی تنظیم نمایید"
-"completeTemplate" = "کامل"
+"Template" = "تنظیمات الگو ایکس ری"
+"TemplateDesc" = "فایل پیکربندی ایکس ری نهایی بر اساس این الگو ایجاد میشود. لطفاً این را تغییر ندهید مگر اینکه دقیقاً بدانید که چه کاری انجام می دهید!"
+"FreedomStrategy" = "روش استفاده از شبکه خروجی مستقیم"
+"FreedomStrategyDesc" = "تعیین روش استفاده از خروجی برای پرتکل مستقیم"
+"RoutingStrategy" = "پیکربندی استراتژی حل دامنه در مسیریابی"
+"RoutingStrategyDesc" = "تعیین استراتژی مسیریابی کلی برای پیدا کردن دامنه"
+"Torrent" = "فیلتر کردن بیت تورنت"
+"TorrentDesc" = "الگوی تنظیمات را برای فیلتر کردن پروتکل بیت تورنت برای کاربران تغییر میدهد"
+"PrivateIp" = "جلوگیری از اتصال آیپی های خصوصی یا محلی"
+"PrivateIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های خصوصی یا محلی و بسته های سرگردان تغییر میدهد"
+"Ads" = "مسدود کردن تبلیغات"
+"AdsDesc" = "الگوی تنظیمات را برای مسدود کردن تبلیغات تغییر میدهد"
+"Family" = "فعال کردن حالت خانواده"
+"FamilyDesc" = "برای جلوگیری از ارتباط با وبسایت های ناامن"
+"Speedtest" = "جلوگیری از اتصال به سایت های تست سرعت"
+"SpeedtestDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال به سایت های تست سرعت تغییر میدهد"
+"IRIp" = "جلوگیری از اتصال آیپی های ایران"
+"IRIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های ایران تغییر میدهد"
+"IRDomain" = "جلوگیری از اتصال دامنه های ایران"
+"IRDomainDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال دامنه های ایران تغییر میدهد"
+"ChinaIp" = "جلوگیری از اتصال آیپی های چین"
+"ChinaIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های چین تغییر میدهد"
+"ChinaDomain" = "جلوگیری از اتصال دامنه های چین"
+"ChinaDomainDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال دامنه های چین تغییر میدهد"
+"RussiaIp" = "جلوگیری از اتصال آیپی های روسیه"
+"RussiaIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های روسیه تغییر میدهد"
+"RussiaDomain" = "جلوگیری از اتصال دامنه های روسیه"
+"RussiaDomainDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال دامنه های روسیه تغییر میدهد"
+"DirectIRIp" = "ارتباط مستقیم به آیپی های ایران"
+"DirectIRIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های ایران تغییر میدهد"
+"DirectIRDomain" = "ارتباط مستقیم به دامنه های ایران"
+"DirectIRDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های ایران تغییر میدهد"
+"DirectChinaIp" = "ارتباط مستقیم به آیپی های چین"
+"DirectChinaIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های چین تغییر میدهد"
+"DirectChinaDomain" = "ارتباط مستقیم به دامنه های چین"
+"DirectChinaDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های چین تغییر میدهد"
+"DirectRussiaIp" = "ارتباط مستقیم به آیپی های روسیه"
+"DirectRussiaIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های روسیه تغییر میدهد"
+"DirectRussiaDomain" = "ارتباط مستقیم به دامنه های روسیه"
+"DirectRussiaDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های روسیه تغییر میدهد"
+"GoogleIPv4" = "استفاده از آیپی ورژن 4 برای اتصال به گوگل"
+"GoogleIPv4Desc" = "مسیردهی جدید برای اتصال به گوگل با آیپی ورژن 4 اضافه میکند"
+"NetflixIPv4" = "استفاده از آیپی ورژن 4 برای اتصال به نتفلیکس"
+"NetflixIPv4Desc" = "مسیردهی جدید برای اتصال به نتفلیکس با آیپی ورژن 4 اضافه میکند"
+"GoogleWARP" = "مسیردهی گوگل به WARP"
+"GoogleWARPDesc" = "مسیردهی جدید برای اتصال به گوگل به WARP اضافه میکند"
+"OpenAIWARP" = "مسیردهی OpenAI (ChatGPT) به WARP"
+"OpenAIWARPDesc" = "مسیردهی جدید برای اتصال به OpenAI (ChatGPT) به WARP اضافه میکند"
+"NetflixWARP" = "مسیردهی نتفلیکس به WARP"
+"NetflixWARPDesc" = "مسیردهی جدید برای اتصال به نتفلیکس به WARP اضافه میکند"
+"SpotifyWARP" = "مسیردهی اسپاتیفای به WARP"
+"SpotifyWARPDesc" = "مسیردهی جدید برای اتصال به اسپاتیفای به WARP اضافه میکند"
+"IRWARP" = "مسیردهی دامنه های ایران به WARP"
+"IRWARPDesc" = "مسیردهی جدید برای اتصال به دامنه های ایران به WARP اضافه میکند"
 "Inbounds" = "ورودی‌ها"
+"InboundsDesc" = "میتوانید الگوی تنظیمات را برای ورودی های خاص تنظیم نمایید"
 "Outbounds" = "خروجی‌ها"
+"OutboundsDesc" = "میتوانید الگوی تنظیمات را برای خروجی اینترنت تنظیم نمایید"
 "Routings" = "قوانین مسیریابی"
 "RoutingsDesc" = "اولویت هر قانون مهم است!"
+"completeTemplate" = "کامل"
 
 [pages.xray.rules]
 "first" = "اولین"

web/translation/translate.ru_RU.toml

@@ -57,7 +57,7 @@
 "dashboard" = "Статус системы"
 "inbounds" = "Подключения"
 "settings" = "Настройки панели"
-"xray" = "Xray Настройки"
+"xray" = "Настройки Xray"
 "logout" = "Выход"
 "link" = "Прочее"
 
@@ -268,7 +268,7 @@
 "expireTimeDiff" = "Порог истечения срока сессии для уведомления"
 "expireTimeDiffDesc" = "Получение уведомления об истечении срока действия сессии до достижения порогового значения (значение: день)"
 "trafficDiff" = "Порог трафика для уведомления"
-"trafficDiffDesc" = "Получение уведомления об исчерпании трафика до достижения порога (значение: Гб)"
+"trafficDiffDesc" = "Получение уведомления об исчерпании трафика до достижения порога (значение: ГБ)"
 "tgNotifyCpu" = "Порог нагрузки на ЦП для уведомления"
 "tgNotifyCpuDesc" = "Получение уведомления, если нагрузка на ЦП превышает этот порог (значение: %)"
 "timeZone" = "Часовой пояс"
@@ -298,7 +298,7 @@
 "subURIDesc" = "Изменить базовый URI URL-адреса подписки для использования за прокси-серверами"
 
 [pages.xray]
-"title" = "Xray Настройки"
+"title" = "Настройки Xray"
 "save" = "Сохранить настройки"
 "restart" = "Перезапустить рентген"
 "basicTemplate" = "Базовый шаблон"
@@ -315,71 +315,67 @@
 "ipv4ConfigsDesc" = "Эти параметры позволят пользователям маршрутизироваться к целевым доменам только через IPv4"
 "warpConfigs" = "Настройки WARP"
 "warpConfigsDesc" = "Внимание: перед использованием этих параметров установите WARP в режиме прокси-сервера socks5 на свой сервер, следуя инструкциям на GitHub панели. WARP будет направлять трафик на веб-сайты через серверы Cloudflare"
-"xrayConfigTemplate" = "Шаблон конфигурации Xray"
-"xrayConfigTemplateDesc" = "Создание файла конфигурации Xray на основе этого шаблона"
-"xrayConfigFreedomStrategy" = "Настройка стратегии протокола Freedom"
-"xrayConfigFreedomStrategyDesc" = "Установка стратегию вывода сети в протоколе Freedom"
-"xrayConfigRoutingStrategy" = "Настройка стратегии маршрутизации доменов"
-"xrayConfigRoutingStrategyDesc" = "Установка общей стратегии маршрутизации разрешения DNS"
-"xrayConfigTorrent" = "Запрет использования BitTorrent"
-"xrayConfigTorrentDesc" = "Изменение шаблона конфигурации для предупреждения использования BitTorrent пользователями"
-"xrayConfigPrivateIp" = "Запрет частных диапазонов IP-адресов для подключения"
-"xrayConfigPrivateIpDesc" = "Изменение шаблона конфигурации для предупреждения подключения к диапазонам частных IP-адресов"
-"xrayConfigAds" = "Блокировка рекламы"
-"xrayConfigAdsDesc" = "Изменение конфигурации для блокировки рекламы"
-"xrayConfigFamily" = "Блокировать вредоносное ПО и контент для взрослых"
-"xrayConfigFamilyDesc" = "Резольверы DNS для блокировки вредоносных программ и контента для взрослых для защиты семьи"
-"xrayConfigSpeedtest" = "Блокировать сайты для проверки скорости"
-"xrayConfigSpeedtestDesc" = "Изменение шаблона конфигурации для предупреждения подключения к веб-сайтам для тестирования скорости"
-"xrayConfigIRIp" = "Заблокировать подключения к диапазонам IP-адресов Ирана"
-"xrayConfigIRIpDesc" = "Изменение конфигурации, чтобы заблокировать подключения к диапазонам IP-адресов Ирана"
-"xrayConfigIRDomain" = "Заблокировать подключения к доменам Ирана"
-"xrayConfigIRDomainDesc" = "Изменение конфигурации, чтобы заблокировать подключения к доменам Ирана"
-"xrayConfigChinaIp" = "Заблокировать подключения к диапазонам IP-адресов Китая"
-"xrayConfigChinaIpDesc" = "Изменение конфигурации, чтобы заблокировать подключения к диапазонам IP-адресов Китая"
-"xrayConfigChinaDomain" = "Заблокировать подключения к доменам Китая"
-"xrayConfigChinaDomainDesc" = "Изменение конфигурации, чтобы заблокировать подключения к доменам Китая"
-"xrayConfigRussiaIp" = "Заблокировать подключения к диапазонам IP-адресов России"
-"xrayConfigRussiaIpDesc" = "Изменение конфигурации, чтобы заблокировать подключения к диапазонами IP-адресов России"
-"xrayConfigRussiaDomain" = "Заблокировать подключения к доменам России"
-"xrayConfigRussiaDomainDesc" = "Изменение конфигурации, чтобы заблокировать подключения к доменам России"
-"xrayConfigDirectIRIp" = "Прямое подключения к диапазонам IP-адресов Ирана"
-"xrayConfigDirectIRIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов Ирана"
-"xrayConfigDirectIRDomain" = "Прямое подключение к доменам Ирана"
-"xrayConfigDirectIRDomainDesc" = "Изменение шаблон конфигурации для прямого подключения к доменам Ирана"
-"xrayConfigDirectChinaIp" = "Прямое подключение к диапазонам IP-адресов Китая"
-"xrayConfigDirectChinaIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов Китая"
-"xrayConfigDirectChinaDomain" = "Прямое подключение к доменам Китая"
-"xrayConfigDirectChinaDomainDesc" = "Изменение шаблона конфигурации для прямого подключения к доменам Китая"
-"xrayConfigDirectRussiaIp" = "Прямое подключение к диапазонам IP-адресов России"
-"xrayConfigDirectRussiaIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов России"
-"xrayConfigDirectRussiaDomain" = "Прямое подключение к доменам России"
-"xrayConfigDirectRussiaDomainDesc" = "Изменение шаблона конфигурации для прямого подключения к доменам России"
-"xrayConfigGoogleIPv4" = "Использовать IPv4 для Google"
-"xrayConfigGoogleIPv4Desc" = "Добавить маршрутизацию для Google для подключения к IPv4"
-"xrayConfigNetflixIPv4" = "Использовать IPv4 для Netflix"
-"xrayConfigNetflixIPv4Desc" = "Добавить маршрутизацию для Netflix для подключения к IPv4"
-"xrayConfigGoogleWARP" = "Маршрутизация Google через WARP"
-"xrayConfigGoogleWARPDesc" = "Добавить маршрутизацию для Google через WARP"
-"xrayConfigOpenAIWARP" = "Маршрутизация OpenAI (ChatGPT) через WARP"
-"xrayConfigOpenAIWARPDesc" = "Добавить маршрутизацию для OpenAI (ChatGPT) через WARP"
-"xrayConfigNetflixWARP" = "Маршрутизация Netflix через WARP"
-"xrayConfigNetflixWARPDesc" = "Добавить маршрутизацию для Netflix через WARP"
-"xrayConfigSpotifyWARP" = "Маршрутизация Spotify через WARP"
-"xrayConfigSpotifyWARPDesc" = "Добавить маршрутизацию для Spotify через WARP"
-"xrayConfigIRWARP" = "Маршрутизация доменов Ирана через WARP"
-"xrayConfigIRWARPDesc" = "Добавить маршрутизацию для доменов Ирана через WARP"
-"xrayConfigInbounds" = "Конфигурация подключений"
-"xrayConfigInboundsDesc" = "Изменение шаблона конфигурации для подключения определенных пользователей"
-"xrayConfigOutbounds" = "Конфигурация исходящих"
-"xrayConfigOutboundsDesc" = "Изменение шаблона конфигурации, чтобы определить исходящие пути для этого сервера"
-"xrayConfigRoutings" = "Настройка правил маршрутизации"
-"xrayConfigRoutingsDesc" = "Изменение шаблона конфигурации для определения правил маршрутизации для этого сервера"
-"completeTemplate" = "Все"
+"Template" = "Шаблон конфигурации Xray"
+"TemplateDesc" = "Создание файла конфигурации Xray на основе этого шаблона"
+"FreedomStrategy" = "Настройка стратегии протокола Freedom"
+"FreedomStrategyDesc" = "Установка стратегию вывода сети в протоколе Freedom"
+"RoutingStrategy" = "Настройка стратегии маршрутизации доменов"
+"RoutingStrategyDesc" = "Установка общей стратегии маршрутизации разрешения DNS"
+"Torrent" = "Запрет использования BitTorrent"
+"TorrentDesc" = "Изменение шаблона конфигурации для предупреждения использования BitTorrent пользователями"
+"PrivateIp" = "Запрет частных диапазонов IP-адресов для подключения"
+"PrivateIpDesc" = "Изменение шаблона конфигурации для предупреждения подключения к диапазонам частных IP-адресов"
+"Ads" = "Блокировка рекламы"
+"AdsDesc" = "Изменение конфигурации для блокировки рекламы"
+"Family" = "Блокировать вредоносное ПО и контент для взрослых"
+"FamilyDesc" = "Резольверы DNS для блокировки вредоносных программ и контента для взрослых для защиты семьи"
+"Speedtest" = "Блокировать сайты для проверки скорости"
+"SpeedtestDesc" = "Изменение шаблона конфигурации для предупреждения подключения к веб-сайтам для тестирования скорости"
+"IRIp" = "Заблокировать подключения к диапазонам IP-адресов Ирана"
+"IRIpDesc" = "Изменение конфигурации, чтобы заблокировать подключения к диапазонам IP-адресов Ирана"
+"IRDomain" = "Заблокировать подключения к доменам Ирана"
+"IRDomainDesc" = "Изменение конфигурации, чтобы заблокировать подключения к доменам Ирана"
+"ChinaIp" = "Заблокировать подключения к диапазонам IP-адресов Китая"
+"ChinaIpDesc" = "Изменение конфигурации, чтобы заблокировать подключения к диапазонам IP-адресов Китая"
+"ChinaDomain" = "Заблокировать подключения к доменам Китая"
+"ChinaDomainDesc" = "Изменение конфигурации, чтобы заблокировать подключения к доменам Китая"
+"RussiaIp" = "Заблокировать подключения к диапазонам IP-адресов России"
+"RussiaIpDesc" = "Изменение конфигурации, чтобы заблокировать подключения к диапазонами IP-адресов России"
+"RussiaDomain" = "Заблокировать подключения к доменам России"
+"RussiaDomainDesc" = "Изменение конфигурации, чтобы заблокировать подключения к доменам России"
+"DirectIRIp" = "Прямое подключения к диапазонам IP-адресов Ирана"
+"DirectIRIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов Ирана"
+"DirectIRDomain" = "Прямое подключение к доменам Ирана"
+"DirectIRDomainDesc" = "Изменение шаблон конфигурации для прямого подключения к доменам Ирана"
+"DirectChinaIp" = "Прямое подключение к диапазонам IP-адресов Китая"
+"DirectChinaIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов Китая"
+"DirectChinaDomain" = "Прямое подключение к доменам Китая"
+"DirectChinaDomainDesc" = "Изменение шаблона конфигурации для прямого подключения к доменам Китая"
+"DirectRussiaIp" = "Прямое подключение к диапазонам IP-адресов России"
+"DirectRussiaIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов России"
+"DirectRussiaDomain" = "Прямое подключение к доменам России"
+"DirectRussiaDomainDesc" = "Изменение шаблона конфигурации для прямого подключения к доменам России"
+"GoogleIPv4" = "Использовать IPv4 для Google"
+"GoogleIPv4Desc" = "Добавить маршрутизацию для Google для подключения к IPv4"
+"NetflixIPv4" = "Использовать IPv4 для Netflix"
+"NetflixIPv4Desc" = "Добавить маршрутизацию для Netflix для подключения к IPv4"
+"GoogleWARP" = "Маршрутизация Google через WARP"
+"GoogleWARPDesc" = "Добавить маршрутизацию для Google через WARP"
+"OpenAIWARP" = "Маршрутизация OpenAI (ChatGPT) через WARP"
+"OpenAIWARPDesc" = "Добавить маршрутизацию для OpenAI (ChatGPT) через WARP"
+"NetflixWARP" = "Маршрутизация Netflix через WARP"
+"NetflixWARPDesc" = "Добавить маршрутизацию для Netflix через WARP"
+"SpotifyWARP" = "Маршрутизация Spotify через WARP"
+"SpotifyWARPDesc" = "Добавить маршрутизацию для Spotify через WARP"
+"IRWARP" = "Маршрутизация доменов Ирана через WARP"
+"IRWARPDesc" = "Добавить маршрутизацию для доменов Ирана через WARP"
 "Inbounds" = "Входящие"
+"InboundsDesc" = "Изменение шаблона конфигурации для подключения определенных пользователей"
 "Outbounds" = "Исходящие"
+"OutboundsDesc" = "Изменение шаблона конфигурации, чтобы определить исходящие пути для этого сервера"
 "Routings" = "Правила маршрутизации"
 "RoutingsDesc" = "Важен приоритет каждого правила!"
+"completeTemplate" = "Все"
 
 [pages.xray.rules]
 "first" = "Первый"
@@ -389,7 +385,7 @@
 "source" = "Источник"
 "dest" = "Пункт назначения"
 "inbound" = "Входящий"
-"outboun" = "Исходящий"
+"outbound" = "Исходящий"
 "info" = "Информация"
 "add" = "Добавить правило"
 "edit" = "Редактировать правило"

web/translation/translate.vi_VN.toml

@@ -1,6 +1,6 @@
 "username" = "Tên người dùng"
 "password" = "Mật khẩu"
-"login" = "Đăng nhập..."
+"login" = "Đăng nhập"
 "confirm" = "Xác nhận"
 "cancel" = "Hủy bỏ"
 "close" = "Đóng"
@@ -36,10 +36,10 @@
 "status" = "Trạng thái"
 "enabled" = "Đã kích hoạt"
 "disabled" = "Đã tắt"
-"depleted" = "Đã cạn kiệt"
-"depletingSoon" = "Đang cạn kiệt"
+"depleted" = "Depleted"
+"depletingSoon" = "Depleting..."
 "offline" = "Ngoại tuyến"
-"online" = "Ngoại tuyến"
+"online" = "Trực tuyến"
 "domainName" = "Tên miền"
 "monitor" = "Listening IP"
 "certificate" = "Chứng chỉ"
@@ -47,9 +47,9 @@
 "success" = "Thành công"
 "getVersion" = "Lấy phiên bản"
 "install" = "Cài đặt"
-"clients" = "Khách hàng"
+"clients" = "Các khách hàng"
 "usage" = "Sử dụng"
-"secretToken" = "secretToken"
+"secretToken" = "Mã bí mật"
 "remained" = "Còn lại"
 "security" = "Bảo vệ"
 
@@ -315,71 +315,67 @@
 "ipv4ConfigsDesc" = "Những tùy chọn này sẽ chỉ định kết nối đến các tên miền mục tiêu qua IPv4."
 "warpConfigs" = "Cấu hình WARP"
 "warpConfigsDesc" = "Cảnh báo: Trước khi sử dụng những tùy chọn này, hãy cài đặt WARP ở chế độ proxy socks5 trên máy chủ của bạn bằng cách làm theo các bước trên GitHub của bảng điều khiển. WARP sẽ định tuyến lưu lượng đến các trang web qua máy chủ Cloudflare."
-"xrayConfigTemplate" = "Mẫu Cấu hình Xray"
-"xrayConfigTemplateDesc" = "Tạo tệp cấu hình Xray cuối cùng dựa trên mẫu này."
-"xrayConfigFreedomStrategy" = "Cấu hình Chiến lược cho Giao thức Freedom"
-"xrayConfigFreedomStrategyDesc" = "Đặt chiến lược đầu ra của mạng trong Giao thức Freedom."
-"xrayConfigRoutingStrategy" = "Cấu hình Chiến lược Định tuyến Tên miền"
-"xrayConfigRoutingStrategyDesc" = "Đặt chiến lược định tuyến tổng thể cho việc giải quyết DNS."
-"xrayConfigTorrent" = "Cấu hình sử dụng BitTorrent"
-"xrayConfigTorrentDesc" = "Thay đổi mẫu cấu hình để tránh việc người dùng sử dụng BitTorrent."
-"xrayConfigPrivateIp" = "Cấm kết nối đến dải IP Riêng tư"
-"xrayConfigPrivateIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP riêng tư."
-"xrayConfigAds" = "Chặn Quảng cáo"
-"xrayConfigAdsDesc" = "Thay đổi mẫu cấu hình để chặn quảng cáo."
-"xrayConfigFamily" = "Chặn Phần mềm độc hại và Nội dung cho Người lớn"
-"xrayConfigFamilyDesc" = "Các trình giải quyết DNS để chặn phần mềm độc hại và nội dung cho bảo vệ gia đình."
-"xrayConfigSpeedtest" = "Chặn Trang web Speedtest"
-"xrayConfigSpeedtestDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các trang web Speedtest."
-"xrayConfigIRIp" = "Vô hiệu hóa kết nối đến dải IP của Iran"
-"xrayConfigIRIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP của Iran."
-"xrayConfigIRDomain" = "Vô hiệu hóa kết nối đến tên miền của Iran"
-"xrayConfigIRDomainDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các tên miền của Iran."
-"xrayConfigChinaIp" = "Vô hiệu hóa kết nối đến dải IP của Trung Quốc"
-"xrayConfigChinaIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP của Trung Quốc."
-"xrayConfigChinaDomain" = "Vô hiệu hóa kết nối đến tên miền của Trung Quốc"
-"xrayConfigChinaDomainDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các tên miền của Trung Quốc."
-"xrayConfigRussiaIp" = "Vô hiệu hóa kết nối đến dải IP của Nga"
-"xrayConfigRussiaIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP của Nga."
-"xrayConfigRussiaDomain" = "Vô hiệu hóa kết nối đến tên miền của Nga"
-"xrayConfigRussiaDomainDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các tên miền của Nga."
-"xrayConfigDirectIRIp" = "Kết nối trực tiếp đến dải IP của Iran"
-"xrayConfigDirectIRIpDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến dải IP của Iran."
-"xrayConfigDirectIRDomain" = "Kết nối trực tiếp đến tên miền của Iran"
-"xrayConfigDirectIRDomainDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến các tên miền của Iran."
-"xrayConfigDirectChinaIp" = "Kết nối trực tiếp đến dải IP của Trung Quốc"
-"xrayConfigDirectChinaIpDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến dải IP của Trung Quốc."
-"xrayConfigDirectChinaDomain" = "Kết nối trực tiếp đến tên miền của Trung Quốc"
-"xrayConfigDirectChinaDomainDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến các tên miền của Trung Quốc."
-"xrayConfigDirectRussiaIp" = "Kết nối trực tiếp đến dải IP của Nga"
-"xrayConfigDirectRussiaIpDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến dải IP của Nga."
-"xrayConfigDirectRussiaDomain" = "Kết nối trực tiếp đến tên miền của Nga"
-"xrayConfigDirectRussiaDomainDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến các tên miền của Nga."
-"xrayConfigGoogleIPv4" = "Sử dụng IPv4 cho Google"
-"xrayConfigGoogleIPv4Desc" = "Thêm định tuyến cho Google để kết nối qua IPv4."
-"xrayConfigNetflixIPv4" = "Sử dụng IPv4 cho Netflix"
-"xrayConfigNetflixIPv4Desc" = "Thêm định tuyến cho Netflix để kết nối qua IPv4."
-"xrayConfigGoogleWARP" = "Định tuyến Google qua WARP."
-"xrayConfigGoogleWARPDesc" = "Thêm định tuyến cho Google qua WARP."
-"xrayConfigOpenAIWARP" = "Định tuyến OpenAI (ChatGPT) qua WARP."
-"xrayConfigOpenAIWARPDesc" = "Thêm định tuyến cho OpenAI (ChatGPT) qua WARP."
-"xrayConfigNetflixWARP" = "Định tuyến Netflix qua WARP."
-"xrayConfigNetflixWARPDesc" = "Thêm định tuyến cho Netflix qua WARP."
-"xrayConfigSpotifyWARP" = "Định tuyến Spotify qua WARP."
-"xrayConfigSpotifyWARPDesc" = "Thêm định tuyến cho Spotify qua WARP."
-"xrayConfigIRWARP" = "Định tuyến tên miền của Iran qua WARP."
-"xrayConfigIRWARPDesc" = "Thêm định tuyến cho các tên miền của Iran qua WARP."
-"xrayConfigInbounds" = "Cấu hình của Inbounds"
-"xrayConfigInboundsDesc" = "Thay đổi mẫu cấu hình để chấp nhận các máy khách cụ thể."
-"xrayConfigOutbounds" = "Cấu hình của Outbounds"
-"xrayConfigOutboundsDesc" = "Thay đổi mẫu cấu hình để xác định các cách ra đi cho máy chủ này."
-"xrayConfigRoutings" = "Cấu hình của Luật Định tuyến."
-"xrayConfigRoutingsDesc" = "Thay đổi mẫu cấu hình để xác định luật định tuyến cho máy chủ này."
-"completeTemplate" = "All"
-"Inbounds" = "Vào"
-"Outbounds" = "Outbounds"
+"Template" = "Mẫu Cấu hình Xray"
+"TemplateDesc" = "Tạo tệp cấu hình Xray cuối cùng dựa trên mẫu này."
+"FreedomStrategy" = "Cấu hình Chiến lược cho Giao thức Freedom"
+"FreedomStrategyDesc" = "Đặt chiến lược đầu ra của mạng trong Giao thức Freedom."
+"RoutingStrategy" = "Cấu hình Chiến lược Định tuyến Tên miền"
+"RoutingStrategyDesc" = "Đặt chiến lược định tuyến tổng thể cho việc giải quyết DNS."
+"Torrent" = "Cấu hình sử dụng BitTorrent"
+"TorrentDesc" = "Thay đổi mẫu cấu hình để tránh việc người dùng sử dụng BitTorrent."
+"PrivateIp" = "Cấm kết nối đến dải IP Riêng tư"
+"PrivateIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP riêng tư."
+"Ads" = "Chặn Quảng cáo"
+"AdsDesc" = "Thay đổi mẫu cấu hình để chặn quảng cáo."
+"Family" = "Chặn Phần mềm độc hại và Nội dung cho Người lớn"
+"FamilyDesc" = "Các trình giải quyết DNS để chặn phần mềm độc hại và nội dung cho bảo vệ gia đình."
+"Speedtest" = "Chặn Trang web Speedtest"
+"SpeedtestDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các trang web Speedtest."
+"IRIp" = "Vô hiệu hóa kết nối đến dải IP của Iran"
+"IRIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP của Iran."
+"IRDomain" = "Vô hiệu hóa kết nối đến tên miền của Iran"
+"IRDomainDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các tên miền của Iran."
+"ChinaIp" = "Vô hiệu hóa kết nối đến dải IP của Trung Quốc"
+"ChinaIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP của Trung Quốc."
+"ChinaDomain" = "Vô hiệu hóa kết nối đến tên miền của Trung Quốc"
+"ChinaDomainDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các tên miền của Trung Quốc."
+"RussiaIp" = "Vô hiệu hóa kết nối đến dải IP của Nga"
+"RussiaIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP của Nga."
+"RussiaDomain" = "Vô hiệu hóa kết nối đến tên miền của Nga"
+"RussiaDomainDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các tên miền của Nga."
+"DirectIRIp" = "Kết nối trực tiếp đến dải IP của Iran"
+"DirectIRIpDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến dải IP của Iran."
+"DirectIRDomain" = "Kết nối trực tiếp đến tên miền của Iran"
+"DirectIRDomainDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến các tên miền của Iran."
+"DirectChinaIp" = "Kết nối trực tiếp đến dải IP của Trung Quốc"
+"DirectChinaIpDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến dải IP của Trung Quốc."
+"DirectChinaDomain" = "Kết nối trực tiếp đến tên miền của Trung Quốc"
+"DirectChinaDomainDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến các tên miền của Trung Quốc."
+"DirectRussiaIp" = "Kết nối trực tiếp đến dải IP của Nga"
+"DirectRussiaIpDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến dải IP của Nga."
+"DirectRussiaDomain" = "Kết nối trực tiếp đến tên miền của Nga"
+"DirectRussiaDomainDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến các tên miền của Nga."
+"GoogleIPv4" = "Sử dụng IPv4 cho Google"
+"GoogleIPv4Desc" = "Thêm định tuyến cho Google để kết nối qua IPv4."
+"NetflixIPv4" = "Sử dụng IPv4 cho Netflix"
+"NetflixIPv4Desc" = "Thêm định tuyến cho Netflix để kết nối qua IPv4."
+"GoogleWARP" = "Định tuyến Google qua WARP."
+"GoogleWARPDesc" = "Thêm định tuyến cho Google qua WARP."
+"OpenAIWARP" = "Định tuyến OpenAI (ChatGPT) qua WARP."
+"OpenAIWARPDesc" = "Thêm định tuyến cho OpenAI (ChatGPT) qua WARP."
+"NetflixWARP" = "Định tuyến Netflix qua WARP."
+"NetflixWARPDesc" = "Thêm định tuyến cho Netflix qua WARP."
+"SpotifyWARP" = "Định tuyến Spotify qua WARP."
+"SpotifyWARPDesc" = "Thêm định tuyến cho Spotify qua WARP."
+"IRWARP" = "Định tuyến tên miền của Iran qua WARP."
+"IRWARPDesc" = "Thêm định tuyến cho các tên miền của Iran qua WARP."
+"Inbounds" = "Đầu vào"
+"InboundsDesc" = "Thay đổi mẫu cấu hình để chấp nhận các máy khách cụ thể."
+"Outbounds" = "Đầu ra"
+"OutboundsDesc" = "Thay đổi mẫu cấu hình để xác định các cách ra đi cho máy chủ này."
 "Routings" = "Quy tắc định tuyến"
 "RoutingsDesc" = "Mức độ ưu tiên của mỗi quy tắc đều quan trọng!"
+"completeTemplate" = "All"
 
 [pages.xray.rules]
 "first" = "Đầu tiên"
@@ -389,7 +385,7 @@
 "source" = "Nguồn"
 "dest" = "Đích"
 "inbound" = "Vào"
-"outbound" = "Ra ngoài"
+"outbound" = "Ra"
 "info" = "Thông tin"
 "add" = "Thêm quy tắc"
 "edit" = "Chỉnh sửa quy tắc"
@@ -439,8 +435,8 @@
 "days" = "Ngày"
 "hours" = "Giờ"
 "unknown" = "Không rõ"
-"inbounds" = "Inbounds"
-"clients" = "Khách hàng"
+"inbounds" = "Vào"
+"clients" = "Các khách hàng"
 
 [tgbot.commands]
 "unknown" = "❗ Lệnh không rõ"
@@ -503,10 +499,10 @@
 "confirmResetTraffic" = "✅ Xác Nhận Đặt Lại Lưu Lượng?"
 "confirmClearIps" = "✅ Xác Nhận Xóa Các IP?"
 "confirmRemoveTGUser" = "✅ Xác Nhận Xóa Người Dùng Telegram?"
-"dbBackup" = "Tải Backup DB"
+"dbBackup" = "Tải bản sao lưu cơ sở dữ liệu"
 "serverUsage" = "Sử Dụng Máy Chủ"
-"getInbounds" = "Lấy Inbounds"
-"depleteSoon" = "Sắp Cạn Kiệt"
+"getInbounds" = "Lấy cổng vào"
+"depleteSoon" = "Depleted Soon"
 "clientUsage" = "Lấy Sử Dụng"
 "commands" = "Lệnh"
 "refresh" = "🔄 Cập Nhật"
@@ -516,13 +512,13 @@
 "selectOneTGUser" = "👤 Chọn một người dùng telegram:"
 "resetTraffic" = "📈 Đặt Lại Lưu Lượng"
 "resetExpire" = "📅 Đặt Lại Ngày Hết Hạn"
-"ipLog" = "🔢 Log IP"
-"ipLimit" = "🔢 Giới Hạn IP"
+"ipLog" = "🔢 Nhật ký địa chỉ IP"
+"ipLimit" = "🔢 Giới Hạn địa chỉ IP"
 "setTGUser" = "👤 Đặt Người Dùng Telegram"
 "toggle" = "🔘 Bật / Tắt"
-"custom" = "🔢 Phong tục"
+"custom" = "🔢 Tùy chỉnh"
 "confirmNumber" = "✅ Xác nhận : {{ .Num }}"
-"limitTraffic" = "🚧 Giới hạn giao thông"
+"limitTraffic" = "🚧 Giới hạn lưu lượng"
 
 [tgbot.answers]
 "successfulOperation" = "✅ Thành công!"
@@ -536,8 +532,8 @@
 "setTrafficLimitSuccess" = "✅ {{ .Email }} : Đã lưu thành công giới hạn lưu lượng."
 "expireResetSuccess" = "✅ {{ .Email }} : Đặt Lại Ngày Hết Hạn Thành Công."
 "resetIpSuccess" = "✅ {{ .Email }} : Giới Hạn IP {{ .Count }} Đã Được Lưu Thành Công."
-"clearIpSuccess" = "✅ {{ .Email }} : IPs Đã Được Xóa Thành Công."
-"getIpLog" = "✅ {{ .Email }} : Lấy Log IP Thành Công."
+"clearIpSuccess" = "✅ {{ .Email }} : IP Đã Được Xóa Thành Công."
+"getIpLog" = "✅ {{ .Email }} : Lấy nhật ký IP Thành Công."
 "getUserInfo" = "✅ {{ .Email }} : Lấy Thông Tin Người Dùng Telegram Thành Công."
 "removedTGUserSuccess" = "✅ {{ .Email }} : Người Dùng Telegram Đã Được Xóa Thành Công."
 "enableSuccess" = "✅ {{ .Email }} : Đã Bật Thành Công."

web/translation/translate.zh_Hans.toml

@@ -315,74 +315,70 @@
 "ipv4ConfigsDesc" = "此选项将仅通过 IPv4 路由到目标域"
 "warpConfigs" = "WARP 配置"
 "warpConfigsDesc" = "注意：在使用这些选项之前，请按照面板 GitHub 上的步骤在您的服务器上以 socks5 代理模式安装 WARP。 WARP 将通过 Cloudflare 服务器将流量路由到网站。"
-"xrayConfigTemplate" = "Xray 配置模板"
-"xrayConfigTemplateDesc" = "以该模型为基础生成最终的Xray配置文件，重新启动面板生成效率"
-"xrayConfigFreedomStrategy" = "配置自由协议的策略"
-"xrayConfigFreedomStrategyDesc" = "在自由协议中设置网络输出策略"
-"xrayConfigRoutingStrategy" = "配置路由域策略"
-"xrayConfigRoutingStrategyDesc" = "设置DNS解析的整体路由策略"
-"xrayConfigTorrent" = "禁止使用 bittorrent"
-"xrayConfigTorrentDesc" = "更改配置模板避免用户使用bittorrent"
-"xrayConfigPrivateIp" = "禁止私人 IP 范围连接"
-"xrayConfigPrivateIpDesc" = "更改配置模板以避免连接私有 IP 范围"
-"xrayConfigAds" = "屏蔽广告"
-"xrayConfigAdsDesc" = "修改配置模板屏蔽广告"
-"xrayConfigFamily" = "启用家庭友好配置"
-"xrayConfigFamilyDesc" = "避免为家人连接到不安全的网站"
-"xrayConfigSpeedtest" = "阻止测速网站"
-"xrayConfigSpeedtestDesc" = "更改配置模板以避免连接到速度测试网站。 重新启动面板以应用更改。"
-"xrayConfigIRIp" = "禁止伊朗 IP 范围连接"
-"xrayConfigIRIpDesc" = "修改配置模板避免连接伊朗IP段"
-"xrayConfigIRDomain" = "禁止伊朗域连接"
-"xrayConfigIRDomainDesc" = "更改配置模板避免连接伊朗域名"
-"xrayConfigChinaIp" = "禁止中国 IP 范围连接"
-"xrayConfigChinaIpDesc" = "修改配置模板避免连接中国IP段"
-"xrayConfigChinaDomain" = "禁止中国域名连接"
-"xrayConfigChinaDomainDesc" = "更改配置模板避免连接中国域"
-"xrayConfigRussiaIp" = "禁止俄罗斯 IP 范围连接"
-"xrayConfigRussiaIpDesc" = "修改配置模板避免连接俄罗斯IP范围"
-"xrayConfigRussiaDomain" = "禁止俄罗斯域连接"
-"xrayConfigRussiaDomainDesc" = "更改配置模板避免连接俄罗斯域"
-"xrayConfigDirectIRIp" = "直接连接到伊朗 IP 范围"
-"xrayConfigDirectIRIpDesc" = "更改直接连接到伊朗 IP 范围的配置模板"
-"xrayConfigDirectIRDomain" = "直接连接到伊朗域"
-"xrayConfigDirectIRDomainDesc" = "更改直接连接到伊朗域的配置模板"
-"xrayConfigDirectChinaIp" = "直连中国IP范围"
-"xrayConfigDirectChinaIpDesc" = "更改直连中国 IP 范围的配置模板"
-"xrayConfigDirectChinaDomain" = "直连中国域名"
-"xrayConfigDirectChinaDomainDesc" = "修改中国域名直连配置模板"
-"xrayConfigDirectRussiaIp" = "直接连接到俄罗斯 IP 范围"
-"xrayConfigDirectRussiaIpDesc" = "更改直接连接到俄罗斯 IP 范围的配置模板"
-"xrayConfigDirectRussiaDomain" = "直接连接到俄罗斯域"
-"xrayConfigDirectRussiaDomainDesc" = "更改直接连接到俄罗斯域的配置模板"
-"xrayConfigGoogleIPv4" = "为谷歌使用 IPv4"
-"xrayConfigGoogleIPv4Desc" = "添加谷歌连接IPv4的路由"
-"xrayConfigNetflixIPv4" = "为 Netflix 使用 IPv4"
-"xrayConfigNetflixIPv4Desc" = "添加Netflix连接IPv4的路由"
-"xrayConfigGoogleWARP" = "将谷歌路由到 WARP"
-"xrayConfigGoogleWARPDesc" = "为谷歌添加路由到WARP"
-"xrayConfigOpenAIWARP" = "将 OpenAI (ChatGPT) 路由到 WARP"
-"xrayConfigOpenAIWARPDesc" = "将OpenAI（ChatGPT）路由添加到WARP"
-"xrayConfigNetflixWARP" = "将 Netflix 路由到 WARP"
-"xrayConfigNetflixWARPDesc" = "为Netflix添加路由到WARP"
-"xrayConfigSpotifyWARP" = "将 Spotify 路由到 WARP"
-"xrayConfigSpotifyWARPDesc" = "为Spotify添加路由到WARP"
-"xrayConfigIRWARP" = "将伊朗域名路由到 WARP"
-"xrayConfigIRWARPDesc" = "将伊朗域的路由添加到 WARP。 重启面板生效"
-"xrayConfigInbounds" = "入站配置"
-"xrayConfigInboundsDesc" = "更改配置模板接受特殊客户端"
-"xrayConfigOutbounds" = "出站配置"
-"xrayConfigOutboundsDesc" = "更改配置模板定义此服务器的传出方式"
-"xrayConfigRoutings" = "路由规则配置"
-"xrayConfigRoutingsDesc" = "更改配置模板为该服务器定义路由规则"
-"completeTemplate" = "全部"
+"Template" = "Xray 配置模板"
+"TemplateDesc" = "以该模型为基础生成最终的Xray配置文件，重新启动面板生成效率"
+"FreedomStrategy" = "配置自由协议的策略"
+"FreedomStrategyDesc" = "在自由协议中设置网络输出策略"
+"RoutingStrategy" = "配置路由域策略"
+"RoutingStrategyDesc" = "设置DNS解析的整体路由策略"
+"Torrent" = "禁止使用 bittorrent"
+"TorrentDesc" = "更改配置模板避免用户使用bittorrent"
+"PrivateIp" = "禁止私人 IP 范围连接"
+"PrivateIpDesc" = "更改配置模板以避免连接私有 IP 范围"
+"Ads" = "屏蔽广告"
+"AdsDesc" = "修改配置模板屏蔽广告"
+"Family" = "启用家庭友好配置"
+"FamilyDesc" = "避免为家人连接到不安全的网站"
+"Speedtest" = "阻止测速网站"
+"SpeedtestDesc" = "更改配置模板以避免连接到速度测试网站。 重新启动面板以应用更改。"
+"IRIp" = "禁止伊朗 IP 范围连接"
+"IRIpDesc" = "修改配置模板避免连接伊朗IP段"
+"IRDomain" = "禁止伊朗域连接"
+"IRDomainDesc" = "更改配置模板避免连接伊朗域名"
+"ChinaIp" = "禁止中国 IP 范围连接"
+"ChinaIpDesc" = "修改配置模板避免连接中国IP段"
+"ChinaDomain" = "禁止中国域名连接"
+"ChinaDomainDesc" = "更改配置模板避免连接中国域"
+"RussiaIp" = "禁止俄罗斯 IP 范围连接"
+"RussiaIpDesc" = "修改配置模板避免连接俄罗斯IP范围"
+"RussiaDomain" = "禁止俄罗斯域连接"
+"RussiaDomainDesc" = "更改配置模板避免连接俄罗斯域"
+"DirectIRIp" = "直接连接到伊朗 IP 范围"
+"DirectIRIpDesc" = "更改直接连接到伊朗 IP 范围的配置模板"
+"DirectIRDomain" = "直接连接到伊朗域"
+"DirectIRDomainDesc" = "更改直接连接到伊朗域的配置模板"
+"DirectChinaIp" = "直连中国IP范围"
+"DirectChinaIpDesc" = "更改直连中国 IP 范围的配置模板"
+"DirectChinaDomain" = "直连中国域名"
+"DirectChinaDomainDesc" = "修改中国域名直连配置模板"
+"DirectRussiaIp" = "直接连接到俄罗斯 IP 范围"
+"DirectRussiaIpDesc" = "更改直接连接到俄罗斯 IP 范围的配置模板"
+"DirectRussiaDomain" = "直接连接到俄罗斯域"
+"DirectRussiaDomainDesc" = "更改直接连接到俄罗斯域的配置模板"
+"GoogleIPv4" = "为谷歌使用 IPv4"
+"GoogleIPv4Desc" = "添加谷歌连接IPv4的路由"
+"NetflixIPv4" = "为 Netflix 使用 IPv4"
+"NetflixIPv4Desc" = "添加Netflix连接IPv4的路由"
+"GoogleWARP" = "将谷歌路由到 WARP"
+"GoogleWARPDesc" = "为谷歌添加路由到WARP"
+"OpenAIWARP" = "将 OpenAI (ChatGPT) 路由到 WARP"
+"OpenAIWARPDesc" = "将OpenAI（ChatGPT）路由添加到WARP"
+"NetflixWARP" = "将 Netflix 路由到 WARP"
+"NetflixWARPDesc" = "为Netflix添加路由到WARP"
+"SpotifyWARP" = "将 Spotify 路由到 WARP"
+"SpotifyWARPDesc" = "为Spotify添加路由到WARP"
+"IRWARP" = "将伊朗域名路由到 WARP"
+"IRWARPDesc" = "将伊朗域的路由添加到 WARP。 重启面板生效"
 "Inbounds" = "界内"
+"InboundsDesc" = "更改配置模板接受特殊客户端"
 "Outbounds" = "出站"
+"OutboundsDesc" = "更改配置模板定义此服务器的传出方式"
 "Routings" = "路由规则"
 "RoutingsDesc" = "每条规则的优先级都很重要"
+"completeTemplate" = "全部"
 
 [pages.xray.rules]
-"firsto" = "第一个"
+"first" = "第一个"
 "last" = "最后"
 "up" = "向上"
 "down" = "向下"
@@ -403,7 +399,7 @@
 "tag" = "标签"
 "tagDesc" = "独特的标签"
 "address" = "地址"
-"rreverse" = "反转"
+"reverse" = "反转"
 "domain" = "域名"
 "type" = "类型"
 "bridge" = "桥"