v2.0.2

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>

.github/workflows/docker.yml

@@ -27,7 +27,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5.3.0
+        uses: docker/metadata-action@v5.4.0
         with:
           images: ghcr.io/${{ github.repository }}
 
@@ -36,6 +36,6 @@ jobs:
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}
-          platforms: linux/amd64, linux/arm64/v8
+          platforms: linux/amd64, linux/arm64/v8, linux/arm/v7
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

.github/workflows/release.yml

@@ -10,7 +10,7 @@ jobs:
   build:
     strategy:
       matrix:
-        platform: [amd64, arm64]
+        platform: [amd64, arm64, arm]
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout repository
@@ -21,11 +21,14 @@ jobs:
         with:
           go-version: '1.21'
           
-      - name: Install dependencies for arm64
-        if: matrix.platform == 'arm64'
+      - name: Install dependencies for arm64 and arm
+        if: matrix.platform == 'arm64' || matrix.platform == 'arm'
         run: |
           sudo apt-get update
           sudo apt install gcc-aarch64-linux-gnu
+          if [ "${{ matrix.platform }}" == "arm" ]; then
+            sudo apt install gcc-arm-linux-gnueabihf
+          fi
 
       - name: Build x-ui
         run: |
@@ -34,6 +37,8 @@ jobs:
           export GOARCH=${{ matrix.platform }}
           if [ "${{ matrix.platform }}" == "arm64" ]; then
             export CC=aarch64-linux-gnu-gcc
+          elif [ "${{ matrix.platform }}" == "arm" ]; then
+            export CC=arm-linux-gnueabihf-gcc
           fi
           go build -o xui-release -v main.go
           
@@ -50,16 +55,22 @@ jobs:
             wget https://github.com/XTLS/Xray-core/releases/download/v1.8.6/Xray-linux-64.zip
             unzip Xray-linux-64.zip
             rm -f Xray-linux-64.zip
-          else
+          elif [ "${{ matrix.platform }}" == "arm64" ]; then
             wget https://github.com/XTLS/Xray-core/releases/download/v1.8.6/Xray-linux-arm64-v8a.zip
             unzip Xray-linux-arm64-v8a.zip
             rm -f Xray-linux-arm64-v8a.zip
+          else
+            wget https://github.com/XTLS/Xray-core/releases/latest/download/Xray-linux-arm32-v7a.zip
+            unzip Xray-linux-arm32-v7a.zip
+            rm -f Xray-linux-arm32-v7a.zip
           fi
-          rm -f geoip.dat geosite.dat geoip_IR.dat geosite_IR.dat
+          rm -f geoip.dat geosite.dat geoip_IR.dat geosite_IR.dat geoip_VN.dat geosite_VN.dat
           wget https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geoip.dat
           wget https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geosite.dat
           wget -O geoip_IR.dat https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geoip.dat
           wget -O geosite_IR.dat https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geosite.dat
+          wget -O geoip_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geoip.dat
+          wget -O geosite_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geosite.dat
           mv xray xray-linux-${{ matrix.platform }}
           cd ../..
           

DockerInit.sh

@@ -9,6 +9,10 @@ case $1 in
         ARCH="arm64-v8a"
         FNAME="arm64"
         ;;
+    armv7 | arm | arm32)
+        ARCH="arm32-v7a"
+        FNAME="arm32"
+        ;;
     *)
         ARCH="64"
         FNAME="amd64"
@@ -20,10 +24,12 @@ cd build/bin
 
 wget "https://github.com/XTLS/Xray-core/releases/download/v1.8.6/Xray-linux-${ARCH}.zip"
 unzip "Xray-linux-${ARCH}.zip"
-rm -f "Xray-linux-${ARCH}.zip" geoip.dat geosite.dat geoip_IR.dat geosite_IR.dat 
+rm -f "Xray-linux-${ARCH}.zip" geoip.dat geosite.dat geoip_IR.dat geosite_IR.dat geoip_VN.dat geosite_VN.dat
 mv xray "xray-linux-${FNAME}"
 
 wget https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geoip.dat
 wget https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geosite.dat
 wget -O geoip_IR.dat https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geoip.dat
 wget -O geosite_IR.dat https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geosite.dat
+wget -O geoip_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geoip.dat
+wget -O geosite_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geosite.dat

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.2`:
 
 ```
-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.2
 ```
 
 # SSL
@@ -362,6 +362,8 @@ XUI_BIN_FOLDER="bin" XUI_DB_FOLDER="/etc/x-ui" go build main.go
 - CentOS 8+
 - Fedora 36+
 - Arch Linux
+- Manjaro
+- Armbian (for ARM devices)
 
 # Pictures
 
@@ -371,6 +373,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.2

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.1
 	gorm.io/driver/sqlite v1.5.4
 	gorm.io/gorm v1.25.5
 )
@@ -83,7 +83,7 @@ require (
 	go.uber.org/mock v0.3.0 // indirect
 	go4.org/netipx v0.0.0-20230824141953-6213f710f925 // indirect
 	golang.org/x/arch v0.6.0 // indirect
-	golang.org/x/crypto v0.15.0 // indirect
+	golang.org/x/crypto v0.17.0 // indirect
 	golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa // indirect
 	golang.org/x/mod v0.14.0 // indirect
 	golang.org/x/net v0.18.0 // indirect

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=
@@ -319,8 +319,8 @@ golang.org/x/crypto v0.0.0-20181030102418-4d3f4d9ffa16/go.mod h1:6SG95UA2DQfeDnf
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20190313024323-a1f597ede03a/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20210711020723-a769d52b0f97/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
-golang.org/x/crypto v0.15.0 h1:frVn1TEaCEaZcn3Tmd7Y2b5KKPaZ+I32Q2OA3kYp5TA=
-golang.org/x/crypto v0.15.0/go.mod h1:4ChreQoLWfG3xLDer1WdlH5NdlQ3+mwnQq1YTKY+72g=
+golang.org/x/crypto v0.17.0 h1:r8bRNjWL3GshPW3gkd+RpvzWrZAwPS49OmTGZ/uhM4k=
+golang.org/x/crypto v0.17.0/go.mod h1:gCAAfMLgwOJRpTjQ2zCCt2OcSfYMTeZVSRtQlPC7Nq4=
 golang.org/x/exp v0.0.0-20190121172915-509febef88a4/go.mod h1:CJ0aWSM057203Lf6IL+f9T1iT9GByDxfZKAQTCR3kQA=
 golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa h1:FRnLl4eNAQl8hwxVVC17teOw8kdjVDVAiFMtgUdTSRQ=
 golang.org/x/exp v0.0.0-20231110203233-9a3e6036ecaa/go.mod h1:zk2irFbV9DP96SEBUUAy67IdHUaZuSnrz1n472HUCLE=
@@ -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.1 h1:26+wFr+cNqSGFcOXcabYC0lUVJVRa2Sb2ortSK7VrEU=
+google.golang.org/grpc v1.60.1/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=

install.sh

@@ -26,7 +26,8 @@ echo "The OS release is: $release"
 arch3xui() {
     case "$(uname -m)" in
     x86_64 | x64 | amd64) echo 'amd64' ;;
-    armv8 | arm64 | aarch64) echo 'arm64' ;;
+    armv8* | armv8 | arm64 | aarch64) echo 'arm64' ;;
+    armv7* | armv7 | arm | arm32 ) echo 'arm32' ;;
     *) echo -e "${green}Unsupported CPU architecture! ${plain}" && rm -f install.sh && exit 1 ;;
     esac
 }
@@ -54,7 +55,11 @@ elif [[ "${release}" == "debian" ]]; then
         echo -e "${red} Please use Debian 10 or higher ${plain}\n" && exit 1
     fi
 elif [[ "${release}" == "arch" ]]; then
-    echo "OS is ArchLinux"
+    echo "Your OS is ArchLinux"
+elif [[ "${release}" == "manjaro" ]]; then
+    echo "Your OS is Manjaro"
+elif [[ "${release}" == "armbian" ]]; then
+    echo "Your OS is Armbian"
 
 else
     echo -e "${red}Failed to check the OS version, please contact the author!${plain}" && exit 1
@@ -63,13 +68,13 @@ fi
 install_base() {
     case "${release}" in
         centos|fedora)
-            yum install -y -q wget curl tar
+            yum -y update && yum install -y -q wget curl tar
             ;;
-        arch)
-            pacman -Syu --noconfirm wget curl tar
+        arch|manjaro)
+            pacman -Syu && pacman -Syu --noconfirm wget curl tar
             ;;
         *)
-            apt install -y -q wget curl tar
+            apt-get update && apt-get upgrade -y && apt install -y -q wget curl tar
             ;;
     esac
 }
@@ -78,7 +83,7 @@ install_base() {
 # This function will be called when user installed x-ui out of security
 config_after_install() {
     echo -e "${yellow}Install/update finished! For security it's recommended to modify panel settings ${plain}"
-    read -p "Do you want to continue with the modification [y/n]? ": config_confirm
+    read -p "Do you want to continue with the modification [y/n]?": config_confirm
     if [[ "${config_confirm}" == "y" || "${config_confirm}" == "Y" ]]; then
         read -p "Please set up your username:" config_account
         echo -e "${yellow}Your username will be:${config_account}${plain}"

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

@@ -18,6 +18,7 @@ body {
 html {
     --antd-wave-shadow-color: #008771;
     line-height: 1.15;
+    text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     -ms-overflow-style: scrollbar;
@@ -55,7 +56,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 +94,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 +133,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 +417,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;
 }
@@ -674,7 +681,7 @@ tr.ant-table-expanded-row td>.ant-table-wrapper {
 .dark .ant-table-row-expand-icon {
     color: #fff;
     background-color: #fff0;
-    border-color: #9ea2a8;
+    border-color: rgb(255 255 255 / 20%);
 }
 
 .dark .ant-table-row-expand-icon:hover {
@@ -794,16 +801,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,
@@ -844,6 +851,17 @@ tr.ant-table-expanded-row td>.ant-table-wrapper {
 .ant-menu,
 .ant-radio-button-wrapper {
     user-select: none;
+    -webkit-user-select: none;
+}
+
+.ant-calendar-date,
+.ant-calendar-year-panel-year,
+.ant-calendar-decade-panel-decade,
+.ant-calendar-month-panel-month,
+.ant-checkbox-inner,
+.ant-checkbox-checked:after,
+.ant-table-row-expand-icon {
+    border-radius: 6px;
 }
 
 .ant-calendar-date:hover {
@@ -902,7 +920,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 +1062,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 +1099,21 @@ 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-select-dropdown,
+.ant-popover-inner {
+    overflow-x: hidden;
+}
+.ant-popover-inner-content {
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.qr-bg {
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    padding: 0.5rem;
+    border-radius: 1rem;
+}

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

@@ -474,10 +474,10 @@ class TlsStreamSettings extends XrayCommonClass {
                 cipherSuites = '',
                 rejectUnknownSni = false,
                 certificates=[new TlsStreamSettings.Cert()],
-                alpn=[ALPN_OPTION.HTTP1,ALPN_OPTION.H2],
+                alpn=[ALPN_OPTION.H2,ALPN_OPTION.HTTP1],
                 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/entity/entity.go

@@ -72,8 +72,8 @@ func (s *AllSetting) CheckValid() error {
 		return common.NewError("Sub port is not a valid port:", s.SubPort)
 	}
 
-	if s.SubPort == s.WebPort {
-		return common.NewError("Sub and Web could not use same port:", s.SubPort)
+	if (s.SubPort == s.WebPort) && (s.WebListen == s.SubListen) {
+		return common.NewError("Sub and Web could not use same ip:port, ", s.SubListen, ":", s.SubPort, " & ", s.WebListen, ":", s.WebPort)
 	}
 
 	if s.WebCertFile != "" || s.WebKeyFile != "" {

web/html/common/qrcode_modal.html

@@ -9,12 +9,12 @@
     </a-tag>
     <template v-if="app.subSettings.enable && qrModal.subId">
         <a-divider>Subscription</a-divider>
-        <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" style="width: 100%; height: 100%;"></canvas>
+        <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" style="width: 100%; height: 100%;"></canvas></div>
     </template>
     <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
     <template v-for="(row, index) in qrModal.qrcodes">
         <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag>
-        <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" style="width: 100%; height: 100%;"></canvas>
+        <div class="qr-bg"><canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" style="width: 100%; height: 100%;"></canvas></div>
     </template>
 </a-modal>
 
@@ -72,7 +72,7 @@
                 });
             },
             genSubLink(subID) {
-                return app.subSettings.subURI+subID+'?name='+subID;
+                return app.subSettings.subURI+subID;
             }
         },
         updated() {
@@ -87,4 +87,4 @@
     });
 
 </script>
-{{end}}
+{{end}}

web/html/login.html

@@ -27,6 +27,7 @@
     text-align: center;
     align-items: center;
     justify-content: center;
+    width: 100%;
   }
   .title {
     font-size: 32px;
@@ -55,44 +56,12 @@
       opacity: 1;
     }
   }
-  @keyframes wave {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  .wave {
-    opacity: 0.6;
-    position: absolute;
-    bottom: 40%;
-    left: 50%;
-    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;
-    pointer-events: none;
-  }
-  .wave2 {
-    animation: wave 88s infinite linear;
-    opacity: 0.3;
-  }
-  .wave3 {
-    animation: wave 80s infinite linear;
-    opacity: 0.1;
-  }
   .under {
-    background-color: #dbf5ed;
-  }
-  .dark .wave {
-    background: rgb(10 117 87 / 20%);
+    background-color: #c7ebe2;
+    z-index: 0;
   }
   .dark .under {
-    background-color: #101828;
+    background-color: #0f2d32;
   }
   .dark #login {
     background-color: #151f31;
@@ -100,12 +69,10 @@
   .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 +123,11 @@
     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;
+    transition: all 0.3s cubic-bezier(.645,.045,.355,1);
     width: 100%;
+    z-index: 1;
   }
+  .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;
@@ -215,14 +183,84 @@
     background-position-x: 0;
     box-shadow: none;
   }
+  .waves-header {
+    position: fixed;
+    width: 100%;
+    text-align: center;
+    background-color: #dbf5ed;
+    color: white;
+    z-index: -1;
+  }
+  .dark .waves-header {
+    background-color: #101828;
+  }
+  .waves-inner-header {
+    height: 50vh;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+  .waves {
+    position: relative;
+    width: 100%;
+    height: 15vh;
+    margin-bottom: -5px; /*Fix for safari gap*/
+    min-height: 100px;
+    max-height: 150px;
+  }
+  .parallax > use {
+    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
+  }
+  .dark .parallax > use {
+    fill: rgb(10 117 87 / 20%);
+  }
+  .parallax > use:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 7s;
+    opacity: 0.2;
+  }
+  .parallax > use:nth-child(2) {
+    animation-delay: -3s;
+    animation-duration: 10s;
+    opacity: 0.4;
+  }
+  .parallax > use:nth-child(3) {
+    animation-delay: -4s;
+    animation-duration: 13s;
+    opacity: 0.6;
+  }
+  @keyframes move-forever {
+    0% {
+      transform: translate3d(-90px, 0, 0);
+    }
+    100% {
+      transform: translate3d(85px, 0, 0);
+    }
+  }
+  @media (max-width: 768px) {
+    .waves {
+      height: 40px;
+      min-height: 40px;
+    }
+  }
 </style>
 <body>
 <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
     <transition name="list" appear>
         <a-layout-content class="under" style="min-height: 0;">
-            <div class='wave'></div>
-            <div class='wave wave2'></div>
-            <div class='wave wave3'></div>
+            <div class="waves-header">
+                <div class="waves-inner-header"></div>
+                <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+                    <defs>
+                        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+                    </defs>
+                    <g class="parallax">
+                        <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" />
+                        <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" />
+                        <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0, 135, 113, 0.08)" />
+                    </g>
+                </svg>
+            </div>
             <a-row type="flex" justify="center" align="middle" style="height: 100%; overflow: auto;">
             <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
             <a-row type="flex" justify="center">
@@ -252,7 +290,7 @@
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
-                                <div class="wave-btn-bg wave-btn-bg-cl">
+                                <div class="wave-btn-bg wave-btn-bg-cl" :style="loading ? { width: '54px' } : { display: 'inline-block' }">
                                     <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
                                               :style="loading ? { width: '50px' } : { display: 'inline-block' }">
                                         [[ loading ? '' : '{{ i18n "login" }}' ]]

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 (No Obfuscation)</a-select-option>
+                <a-select-option value="srtp">SRTP (Video Call)</a-select-option>
+                <a-select-option value="utp">uTP (Bittorrent)</a-select-option>
+                <a-select-option value="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='Service Name'>
+            <a-input v-model.trim="outbound.stream.grpc.serviceName"></a-input>
+        </a-form-item>
+        <a-form-item label='Multi Mode'>
+            <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 IDs">
+                    <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">
@@ -541,4 +304,4 @@
         <textarea style="position:absolute; left: -800px;" id="outboundJson"></textarea>
 </a-tab-pane>
 </a-tabs>
-{{end}}
+{{end}}

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='Follow Redirect'>
+        <a-switch v-model="inbound.settings.followRedirect"></a-switch>
+    </a-form-item>
 </a-form>
-{{end}}
+{{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,29 @@
             </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>
+</template>
+<a-form :colon="false" :label-col="{ md: {span:6} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label='{{ i18n "encryption" }}'>
+        <a-select v-model="inbound.settings.method" @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>
+    <a-form-item v-if="inbound.isSS2022">
+        <template slot="label">
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "password" }}</span>
+                </template> Password <a-icon @click="inbound.settings.password = RandomUtil.randomShadowsocksPassword()" type="sync"></a-icon>
+            </a-tooltip>
+        </template>
+        <a-input v-model.trim="inbound.settings.password"></a-input>
+    </a-form-item>
+    <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
+        <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>
 </a-form>
-{{end}}
+{{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}}
+{{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,55 +31,28 @@
     </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>
-{{end}}
+{{end}}

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

@@ -1,88 +1,60 @@
 {{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>
+    <a-divider style="margin:5px 0;"></a-divider>
 </template>
 {{end}}

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:5px 0 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}}
+{{end}}

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

@@ -1,32 +1,26 @@
 {{define "form/externalProxy"}}
-<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-divider style="margin:5px 0 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: 8px 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"></a-input>
+    </a-form-item>
+    <a-form-item label="Multi Mode">
+        <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
+    </a-form-item>
 </a-form>
-{{end}}
+{{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 (No Obfuscation)</a-select-option>
+            <a-select-option value="srtp">SRTP (Video Call)</a-select-option>
+            <a-select-option value="utp">uTP (Bittorrent)</a-select-option>
+            <a-select-option value="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}}
+{{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 (No Obfuscation)</a-select-option>
+            <a-select-option value="srtp">SRTP (Video Call)</a-select-option>
+            <a-select-option value="utp">uTP (Bittorrent)</a-select-option>
+            <a-select-option value="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}}
+{{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:5px 0 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}}
+{{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,30 +1,23 @@
 {{define "form/streamWS"}}
-<a-form layout="inline">
-    <a-form-item label="AcceptProxyProtocol">
+<a-form :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-form-item label="Accept Proxy Protocol">
         <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>
 </a-form>
-{{end}}
+{{end}}

web/html/xui/form/tls_settings.html

@@ -1,395 +1,194 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
+<a-form v-if="inbound.canEnableTls()" :colon="false" :label-col="{ md: {span:8} }" :wrapper-col="{ md: {span:14} }">
+    <a-divider style="margin:3px 0;"></a-divider>
+    <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>
 
-<a-form v-if="inbound.canEnableTls()" layout="inline">
-    <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>
+    <!-- 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"></a-input>
                 </a-form-item>
-            </td>
-        </tr>
+                <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
+                    <a-input v-model.trim="cert.keyFile"></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" v-model="cert.cert"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
+                    <a-input type="textarea" :rows="3" 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"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
+                    <a-input v-model.trim="cert.keyFile"></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" v-model="cert.cert"></a-input>
+                </a-form-item>
+                <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
+                    <a-input type="textarea" :rows="3" 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"></a-input>
+        </a-form-item>
+        <a-form-item label='SpiderX'>
+            <a-input v-model.trim="inbound.stream.reality.settings.spiderX"></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}}
+{{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>
@@ -157,9 +161,9 @@
                                 </a-col>
                             </a-row>
                         </div>
-                        <div style="display: flex; align-items: center; justify-content: flex-start;">
+                        <div :style="isMobile ? '' : 'display: flex; align-items: center; justify-content: flex-start;'">
                             <a-switch v-model="enableFilter"
-                                style="margin-right: .5rem;"
+                                :style="isMobile ? 'margin-bottom: .5rem; display: flex;' : 'margin-right: .5rem;'"
                                 @change="toggleFilter">
                                 <a-icon slot="checkedChildren" type="search"></a-icon>
                                 <a-icon slot="unCheckedChildren" type="filter"></a-icon>
@@ -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="isMobile ? 'margin: -12px 2px -13px;' : 'margin: -12px 22px -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,14 +125,14 @@
                                 <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>
                     <a-col :sm="24" :md="12">
                         <a-card hoverable>
                             {{ i18n "usage"}}:
-                            Memory [[ sizeFormat(status.appStats.mem) ]] -
+                            RAM [[ sizeFormat(status.appStats.mem) ]] -
                             Threads [[ status.appStats.threads ]]
                             </a-tooltip>
                         </a-card>
@@ -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>
@@ -190,22 +190,22 @@
                             <a-row>
                                 <a-col :span="12">
                                     <a-icon type="arrow-up"></a-icon>
-                                    [[ sizeFormat(status.netIO.up) ]]/S
+                                    [[ sizeFormat(status.netIO.up) ]]/s
                                     <a-tooltip>
                                         <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">
                                     <a-icon type="arrow-down"></a-icon>
-                                    [[ sizeFormat(status.netIO.down) ]]/S
+                                    [[ sizeFormat(status.netIO.down) ]]/s
                                     <a-tooltip>
                                         <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>
@@ -650,4 +650,4 @@
 
 </script>
 </body>
-</html>
+</html>

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,14 @@
                                             </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>
+				    <setting-list-item type="switch" title='{{ i18n "pages.xray.VNIp"}}' desc='{{ i18n "pages.xray.VNIpDesc"}}' v-model="VNIpSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.VNDomain"}}' desc='{{ i18n "pages.xray.VNDomainDesc"}}' v-model="VNDomainSettings"></setting-list-item>
                                 </a-collapse-panel>
                                 <a-collapse-panel header='{{ i18n "pages.xray.directCountryConfigs"}}'>
                                     <a-row :xs="24" :sm="24" :lg="12">
@@ -180,12 +186,14 @@
                                             </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>
+				    <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectVNIp"}}' desc='{{ i18n "pages.xray.DirectVNIpDesc"}}' v-model="VNIpDirectSettings"></setting-list-item>
+                                    <setting-list-item type="switch" title='{{ i18n "pages.xray.DirectVNDomain"}}' desc='{{ i18n "pages.xray.DirectVNDomainDesc"}}' v-model="VNDomainDirectSettings"></setting-list-item>									
                                 </a-collapse-panel>
                                 <a-collapse-panel header='{{ i18n "pages.xray.ipv4Configs"}}'>
                                     <a-row :xs="24" :sm="24" :lg="12">
@@ -196,8 +204,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 +216,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>
@@ -434,7 +442,7 @@
             { title: 'Port', dataIndex: 'port', align: 'center', width: 10, ellipsis: true }]},
         { title: '{{ i18n "pages.xray.rules.inbound"}}', children: [
             { title: 'Inbound Tag', dataIndex: 'inboundTag', align: 'center', width: 20, ellipsis: true },
-            { title: 'User email', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
+            { title: 'Client Email', dataIndex: 'user', align: 'center', width: 20, ellipsis: true }]},
         { title: '{{ i18n "pages.xray.rules.outbound"}}', dataIndex: 'outboundTag', align: 'center', width: 20 },
     ];
 
@@ -527,8 +535,9 @@
                 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"],
+		    vn: ["ext:geoip_VN.dat:vn"],
                 },
                 domains: {
                     ads: [
@@ -552,7 +561,12 @@
                         "regexp:.*\\.ir$",
                         "regexp:.*\\.xn--mgba3a4f16a$",  // .ایران
                         "ext:geosite_IR.dat:ir"  // have rules to bypass all .ir domains.
-                    ]
+                    ],
+		    vn: [
+			"regexp:.*\\.vn$",
+                        "ext:geosite_VN.dat:vn",
+                        "ext:geosite_VN.dat:ads"
+		    ]
                 },
                 familyProtectDNS: {
                     "servers": [
@@ -837,17 +851,27 @@
                     confirm: (reverse, rules) => {
                         reverseModal.loading();
                         if(reverse.tag.length > 0){
-                            oldtag = this.reverseData[index].tag;
-                            this.deleteReverse(index);
+                            oldData = this.reverseData[index];
                             newTemplateSettings = this.templateSettings;
-                            if(newTemplateSettings.reverse == undefined) newTemplateSettings.reverse = {};
-                            if(newTemplateSettings.reverse[reverse.type+'s']  == undefined) newTemplateSettings.reverse[reverse.type+'s'] = [];
-                            newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain });
+                            oldReverseIndex = newTemplateSettings.reverse[oldData.type+'s'].findIndex(rs => rs.tag == oldData.tag);
+                            oldRuleIndex0 = oldRules.length>0 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[0])) : -1;
+                            oldRuleIndex1 = oldRules.length==2 ? newTemplateSettings.routing.rules.findIndex(r => JSON.stringify(r) == JSON.stringify(oldRules[1])) : -1;
+                            if(oldData.type == reverse.type){
+                                newTemplateSettings.reverse[oldData.type + 's'][oldReverseIndex] = { tag: reverse.tag, domain: reverse.domain };
+                            } else {
+                                newTemplateSettings.reverse[oldData.type+'s'].splice(oldReverseIndex,1);
+                                // delete empty object
+                                if(newTemplateSettings.reverse[oldData.type+'s'].length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type+'s');
+                                // add other type of reverse if it is not exist
+                                if(!newTemplateSettings.reverse[reverse.type+'s']) newTemplateSettings.reverse[reverse.type+'s'] = [];
+                                newTemplateSettings.reverse[reverse.type+'s'].push({ tag: reverse.tag, domain: reverse.domain });
+                            }
                             this.templateSettings = newTemplateSettings;
 
                             // Adjust Rules
-                            newRules = this.templateSettings.routing.rules.filter(r => r.outboundTag != oldtag && (r.inboundTag && !r.inboundTag.includes(oldtag)));
-                            newRules.push(...rules)
+                            newRules = this.templateSettings.routing.rules;
+                            oldRuleIndex0 != -1 ? newRules[oldRuleIndex0] = rules[0] : newRules.push(rules[0]);
+                            oldRuleIndex1 != -1 ? newRules[oldRuleIndex1] = rules[1] : newRules.push(rules[1]);
                             this.routingRuleSettings = JSON.stringify(newRules);
                         }
                         reverseModal.close();
@@ -862,10 +886,17 @@
                 realIndex = reverseTypeObj.findIndex(r => r.tag==oldData.tag && r.domain==oldData.domain);
                 newTemplateSettings.reverse[oldData.type+'s'].splice(realIndex,1);
 
+                // delete empty objects
                 if(reverseTypeObj.length == 0) Reflect.deleteProperty(newTemplateSettings.reverse, oldData.type+'s');
                 if(Object.keys(newTemplateSettings.reverse).length === 0) Reflect.deleteProperty(newTemplateSettings, 'reverse');
 
-                newRules = newTemplateSettings.routing.rules.filter(r => r.outboundTag != oldData.tag && (r.inboundTag && !r.inboundTag.includes(oldData.tag)));
+                // delete related routing rules
+                newRules = newTemplateSettings.routing.rules;
+                if(oldData.type == "bridge"){
+                    newRules = newTemplateSettings.routing.rules.filter(r => !( r.inboundTag && r.inboundTag.length == 1 && r.inboundTag[0] == oldData.tag));
+                } else if(oldData.type == "portal"){
+                    newRules = newTemplateSettings.routing.rules.filter(r => r.outboundTag != oldData.tag);
+                }
                 newTemplateSettings.routing.rules = newRules;
                 
                 this.templateSettings = newTemplateSettings;
@@ -1274,6 +1305,30 @@
                     }
                 }
             },
+	    VNIpSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.vn, this.blockedIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedIPs = [...this.blockedIPs, ...this.settingsData.ips.vn];
+                    } else {
+                        this.blockedIPs = this.blockedIPs.filter(data => !this.settingsData.ips.vn.includes(data));
+                    }
+                }
+            },
+            VNDomainSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.vn, this.blockedDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.blockedDomains = [...this.blockedDomains, ...this.settingsData.domains.vn];
+                    } else {
+                        this.blockedDomains = this.blockedDomains.filter(data => !this.settingsData.domains.vn.includes(data));
+                    }
+                }
+            },
             IRIpDirectSettings: {
                 get: function () {
                     return doAllItemsExist(this.settingsData.ips.ir, this.directIPs);
@@ -1346,6 +1401,30 @@
                     }
                 }
             },
+	    VNIpDirectSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.ips.vn, this.directIPs);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.directIPs = [...this.directIPs, ...this.settingsData.ips.vn];
+                    } else {
+                        this.directIPs = this.directIPs.filter(data => !this.settingsData.ips.vn.includes(data));
+                    }
+                }
+            },
+            VNDomainDirectSettings: {
+                get: function () {
+                    return doAllItemsExist(this.settingsData.domains.vn, this.directDomains);
+                },
+                set: function (newValue) {
+                    if (newValue) {
+                        this.directDomains = [...this.directDomains, ...this.settingsData.domains.vn];
+                    } else {
+                        this.directDomains = this.directDomains.filter(data => !this.settingsData.domains.vn.includes(data));
+                    }
+                }
+            },			
             GoogleWARPSettings: {
                 get: function () {
                     return doAllItemsExist(this.settingsData.domains.google, this.warpDomains);
@@ -1398,4 +1477,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,111 @@
 <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','UDP','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>
+                    User <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.user"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <template slot="label">
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.xray.rules.useComma" }}</span>
+                    </template>
+                    Port <a-icon type="question-circle"></a-icon>
+                </a-tooltip>
+            </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 +236,4 @@
     });
 
 </script>
-{{end}}
+{{end}}

web/translation/translate.en_US.toml

@@ -26,7 +26,7 @@
 "edit" = "Edit"
 "delete" = "Delete"
 "reset" = "Reset"
-"copySuccess" = "Copied successfully"
+"copySuccess" = "Copied Successfully"
 "sure" = "Sure"
 "encryption" = "Encryption"
 "transmission" = "Transmission"
@@ -40,12 +40,12 @@
 "depletingSoon" = "Depleting"
 "offline" = "Offline"
 "online" = "Online"
-"domainName" = "Domain name"
+"domainName" = "Domain Name"
 "monitor" = "Listening IP"
 "certificate" = "Certificate"
 "fail" = "Fail"
 "success" = "Success"
-"getVersion" = "Get version"
+"getVersion" = "Get Version"
 "install" = "Install"
 "clients" = "Clients"
 "usage" = "Usage"
@@ -59,11 +59,11 @@
 "settings" = "Panel Settings"
 "xray" = "Xray Settings"
 "logout" = "Logout"
-"link" = "Other"
+"link" = "Management"
 
 [pages.login]
 "title" = "Login"
-"loginAgain" = "The login time limit has expired. Please log in again."
+"loginAgain" = "Your session has expired, please log in again"
 
 [pages.login.toasts]
 "invalidFormData" = "Input data format is invalid."
@@ -74,8 +74,8 @@
 
 [pages.index]
 "title" = "System Status"
-"memory" = "Memory"
-"hard" = "Hard Disk"
+"memory" = "RAM"
+"hard" = "Disk"
 "xrayStatus" = "Status"
 "stopXray" = "Stop"
 "restartXray" = "Restart"
@@ -85,21 +85,21 @@
 "operationHours" = "Uptime"
 "systemLoad" = "System Load"
 "systemLoadDesc" = "system load average for the past 1, 5, and 15 minutes"
-"connectionTcpCountDesc" = "Total TCP connections across all network cards."
-"connectionUdpCountDesc" = "Total UDP connections across all network cards."
+"connectionTcpCountDesc" = "Total TCP connections across all network cards"
+"connectionUdpCountDesc" = "Total UDP connections across all network cards"
 "connectionCount" = "Number of Connections"
-"upSpeed" = "Total upload speed for all network cards."
-"downSpeed" = "Total download speed for all network cards."
-"totalSent" = "Total upload traffic of all network cards since system startup."
-"totalReceive" = "Total download data across all network cards since system startup."
+"upSpeed" = "Total upload speed for all network cards"
+"downSpeed" = "Total download speed for all network cards"
+"totalSent" = "Total upload data across all network cards since OS startup"
+"totalReceive" = "Total download data across all network cards since OS startup"
 "xraySwitchVersionDialog" = "Switch Xray Version"
 "xraySwitchVersionDialogDesc" = "Are you sure you want to switch the Xray version to"
-"dontRefresh" = "Installation is in progress, please do not refresh this page."
+"dontRefresh" = "Installation is in progress, please do not refresh this page"
 "logs" = "Logs"
 "config" = "Config"
 "backup" = "Backup & Restore"
 "backupTitle" = "Backup & Restore Database"
-"backupDescription" = "Remember to backup before importing a new database."
+"backupDescription" = "It is recommended to backup before importing a new database."
 "exportDatabase" = "Download Database"
 "importDatabase" = "Upload Database"
 
@@ -134,7 +134,7 @@
 "destinationPort" = "Destination Port"
 "targetAddress" = "Target Address"
 "monitorDesc" = "Leave blank by default"
-"meansNoLimit" = "Means No Limit"
+"meansNoLimit" = "Means no limit"
 "totalFlow" = "Total Flow"
 "leaveBlankToNeverExpire" = "Leave Blank to Never Expire"
 "noRecommendKeepDefault" = "No special requirements to maintain default settings"
@@ -152,16 +152,16 @@
 "cloneInboundContent" = "All settings of this inbound, except for Port, Listening IP, and Clients, will be applied to the clone."
 "cloneInboundOk" = "Clone"
 "resetAllTraffic" = "Reset All Inbounds Traffic"
-"resetAllTrafficTitle" = "Reset all inbounds traffic"
+"resetAllTrafficTitle" = "Reset All Inbounds Traffic"
 "resetAllTrafficContent" = "Are you sure you want to reset all inbounds traffic?"
 "resetInboundClientTraffics" = "Reset Clients Traffic"
-"resetInboundClientTrafficTitle" = "Reset all client traffic"
+"resetInboundClientTrafficTitle" = "Reset Clients Traffic"
 "resetInboundClientTrafficContent" = "Are you sure you want to reset all traffic for this inbound's clients?"
 "resetAllClientTraffics" = "Reset All Clients Traffic"
 "resetAllClientTrafficTitle" = "Reset all clients traffic"
 "resetAllClientTrafficContent" = "Are you sure you want to reset all traffics for all clients?"
 "delDepletedClients" = "Delete Depleted Clients"
-"delDepletedClientsTitle" = "Delete depleted clients"
+"delDepletedClientsTitle" = "Delete Depleted Clients"
 "delDepletedClientsContent" = "Are you sure you want to delete all depleted clients?"
 "email" = "Email"
 "emailDesc" = "Please provide a unique email address."
@@ -170,23 +170,23 @@
 "IPLimitlog" = "IP Log"
 "IPLimitlogDesc" = "IPs history log (before enabling inbound after it has been disabled by IP limit, you should clear the log)."
 "IPLimitlogclear" = "Clear The Log"
-"setDefaultCert" = "Set cert from panel"
+"setDefaultCert" = "Set Cert from Panel"
 "xtlsDesc" = "Xray core needs to be 1.7.5"
 "realityDesc" = "Xray core needs to be 1.8.0 or higher."
 "telegramDesc" = "use Telegram ID without @ or chat IDs ( you can get it here @userinfobot or use '/id' command in bot )"
 "subscriptionDesc" = "you can find your sub link on Details, also you can use the same name for several configurations"
 "info" = "Info"
 "same" = "Same"
-"inboundData" = "Inbound's data"
-"copyToClipboard" = "Copy to clipboard"
+"inboundData" = "Inbound's Data"
+"copyToClipboard" = "Copy to Clipboard"
 "import" = "Import"
-"importInbound" = "Import an inbound"
+"importInbound" = "Import an Inbound"
 
 [pages.client]
 "add" = "Add Client"
 "edit" = "Edit Client"
 "submitAdd" = "Add Client"
-"submitEdit" = "Save changes"
+"submitEdit" = "Save Changes"
 "clientCount" = "Number of Clients"
 "bulk" = "Add Bulk"
 "method" = "Method"
@@ -194,28 +194,28 @@
 "last" = "Last"
 "prefix" = "Prefix"
 "postfix" = "Postfix"
-"delayedStart" = "Start after first use"
-"expireDays" = "Expire days"
-"days" = "day(s)"
-"renew" = "Auto renew"
+"delayedStart" = "Start After First Use"
+"expireDays" = "Expire Days"
+"days" = "Day(s)"
+"renew" = "Auto Renew"
 "renewDesc" = "Auto renew days after expiration. 0 = disable"
 
 [pages.inbounds.toasts]
 "obtain" = "Obtain"
 
 [pages.inbounds.stream.general]
-"requestHeader" = "Request header"
+"requestHeader" = "Request Header"
 "name" = "Name"
 "value" = "Value"
 
 [pages.inbounds.stream.tcp]
-"requestVersion" = "Request version"
-"requestMethod" = "Request method"
-"requestPath" = "Request path"
-"responseVersion" = "Response version"
-"responseStatus" = "Response status"
-"responseStatusDescription" = "Response status description"
-"responseHeader" = "Response header"
+"requestVersion" = "Request Version"
+"requestMethod" = "Request Method"
+"requestPath" = "Request Path"
+"responseVersion" = "Response Version"
+"responseStatus" = "Response Status"
+"responseStatusDescription" = "Response Status Description"
+"responseHeader" = "Response Header"
 
 [pages.inbounds.stream.quic]
 "encryption" = "Encryption"
@@ -224,8 +224,8 @@
 "title" = "Settings"
 "save" = "Save"
 "infoDesc" = "Every change made here needs to be saved. Please restart the panel to apply changes."
-"restartPanel" = "Restart Panel "
-"restartPanelDesc" = "Are you sure you want to restart the panel? Click OK to restart after 3 seconds. If you cannot access the panel after restarting, please view the panel log information on the server."
+"restartPanel" = "Restart Panel"
+"restartPanelDesc" = "Are you sure you want to restart the panel? click OK to restart after 3 seconds. If you cannot access the panel after restarting, please view the panel log info on the server."
 "actions" = "Actions"
 "resetDefaultConfig" = "Reset to Default Configuration"
 "panelSettings" = "Panel Settings"
@@ -234,68 +234,68 @@
 "panelListeningIP" = "Panel Listening IP"
 "panelListeningIPDesc" = "Leave blank by default to monitor all IPs."
 "panelListeningDomain" = "Panel Listening Domain"
-"panelListeningDomainDesc" = "Leave blank by default to monitor all domains and IPs"
+"panelListeningDomainDesc" = "Leave blank by default to monitor all domains and IPs."
 "panelPort" = "Panel Port"
-"panelPortDesc" = "The port used to display this panel"
-"publicKeyPath" = "Panel Certificate Public Key File Path"
+"panelPortDesc" = "Port number for serving the panel."
+"publicKeyPath" = "Panel Certificate Public Key Path"
 "publicKeyPathDesc" = "Fill in an absolute path starting with."
-"privateKeyPath" = "Panel Certificate Private Key File Path"
+"privateKeyPath" = "Panel Certificate Private Key Path"
 "privateKeyPathDesc" = "Fill in an absolute path starting with."
 "panelUrlPath" = "Panel URL Root Path"
 "panelUrlPathDesc" = "Must start with '/' and end with."
-"pageSize" = "Pagination size"
+"pageSize" = "Pagination Size"
 "pageSizeDesc" = "Define page size for inbounds table. Set 0 to disable"
-"remarkModel" = "Remark Model and Seperation charachter"
-"sampleRemark" = "Sample remark"
+"remarkModel" = "Remark Model and Seperation Charachter"
+"sampleRemark" = "Sample Remark"
 "oldUsername" = "Current Username"
 "currentPassword" = "Current Password"
 "newUsername" = "New Username"
 "newPassword" = "New Password"
-"telegramBotEnable" = "Enable Telegram bot"
-"telegramBotEnableDesc" = "Connect to the features of this panel through the Telegram bot"
+"telegramBotEnable" = "Enable Telegram Bot"
+"telegramBotEnableDesc" = "Connect to the features of this panel through the Telegram bot."
 "telegramToken" = "Telegram Token"
-"telegramTokenDesc" = "You must get the token from the manager of Telegram bots @botfather"
+"telegramTokenDesc" = "The token you have got from @BotFather."
 "telegramChatId" = "Telegram Admin Chat IDs"
-"telegramChatIdDesc" = "Multiple Chat IDs separated by comma. use @userinfobot or use '/id' command in bot to get your Chat IDs."
+"telegramChatIdDesc" = "Multiple chat IDs separated by comma. use @userinfobot or use '/id' command in bot to get your Chat IDs."
 "telegramNotifyTime" = "Telegram bot notification time"
-"telegramNotifyTimeDesc" = "Use Crontab timing format."
+"telegramNotifyTimeDesc" = "Use crontab timing format."
 "tgNotifyBackup" = "Database Backup"
 "tgNotifyBackupDesc" = "Include database backup file with report notification."
 "tgNotifyLogin" = "Login Notification"
 "tgNotifyLoginDesc" = "Displays the username, IP address, and time when someone tries to log into your panel."
-"sessionMaxAge" = "Session maximum age"
-"sessionMaxAgeDesc" = "The duration of a login session (unit: minute)"
-"expireTimeDiff" = "Expiration threshold for notification"
-"expireTimeDiffDesc" = "Get notified about account expiration before the threshold (unit: day)"
-"trafficDiff" = "Traffic threshold for notification"
-"trafficDiffDesc" = "Get notified about traffic exhaustion before reaching the threshold (unit: GB)"
-"tgNotifyCpu" = "CPU percentage alert threshold"
-"tgNotifyCpuDesc" = "Receive notification if CPU usage exceeds this threshold (unit: %)"
+"sessionMaxAge" = "Session Duration"
+"sessionMaxAgeDesc" = "The duration of a login session. (unit: minute)"
+"expireTimeDiff" = "Client Expiration Threshold Notification"
+"expireTimeDiffDesc" = "Get notified about client expiration before the threshold. (unit: day)"
+"trafficDiff" = "Traffic Limit Threshold Notification"
+"trafficDiffDesc" = "Get notified about traffic exhaustion before reaching the threshold. (unit: GB)"
+"tgNotifyCpu" = "CPU Load Threshold Notification"
+"tgNotifyCpuDesc" = "Get notified if CPU usage exceeds this threshold. (unit: %)"
 "timeZone" = "Time zone"
 "timeZoneDesc" = "Scheduled tasks run according to the time in this time zone."
 "subSettings" = "Subscription"
-"subEnable" = "Enable service"
-"subEnableDesc" = "Subscription feature with separate configuration"
+"subEnable" = "Enable Service"
+"subEnableDesc" = "Subscription feature with separate configuration."
 "subListen" = "Listening IP"
-"subListenDesc" = "Leave blank by default to monitor all IPs"
+"subListenDesc" = "Leave blank by default to monitor all IPs."
 "subPort" = "Subscription Port"
-"subPortDesc" = "Port number for serving the subscription service must be unused in server"
-"subCertPath" = "Subscription Certificate Public Key File Path"
+"subPortDesc" = "Port number for serving the subscription service. Must be unused in server."
+"subCertPath" = "Subscription Certificate Public Key Path"
 "subCertPathDesc" = "Fill in an absolute path starting with '/'"
-"subKeyPath" = "Subscription Certificate Private Key File Path"
+"subKeyPath" = "Subscription Certificate Private Key Path"
 "subKeyPathDesc" = "Fill in an absolute path starting with '/'"
 "subPath" = "Subscription URL Root Path"
 "subPathDesc" = "Must start with '/' and end with '/'"
 "subDomain" = "Listening Domain"
-"subDomainDesc" = "Leave blank by default to monitor all domains and IPs"
+"subDomainDesc" = "Leave blank by default to monitor all domains and IPs."
 "subUpdates" = "Subscription update intervals"
-"subUpdatesDesc" = "Interval hours between updates in client application"
-"subEncrypt" = "Encrypt configs"
-"subEncryptDesc" = "Encrypt the returned configs in subscription"
-"subShowInfo" = "Show usage info"
-"subShowInfoDesc" = "Show remained traffic and date after config name"
+"subUpdatesDesc" = "Interval hours between updates in client application."
+"subEncrypt" = "Encode Configs"
+"subEncryptDesc" = "Encode the returned configs in subscription."
+"subShowInfo" = "Show Usage Info"
+"subShowInfoDesc" = "Show remained traffic and date after config name."
 "subURI" = "Reverse Proxy URI"
-"subURIDesc" = "Change base URI of subscription URL for using on behind of proxies"
+"subURIDesc" = "Change base URI of subscription URL for using on behind of proxies."
 
 [pages.xray]
 "title" = "Xray Settings"
@@ -315,71 +315,75 @@
 "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 Protocol"
+"TorrentDesc" = "Change the configuration template to avoid using BitTorrent protocol."
+"PrivateIp" = "Ban Private IPs 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 IPs"
+"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 IPs"
+"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 IPs"
+"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."
+"VNIp" = "Disable Connection to Vietnam IPs"
+"VNIpDesc" = "Change the configuration template to avoid connecting to Vietnam IP ranges."
+"VNDomain" = "Disable Connection to Vietnam Domains"
+"VNDomainDesc" = "Change the configuration template to avoid connecting to Vietnam domains."
+"DirectIRIp" = "Direct Connection to Iran IPs"
+"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 IPs"
+"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 IPs"
+"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."
+"DirectVNIp" = "Direct Connection to Vietnam IPs"
+"DirectVNIpDesc" = "Change the configuration template for direct connecting to Vietnam IP ranges."
+"DirectVNDomain" = "Direct Connection to Vietnam Domains"
+"DirectVNDomainDesc" = "Change the configuration template for direct connecting to Vietnam 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"
@@ -396,12 +400,12 @@
 "useComma" = "Comma separated items"
 
 [pages.xray.outbound]
-"addOutbound" = "Add outbound"
-"addReverse" = "Add reverse"
-"editOutbound" = "Edit outbound"
-"editReverse" = "Edit reverse"
+"addOutbound" = "Add Outbound"
+"addReverse" = "Add Reverse"
+"editOutbound" = "Edit Outbound"
+"editReverse" = "Edit Reverse"
 "tag" = "Tag"
-"tagDesc" = "Unique tag"
+"tagDesc" = "Unique Tag"
 "address" = "Address"
 "reverse" = "Reverse"
 "domain" = "Domain"
@@ -419,11 +423,11 @@
 "secretTokenDesc" = "Please copy and securely store this token in a safe place. This token is required for login and cannot be recovered from the x-ui command tool."
 
 [pages.settings.toasts]
-"modifySettings" = "Modify Settings "
-"getSettings" = "Get Settings "
-"modifyUser" = "Modify User "
+"modifySettings" = "Modify Settings"
+"getSettings" = "Get Settings"
+"modifyUser" = "Modify User"
 "originalUserPassIncorrect" = "Incorrect original username or password"
-"userPassMustBeNotEmpty" = "New username and new password cannot be empty"
+"userPassMustBeNotEmpty" = "New username and password cannot be empty"
 
 [tgbot]
 "keyboardClosed" = "❌ Custom keyboard closed!"
@@ -448,14 +452,14 @@
 "help" = "🤖 Welcome to this bot! It's designed to offer you specific data from the server, and it allows you to make modifications as needed.\r\n\r\n"
 "start" = "👋 Hello <i>{{ .Firstname }}</i>.\r\n"
 "welcome" = "🤖 Welcome to <b>{{ .Hostname }}</b> management bot.\r\n"
-"status" = "✅ Bot is ok!"
+"status" = "✅ Bot is OK!"
 "usage" = "❗ Please provide a text to search!"
 "getID" = "🆔 Your ID: <code>{{ .ID }}</code>"
 "helpAdminCommands" = "Search for a client email:\r\n<code>/usage [Email]</code>\r\n \r\nSearch for inbounds (with client stats):\r\n<code>/inbound [Remark]</code>"
 "helpClientCommands" = "To search for statistics, just use the following command:\r\n \r\n<code>/usage [UUID|Password]</code>\r\n \r\nUse UUID for vmess/vless and Password for Trojan."
 
 [tgbot.messages]
-"cpuThreshold" = "🔴 The CPU usage {{ .Percent }}% is more than threshold {{ .Threshold }}%"
+"cpuThreshold" = "🔴 CPU Load {{ .Percent }}% is more than threshold {{ .Threshold }}%"
 "selectUserFailed" = "❌ Error in user selection!"
 "userSaved" = "✅ Telegram User saved."
 "loginSuccess" = "✅ Successfully logged-in to the panel.\r\n"
@@ -470,9 +474,9 @@
 "ips" = "🔢 IPs: \r\n{{ .IPs }}\r\n"
 "serverUpTime" = "⏳ Server Uptime: {{ .UpTime }} {{ .Unit }}\r\n"
 "serverLoad" = "📈 Server Load: {{ .Load1 }}, {{ .Load2 }}, {{ .Load3 }}\r\n"
-"serverMemory" = "📋 Server Memory: {{ .Current }}/{{ .Total }}\r\n"
-"tcpCount" = "🔹 TcpCount: {{ .Count }}\r\n"
-"udpCount" = "🔸 UdpCount: {{ .Count }}\r\n"
+"serverMemory" = "📋 Server RAM: {{ .Current }}/{{ .Total }}\r\n"
+"tcpCount" = "🔹 TCP: {{ .Count }}\r\n"
+"udpCount" = "🔸 UDP: {{ .Count }}\r\n"
 "traffic" = "🚦 Traffic: {{ .Total }} (↑{{ .Upload }},↓{{ .Download }})\r\n"
 "xrayStatus" = "ℹ️ Xray Status: {{ .State }}\r\n"
 "username" = "👤 Username: {{ .Username }}\r\n"
@@ -491,7 +495,7 @@
 "exhaustedMsg" = "🚨 Exhausted {{ .Type }}:\r\n"
 "exhaustedCount" = "🚨 Exhausted {{ .Type }} count:\r\n"
 "disabled" = "🛑 Disabled: {{ .Disabled }}\r\n"
-"depleteSoon" = "🔜 Deplete soon: {{ .Deplete }}\r\n \r\n"
+"depleteSoon" = "🔜 Deplete Soon: {{ .Deplete }}\r\n \r\n"
 "backupTime" = "🗄 Backup Time: {{ .Time }}\r\n"
 "refreshedOn" = "\r\n📋🔄 Refreshed On: {{ .Time }}\r\n \r\n"
 

web/translation/translate.es_ES.toml

@@ -315,71 +315,75 @@
 "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."
+"VNIp" = "Deshabilitar la conexión a las IP de Vietnam"
+"VNIpDesc" = "Cambie la plantilla de configuración para evitar conectarse a rangos de IP de Vietnam."
+"VNDomain" = "Deshabilitar la conexión a dominios de Vietnam"
+"VNDomainDesc" = "Cambie la plantilla de configuración para evitar conectarse a dominios de Vietnam."
+"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."
+"DirectVNIp" = "Conexión directa a IP de Vietnam"
+"DirectVNIpDesc" = "Cambie la plantilla de configuración para la conexión directa a rangos de IP de Vietnam."
+"DirectVNDomain" = "Conexión directa a dominios de Vietnam"
+"DirectVNDomainDesc" = "Cambie la plantilla de configuración para la conexión directa a dominios de Vietnam."
+"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

@@ -59,7 +59,7 @@
 "settings" = "تنظیمات پنل"
 "xray" = "الگوی ایکس‌ری"
 "logout" = "خروج"
-"link" = "دیگر"
+"link" = "مدیریت"
 
 [pages.login]
 "title" = "ورود به سیستم"
@@ -315,71 +315,75 @@
 "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" = "الگوی تنظیمات را برای فیلتر کردن اتصال دامنه های روسیه تغییر میدهد"
+"VNIp" = "جلوگیری از اتصال آیپی های ویتنام"
+"VNIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های ویتنام تغییر میدهد"
+"VNDomain" = "جلوگیری از اتصال دامنه های ویتنام"
+"VNDomainDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال دامنه های ویتنام تغییر میدهد"
+"DirectIRIp" = "ارتباط مستقیم به آیپی های ایران"
+"DirectIRIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های ایران تغییر میدهد"
+"DirectIRDomain" = "ارتباط مستقیم به دامنه های ایران"
+"DirectIRDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های ایران تغییر میدهد"
+"DirectChinaIp" = "ارتباط مستقیم به آیپی های چین"
+"DirectChinaIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های چین تغییر میدهد"
+"DirectChinaDomain" = "ارتباط مستقیم به دامنه های چین"
+"DirectChinaDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های چین تغییر میدهد"
+"DirectRussiaIp" = "ارتباط مستقیم به آیپی های روسیه"
+"DirectRussiaIpDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به آیپی های روسیه تغییر میدهد"
+"DirectRussiaDomain" = "ارتباط مستقیم به دامنه های روسیه"
+"DirectRussiaDomainDesc" = "الگوی تنظیمات را برای ارتباط مستقیم به دامنه های روسیه تغییر میدهد"
+"DirectVNIp" = "اتصال مستقیم به ای پی های ویتنام"
+"DirectVNIpDesc" = "الگوی پیکربندی را برای اتصال مستقیم به محدوده آی پی های ویتنام تغییر میدهد"
+"DirectVNDomain" = "اتصال مستقیم به دامنه های ویتنام"
+"DirectVNDomainDesc" = "الگوی پیکربندی را برای اتصال مستقیم به دامنه های ویتنام تغییر میدهد"
+"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,9 +57,9 @@
 "dashboard" = "Статус системы"
 "inbounds" = "Подключения"
 "settings" = "Настройки панели"
-"xray" = "Xray Настройки"
+"xray" = "Настройки Xray"
 "logout" = "Выход"
-"link" = "Прочее"
+"link" = "менеджмент"
 
 [pages.login]
 "title" = "Логин"
@@ -78,7 +78,7 @@
 "hard" = "Жесткий диск"
 "xrayStatus" = "Статус"
 "stopXray" = "Остановить Xray"
-"restartXray" = "Рестарт Xray"
+"restartXray" = "Перезапустить Xray"
 "xraySwitch" = "Переключить версию"
 "xraySwitchClick" = "Выберите желаемую версию"
 "xraySwitchClickDesk" = "Выбирайте внимательно, так как старые версии могут быть несовместимы с текущими конфигурациями"
@@ -268,7 +268,7 @@
 "expireTimeDiff" = "Порог истечения срока сессии для уведомления"
 "expireTimeDiffDesc" = "Получение уведомления об истечении срока действия сессии до достижения порогового значения (значение: день)"
 "trafficDiff" = "Порог трафика для уведомления"
-"trafficDiffDesc" = "Получение уведомления об исчерпании трафика до достижения порога (значение: Гб)"
+"trafficDiffDesc" = "Получение уведомления об исчерпании трафика до достижения порога (значение: ГБ)"
 "tgNotifyCpu" = "Порог нагрузки на ЦП для уведомления"
 "tgNotifyCpuDesc" = "Получение уведомления, если нагрузка на ЦП превышает этот порог (значение: %)"
 "timeZone" = "Часовой пояс"
@@ -298,9 +298,9 @@
 "subURIDesc" = "Изменить базовый URI URL-адреса подписки для использования за прокси-серверами"
 
 [pages.xray]
-"title" = "Xray Настройки"
+"title" = "Настройки Xray"
 "save" = "Сохранить настройки"
-"restart" = "Перезапустить рентген"
+"restart" = "Перезапустить Xray"
 "basicTemplate" = "Базовый шаблон"
 "advancedTemplate" = "Расширенный шаблон"
 "generalConfigs" = "Основные настройки"
@@ -315,71 +315,75 @@
 "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" = "Изменение конфигурации, чтобы заблокировать подключения к доменам России"
+"VNIp" = "Отключить подключение к IP-адресам Вьетнама"
+"VNIpDesc" = "Измените шаблон конфигурации, чтобы избежать подключения к диапазонам IP-адресов Вьетнама"
+"VNDomain" = "Отключить подключение к доменам Вьетнама"
+"VNDomainDesc" = "Измените шаблон конфигурации, чтобы избежать подключения к доменам Вьетнама."
+"DirectIRIp" = "Прямое подключения к диапазонам IP-адресов Ирана"
+"DirectIRIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов Ирана"
+"DirectIRDomain" = "Прямое подключение к доменам Ирана"
+"DirectIRDomainDesc" = "Изменение шаблон конфигурации для прямого подключения к доменам Ирана"
+"DirectChinaIp" = "Прямое подключение к диапазонам IP-адресов Китая"
+"DirectChinaIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов Китая"
+"DirectChinaDomain" = "Прямое подключение к доменам Китая"
+"DirectChinaDomainDesc" = "Изменение шаблона конфигурации для прямого подключения к доменам Китая"
+"DirectRussiaIp" = "Прямое подключение к диапазонам IP-адресов России"
+"DirectRussiaIpDesc" = "Изменение шаблона конфигурации для прямого подключения к диапазонам IP-адресов России"
+"DirectRussiaDomain" = "Прямое подключение к доменам России"
+"DirectRussiaDomainDesc" = "Изменение шаблона конфигурации для прямого подключения к доменам России"
+"DirectVNIp" = "Прямое подключение к IP-адресам Вьетнама"
+"DirectVNIpDesc" = "Измените шаблон конфигурации для прямого подключения к диапазонам IP-адресов Вьетнама"
+"DirectVNDomain" = "Прямое подключение к доменам Вьетнама"
+"DirectVNDomainDesc" = "Измените шаблон конфигурации для прямого подключения к доменам Вьетнама"
+"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 +393,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ệ"
 
@@ -59,7 +59,7 @@
 "settings" = "Cài đặt bảng điều khiển"
 "logout" = "Đăng xuất"
 "xray" = "Xray Cài đặt"
-"link" = "Khác"
+"link" = "sự quản lý"
 
 [pages.login]
 "title" = "Đăng nhập"
@@ -315,71 +315,75 @@
 "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."
+"VNIp" = "Vô hiệu hóa kết nối đến dải IP của Việt Nam"
+"VNIpDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến dải IP của Việt Nam."
+"VNDomain" = "Vô hiệu hóa kết nối đến tên miền của Việt Nam"
+"VNDomainDesc" = "Thay đổi mẫu cấu hình để tránh kết nối đến các tên miền của Việt Nam."
+"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."
+"DirectVNIp" = "Kết nối trực tiếp đến dải IP của Việt Nam"
+"DirectVNIpDesc" = "Thay đổi mẫu cấu hình cho kết nối trực tiếp đến dải IP của Việt Nam"
+"DirectVNDomain" = "Kết nối trực tiếp đến tên miền của Việt Nam"
+"DirectVNDomainDesc" = "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 Việt Nam."
+"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 +393,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 +443,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 +507,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 +520,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 +540,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

@@ -59,7 +59,7 @@
 "settings" = "面板设置"
 "xray" = "Xray 设置"
 "logout" = "退出登录"
-"link" = "其他"
+"link" = "管理"
 
 [pages.login]
 "title" = "登录"
@@ -315,74 +315,78 @@
 "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" = "更改配置模板避免连接俄罗斯域"
+"VNIp" = "禁用与越南 IP 的连接"
+"VNIpDesc" = "更改配置模板以避免连接到越南 IP 范围"
+"VNDomain" = "禁用与越南域的连接"
+"VNDomainDesc" = "更改配置模板以避免连接到越南域"
+"DirectIRIp" = "直接连接到伊朗 IP 范围"
+"DirectIRIpDesc" = "更改直接连接到伊朗 IP 范围的配置模板"
+"DirectIRDomain" = "直接连接到伊朗域"
+"DirectIRDomainDesc" = "更改直接连接到伊朗域的配置模板"
+"DirectChinaIp" = "直连中国IP范围"
+"DirectChinaIpDesc" = "更改直连中国 IP 范围的配置模板"
+"DirectChinaDomain" = "直连中国域名"
+"DirectChinaDomainDesc" = "修改中国域名直连配置模板"
+"DirectRussiaIp" = "直接连接到俄罗斯 IP 范围"
+"DirectRussiaIpDesc" = "更改直接连接到俄罗斯 IP 范围的配置模板"
+"DirectRussiaDomain" = "直接连接到俄罗斯域"
+"DirectRussiaDomainDesc" = "更改直接连接到俄罗斯域的配置模板"
+"DirectVNIp" = "直接连接越南IP"
+"DirectVNIpDesc" = "更改直接连接到越南 IP 范围的配置模板"
+"DirectVNDomain" = "直接连接至越南域名"
+"DirectVNDomainDesc" = "更改直连越南域的配置模板。"
+"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 +407,7 @@
 "tag" = "标签"
 "tagDesc" = "独特的标签"
 "address" = "地址"
-"rreverse" = "反转"
+"reverse" = "反转"
 "domain" = "域名"
 "type" = "类型"
 "bridge" = "桥"

x-ui.sh

@@ -55,7 +55,11 @@ elif [[ "${release}" == "debian" ]]; then
         echo -e "${red} Please use Debian 10 or higher ${plain}\n" && exit 1
     fi
 elif [[ "${release}" == "arch" ]]; then
-    echo "OS is ArchLinux"
+    echo "Your OS is ArchLinux"
+elif [[ "${release}" == "manjaro" ]]; then
+    echo "Your OS is Manjaro"
+elif [[ "${release}" == "armbian" ]]; then
+    echo "Your OS is Armbian"
 fi
 
 
@@ -519,11 +523,13 @@ update_geo() {
 
     systemctl stop x-ui
     cd ${binFolder}
-    rm -f geoip.dat geosite.dat geoip_IR.dat geosite_IR.dat
+    rm -f geoip.dat geosite.dat geoip_IR.dat geosite_IR.dat geoip_VN.dat geosite_VN.dat
     wget -N https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geoip.dat
     wget -N https://github.com/Loyalsoldier/v2ray-rules-dat/releases/latest/download/geosite.dat
     wget -O geoip_IR.dat -N https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geoip.dat
     wget -O geosite_IR.dat -N https://github.com/chocolate4u/Iran-v2ray-rules/releases/latest/download/geosite.dat
+    wget -O geoip_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geoip.dat
+    wget -O geosite_VN.dat https://github.com/vuong2023/vn-v2ray-rules/releases/latest/download/geosite.dat
     systemctl start x-ui
     echo -e "${green}Geosite.dat + Geoip.dat + geoip_IR.dat + geosite_IR.dat have been updated successfully in bin folder '${binfolder}'!${plain}"
     before_show_menu
@@ -579,7 +585,7 @@ ssl_cert_issue() {
     fi
     # install socat second
     case "${release}" in
-        ubuntu|debian)
+        ubuntu|debian|armbian)
             apt update && apt install socat -y ;;
         centos)
             yum -y update && yum -y install socat ;;