Merge pull request #434 from hamid-gh98/main

[FIX] siderDrawer button functionality + [Update] redirect restart panel

DockerInit.sh

@@ -0,0 +1,22 @@
+#!/bin/sh
+if [ $1 == "amd64" ]; then
+    ARCH="64";
+    FNAME="amd64";
+elif [ $1 == "arm64" ]; then
+    ARCH="arm64-v8a"
+    FNAME="arm64";
+else
+    ARCH="64";
+    FNAME="amd64";
+fi
+mkdir -p build/bin
+cd build/bin
+wget "https://github.com/mhsanaei/xray-core/releases/latest/download/Xray-linux-${ARCH}.zip"
+unzip "Xray-linux-${ARCH}.zip"
+rm -f "Xray-linux-${ARCH}.zip" geoip.dat geosite.dat iran.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 "https://github.com/bootmortis/iran-hosted-domains/releases/latest/download/iran.dat"
+
+cd ../../

Dockerfile

@@ -1,69 +1,20 @@
-# Use the official Golang image as the base image
-FROM --platform=$BUILDPLATFORM golang:1.20 as builder
-ARG TARGETOS TARGETARCH
-# Set up the working directory
+#Build latest x-ui from source
+FROM --platform=$BUILDPLATFORM golang:1.20.4-alpine AS builder
 WORKDIR /app
-
-# Copy the Go modules and download the dependencies
-COPY go.mod go.sum ./
-RUN go mod download
-
-# Copy the source code
+ARG TARGETARCH 
+RUN apk --no-cache --update add build-base gcc wget unzip
 COPY . .
+RUN env CGO_ENABLED=1 go build -o build/x-ui main.go
+RUN ./DockerInit.sh "$TARGETARCH"
 
 
-RUN if [ "$TARGETARCH" = "arm64" ]; then apt update && apt install gcc-aarch64-linux-gnu -y; fi
-
-# Build the X-ui binary
-RUN if [ "$TARGETARCH" = "arm64" ]; then \
-       CGO_ENABLED=1 GOOS=linux GOARCH=arm64 CC=aarch64-linux-gnu-gcc go build -o xui-release -v main.go; \
-    elif [ "$TARGETARCH" = "amd64" ]; then \
-       CGO_ENABLED=1 GOOS=linux GOARCH=amd64 go build -o xui-release -v main.go; \
-    fi
-
-# Start a new stage using the base image
-FROM ubuntu:20.04
-
-# Set up the working directory
+#Build app image using latest x-ui
+FROM alpine
+ENV TZ=Asia/Tehran
 WORKDIR /app
 
-# Copy the X-ui binary and required files from the builder stage
-COPY --from=builder /app/xui-release /app/x-ui/xui-release
-COPY x-ui.service /app/x-ui/x-ui.service
-COPY x-ui.sh /app/x-ui/x-ui.sh
+RUN apk add ca-certificates tzdata
 
-# Set up the runtime environment
-RUN apt-get update && apt-get install -y \
-    wget \
-    unzip \
-    tzdata \
-    ca-certificates \
- && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /app/x-ui/bin
-
-# Download and set up the required files
-RUN arch=$(uname -m) && \
-    if [ "$arch" = "aarch64" ]; then \
-        wget https://github.com/mhsanaei/xray-core/releases/latest/download/Xray-linux-arm64-v8a.zip \
-        && unzip Xray-linux-arm64-v8a.zip \
-        && rm -f Xray-linux-arm64-v8a.zip geoip.dat geosite.dat iran.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 https://github.com/bootmortis/iran-hosted-domains/releases/latest/download/iran.dat \
-        && mv xray xray-linux-arm64; \
-    elif [ "$arch" = "x86_64" ]; then \
-        wget https://github.com/mhsanaei/Xray-core/releases/latest/download/Xray-linux-64.zip \
-        && unzip Xray-linux-64.zip \
-        && rm -f Xray-linux-64.zip geoip.dat geosite.dat iran.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 https://github.com/bootmortis/iran-hosted-domains/releases/latest/download/iran.dat \
-        && mv xray xray-linux-amd64; \
-    fi
-
-WORKDIR /app/x-ui
-RUN chmod +x /app/x-ui/x-ui.sh
-
-# Set the entrypoint
-ENTRYPOINT ["/app/x-ui/xui-release"]
+COPY --from=builder  /app/build/ /app/
+VOLUME [ "/etc/x-ui" ]
+ENTRYPOINT [ "/app/x-ui" ]

README.md

@@ -1,4 +1,5 @@
-# 3x-ui 
+# 3x-ui
+
 > **Disclaimer: This project is only for personal learning and communication, please do not use it for illegal purposes, please do not use it in a production environment**
 
 [![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
@@ -7,12 +8,13 @@
 [![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](#)
 [![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)
 
-3x-ui panel supporting multi-protocol, **Multi-lang (English,Farsi,Chinese)**
+3x-ui panel supporting multi-protocol, **Multi-lang (English,Farsi,Chinese,Russian)**
 
 **If you think this project is helpful to you, you may wish to give a** :star2:
 
 **Buy Me a Coffee :**
- - Tron USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
+
+- Tron USDT (TRC20): `TXncxkvhkDWGts487Pjqq1qT9JmwRUz8CC`
 
 # Install & Upgrade
 
@@ -22,10 +24,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 `v1.4.0`:
+To install your desired version you can add the version to the end of install command. Example for ver `v1.4.6`:
 
 ```
-bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v1.4.0
+bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v1.4.6
 ```
 
 # SSL
@@ -47,12 +49,12 @@ or you can use x-ui menu then number '16' (Apply for an SSL Certificate)
 
 Before you set ssl on settings
 
-- http://ip:2053/xui
-- http://domain:2053/xui
+- http://ip:2053/panel
+- http://domain:2053/panel
 
 After you set ssl on settings
 
-- https://yourdomain:2053/xui
+- https://yourdomain:2053/panel
 
 # Environment Variables
 
@@ -69,6 +71,31 @@ Example:
 XUI_BIN_FOLDER="bin" XUI_DB_FOLDER="/etc/x-ui" go build main.go
 ```
 
+# Install with Docker
+
+1. Install Docker:
+   ```sh
+   bash <(curl -sSL https://get.docker.com)
+   ```
+2. Run 3x-ui:
+
+   ```sh
+   docker compose up -d
+   ```
+
+   OR
+
+   ```sh
+   docker run -itd \
+      -e XRAY_VMESS_AEAD_FORCED=false \
+      -v $PWD/db/:/etc/x-ui/ \
+      -v $PWD/cert/:/root/cert/ \
+      --network=host \
+      --restart=unless-stopped \
+      --name 3x-ui \
+      ghcr.io/mhsanaei/3x-ui:latest
+   ```
+
 # Xray Configurations:
 
 **copy and paste to xray Configuration :** (you don't need to do this if you have a fresh install)
@@ -160,7 +187,7 @@ Reference syntax:
 ## API routes
 
 - `/login` with `PUSH` user data: `{username: '', password: ''}` for login
-- `/xui/API/inbounds` base for following actions:
+- `/panel/api/inbounds` base for following actions:
 
 | Method | Path                               | Action                                      |
 | :----: | ---------------------------------- | ------------------------------------------- |
@@ -173,19 +200,19 @@ Reference syntax:
 | `POST` | `"/clientIps/:email"`              | Client Ip address                           |
 | `POST` | `"/clearClientIps/:email"`         | Clear Client Ip address                     |
 | `POST` | `"/addClient"`                     | Add Client to inbound                       |
-| `POST` | `"/:id/delClient/:clientId"`       | Delete Client by clientId*                  |
-| `POST` | `"/updateClient/:clientId"`        | Update Client by clientId*                  |
+| `POST` | `"/:id/delClient/:clientId"`       | Delete Client by clientId\*                 |
+| `POST` | `"/updateClient/:clientId"`        | Update Client by clientId\*                 |
 | `POST` | `"/:id/resetClientTraffic/:email"` | Reset Client's Traffic                      |
 | `POST` | `"/resetAllTraffics"`              | Reset traffics of all inbounds              |
 | `POST` | `"/resetAllClientTraffics/:id"`    | Reset traffics of all clients in an inbound |
 | `POST` | `"/delDepletedClients/:id"`        | Delete inbound depleted clients (-1: all)   |
 
-*- The field `clientId` should be filled by: 
+\*- The field `clientId` should be filled by:
+
 - `client.id` for VMESS and VLESS
 - `client.password` for TROJAN
 - `client.email` for Shadowsocks
 
-
 - [Postman Collection](https://gist.github.com/mehdikhody/9a862801a2e41f6b5fb6bbc7e1326044)
 
 # A Special Thanks To
@@ -205,6 +232,8 @@ Reference syntax:
 ![2](./media/2.png)
 ![3](./media/3.png)
 ![4](./media/4.png)
+![5](./media/5.png)
+![6](./media/6.png)
 
 ## Stargazers over time
 

config/version

@@ -1 +1 @@
-1.4.1
+1.4.6

docker-compose.yml

@@ -0,0 +1,16 @@
+---
+version: "3.9"
+
+services:
+  3x-ui:
+    image: ghcr.io/mhsanaei/3x-ui:latest
+    container_name: 3x-ui
+    hostname: yourhostname
+    volumes:
+      - $PWD/db/:/etc/x-ui/
+      - $PWD/cert/:/root/cert/
+    environment:
+      XRAY_VMESS_AEAD_FORCED: "false"
+    tty: true
+    network_mode: host
+    restart: unless-stopped

go.mod

@@ -19,7 +19,7 @@ require (
 	golang.org/x/text v0.9.0
 	google.golang.org/grpc v1.55.0
 	gorm.io/driver/sqlite v1.5.0
-	gorm.io/gorm v1.25.0
+	gorm.io/gorm v1.25.1
 )
 
 require (

go.sum

@@ -252,8 +252,8 @@ gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gorm.io/driver/sqlite v1.5.0 h1:zKYbzRCpBrT1bNijRnxLDJWPjVfImGEn0lSnUY5gZ+c=
 gorm.io/driver/sqlite v1.5.0/go.mod h1:kDMDfntV9u/vuMmz8APHtHF0b4nyBB7sfCieC6G8k8I=
 gorm.io/gorm v1.24.7-0.20230306060331-85eaf9eeda11/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
-gorm.io/gorm v1.25.0 h1:+KtYtb2roDz14EQe4bla8CbQlmb9dN3VejSai3lprfU=
-gorm.io/gorm v1.25.0/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
+gorm.io/gorm v1.25.1 h1:nsSALe5Pr+cM3V1qwwQ7rOkw+6UeLrX5O4v3llhHa64=
+gorm.io/gorm v1.25.1/go.mod h1:L4uxeKpfBml98NYqVqwAdmV1a2nBtAec/cf3fpucW/k=
 gvisor.dev/gvisor v0.0.0-20220901235040-6ca97ef2ce1c h1:m5lcgWnL3OElQNVyp3qcncItJ2c0sQlSGjYK2+nJTA4=
 lukechampine.com/blake3 v1.1.7 h1:GgRMhmdsuK8+ii6UZFDL8Nb+VyMwadAgcJyfYHxG6n0=
 rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=

install.sh

@@ -25,9 +25,9 @@ echo "The OS release is: $release"
 
 arch3xui() {
     case "$(uname -m)" in
-        x86_64 | x64 | amd64 ) echo 'amd64' ;;
-        armv8 | arm64 | aarch64 ) echo 'arm64' ;;
-        * ) echo -e "${green}Unsupported CPU architecture! ${plain}" && rm -f install.sh && exit 1 ;;
+    x86_64 | x64 | amd64) echo 'amd64' ;;
+    armv8 | arm64 | aarch64) echo 'arm64' ;;
+    *) echo -e "${green}Unsupported CPU architecture! ${plain}" && rm -f install.sh && exit 1 ;;
     esac
 }
 echo "arch: $(arch3xui)"
@@ -39,7 +39,7 @@ if [[ "${release}" == "centos" ]]; then
     if [[ ${os_version} -lt 8 ]]; then
         echo -e "${red} Please use CentOS 8 or higher ${plain}\n" && exit 1
     fi
-elif [[ "${release}" ==  "ubuntu" ]]; then
+elif [[ "${release}" == "ubuntu" ]]; then
     if [[ ${os_version} -lt 20 ]]; then
         echo -e "${red}please use Ubuntu 20 or higher version！${plain}\n" && exit 1
     fi
@@ -59,18 +59,17 @@ fi
 
 install_base() {
     case "${release}" in
-        centos|fedora)
-            yum install -y -q wget curl tar
-            ;;
-        *)
-            apt install -y -q wget curl tar
-            ;;
+    centos | fedora)
+        yum install -y -q wget curl tar
+        ;;
+    *)
+        apt install -y -q wget curl tar
+        ;;
     esac
 }
 
 #This function will be called when user installed x-ui out of sercurity
 config_after_install() {
-    /usr/local/x-ui/x-ui migrate
     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
     if [[ "${config_confirm}" == "y" || "${config_confirm}" == "Y" ]]; then
@@ -101,6 +100,7 @@ config_after_install() {
             echo -e "${red} this is your upgrade,will keep old settings,if you forgot your login info,you can type x-ui and then type 7 to check${plain}"
         fi
     fi
+    /usr/local/x-ui/x-ui migrate
 }
 
 install_x-ui() {

util/common/err.go

@@ -6,8 +6,6 @@ import (
 	"x-ui/logger"
 )
 
-var CtxDone = errors.New("context done")
-
 func NewErrorf(format string, a ...interface{}) error {
 	msg := fmt.Sprintf(format, a...)
 	return errors.New(msg)

util/common/stringUtil.go

@@ -1,9 +0,0 @@
-package common
-
-import "sort"
-
-func IsSubString(target string, str_array []string) bool {
-	sort.Strings(str_array)
-	index := sort.SearchStrings(str_array, target)
-	return index < len(str_array) && str_array[index] == target
-}

util/context.go

@@ -1,12 +0,0 @@
-package util
-
-import "context"
-
-func IsDone(ctx context.Context) bool {
-	select {
-	case <-ctx.Done():
-		return true
-	default:
-		return false
-	}
-}

util/json_util/json.go

@@ -6,7 +6,7 @@ import (
 
 type RawMessage []byte
 
-// MarshalJSON 自定义 json.RawMessage 默认行为
+// MarshalJSON: Customize json.RawMessage default behavior
 func (m RawMessage) MarshalJSON() ([]byte, error) {
 	if len(m) == 0 {
 		return []byte("null"), nil
@@ -14,7 +14,7 @@ func (m RawMessage) MarshalJSON() ([]byte, error) {
 	return m, nil
 }
 
-// UnmarshalJSON sets *m to a copy of data.
+// UnmarshalJSON: sets *m to a copy of data.
 func (m *RawMessage) UnmarshalJSON(data []byte) error {
 	if m == nil {
 		return errors.New("json.RawMessage: UnmarshalJSON on nil pointer")

web/assets/ant-design-vue@1.7.2/antd.min.css

@@ -629,7 +629,7 @@ to{transform:scaleY(0);transform-origin:0 0;opacity:0}
 .ant-input:-moz-placeholder-shown{text-overflow:ellipsis}
 .ant-input:-ms-input-placeholder{text-overflow:ellipsis}
 .ant-input:placeholder-shown{text-overflow:ellipsis}
-.ant-input:focus,.ant-input:hover{border-color:rgb(0, 150, 112) !important;border-right-width:1px!important}
+.ant-input:focus,.ant-input:hover{border-color:rgb(0, 150, 112) !important;border-right-width:1px!important;}
 .ant-input:focus{outline:0;box-shadow:rgba(0, 150, 112, 0.2) 0px 0px 0px 2px}
 .ant-input-disabled{color:rgba(0,0,0,.25);background-color:#f5f5f5;cursor:not-allowed;opacity:1}
 .ant-input-disabled:hover{border-color:#d9d9d9;border-right-width:1px!important}
@@ -992,7 +992,7 @@ to{transform:scale(0) translate(50%,-50%);opacity:0}
 .ant-menu-item>.ant-badge>a{color:rgba(0,0,0,.65)}
 .ant-menu-item>.ant-badge>a:hover{color:#1890ff}
 .ant-menu-item-divider{height:1px;overflow:hidden;line-height:0;background-color:#e8e8e8}
-.ant-menu-item-active,.ant-menu-item:hover,.ant-menu-submenu-active,.ant-menu-submenu-title:hover,.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open{color:#fff;background-image: linear-gradient(90deg,#99999980 0,#8888889e 100%);border-radius: 0.5rem}
+.ant-menu-item-active,.ant-menu-item:hover,.ant-menu-submenu-active,.ant-menu-submenu-title:hover,.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open{color:#2d2d2d;background-image: linear-gradient(90deg,#99999980 0,#8888889e 100%);border-radius: 0.5rem}
 .ant-menu-horizontal .ant-menu-item,.ant-menu-horizontal .ant-menu-submenu{margin-top:-1px}
 .ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu .ant-menu-submenu-title:hover{background-color:transparent}
 .ant-menu-item-selected,.ant-menu-item-selected>a,.ant-menu-item-selected>a:hover{color:#1890ff}
@@ -1236,18 +1236,18 @@ span.ant-radio+*{padding-right:8px;padding-left:8px}
 .ant-radio-button-wrapper:first-child{border-left:1px solid #d9d9d9;border-radius:4px 0 0 4px}
 .ant-radio-button-wrapper:last-child{border-radius:0 4px 4px 0}
 .ant-radio-button-wrapper:first-child:last-child{border-radius:4px}
-.ant-radio-button-wrapper:hover{position:relative;color:#1890ff}
+.ant-radio-button-wrapper:hover{position:relative;color:#009670}
 .ant-radio-button-wrapper:focus-within{outline:3px solid rgba(24,144,255,.06)}
 .ant-radio-button-wrapper .ant-radio-inner,.ant-radio-button-wrapper input[type=checkbox],.ant-radio-button-wrapper input[type=radio]{width:0;height:0;opacity:0;pointer-events:none}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){z-index:1;color:#1890ff;background:#fff;border-color:#1890ff;box-shadow:-1px 0 0 0 #1890ff}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):before{background-color:#1890ff!important;opacity:.1}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child{border-color:#1890ff;box-shadow:none!important}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#40a9ff;border-color:#40a9ff;box-shadow:-1px 0 0 0 #40a9ff}
-.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#096dd9;border-color:#096dd9;box-shadow:-1px 0 0 0 #096dd9}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){z-index:1;color:#009670;background:#fff;border-color:#009670;box-shadow:-1px 0 0 0 #009670}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):before{background-color:#009670!important;opacity:.1}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child{border-color:#009670;box-shadow:none!important}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#009670;border-color:#009670;box-shadow:-1px 0 0 0 #009670}
+.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#076e54;border-color:#076e54;box-shadow:-1px 0 0 0 #076e54}
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within{outline:3px solid rgba(24,144,255,.06)}
-.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){color:#fff;background:#1890ff;border-color:#1890ff}
-.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#fff;background:#40a9ff;border-color:#40a9ff}
-.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#fff;background:#096dd9;border-color:#096dd9}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled){color:#fff;background:#009670;border-color:#009670}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{color:#fff;background:#009670;border-color:#009670}
+.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active{color:#fff;background:#076e54;border-color:#076e54}
 .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within{outline:3px solid rgba(24,144,255,.06)}
 .ant-radio-button-wrapper-disabled{cursor:not-allowed}
 .ant-radio-button-wrapper-disabled,.ant-radio-button-wrapper-disabled:first-child,.ant-radio-button-wrapper-disabled:hover{color:rgba(0,0,0,.25);background-color:#f5f5f5;border-color:#d9d9d9}
@@ -1357,7 +1357,7 @@ to{transform:scale(1.6);opacity:0}
 .ant-tabs-vertical.ant-tabs-card.ant-tabs-right .ant-tabs-card-bar.ant-tabs-right-bar .ant-tabs-tab-active{margin-left:-1px;padding-left:18px}
 .ant-tabs .ant-tabs-card-bar.ant-tabs-bottom-bar .ant-tabs-tab{height:auto;border-top:0;border-bottom:1px solid #e8e8e8;border-radius:0 0 4px 4px}
 .ant-tabs .ant-tabs-card-bar.ant-tabs-bottom-bar .ant-tabs-tab-active{padding-top:1px;padding-bottom:0;color:#1890ff}
-.ant-tabs{box-sizing:border-box;margin:0;padding:0;color:rgba(0,0,0,.65);font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:"tnum";position:relative;overflow:hidden;zoom:1;border-radius:1.5rem;box-shadow:0 1px 7px -1px #0000005c;transition:all .3s;background-color: white}
+.ant-tabs{box-sizing:border-box;margin:0;padding:0;color:rgba(0,0,0,.65);font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;font-feature-settings:"tnum";position:relative;overflow:hidden;zoom:1;border-radius:1.5rem;/*box-shadow:0 1px 7px -1px #0000005c;*/transition:all .3s;background-color: white}
 .ant-tabs:hover{box-shadow:0 3px 12px -.8px #0000005c}
 .ant-tabs:after,.ant-tabs:before{display:table;content:""}
 .ant-tabs:after{clear:both}
@@ -2549,7 +2549,7 @@ to{transform:scale(1.6);opacity:0}
 .ant-input-disabled+.ant-calendar-picker-icon{cursor:not-allowed}
 .ant-calendar-picker-small .ant-calendar-picker-clear,.ant-calendar-picker-small .ant-calendar-picker-icon{right:8px}
 .ant-calendar{position:relative;width:280px;font-size:14px;line-height:1.5;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid #fff;border-radius:4px;outline:0;box-shadow:0 2px 8px rgba(0,0,0,.15)}
-.ant-calendar-input-wrap{height:34px;padding:6px 10px;border-bottom:1px solid #e8e8e8}
+.ant-calendar-input-wrap{height:34px;padding:6px 10px;border-bottom:1px solid rgb(153 153 153 / 25%)}
 .ant-calendar-input{width:100%;height:22px;color:rgba(0,0,0,.65);background:#fff;border:0;outline:0;cursor:auto}
 .ant-calendar-input::-moz-placeholder{color:#bfbfbf;opacity:1}
 .ant-calendar-input:-ms-input-placeholder{color:#bfbfbf}
@@ -2559,7 +2559,7 @@ to{transform:scale(1.6);opacity:0}
 .ant-calendar-input:placeholder-shown{text-overflow:ellipsis}
 .ant-calendar-week-number{width:286px}
 .ant-calendar-week-number-cell{text-align:center}
-.ant-calendar-header{height:40px;line-height:40px;text-align:center;border-bottom:1px solid #e8e8e8;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.ant-calendar-header{height:40px;line-height:40px;text-align:center;border-bottom:1px solid rgb(153 153 153 / 25%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .ant-calendar-header a:hover{color:#40a9ff}
 .ant-calendar-header .ant-calendar-century-select,.ant-calendar-header .ant-calendar-decade-select,.ant-calendar-header .ant-calendar-month-select,.ant-calendar-header .ant-calendar-year-select{display:inline-block;padding:0 2px;color:rgba(0,0,0,.85);font-weight:500;line-height:40px}
 .ant-calendar-header .ant-calendar-century-select-arrow,.ant-calendar-header .ant-calendar-decade-select-arrow,.ant-calendar-header .ant-calendar-month-select-arrow,.ant-calendar-header .ant-calendar-year-select-arrow{display:none}
@@ -2606,7 +2606,7 @@ to{transform:scale(1.6);opacity:0}
 .ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date:before{position:absolute;top:-1px;left:5px;width:24px;height:24px;border:1px solid rgba(0,0,0,.25);border-radius:2px;content:" "}
 .ant-calendar-disabled-cell-first-of-row .ant-calendar-date{border-top-left-radius:4px;border-bottom-left-radius:4px}
 .ant-calendar-disabled-cell-last-of-row .ant-calendar-date{border-top-right-radius:4px;border-bottom-right-radius:4px}
-.ant-calendar-footer{padding:0 12px;line-height:38px;border-top:1px solid #e8e8e8}
+.ant-calendar-footer{padding:0 12px;line-height:38px;border-top:1px solid rgb(153 153 153 / 25%)}
 .ant-calendar-footer:empty{border-top:0}
 .ant-calendar-footer-btn{display:block;text-align:center}
 .ant-calendar-footer-extra{text-align:left}
@@ -2980,7 +2980,7 @@ textarea.ant-time-picker-input{max-width:100%;height:auto;min-height:32px;line-h
 .ant-divider,.ant-divider-vertical{position:relative;top:-.06em;display:inline-block;width:1px;height:.9em;margin:0 8px;vertical-align:middle}
 .ant-divider-horizontal{display:block;clear:both;width:100%;min-width:100%;height:1px;margin:24px 0}
 .ant-divider-horizontal.ant-divider-with-text-center,.ant-divider-horizontal.ant-divider-with-text-left,.ant-divider-horizontal.ant-divider-with-text-right{display:table;margin:0 0;color:rgba(0,0,0,.85);font-weight:500;font-size:16px;white-space:nowrap;text-align:center;background:0 0}
-.ant-divider-horizontal.ant-divider-with-text-center:after,.ant-divider-horizontal.ant-divider-with-text-center:before,.ant-divider-horizontal.ant-divider-with-text-left:after,.ant-divider-horizontal.ant-divider-with-text-left:before,.ant-divider-horizontal.ant-divider-with-text-right:after,.ant-divider-horizontal.ant-divider-with-text-right:before{position:relative;top:50%;display:table-cell;width:50%;border-top:1px solid rgb(0 150 112);transform:translateY(50%);content:""}
+.ant-divider-horizontal.ant-divider-with-text-center:after,.ant-divider-horizontal.ant-divider-with-text-center:before,.ant-divider-horizontal.ant-divider-with-text-left:after,.ant-divider-horizontal.ant-divider-with-text-left:before,.ant-divider-horizontal.ant-divider-with-text-right:after,.ant-divider-horizontal.ant-divider-with-text-right:before{position:relative;top:50%;display:table-cell;width:50%;border-top:1px solid rgb(0 150 112 / 50%);transform:translateY(50%);content:""}
 .ant-divider-horizontal.ant-divider-with-text-left .ant-divider-inner-text,.ant-divider-horizontal.ant-divider-with-text-right .ant-divider-inner-text{display:inline-block;padding:0 10px}
 .ant-divider-horizontal.ant-divider-with-text-left:before{top:50%;width:5%}
 .ant-divider-horizontal.ant-divider-with-text-left:after,.ant-divider-horizontal.ant-divider-with-text-right:before{top:50%;width:95%}

web/assets/css/custom.css

@@ -1,5 +1,23 @@
-#app {
+html,
+body {
     height: 100vh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+#app {
+    height: 100%;
+    min-height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
 }
 
 .ant-space {
@@ -10,6 +28,12 @@
     display: none;
 }
 
+@media (max-width: 768px) {
+    .ant-layout-sider {
+        display: none;
+    }
+}
+
 .ant-card {
     border-radius: 1.5rem;
 }
@@ -180,13 +204,35 @@
 
 .ant-card-dark:hover {
     border-color: #e8e8e8;
-    box-shadow: 0 1px 10px -1px rgb(154 175 238);
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 70%);
 }
 
-.ant-card-bordered:hover {
-    /*box-shadow: 0 3px 12px -0.8px #0000005c;*/
+.ant-setting-textarea {
+    margin-top: 1.5rem;
+    min-height: 300px !important;
+    /*max-height: 800px !important;*/
 }
 
+.ant-card-dark-box-nohover{
+    padding: 0 20px 20px !important;
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important;
+}
+.ant-card-dark-box-nohover:hover{
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important;
+    /*background-color: rgb(36 44 58 / 50%);*/
+}
+
+.ant-card-dark-securitybox-nohover{
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important;
+}
+.ant-card-dark-securitybox-nohover:hover{
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 0%) !important;
+}
+
+/* .ant-card-bordered:hover {
+    box-shadow: 0 3px 12px -0.8px #0000005c;
+} */
+
 .ant-card-dark .ant-table-thead th {
     color: hsla(0,0%,100%,.65);
     background-color: #161b22;
@@ -203,6 +249,7 @@
 .ant-card-dark .ant-input-group-addon {
     color: hsla(0,0%,100%,.65);
     background-color: #262f3d;
+    border: 1px solid rgb(149 149 149 / 30%);
 }
 
 .ant-card-dark .ant-list-item-meta-title,
@@ -228,12 +275,15 @@
 
 .ant-card-dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
 .ant-card-dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
-.ant-card-dark .ant-calendar-date:hover,
-.ant-card-dark .ant-select-dropdown-menu-item-active,
-.ant-card-dark li.ant-calendar-time-picker-select-option-selected {
+.ant-card-dark .ant-select-dropdown-menu-item-active {
     background-color: #11314d;
 }
 
+.ant-card-dark .ant-calendar-date:hover,
+.ant-card-dark li.ant-calendar-time-picker-select-option-selected {
+    background-color: rgb(4, 119, 90);
+}
+
 .ant-card-dark tbody .ant-table-expanded-row,
 .ant-card-dark .ant-calendar-time-picker-inner {
     color: hsla(0,0%,100%,.65);
@@ -256,6 +306,15 @@
     border: 1px solid rgb(0 150 112 / 0%);
 }
 
+.ant-layout:not(.login) .ant-input:focus,
+.ant-layout:not(.login) .ant-input:hover,
+.ant-layout:not(.login) .ant-input-number:focus,
+.ant-layout:not(.login) .ant-input-number:hover,
+.ant-layout:not(.login) .ant-calendar-input:focus,
+.ant-layout:not(.login) .ant-calendar-input:hover {
+    background-color: rgba(0, 149, 111, 0.1);
+}
+
 .ant-card-dark .ant-select-disabled .ant-select-selection {
     border: 1px solid rgba(255, 255, 255, 0.2);
     background-color: #242c3a;
@@ -374,7 +433,7 @@
 }
 
 .ant-card-dark .ant-radio-button-wrapper:hover {
-    color: #177ddc;
+    color: #009670;
 }
 
 .ant-card-dark .ant-btn-primary {

web/assets/js/axios-init.js

@@ -2,7 +2,7 @@ axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 axios.interceptors.request.use(
-    config => {
+    (config) => {
         if (config.data instanceof FormData) {
             config.headers['Content-Type'] = 'multipart/form-data';
         } else {
@@ -12,5 +12,5 @@ axios.interceptors.request.use(
         }
         return config;
     },
-    error => Promise.reject(error)
+    (error) => Promise.reject(error),
 );

web/assets/js/langs.js

@@ -1,36 +1,41 @@
-supportLangs = [
+const supportLangs = [
     {
-       name : "English",
-       value : "en-US",
-       icon : "🇺🇸"
+        name: 'English',
+        value: 'en-US',
+        icon: '🇺🇸',
     },
     {
-        name : "Farsi",
-        value : "fa_IR",
-        icon : "🇮🇷"
+        name: 'فارسی',
+        value: 'fa_IR',
+        icon: '🇮🇷',
     },
     {
-        name : "汉语",
-        value : "zh-Hans",
-        icon : "🇨🇳"
+        name: '汉语',
+        value: 'zh-Hans',
+        icon: '🇨🇳',
     },
-]
+    {
+        name: 'Русский',
+        value: 'ru_RU',
+        icon: '🇷🇺',
+    },
+];
 
-function getLang(){
-    let lang = getCookie('lang')
+function getLang() {
+    let lang = getCookie('lang');
 
-    if (! lang){
-        if (window.navigator){
+    if (!lang) {
+        if (window.navigator) {
             lang = window.navigator.language || window.navigator.userLanguage;
 
-            if (isSupportLang(lang)){
-                setCookie('lang' , lang , 150)
-            }else{
-                setCookie('lang' , 'en-US' , 150)
+            if (isSupportLang(lang)) {
+                setCookie('lang', lang, 150);
+            } else {
+                setCookie('lang', 'en-US', 150);
                 window.location.reload();
             }
-        }else{
-            setCookie('lang' , 'en-US' , 150)
+        } else {
+            setCookie('lang', 'en-US', 150);
             window.location.reload();
         }
     }
@@ -38,47 +43,21 @@ function getLang(){
     return lang;
 }
 
-function setLang(lang){
-
-    if (!isSupportLang(lang)){
+function setLang(lang) {
+    if (!isSupportLang(lang)) {
         lang = 'en-US';
     }
 
-    setCookie('lang' , lang , 150)
+    setCookie('lang', lang, 150);
     window.location.reload();
 }
 
-function isSupportLang(lang){
-    for (l of supportLangs){
-        if (l.value === lang){
+function isSupportLang(lang) {
+    for (l of supportLangs) {
+        if (l.value === lang) {
             return true;
         }
     }
 
     return false;
 }
-
-
-
-function getCookie(cname) {
-    let name = cname + "=";
-    let decodedCookie = decodeURIComponent(document.cookie);
-    let ca = decodedCookie.split(';');
-    for(let i = 0; i <ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) == ' ') {
-            c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
-        }
-    }
-    return "";
-}
-
-function setCookie(cname, cvalue, exdays) {
-    const d = new Date();
-    d.setTime(d.getTime() + (exdays*24*60*60*1000));
-    let expires = "expires="+ d.toUTCString();
-    document.cookie =  cname + "=" + cvalue + ";" + expires + ";path=/";
-}

web/assets/js/model/xray.js

@@ -1487,7 +1487,7 @@ class Inbound extends XrayCommonClass {
             params.set("flow", this.settings.trojans[clientIndex].flow);
         }
 
-        const link = `trojan://${settings.trojans[clientIndex].password}@${address}:${this.port}#${encodeURIComponent(remark)}`;
+        const link = `trojan://${settings.trojans[clientIndex].password}@${address}:${this.port}`;
         const url = new URL(link);
         for (const [key, value] of params) {
             url.searchParams.set(key, value)

web/assets/js/util/common.js

@@ -56,14 +56,37 @@ function toFixed(num, n) {
     return Math.round(num * n) / n;
 }
 
-function debounce (fn, delay) {
-    var timeoutID = null
+function debounce(fn, delay) {
+    var timeoutID = null;
     return function () {
-      clearTimeout(timeoutID)
-      var args = arguments
-      var that = this
-      timeoutID = setTimeout(function () {
-        fn.apply(that, args)
-      }, delay)
+        clearTimeout(timeoutID);
+        var args = arguments;
+        var that = this;
+        timeoutID = setTimeout(function () {
+            fn.apply(that, args);
+        }, delay);
+    };
+}
+
+function getCookie(cname) {
+    let name = cname + '=';
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
     }
-  }
+    return '';
+}
+
+function setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
+    let expires = 'expires=' + d.toUTCString();
+    document.cookie = cname + '=' + cvalue + ';' + expires + ';path=/';
+}

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

@@ -1,67 +1,67 @@
-const oneMinute = 1000 * 60; // 一分钟的毫秒数
-const oneHour = oneMinute * 60; // 一小时的毫秒数
-const oneDay = oneHour * 24; // 一天的毫秒数
-const oneWeek = oneDay * 7; // 一星期的毫秒数
-const oneMonth = oneDay * 30; // 一个月的毫秒数
+const oneMinute = 1000 * 60;  // MilliseConds in a Minute
+const oneHour = oneMinute * 60;  // The milliseconds of one hour
+const oneDay = oneHour * 24; // The Number of MilliseConds A Day
+const oneWeek = oneDay * 7; // The milliseconds per week
+const oneMonth = oneDay * 30; // The milliseconds of a month
 
 /**
- * 按天数减少
+ * Decrease according to the number of days
  *
- * @param days 要减少的天数
+ * @param days to reduce the number of days to be reduced
  */
 Date.prototype.minusDays = function (days) {
     return this.minusMillis(oneDay * days);
 };
 
 /**
- * 按天数增加
+ * Increase according to the number of days
  *
- * @param days 要增加的天数
+ * @param days The number of days to be increased
  */
 Date.prototype.plusDays = function (days) {
     return this.plusMillis(oneDay * days);
 };
 
 /**
- * 按小时减少
+ * A few
  *
- * @param hours 要减少的小时数
+ * @param hours to be reduced
  */
 Date.prototype.minusHours = function (hours) {
     return this.minusMillis(oneHour * hours);
 };
 
 /**
- * 按小时增加
+ * Increase hourly
  *
- * @param hours 要增加的小时数
+ * @param hours to increase the number of hours
  */
 Date.prototype.plusHours = function (hours) {
     return this.plusMillis(oneHour * hours);
 };
 
 /**
- * 按分钟减少
+ * Make reduction in minutes
  *
- * @param minutes 要减少的分钟数
+ * @param minutes to reduce the number of minutes
  */
 Date.prototype.minusMinutes = function (minutes) {
     return this.minusMillis(oneMinute * minutes);
 };
 
 /**
- * 按分钟增加
+ * Add in minutes
  *
- * @param minutes 要增加的分钟数
+ * @param minutes to increase the number of minutes
  */
 Date.prototype.plusMinutes = function (minutes) {
     return this.plusMillis(oneMinute * minutes);
 };
 
 /**
- * 按毫秒减少
+ * Decrease in milliseconds
  *
- * @param millis 要减少的毫秒数
+ * @param millis to reduce the milliseconds
  */
 Date.prototype.minusMillis = function(millis) {
     let time = this.getTime() - millis;
@@ -71,9 +71,9 @@ Date.prototype.minusMillis = function(millis) {
 };
 
 /**
- * 按毫秒增加
+ * Add in milliseconds to increase
  *
- * @param millis 要增加的毫秒数
+ * @param millis to increase the milliseconds to increase
  */
 Date.prototype.plusMillis = function(millis) {
     let time = this.getTime() + millis;
@@ -83,7 +83,7 @@ Date.prototype.plusMillis = function(millis) {
 };
 
 /**
- * 设置时间为当天的 00:00:00.000
+ * Setting time is 00: 00: 00.000 on the day
  */
 Date.prototype.setMinTime = function () {
     this.setHours(0);
@@ -94,7 +94,7 @@ Date.prototype.setMinTime = function () {
 };
 
 /**
- * 设置时间为当天的 23:59:59.999
+ * Setting time is 23: 59: 59.999 on the same day
  */
 Date.prototype.setMaxTime = function () {
     this.setHours(23);
@@ -105,37 +105,36 @@ Date.prototype.setMaxTime = function () {
 };
 
 /**
- * 格式化日期
+ * Formatting date
  */
 Date.prototype.formatDate = function () {
     return this.getFullYear() + "-" + addZero(this.getMonth() + 1) + "-" + addZero(this.getDate());
 };
 
 /**
- * 格式化时间
+ * Format time
  */
 Date.prototype.formatTime = function () {
     return addZero(this.getHours()) + ":" + addZero(this.getMinutes()) + ":" + addZero(this.getSeconds());
 };
 
 /**
- * 格式化日期加时间
+ * Formatting date plus time
  *
- * @param split 日期和时间之间的分隔符，默认是一个空格
+ * @param split Date and time separation symbols, default is a space
  */
 Date.prototype.formatDateTime = function (split = ' ') {
     return this.formatDate() + split + this.formatTime();
 };
 
 class DateUtil {
-
-    // 字符串转 Date 对象
+    // String string to date object
     static parseDate(str) {
         return new Date(str.replace(/-/g, '/'));
     }
 
     static formatMillis(millis) {
-        return moment(millis).format('YYYY-M-D H:m:s')
+        return moment(millis).format('YYYY-M-D H:m:s');
     }
 
     static firstDayOfMonth() {
@@ -144,4 +143,4 @@ class DateUtil {
         date.setMinTime();
         return date;
     }
-}
+}

web/assets/js/util/utils.js

@@ -68,13 +68,11 @@ class HttpUtil {
 }
 
 class PromiseUtil {
-
     static async sleep(timeout) {
         await new Promise(resolve => {
             setTimeout(resolve, timeout)
         });
     }
-
 }
 
 const seq = [
@@ -95,7 +93,6 @@ const shortIdSeq = [
 ];
 
 class RandomUtil {
-
     static randomIntRange(min, max) {
         return parseInt(Math.random() * (max - min) + min, 10);
     }
@@ -153,8 +150,7 @@ class RandomUtil {
     static randomText() {
         var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
         var string = '';
-        var len = 6 + Math.floor(Math.random() * 5)
-        for(var ii=0; ii<len; ii++){
+        for (var ii = 0; ii < 8; ii++) {
             string += chars[Math.floor(Math.random() * chars.length)];
         }
         return string;
@@ -162,11 +158,11 @@ class RandomUtil {
 
     static randowShortId() {
         let str = '';
-        str += this.randomShortIdSeq(8)
+        str += this.randomShortIdSeq(8);
         return str;
     }
-    
-    static randomShadowsocksPassword(){
+
+    static randomShadowsocksPassword() {
         let array = new Uint8Array(32);
         window.crypto.getRandomValues(array);
         return btoa(String.fromCharCode.apply(null, array));
@@ -174,7 +170,6 @@ class RandomUtil {
 }
 
 class ObjectUtil {
-
     static getPropIgnoreCase(obj, prop) {
         for (const name in obj) {
             if (!obj.hasOwnProperty(name)) {
@@ -322,5 +317,4 @@ class ObjectUtil {
         }
         return true;
     }
-
 }

web/controller/api.go

@@ -14,7 +14,7 @@ func NewAPIController(g *gin.RouterGroup) *APIController {
 }
 
 func (a *APIController) initRouter(g *gin.RouterGroup) {
-	g = g.Group("/xui/API/inbounds")
+	g = g.Group("/panel/api/inbounds")
 	g.Use(a.checkLogin)
 
 	g.GET("/list", a.getAllInbounds)
@@ -35,21 +35,27 @@ func (a *APIController) initRouter(g *gin.RouterGroup) {
 
 	a.inboundController = NewInboundController(g)
 }
+
 func (a *APIController) getAllInbounds(c *gin.Context) {
 	a.inboundController.getInbounds(c)
 }
+
 func (a *APIController) getSingleInbound(c *gin.Context) {
 	a.inboundController.getInbound(c)
 }
+
 func (a *APIController) getClientTraffics(c *gin.Context) {
 	a.inboundController.getClientTraffics(c)
 }
+
 func (a *APIController) addInbound(c *gin.Context) {
 	a.inboundController.addInbound(c)
 }
+
 func (a *APIController) delInbound(c *gin.Context) {
 	a.inboundController.delInbound(c)
 }
+
 func (a *APIController) updateInbound(c *gin.Context) {
 	a.inboundController.updateInbound(c)
 }
@@ -61,24 +67,31 @@ func (a *APIController) getClientIps(c *gin.Context) {
 func (a *APIController) clearClientIps(c *gin.Context) {
 	a.inboundController.clearClientIps(c)
 }
+
 func (a *APIController) addInboundClient(c *gin.Context) {
 	a.inboundController.addInboundClient(c)
 }
+
 func (a *APIController) delInboundClient(c *gin.Context) {
 	a.inboundController.delInboundClient(c)
 }
+
 func (a *APIController) updateInboundClient(c *gin.Context) {
 	a.inboundController.updateInboundClient(c)
 }
+
 func (a *APIController) resetClientTraffic(c *gin.Context) {
 	a.inboundController.resetClientTraffic(c)
 }
+
 func (a *APIController) resetAllTraffics(c *gin.Context) {
 	a.inboundController.resetAllTraffics(c)
 }
+
 func (a *APIController) resetAllClientTraffics(c *gin.Context) {
 	a.inboundController.resetAllClientTraffics(c)
 }
+
 func (a *APIController) delDepletedClients(c *gin.Context) {
 	a.inboundController.delDepletedClients(c)
 }

web/controller/index.go

@@ -39,7 +39,7 @@ func (a *IndexController) initRouter(g *gin.RouterGroup) {
 
 func (a *IndexController) index(c *gin.Context) {
 	if session.IsLogin(c) {
-		c.Redirect(http.StatusTemporaryRedirect, "xui/")
+		c.Redirect(http.StatusTemporaryRedirect, "panel/")
 		return
 	}
 	html(c, "login.html", "pages.login.title", nil)
@@ -77,9 +77,11 @@ func (a *IndexController) login(c *gin.Context) {
 		logger.Infof("Unable to get session's max age from DB")
 	}
 
-	err = session.SetMaxAge(c, sessionMaxAge*60)
-	if err != nil {
-		logger.Infof("Unable to set session's max age")
+	if sessionMaxAge > 0 {
+		err = session.SetMaxAge(c, sessionMaxAge*60)
+		if err != nil {
+			logger.Infof("Unable to set session's max age")
+		}
 	}
 
 	err = session.SetLoginUser(c, user)
@@ -101,5 +103,4 @@ func (a *IndexController) getSecretStatus(c *gin.Context) {
 	if err == nil {
 		jsonObj(c, status, nil)
 	}
-
 }

web/controller/setting.go

@@ -149,6 +149,7 @@ func (a *SettingController) updateSecret(c *gin.Context) {
 	}
 	jsonMsg(c, I18n(c, "pages.settings.toasts.modifyUser"), err)
 }
+
 func (a *SettingController) getUserSecret(c *gin.Context) {
 	loginUser := session.GetLoginUser(c)
 	user := a.userService.GetUserSecret(loginUser.Id)

web/controller/xui.go

@@ -18,7 +18,7 @@ func NewXUIController(g *gin.RouterGroup) *XUIController {
 }
 
 func (a *XUIController) initRouter(g *gin.RouterGroup) {
-	g = g.Group("/xui")
+	g = g.Group("/panel")
 	g.Use(a.checkLogin)
 
 	g.GET("/", a.index)

web/html/common/prompt_modal.html

@@ -1,7 +1,7 @@
 {{define "promptModal"}}
 <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
          :closable="true" @ok="promptModal.ok" :mask-closable="false"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
     <a-input id="prompt-modal-input" :type="promptModal.type"
              v-model="promptModal.value"
@@ -36,12 +36,12 @@
         },
         confirm() {},
         open({
-                title='',
-                type='text',
-                value='',
-                okText='{{ i18n "sure"}}',
-                confirm=() => {},
-            }) {
+            title = '',
+            type = 'text',
+            value = '',
+            okText = '{{ i18n "sure"}}',
+            confirm = () => {},
+        }) {
             this.title = title;
             this.type = type;
             this.value = value;

web/html/common/qrcode_modal.html

@@ -1,11 +1,16 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :footer="null"
          width="300px">
-    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;" >{{ i18n "pages.inbounds.clickOnQRcode" }}</a-tag>
-    <canvas @click="copyToClipboard()" id="qrCode" style="width: 100%; height: 100%;"></canvas>
+    <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;">
+        {{ i18n "pages.inbounds.clickOnQRcode" }}
+    </a-tag>
+    <a-tag v-if="qrModal.clientName" color="orange" style="margin-bottom: 10px;display: block;text-align: center;">
+        {{ i18n "pages.inbounds.email" }}: "[[ qrModal.clientName ]]"
+    </a-tag>
+    <canvas @click="copyToClipboard()" id="qrCode" style="width: 100%; height: 100%; margin-top: 10px;"></canvas>
 </a-modal>
 
 <script>
@@ -16,14 +21,16 @@
         inbound: new Inbound(),
         dbInbound: new DBInbound(),
         copyText: '',
+        clientName: null,
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', dbInbound=new DBInbound(), copyText='') {
+        show: function (title = '', content = '', dbInbound = new DBInbound(), copyText = '', clientName = null) {
             this.title = title;
             this.content = content;
             this.dbInbound = dbInbound;
             this.inbound = dbInbound.toInbound();
+            this.clientName = clientName;
             if (ObjectUtil.isEmpty(copyText)) {
                 this.copyText = content;
             } else {
@@ -48,6 +55,7 @@
     };
 
     const qrModalApp = new Vue({
+        delimiters: ['[[', ']]'],
         el: '#qrcode-modal',
         data: {
             qrModal: qrModal,

web/html/common/text_modal.html

@@ -1,7 +1,7 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
          :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}">
     <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
               :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
@@ -21,7 +21,7 @@
         qrcode: null,
         clipboard: null,
         visible: false,
-        show: function (title='', content='', fileName='') {
+        show: function (title = '', content = '', fileName = '') {
             this.title = title;
             this.content = content;
             this.fileName = fileName;

web/html/login.html

@@ -18,6 +18,12 @@
         border-radius: 30px;
     }
 
+    .ant-input-group-addon {
+        border-radius: 0 30px 30px 0;
+        width: 50px;
+        font-size: 18px;
+    }
+
     .ant-input-affix-wrapper .ant-input-prefix {
         left: 23px;
     }
@@ -26,20 +32,26 @@
         padding-left: 50px;
     }
 
-    .selectLang{
+    .centered {
         display: flex;
         text-align: center;
+        align-items: center;
         justify-content: center;
     }
 
+    .title {
+        font-size: 32px;
+        font-weight: bold;
+    }
+
 </style>
 <body>
-<a-layout id="app" v-cloak>
+<a-layout id="app" v-cloak class="login" :class="themeSwitcher.darkCardClass">
     <transition name="list" appear>
         <a-layout-content>
             <a-row type="flex" justify="center">
                 <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
-                    <h1>{{ i18n "pages.login.title" }}</h1>
+                    <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                 </a-col>
             </a-row>
             <a-row type="flex" justify="center">
@@ -48,35 +60,33 @@
                         <a-form-item>
                             <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
                                      @keydown.enter.native="login" autofocus>
-                                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
+                                <a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
                             </a-input>
                         </a-form-item>
                         <a-form-item>
-                            <a-input type="password" v-model.trim="user.password"
-                                     placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
-                            </a-input>
+                            <password-input icon="lock" v-model.trim="user.password"
+                                            placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
+                            </password-input>
                         </a-form-item>
                         <a-form-item v-if="secretEnable">
-                            <a-input type="text" placeholder='{{ i18n "secretToken" }}' v-model.trim="user.loginSecret" @keydown.enter.native="login">
-                            <a-icon slot="prefix" type="key" style="color: rgba(0,0,0,.25)"/>
+                            <password-input icon="key" v-model.trim="user.loginSecret"
+                                            placeholder='{{ i18n "secretToken" }}' @keydown.enter.native="login">
+                            </password-input>
                         </a-input>
                         </a-form-item>
                         <a-form-item>
-                            <a-button block @click="login" :loading="loading">{{ i18n "login" }}</a-button>
+                            <a-row justify="center" class="centered">
+                                <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
+                                          :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
+                                    [[ loading ? '' : '{{ i18n "login" }}' ]]
+                                </a-button>
+                            </a-row>
                         </a-form-item>
                         <a-form-item>
-
-                            <a-row justify="center" class="selectLang">
-                                <a-col :span="5"><span>Language :</span></a-col>
-
-                                <a-col :span="7">
-                                    <a-select
-                                            ref="selectLang"
-                                            v-model="lang"
-                                            @change="setLang(lang)"
-                                    >
-                                        <a-select-option  :value="l.value" label="English" v-for="l in supportLangs" >
+                            <a-row justify="center" class="centered">
+                                <a-col :span="12">
+                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
+                                        <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
                                             <span role="img" aria-label="l.name" v-text="l.icon"></span>
                                             &nbsp;&nbsp;<span v-text="l.name"></span>
                                         </a-select-option>
@@ -84,6 +94,11 @@
                                 </a-col>
                             </a-row>
                         </a-form-item>
+                        <a-form-item>
+                            <a-row justify="center" class="centered">
+                                <theme-switch />
+                            </a-row>
+                        </a-form-item>
                     </a-form>
                 </a-col>
             </a-row>
@@ -91,24 +106,24 @@
     </transition>
 </a-layout>
 {{template "js" .}}
+{{template "component/themeSwitcher" .}}
+{{template "component/password" .}}
 <script>
-    const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
-    const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
-    const deg = RandomUtil.randomIntRange(0, 360);
-    const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
-    document.querySelector('#app').style.background = background;
+
     const app = new Vue({
         delimiters: ['[[', ']]'],
         el: '#app',
         data: {
+            themeSwitcher,
             loading: false,
             user: new User(),
             secretEnable: false,
-            lang : ""
+            lang: ""
         },
-        created(){
-          this.lang = getLang();
-          this.secretEnable = this.getSecretStatus();
+        async created() {
+            this.updateBackground();
+            this.lang = getLang();
+            this.secretEnable = await this.getSecretStatus();
         },
         methods: {
             async login() {
@@ -116,20 +131,33 @@
                 const msg = await HttpUtil.post('/login', this.user);
                 this.loading = false;
                 if (msg.success) {
-                    location.href = basePath + 'xui/';
+                    location.href = basePath + 'panel/';
                 }
             },
             async getSecretStatus() {
-                this.loading= true;
+                this.loading = true;
                 const msg = await HttpUtil.post('/getSecretStatus');
                 this.loading = false;
-                if (msg.success){
+                if (msg.success) {
                     this.secretEnable = msg.obj;
                     return msg.obj;
                 }
-            }
-        }
+            },
+            updateBackground() {
+                const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
+                const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
+                const deg = RandomUtil.randomIntRange(0, 360);
+                const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
+                document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background;
+            },
+        },
+        watch: {
+            'themeSwitcher.isDarkTheme'(newVal, oldVal) {
+                this.updateBackground();
+            },
+        },
     });
+
 </script>
 </body>
 </html>

web/html/xui/client_bulk_modal.html

@@ -1,11 +1,11 @@
 {{define "clientsBulkModal"}}
 <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"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'>
     <a-form layout="inline">
         <a-form-item label='{{ i18n "pages.client.method" }}'>
-            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 350px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <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>
@@ -71,20 +71,20 @@
         </a-form-item>
         <br>
         <a-form-item v-if="clientsBulkModal.inbound.xtls" label="Flow">
-            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <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>
         <a-form-item v-if="clientsBulkModal.inbound.canEnableTlsFlow()" label="Flow" layout="inline">
-            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                 <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>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                 <a-tooltip>
                     <template slot="title">
                         0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -104,7 +104,7 @@
         </a-form-item>
         <a-form-item v-else>
             <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                 <a-tooltip>
                     <template slot="title">
                         <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -113,7 +113,7 @@
                 </a-tooltip>
             </span>
             <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                           :dropdown-class-name="themeSwitcher.darkCardClass"
                            v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
         </a-form-item>
     </a-form>
@@ -143,37 +143,42 @@
         delayedStart: false,
         ok() {
             clients = [];
-            method=clientsBulkModal.emailMethod;
-            if(method>1){
-                start=clientsBulkModal.firstNum;
-                end=clientsBulkModal.lastNum + 1;
+            method = clientsBulkModal.emailMethod;
+            if (method > 1) {
+                start = clientsBulkModal.firstNum;
+                end = clientsBulkModal.lastNum + 1;
             } else {
-                start=0;
-                end=clientsBulkModal.quantity;
+                start = 0;
+                end = clientsBulkModal.quantity;
             }
-            prefix = (method>0 && clientsBulkModal.emailPrefix.length>0) ? clientsBulkModal.emailPrefix : "";
-            useNum=(method>1);
-            postfix = (method>2 && clientsBulkModal.emailPostfix.length>0) ? clientsBulkModal.emailPostfix : "";
+            prefix = (method > 0 && clientsBulkModal.emailPrefix.length > 0) ? clientsBulkModal.emailPrefix : "";
+            useNum = (method > 1);
+            postfix = (method > 2 && clientsBulkModal.emailPostfix.length > 0) ? clientsBulkModal.emailPostfix : "";
             for (let i = start; i < end; i++) {
                 newClient = clientsBulkModal.newClient(clientsBulkModal.dbInbound.protocol);
-                if(method==4) newClient.email = "";
+                if (method == 4) newClient.email = "";
                 newClient.email += useNum ? prefix + i.toString() + postfix : prefix + postfix;
                 newClient.subId = clientsBulkModal.subId;
                 newClient.tgId = clientsBulkModal.tgId;
                 newClient.limitIp = clientsBulkModal.limitIp;
                 newClient._totalGB = clientsBulkModal.totalGB;
                 newClient._expiryTime = clientsBulkModal.expiryTime;
-                if(clientsBulkModal.inbound.canEnableTlsFlow()){
+                if (clientsBulkModal.inbound.canEnableTlsFlow()) {
                     newClient.flow = clientsBulkModal.flow;
                 }
-                if(clientsBulkModal.inbound.xtls){
+                if (clientsBulkModal.inbound.xtls) {
                     newClient.flow = clientsBulkModal.flow;
                 }
                 clients.push(newClient);
             }
             ObjectUtil.execute(clientsBulkModal.confirm, clients, clientsBulkModal.dbInbound.id);
         },
-        show({ title='', okText='{{ i18n "sure" }}', dbInbound=null, confirm=(inbound, dbInbound)=>{} }) {
+        show({
+            title = '',
+            okText = '{{ i18n "sure" }}',
+            dbInbound = null,
+            confirm = (inbound, dbInbound) => { }
+        }) {
             this.visible = true;
             this.title = title;
             this.okText = okText;
@@ -181,21 +186,21 @@
             this.quantity = 1;
             this.totalGB = 0;
             this.expiryTime = 0;
-            this.emailMethod= 0;
-            this.limitIp= 0;
-            this.firstNum= 1;
-            this.lastNum= 1;
-            this.emailPrefix= "";
-            this.emailPostfix= "";
-            this.subId= "";
-            this.tgId= "";
-            this.flow= "";
+            this.emailMethod = 0;
+            this.limitIp = 0;
+            this.firstNum = 1;
+            this.lastNum = 1;
+            this.emailPrefix = "";
+            this.emailPostfix = "";
+            this.subId = "";
+            this.tgId = "";
+            this.flow = "";
             this.dbInbound = new DBInbound(dbInbound);
             this.inbound = dbInbound.toInbound();
             this.delayedStart = false;
         },
         getClients(protocol, clientSettings) {
-            switch(protocol){
+            switch (protocol) {
                 case Protocols.VMESS: return clientSettings.vmesses;
                 case Protocols.VLESS: return clientSettings.vlesses;
                 case Protocols.TROJAN: return clientSettings.trojans;
@@ -230,10 +235,11 @@
             get delayedExpireDays() {
                 return this.clientsBulkModal.expiryTime < 0 ? this.clientsBulkModal.expiryTime / -86400000 : 0;
             },
-            set delayedExpireDays(days){
+            set delayedExpireDays(days) {
                 this.clientsBulkModal.expiryTime = -86400000 * days;
             },
         },
     });
+
 </script>
 {{end}}

web/html/xui/client_modal.html

@@ -1,7 +1,7 @@
 {{define "clientsModal"}}
 <a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok"
          :confirm-loading="clientModal.confirmLoading" :closable="true" :mask-closable="false"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/client"}}
 </a-modal>
@@ -23,13 +23,13 @@
         isExpired: false,
         delayedStart: false,
         ok() {
-            if(clientModal.isEdit){
+            if (clientModal.isEdit) {
                 ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id, clientModal.oldClientId);
             } else {
                 ObjectUtil.execute(clientModal.confirm, clientModalApp.client, clientModal.dbInbound.id);
             }
         },
-        show({ title='', okText='{{ i18n "sure" }}', index=null, dbInbound=null, confirm=()=>{}, isEdit=false  }) {
+        show({ title = '', okText = '{{ i18n "sure" }}', index = null, dbInbound = null, confirm = () => { }, isEdit = false }) {
             this.visible = true;
             this.title = title;
             this.okText = okText;
@@ -40,11 +40,11 @@
             this.index = index === null ? this.clients.length : index;
             this.isExpired = isEdit ? this.inbound.isExpiry(this.index) : false;
             this.delayedStart = false;
-            if (isEdit){
-                if (this.clients[index].expiryTime < 0){
+            if (isEdit) {
+                if (this.clients[index].expiryTime < 0) {
                     this.delayedStart = true;
                 }
-                this.oldClientId = this.getClientId(dbInbound.protocol,clients[index]);
+                this.oldClientId = this.getClientId(dbInbound.protocol, clients[index]);
             } else {
                 this.addClient(this.inbound.protocol, this.clients);
             }
@@ -52,7 +52,7 @@
             this.confirm = confirm;
         },
         getClients(protocol, clientSettings) {
-            switch(protocol){
+            switch (protocol) {
                 case Protocols.VMESS: return clientSettings.vmesses;
                 case Protocols.VLESS: return clientSettings.vlesses;
                 case Protocols.TROJAN: return clientSettings.trojans;
@@ -61,7 +61,7 @@
             }
         },
         getClientId(protocol, client) {
-            switch(protocol){
+            switch (protocol) {
                 case Protocols.TROJAN: return client.password;
                 case Protocols.SHADOWSOCKS: return client.email;
                 default: return client.id;
@@ -103,39 +103,30 @@
                 return this.clientModal.isEdit;
             },
             get isTrafficExhausted() {
-                if(!clientStats) return false
-                if(clientStats.total <= 0) return false
-                if(clientStats.up + clientStats.down < clientStats.total) return false
+                if (!clientStats) return false
+                if (clientStats.total <= 0) return false
+                if (clientStats.up + clientStats.down < clientStats.total) return false
                 return true
             },
             get isExpiry() {
                 return this.clientModal.isExpired
             },
             get statsColor() {
-                if(!clientStats) return 'blue'
-                if(clientStats.total <= 0) return 'blue'
-                else if(clientStats.total > 0 && (clientStats.down+clientStats.up) < clientStats.total) return 'cyan'
+                if (!clientStats) return 'blue'
+                if (clientStats.total <= 0) return 'blue'
+                else if (clientStats.total > 0 && (clientStats.down + clientStats.up) < clientStats.total) return 'cyan'
                 else return 'red'
             },
             get delayedExpireDays() {
                 return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
             },
-            set delayedExpireDays(days){
+            set delayedExpireDays(days) {
                 this.client.expiryTime = -86400000 * days;
             },
         },
         methods: {
-            getNewEmail(client) {
-                var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
-                var string = '';
-                var len = 6 + Math.floor(Math.random() * 5);
-                for(var ii=0; ii<len; ii++){
-                    string += chars[Math.floor(Math.random() * chars.length)];
-                }
-                client.email = string;
-            },
-            async getDBClientIps(email,event) {
-                const msg = await HttpUtil.post('/xui/inbound/clientIps/'+ email);
+            async getDBClientIps(email, event) {
+                const msg = await HttpUtil.post('/panel/inbound/clientIps/' + email);
                 if (!msg.success) {
                     return;
                 }
@@ -149,22 +140,22 @@
                 }
             },
             async clearDBClientIps(email) {
-                const msg = await HttpUtil.post('/xui/inbound/clearClientIps/'+ email);
+                const msg = await HttpUtil.post('/panel/inbound/clearClientIps/' + email);
                 if (!msg.success) {
                     return;
                 }
                 document.getElementById("clientIPs").value = ""
             },
-            resetClientTraffic(email,dbInboundId,iconElement) {
+            resetClientTraffic(email, dbInboundId, iconElement) {
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                     content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: async () => {
                         iconElement.disabled = true;
-                        const msg = await HttpUtil.postWithModal('/xui/inbound/' + dbInboundId + '/resetClientTraffic/'+ email);
+                        const msg = await HttpUtil.postWithModal('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + email);
                         if (msg.success) {
                             this.clientModal.clientStats.up = 0;
                             this.clientModal.clientStats.down = 0;
@@ -175,5 +166,6 @@
             },
         },
     });
+
 </script>
 {{end}}

web/html/xui/common_sider.html

@@ -1,17 +1,17 @@
 {{define "menuItems"}}
-<a-menu-item key="{{ .base_path }}xui/">
+<a-menu-item key="{{ .base_path }}panel/">
     <a-icon type="dashboard"></a-icon>
     <span>{{ i18n "menu.dashboard"}}</span>
 </a-menu-item>
-<a-menu-item key="{{ .base_path }}xui/inbounds">
+<a-menu-item key="{{ .base_path }}panel/inbounds">
     <a-icon type="user"></a-icon>
     <span>{{ i18n "menu.inbounds"}}</span>
 </a-menu-item>
-<a-menu-item key="{{ .base_path }}xui/settings">
+<a-menu-item key="{{ .base_path }}panel/settings">
     <a-icon type="setting"></a-icon>
     <span>{{ i18n "menu.settings"}}</span>
 </a-menu-item>
-<!--<a-menu-item key="{{ .base_path }}xui/clients">-->
+<!--<a-menu-item key="{{ .base_path }}panel/clients">-->
 <!--    <a-icon type="laptop"></a-icon>-->
 <!--    <span>Client</span>-->
 <!--</a-menu-item>-->
@@ -23,17 +23,14 @@
 
 
 {{define "commonSider"}}
-<a-layout-sider :theme="siderDrawer.theme" id="sider" collapsible breakpoint="md" collapsed-width="0">
-    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
+<a-layout-sider :theme="themeSwitcher.currentTheme" id="sider" collapsible breakpoint="md" collapsed-width="0">
+    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
             <a-icon type="bg-colors"></a-icon>
-            <a-switch :default-checked="siderDrawer.isDarkTheme"
-            checked-children="☀"
-            un-checked-children="🌙"
-            @change="siderDrawer.changeTheme()"></a-switch>
+            <theme-switch />
         </a-menu-item>
     </a-menu>
-    <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']"
+    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
             @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>
@@ -41,32 +38,25 @@
 <a-drawer id="sider-drawer" placement="left" :closable="false"
           @close="siderDrawer.close()"
           :visible="siderDrawer.visible"
-          :wrap-class-name="siderDrawer.isDarkTheme ? 'ant-drawer-dark' : ''"
+          :wrap-class-name="themeSwitcher.darkDrawerClass"
           :wrap-style="{ padding: 0 }">
     <div class="drawer-handle" @click="siderDrawer.change()" slot="handle">
         <a-icon :type="siderDrawer.visible ? 'close' : 'menu-fold'"></a-icon>
     </div>
-    <a-menu :theme="siderDrawer.theme" mode="inline" selected-keys="">
+    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
             <a-icon type="bg-colors"></a-icon>
-            <a-switch :default-checked="siderDrawer.isDarkTheme"
-            checked-children="☀"
-            un-checked-children="🌙"
-            @change="siderDrawer.changeTheme()"></a-switch>
+            <theme-switch />
         </a-menu-item>
     </a-menu>
-    <a-menu :theme="siderDrawer.theme" mode="inline" :selected-keys="['{{ .request_uri }}']"
+    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
         @click="({key}) => key.startsWith('http') ? window.open(key) : location.href = key">
         {{template "menuItems" .}}
     </a-menu>
 </a-drawer>
 <script>
-    const darkClass = "ant-card-dark";
-    const bgDarkStyle = "background-color: #242c3a";
     const siderDrawer = {
         visible: false,
-        collapsed: false,
-        isDarkTheme: localStorage.getItem("dark-mode") === 'false' ? false : true,
         show() {
             this.visible = true;
         },
@@ -76,17 +66,6 @@
         change() {
             this.visible = !this.visible;
         },
-        toggleCollapsed() {
-            this.collapsed = !this.collapsed;
-        },
-        changeTheme() {
-            this.isDarkTheme = ! this.isDarkTheme;
-            localStorage.setItem("dark-mode", this.isDarkTheme);
-        },
-        get theme() {
-            return this.isDarkTheme ? 'dark' : 'light';
-        }
     };
-
 </script>
 {{end}}

web/html/xui/component/password.html

@@ -0,0 +1,35 @@
+{{define "component/passwordInput"}}
+<template>
+    <a-input :value="value" :type="showPassword ? 'text' : 'password'"
+            :placeholder="placeholder"
+            @input="$emit('input', $event.target.value)">
+        <template v-if="icon" #prefix>
+            <a-icon :type="icon" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+        </template>
+        <template #addonAfter>
+            <a-icon :type="showPassword ? 'eye-invisible' : 'eye'"
+                    @click="toggleShowPassword"
+                    :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+        </template>
+    </a-input>
+</template>
+{{end}}
+
+{{define "component/password"}}
+<script>
+  Vue.component('password-input', {
+    props: ["title", "value", "placeholder", "icon"],
+    template: `{{template "component/passwordInput"}}`,
+    data() {
+      return {
+        showPassword: false,
+      };
+    },
+    methods: {
+      toggleShowPassword() {
+        this.showPassword = !this.showPassword;
+      },
+    },
+  });
+</script>
+{{end}}

web/html/xui/component/setting.html

@@ -1,6 +1,13 @@
 {{define "component/settingListItem"}}
 <a-list-item style="padding: 20px">
-    <a-row>
+    <a-row v-if="type === 'textarea'">
+        <a-col>
+            <a-list-item-meta :title="title" :description="desc"/>
+            <a-textarea class="ant-setting-textarea" :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10 }"></a-textarea>
+            <!--a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 30 }"></a-textarea-->
+        </a-col>
+    </a-row>
+    <a-row v-else>
         <a-col :lg="24" :xl="12">
             <a-list-item-meta :title="title" :description="desc"/>
         </a-col>
@@ -11,9 +18,6 @@
             <template v-else-if="type === 'number'">
                 <a-input-number :value="value" @change="value => $emit('input', value)" :min="min" style="width: 100%;"></a-input-number>
             </template>
-            <template v-else-if="type === 'textarea'">
-                <a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 10 }"></a-textarea>
-            </template>
             <template v-else-if="type === 'switch'">
                 <a-switch :checked="value" @change="value => $emit('input', value)"></a-switch>
             </template>
@@ -29,4 +33,4 @@
         template: `{{template "component/settingListItem"}}`,
     });
 </script>
-{{end}}
+{{end}}

web/html/xui/component/themeSwitch.html

@@ -0,0 +1,58 @@
+{{define "component/themeSwitchTemplate"}}
+<template>
+  <a-switch :default-checked="themeSwitcher.isDarkTheme"
+            checked-children="☀"
+            un-checked-children="🌙"
+            @change="themeSwitcher.toggleTheme()">
+  </a-switch>
+</template>
+{{end}}
+
+{{define "component/themeSwitcher"}}
+<script>
+  const colors = {
+    dark: {
+      bg: "#242c3a",
+      text: "hsla(0,0%,100%,.65)"
+    },
+    light: {
+      bg: '#f0f2f5',
+      text: "rgba(0, 0, 0, 0.7)",
+    }
+  }
+
+  function createThemeSwitcher() {
+    const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
+    const theme = isDarkTheme ? 'dark' : 'light';
+    return {
+      isDarkTheme,
+      bgStyle: `background: ${colors[theme].bg};`,
+      textStyle: `color: ${colors[theme].text};`,
+      darkClass: isDarkTheme ? 'ant-dark' : '',
+      darkCardClass: isDarkTheme ? 'ant-card-dark' : '',
+      darkDrawerClass: isDarkTheme ? 'ant-drawer-dark' : '',
+      get currentTheme() {
+        return this.isDarkTheme ? 'dark' : 'light';
+      },
+      toggleTheme() {
+        this.isDarkTheme = !this.isDarkTheme;
+        this.theme = this.isDarkTheme ? 'dark' : 'light';
+        localStorage.setItem('dark-mode', this.isDarkTheme);
+        this.bgStyle = `background: ${colors[this.theme].bg};`;
+        this.textStyle = `color: ${colors[this.theme].text};`;
+        this.darkClass = this.isDarkTheme ? 'ant-dark' : '';
+        this.darkCardClass = this.isDarkTheme ? 'ant-card-dark' : '';
+        this.darkDrawerClass = this.isDarkTheme ? 'ant-drawer-dark' : '';
+      },
+    };
+  }
+
+  const themeSwitcher = createThemeSwitcher();
+
+  Vue.component('theme-switch', {
+    props: [],
+    template: `{{template "component/themeSwitchTemplate"}}`,
+    data: () => ({ themeSwitcher }),
+  });
+</script>
+{{end}}

web/html/xui/form/client.html

@@ -1,7 +1,9 @@
 {{define "form/client"}}
 <a-form layout="inline" v-if="client">
     <template v-if="isEdit">
-    <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag>
+        <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;">
+            Account is (Expired|Traffic Ended) And Disabled
+        </a-tag>
     </template>
     <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
         <a-switch v-model="client.enable"></a-switch>
@@ -9,25 +11,27 @@
     <br>
     <a-form-item>
         <span slot="label">
-            <span>{{ i18n "pages.inbounds.Email" }}</span>
+            <span>{{ i18n "pages.inbounds.email" }}</span>
             <a-tooltip>
                 <template slot="title">
-                    <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
+                    <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                 </template>
-                <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
             </a-tooltip>
         </span>
-        <a-input v-model.trim="client.email" style="width: 200px;" ></a-input>
+        <a-icon @click="client.email = RandomUtil.randomText()" type="sync"> </a-icon>
+        <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
     </a-form-item>
     <a-form-item label="Password" v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
-        <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-        <a-input v-model.trim="client.password" style="width: 300px;" ></a-input>
+        <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS"
+                @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
+        <a-input v-model.trim="client.password" style="width: 300px;"></a-input>
     </a-form-item>
     <br>
     <a-form-item label='{{ i18n "additional" }} ID' v-if="inbound.protocol === Protocols.VMESS">
         <a-input-number v-model="client.alterId"></a-input-number>
     </a-form-item>
     <a-form-item label="ID" v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
+        <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"> </a-icon>
         <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
     </a-form-item>
 	<a-form-item v-if="client.email">
@@ -40,8 +44,9 @@
                 <a-icon type="question-circle" theme="filled"></a-icon>
             </a-tooltip>
         </span>
-        <a-input v-model.trim="client.subId"></a-input>
-</a-form-item>
+        <a-icon @click="client.subId = RandomUtil.randomText()" type="sync"> </a-icon>
+        <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
+    </a-form-item>
     <a-form-item v-if="client.email">
         <span slot="label">
             Telegram ID
@@ -85,26 +90,29 @@
 			</a-tooltip>
 		</span>
 		<a-form layout="block">
-			<a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 2, maxRows: 10 }">
+			<a-textarea id="clientIPs" readonly 
+                        @click="getDBClientIps(client.email,$event)"
+                        placeholder="Click To Get IPs"
+                        :auto-size="{ minRows: 2, maxRows: 10 }">
 			</a-textarea>
 		</a-form>
 	</a-form-item>
     <br>
     <a-form-item v-if="inbound.xtls" label="Flow">
-        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>
     <a-form-item v-else-if="inbound.canEnableTlsFlow()" label="Flow">
-        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+            <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
             <a-tooltip>
                 <template slot="title">
                     0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -112,9 +120,10 @@
                 <a-icon type="question-circle" theme="filled"></a-icon>
             </a-tooltip>
         </span>
-        <a-input-number v-model="client._totalGB":min="0"></a-input-number>
+        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
         <template v-if="isEdit && clientStats">
-            <br><span> {{ i18n "usage" }}:</span>
+            <br>
+            <span> {{ i18n "usage" }}:</span>
             <a-tag :color="statsColor">
                 [[ sizeFormat(clientStats.up) ]] / 
                 [[ sizeFormat(clientStats.down) ]]
@@ -122,7 +131,8 @@
             </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-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
+                        v-if="client.email.length > 0"></a-icon>
             </a-tooltip>
         </template>        
     </a-form-item>
@@ -136,7 +146,7 @@
     </a-form-item>
     <a-form-item v-else>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+            <span>{{ i18n "pages.inbounds.expireDate" }}</span>
             <a-tooltip>
                 <template slot="title">
                     <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -145,7 +155,7 @@
             </a-tooltip>
         </span>
         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                       :dropdown-class-name="themeSwitcher.darkCardClass"
                        v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
         <a-tag color="red" v-if="isExpiry">Expired</a-tag>
     </a-form-item>

web/html/xui/form/inbound.html

@@ -8,7 +8,7 @@
         <a-switch v-model="dbInbound.enable"></a-switch>
     </a-form-item>
     <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -31,7 +31,7 @@
     <br>
     <a-form-item>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+            <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
             <a-tooltip>
                 <template slot="title">
                     0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -43,7 +43,7 @@
     </a-form-item>
     <a-form-item>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+            <span>{{ i18n "pages.inbounds.expireDate" }}</span>
             <a-tooltip>
                 <template slot="title">
                     <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -52,7 +52,7 @@
             </a-tooltip>
         </span>
         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                       :dropdown-class-name="themeSwitcher.darkCardClass"
                        v-model="dbInbound._expiryTime" style="width: 300px;"></a-date-picker>
     </a-form-item>
 </a-form>

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

@@ -8,7 +8,7 @@
     </a-form-item>
     <br>
     <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
-        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>

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

@@ -4,15 +4,15 @@
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
             <a-form-item>
                 <span slot="label">
-                    <span>{{ i18n "pages.inbounds.Email" }}</span>
+                    <span>{{ i18n "pages.inbounds.email" }}</span>
                     <a-tooltip>
                         <template slot="title">
-                            <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
+                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                         </template>
-                        <a-icon @click="getNewEmail(client)" type="sync"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
+                <a-icon @click="client.email = RandomUtil.randomText()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
             </a-form-item>
             <a-form-item label="Password">
                 <a-icon @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
@@ -28,8 +28,9 @@
                         <a-icon type="question-circle" theme="filled"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="client.subId"></a-input>
-        </a-form-item>
+                <a-icon @click="client.subId = RandomUtil.randomText()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
+            </a-form-item>
             <a-form-item v-if="client.email">
                 <span slot="label">
                     Telegram ID
@@ -57,7 +58,7 @@
             <br>
             <a-form-item>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -77,7 +78,7 @@
             </a-form-item>
             <a-form-item v-else>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                     <a-tooltip>
                         <template slot="title">
                             <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -86,7 +87,7 @@
                     </a-tooltip>
                 </span>
                 <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                :dropdown-class-name="themeSwitcher.darkCardClass"
                                 v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
             </a-form-item>
         </a-collapse-panel>
@@ -106,7 +107,7 @@
 </a-form>
 <a-form layout="inline">
     <a-form-item label='{{ i18n "encryption" }}'>
-        <a-select v-model="inbound.settings.method" style="width: 250px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.settings.method" style="width: 250px;" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -114,7 +115,7 @@
         <a-input v-model.trim="inbound.settings.password" style="width: 250px;"></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="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>

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

@@ -17,8 +17,7 @@
     <a-form-item label='{{ i18n "pages.inbounds.enable" }} udp'>
         <a-switch v-model="inbound.settings.udp"></a-switch>
     </a-form-item>
-    <a-form-item v-if="inbound.settings.udp"
-                 label="IP">
+    <a-form-item v-if="inbound.settings.udp" label="IP">
         <a-input v-model.trim="inbound.settings.ip"></a-input>
     </a-form-item>
 </a-form>

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

@@ -4,15 +4,15 @@
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
             <a-form-item>
                 <span slot="label">
-                    <span>{{ i18n "pages.inbounds.Email" }}</span>
+                    <span>{{ i18n "pages.inbounds.email" }}</span>
                     <a-tooltip>
                         <template slot="title">
-                            <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
+                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                         </template>
-                        <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
+                <a-icon @click="client.email = RandomUtil.randomText()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
             </a-form-item>
             <a-form-item label="Password">
                 <a-input v-model.trim="client.password" style="width: 150px;"></a-input>
@@ -27,7 +27,8 @@
                         <a-icon type="question-circle" theme="filled"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="client.subId"></a-input>
+                <a-icon @click="client.subId = RandomUtil.randomText()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
             </a-form-item>
             <a-form-item v-if="client.email">
                 <span slot="label">
@@ -55,14 +56,14 @@
             </a-form-item>
             <br>
             <a-form-item v-if="inbound.xtls" label="Flow">
-                <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="themeSwitcher.darkCardClass">
                     <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>
             <a-form-item>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -82,7 +83,7 @@
             </a-form-item>
             <a-form-item v-else>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                     <a-tooltip>
                         <template slot="title">
                             <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -91,7 +92,7 @@
                     </a-tooltip>
                 </span>
                 <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                :dropdown-class-name="themeSwitcher.darkCardClass"
                                 v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
             </a-form-item>
         </a-collapse-panel>
@@ -113,8 +114,7 @@
     <a-form layout="inline">
         <a-form-item label="Fallbacks">
             <a-row>
-                <a-button type="primary" size="small"
-                        @click="inbound.settings.addTrojanFallback()">
+                <a-button type="primary" size="small" @click="inbound.settings.addTrojanFallback()">
                     +
                 </a-button>
             </a-row>

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

@@ -4,18 +4,19 @@
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
             <a-form-item>
                 <span slot="label">
-                    <span>{{ i18n "pages.inbounds.Email" }}</span>
+                    <span>{{ i18n "pages.inbounds.email" }}</span>
                     <a-tooltip>
                         <template slot="title">
-                            <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
+                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                         </template>
-                        <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
+                <a-icon @click="client.email = RandomUtil.randomText()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
             </a-form-item>
             <a-form-item label="ID">
-                <a-input v-model.trim="client.id"  style="width: 300px;"></a-input>
+                <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
             </a-form-item>
             <a-form-item v-if="client.email">
                 <span slot="label">
@@ -27,8 +28,9 @@
                         <a-icon type="question-circle" theme="filled"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="client.subId"></a-input>
-        </a-form-item>
+                <a-icon @click="client.subId = RandomUtil.randomText()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
+            </a-form-item>
             <a-form-item v-if="client.email">
                 <span slot="label">
                     Telegram ID
@@ -55,20 +57,20 @@
             </a-form-item>
             <br>
             <a-form-item v-if="inbound.xtls" label="Flow">
-                <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                     <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-else-if="inbound.canEnableTlsFlow()" label="Flow">
-                <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                     <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>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -88,7 +90,7 @@
             </a-form-item>
             <a-form-item v-else>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                     <a-tooltip>
                         <template slot="title">
                             <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -97,7 +99,7 @@
                     </a-tooltip>
                 </span>
                 <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                               :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                               :dropdown-class-name="themeSwitcher.darkCardClass"
                                v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
             </a-form-item>
         </a-collapse-panel>     
@@ -119,8 +121,7 @@
     <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>

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

@@ -4,15 +4,15 @@
         <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
             <a-form-item>
                 <span slot="label">
-                    <span>{{ i18n "pages.inbounds.Email" }}</span>
+                    <span>{{ i18n "pages.inbounds.email" }}</span>
                     <a-tooltip>
                         <template slot="title">
-                            <span>{{ i18n "pages.inbounds.EmailDesc" }}</span>
+                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                         </template>
-                        <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
+                <a-icon @click="client.email = RandomUtil.randomText()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
             </a-form-item>
             <br>
             <a-form-item label='{{ i18n "additional" }} ID'>
@@ -20,6 +20,7 @@
             </a-form-item>
             <br>
             <a-form-item label="ID">
+                <a-icon @click="client.id = RandomUtil.randomUUID()" type="sync"> </a-icon>
                 <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
             </a-form-item>
             <a-form-item v-if="client.email">
@@ -32,8 +33,9 @@
                         <a-icon type="question-circle" theme="filled"></a-icon>
                     </a-tooltip>
                 </span>
-                <a-input v-model.trim="client.subId"></a-input>
-        </a-form-item>
+                <a-icon @click="client.subId = RandomUtil.randomText()" type="sync"> </a-icon>
+                <a-input v-model.trim="client.subId" style="width: 150px;"></a-input>
+            </a-form-item>
             <a-form-item v-if="client.email">
                 <span slot="label">
                     Telegram ID
@@ -61,7 +63,7 @@
             <br>
             <a-form-item>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -81,7 +83,7 @@
             </a-form-item>
             <a-form-item v-else>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                     <a-tooltip>
                         <template slot="title">
                             <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -90,7 +92,7 @@
                     </a-tooltip>
                 </span>
                 <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                :dropdown-class-name="themeSwitcher.darkCardClass"
                                 v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
             </a-form-item>
         </a-collapse-panel>     

web/html/xui/form/sniffing.html

@@ -1,21 +1,21 @@
 {{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-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-form>
 {{end}}

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

@@ -1,7 +1,7 @@
 {{define "form/streamKCP"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>

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

@@ -1,7 +1,7 @@
 {{define "form/streamQUIC"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
-        <a-select v-model="inbound.stream.quic.security" style="width: 165px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.quic.security" style="width: 165px;" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>
@@ -11,7 +11,7 @@
         <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" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.quic.type" style="width: 280px;" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>

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

@@ -2,7 +2,7 @@
 <!-- select stream network -->
 <a-form layout="inline">
     <a-form-item label='{{ i18n "transmission" }}'>
-        <a-select v-model="inbound.stream.network" @change="streamNetworkChange" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.network" @change="streamNetworkChange" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>

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

@@ -13,8 +13,7 @@
 </a-form>
 
 <!-- tcp request -->
-<a-form v-if="inbound.stream.tcp.type === 'http'"
-        layout="inline">
+<a-form v-if="inbound.stream.tcp.type === 'http'" layout="inline">
     <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>
@@ -28,8 +27,7 @@
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
         <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.tcp.request.addHeader('Host', 'xxx.com')">
+            <a-button size="small" @click="inbound.stream.tcp.request.addHeader('Host', 'xxx.com')">
                 +
             </a-button>
         </a-row>
@@ -39,8 +37,7 @@
             <a-input style="width: 50%" v-model.trim="header.value"
                      addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
                 <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.tcp.request.removeHeader(index)">
+                    <a-button size="small" @click="inbound.stream.tcp.request.removeHeader(index)">
                         -
                     </a-button>
                 </template>
@@ -50,8 +47,7 @@
 </a-form>
 
 <!-- tcp response -->
-<a-form v-if="inbound.stream.tcp.type === 'http'"
-        layout="inline">
+<a-form v-if="inbound.stream.tcp.type === 'http'" layout="inline">
     <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>
@@ -63,8 +59,7 @@
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
         <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">
+            <a-button size="small" @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">
                 +
             </a-button>
         </a-row>
@@ -74,8 +69,7 @@
             <a-input style="width: 50%" v-model.trim="header.value"
                      addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
                 <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.tcp.response.removeHeader(index)">
+                    <a-button size="small" @click="inbound.stream.tcp.response.removeHeader(index)">
                         -
                     </a-button>
                 </template>

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

@@ -10,8 +10,7 @@
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
         <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.ws.addHeader('Host', '')">
+            <a-button size="small" @click="inbound.stream.ws.addHeader('Host', '')">
                 +
             </a-button>
         </a-row>
@@ -21,8 +20,7 @@
             <a-input style="width: 50%" v-model.trim="header.value"
                      addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
                 <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.ws.removeHeader(index)">
+                    <a-button size="small" @click="inbound.stream.ws.removeHeader(index)">
                         -
                     </a-button>
                 </template>

web/html/xui/form/tls_settings.html

@@ -37,18 +37,18 @@
         <a-input v-model.trim="inbound.stream.tls.server" style="width: 250px"></a-input>
     </a-form-item>
     <a-form-item label="CipherSuites">
-        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option value="">auto</a-select-option>
             <a-select-option v-for="key in TLS_CIPHER_OPTION" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
     <a-form-item label="MinVersion">
-        <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
     <a-form-item label="MaxVersion">
-        <a-select v-model="inbound.stream.tls.maxVersion" style="width: 60px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.tls.maxVersion" style="width: 60px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -57,7 +57,7 @@
     </a-form-item>
     <a-form-item label="uTLS">
         <a-select v-model="inbound.stream.tls.settings.fingerprint"
-                  style="width: 170px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                  style="width: 170px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <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>
@@ -145,9 +145,9 @@
     <a-form-item label="xVer">
         <a-input-number v-model="inbound.stream.reality.xver" :min="0" style="width: 60px"></a-input-number>
     </a-form-item>
-    <a-form-item label="uTLS" >
+    <a-form-item label="uTLS">
         <a-select v-model="inbound.stream.reality.settings.fingerprint" 
-                    style="width: 135px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    style="width: 135px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -169,7 +169,7 @@
     <a-form-item label="Public Key">
         <a-input v-model.trim="inbound.stream.reality.settings.publicKey" style="width: 300px"></a-input>
     </a-form-item>
-    <a-form-item >
+    <a-form-item>
         <a-button type="primary" icon="import" @click="getNewX25519Cert">Get New Key</a-button>
     </a-form-item>
 </a-form>

web/html/xui/inbound_client_table.html

@@ -29,10 +29,12 @@
     <a-tag v-if="!isClientEnabled(record, client.email)" color="red">{{ i18n "depleted" }}</a-tag>
 </template>                                    
 <template slot="traffic" slot-scope="text, client">
-    <a-tag color="blue">[[ sizeFormat(getUpStats(record, client.email)) ]] / [[ sizeFormat(getDownStats(record, client.email)) ]]</a-tag>
+    <a-tag color="blue">
+        [[ sizeFormat(getUpStats(record, client.email)) ]] / [[ sizeFormat(getDownStats(record, client.email)) ]]
+    </a-tag>
     <template v-if="client._totalGB > 0">
-        <a-tag v-if="isTrafficExhausted(record, client.email)" color="red">[[client._totalGB]]GB</a-tag>
-        <a-tag v-else color="cyan">[[client._totalGB]]GB</a-tag>
+        <a-tag v-if="isTrafficExhausted(record, client.email)" color="red">[[client._totalGB]] GB</a-tag>
+        <a-tag v-else color="cyan">[[client._totalGB]] GB</a-tag>
     </template>
     <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
 </template>                                    
@@ -42,7 +44,9 @@
             [[ DateUtil.formatMillis(client._expiryTime) ]]
         </a-tag>
     </template>
-    <a-tag v-else-if="client.expiryTime < 0" color="cyan">[[ client._expiryTime ]] {{ i18n "pages.client.days" }}</a-tag>
+    <a-tag v-else-if="client.expiryTime < 0" color="cyan">
+        [[ client._expiryTime ]] {{ i18n "pages.client.days" }}
+    </a-tag>
     <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
 </template>
 {{end}}

web/html/xui/inbound_info_modal.html

@@ -3,62 +3,66 @@
     v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
     :closable="true"
     :mask-closable="true"
-    :class="siderDrawer.isDarkTheme ? darkClass : ''"
+    :class="themeSwitcher.darkCardClass"
     :footer="null"
     width="600px"
     >
     <table style="margin-bottom: 10px; width: 100%;">
-        <tr><td>
-            <table>
-                <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="green">[[ dbInbound.protocol ]]</a-tag></td></tr>
-                <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag color="blue">[[ dbInbound.address ]]</a-tag></td></tr>
-                <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag color="green">[[ 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 v-if="inbound.host"><td>{{ i18n "host" }}</td><td><a-tag color="green">[[ inbound.host ]]</a-tag></td></tr>
-                <tr v-else><td>{{ i18n "host" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
-            
-                <tr v-if="inbound.path"><td>{{ i18n "path" }}</td><td><a-tag color="green">[[ inbound.path ]]</a-tag></td></tr>
-                <tr v-else><td>{{ i18n "path" }}</td><td><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 color="green">[[ inbound.quicSecurity ]]</a-tag></td></tr>
-                <tr><td>quic {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.quicKey ]]</a-tag></td></tr>
-                <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag color="green">[[ inbound.quicType ]]</a-tag></td></tr>
-            </template>
-            
-            <template v-if="inbound.isKcp">
-                <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.kcpType ]]</a-tag></td></tr>
-                <tr><td>kcp {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></td></tr>
-            </template>
-            
-            <template v-if="inbound.isGrpc">
-                <tr><td>grpc serviceName</td><td><a-tag color="green">[[ inbound.serviceName ]]</a-tag></td></tr>
-                <tr><td>grpc multiMode</td><td><a-tag color="green">[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
-            </template>
-            </table>
-        </td></tr>
-            <tr colspan="2" v-if="dbInbound.hasLink()">
-                <td v-if="inbound.tls">
-                    tls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
-                    tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-                </td>
-                <td v-else-if="inbound.xtls">
-                    xtls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
-                    xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-                </td>
-                <td v-else-if="inbound.reality">
-                    reality: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
-                    reality {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-                </td>
-                <td v-else>tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag>
+        <tr>
+            <td>
+                <table>
+                    <tr><td>{{ i18n "protocol" }}</td><td><a-tag color="green">[[ dbInbound.protocol ]]</a-tag></td></tr>
+                    <tr><td>{{ i18n "pages.inbounds.address" }}</td><td><a-tag color="blue">[[ dbInbound.address ]]</a-tag></td></tr>
+                    <tr><td>{{ i18n "pages.inbounds.port" }}</td><td><a-tag color="green">[[ 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 v-if="inbound.host"><td>{{ i18n "host" }}</td><td><a-tag color="green">[[ inbound.host ]]</a-tag></td></tr>
+                        <tr v-else><td>{{ i18n "host" }}</td><td><a-tag color="orange">{{ i18n "none" }}</a-tag></td></tr>
+
+                        <tr v-if="inbound.path"><td>{{ i18n "path" }}</td><td><a-tag color="green">[[ inbound.path ]]</a-tag></td></tr>
+                        <tr v-else><td>{{ i18n "path" }}</td><td><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 color="green">[[ inbound.quicSecurity ]]</a-tag></td></tr>
+                        <tr><td>quic {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.quicKey ]]</a-tag></td></tr>
+                        <tr><td>quic {{ i18n "camouflage" }}</td><td><a-tag color="green">[[ inbound.quicType ]]</a-tag></td></tr>
+                    </template>
+
+                    <template v-if="inbound.isKcp">
+                        <tr><td>kcp {{ i18n "encryption" }}</td><td><a-tag color="green">[[ inbound.kcpType ]]</a-tag></td></tr>
+                        <tr><td>kcp {{ i18n "password" }}</td><td><a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></td></tr>
+                    </template>
+
+                    <template v-if="inbound.isGrpc">
+                        <tr><td>grpc serviceName</td><td><a-tag color="green">[[ inbound.serviceName ]]</a-tag></td></tr>
+                        <tr><td>grpc multiMode</td><td><a-tag color="green">[[ inbound.stream.grpc.multiMode ]]</a-tag></td></tr>
+                    </template>
+                </table>
+            </td>
+        </tr>
+        <tr colspan="2" v-if="dbInbound.hasLink()">
+            <td v-if="inbound.tls">
+                tls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
+                tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+            </td>
+            <td v-else-if="inbound.xtls">
+                xtls: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
+                xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+            </td>
+            <td v-else-if="inbound.reality">
+                reality: <a-tag color="green">{{ i18n "enabled" }}</a-tag><br />
+                reality {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
+            </td>
+            <td v-else>
+                tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag>
             </td>
         </tr>
     </table>
@@ -110,6 +114,7 @@
         <tr v-if="infoModal.clientSettings.subId">
             <td>Subscription link</td>
             <td><a :href="[[ subBase + infoModal.clientSettings.subId ]]" target="_blank">[[ subBase + infoModal.clientSettings.subId ]]</a></td>
+            <td><a-icon id="copy-sub-link" type="snippets" @click="copyToClipboard('copy-sub-link', subBase + infoModal.clientSettings.subId)"></a-icon></td>
         </tr>
         <tr v-if="infoModal.clientSettings.tgId">
             <td>Telegram ID</td>
@@ -124,7 +129,8 @@
                 <th>{{ i18n "encryption" }}</th>
                 <th>{{ i18n "password" }}</th>
                 <th>{{ i18n "pages.inbounds.network" }}</th>
-            </tr><tr>
+            </tr>
+            <tr>
                 <td><a-tag color="green">[[ inbound.settings.method ]]</a-tag></td>
                 <td><a-tag color="blue">[[ inbound.settings.password ]]</a-tag></td>
                 <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
@@ -136,7 +142,8 @@
                 <th>{{ i18n "pages.inbounds.destinationPort" }}</th>
                 <th>{{ i18n "pages.inbounds.network" }}</th>
                 <th>FollowRedirect</th>
-            </tr><tr>
+            </tr>
+            <tr>
                 <td><a-tag color="green">[[ inbound.settings.address ]]</a-tag></td>
                 <td><a-tag color="blue">[[ inbound.settings.port ]]</a-tag></td>
                 <td><a-tag color="green">[[ inbound.settings.network ]]</a-tag></td>
@@ -149,15 +156,18 @@
                 <th>{{ i18n "password" }} Auth</th>
                 <th>{{ i18n "pages.inbounds.enable" }} udp</th>
                 <th>IP</th>
-            </tr><tr>
+            </tr>
+            <tr>
                 <td><a-tag color="green">[[ inbound.settings.auth ]]</a-tag></td>
                 <td><a-tag color="blue">[[ inbound.settings.udp]]</a-tag></td>
                 <td><a-tag color="green">[[ inbound.settings.ip ]]</a-tag></td>
-            </tr><tr v-if="inbound.settings.auth == 'password'">
+            </tr>
+            <tr v-if="inbound.settings.auth == 'password'">
                 <td> </td>
                 <td>{{ i18n "username" }}</td>
                 <td>{{ i18n "password" }}</td>
-            </tr><tr v-for="account,index in inbound.settings.accounts">
+            </tr>
+            <tr v-for="account,index in inbound.settings.accounts">
                 <td><a-tag color="green">[[ index ]]</a-tag></td>
                 <td><a-tag color="blue">[[ account.user ]]</a-tag></td>
                 <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
@@ -169,7 +179,8 @@
                 <th> </th>
                 <th>{{ i18n "username" }}</th>
                 <th>{{ i18n "password" }}</th>
-            </tr><tr v-for="account,index in inbound.settings.accounts">
+            </tr>
+            <tr v-for="account,index in inbound.settings.accounts">
                 <td><a-tag color="green">[[ index ]]</a-tag></td>
                 <td><a-tag color="blue">[[ account.user ]]</a-tag></td>
                 <td><a-tag color="green">[[ account.pass ]]</a-tag></td>
@@ -180,10 +191,11 @@
     <div v-if="dbInbound.hasLink()">
         <a-divider>URL</a-divider>
         <p>[[ infoModal.link ]]</p>
-        <button class="ant-btn ant-btn-primary" id="copy-url-link"><a-icon type="snippets"></a-icon>{{ i18n "copy" }}</button>
+        <button class="ant-btn ant-btn-primary" id="copy-url-link" @click="copyToClipboard('copy-url-link', infoModal.link)"><a-icon type="snippets"></a-icon>{{ i18n "copy" }}</button>
     </div>
 </a-modal>
 <script>
+
     const infoModal = {
         visible: false,
         inbound: new Inbound(),
@@ -207,14 +219,6 @@
             this.isExpired = this.inbound.isExpiry(index);
             this.clientStats = this.settings.clients ? this.dbInbound.clientStats.find(row => row.email === this.clientSettings.email) : [];
             this.visible = true;
-            infoModalApp.$nextTick(() => {
-                if (this.clipboard === null) {
-                    this.clipboard = new ClipboardJS('#copy-url-link', {
-                        text: () => this.link,
-                    });
-                    this.clipboard.on('success', () => app.$message.success('{{ i18n "copied" }}'));
-                }
-            });
         },
         close() {
             infoModal.visible = false;
@@ -233,42 +237,41 @@
                 return this.infoModal.inbound;
             },
             get isActive() {
-                if(infoModal.clientStats){
+                if (infoModal.clientStats) {
                     return infoModal.clientStats.enable;
                 }
                 return infoModal.dbInbound.isEnable;
             },
             get isEnable() {
-                if(infoModal.clientSettings){
+                if (infoModal.clientSettings) {
                     return infoModal.clientSettings.enable;
                 }
                 return infoModal.dbInbound.isEnable;
             },
             get subBase() {
-                return window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port:"") + basePath + "sub/";
+                return window.location.protocol + "//" + window.location.hostname + (window.location.port ? ":" + window.location.port : "") + basePath + "sub/";
             },
             get tgBase() {
                 return "https://t.me/"
             },
         },
         methods: {
-            copyTextToClipboard(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();
                 });
             },
             statsColor(stats) {
-                if(!stats) return 'blue'
-                if(stats['total'] === 0) return 'blue'
-                else if(stats['total'] > 0 && (stats['down']+stats['up']) < stats['total']) return 'cyan'
+                if (!stats) return 'blue'
+                if (stats['total'] === 0) return 'blue'
+                else if (stats['total'] > 0 && (stats['down'] + stats['up']) < stats['total']) return 'cyan'
                 else return 'red'
             }
         },
-        
     });
 
 </script>

web/html/xui/inbound_modal.html

@@ -1,7 +1,7 @@
 {{define "inboundModal"}}
 <a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title" @ok="inModal.ok"
          :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
-         :class="siderDrawer.isDarkTheme ? darkClass : ''"
+         :class="themeSwitcher.darkCardClass"
          :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/inbound"}}
 </a-modal>
@@ -19,7 +19,7 @@
         ok() {
             ObjectUtil.execute(inModal.confirm, inModal.inbound, inModal.dbInbound);
         },
-        show({ title='', okText='{{ i18n "sure" }}', inbound=null, dbInbound=null, confirm=(inbound, dbInbound)=>{}, isEdit=false  }) {
+        show({ title = '', okText = '{{ i18n "sure" }}', inbound = null, dbInbound = null, confirm = (inbound, dbInbound) => {}, isEdit = false }) {
             this.title = title;
             this.okText = okText;
             if (inbound) {
@@ -44,7 +44,7 @@
             inModal.confirmLoading = loading;
         },
         getClients(protocol, clientSettings) {
-            switch(protocol){
+            switch (protocol) {
                 case Protocols.VMESS: return clientSettings.vmesses;
                 case Protocols.VLESS: return clientSettings.vlesses;
                 case Protocols.TROJAN: return clientSettings.trojans;
@@ -87,7 +87,7 @@
             get delayedExpireDays() {
                 return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
             },
-            set delayedExpireDays(days){
+            set delayedExpireDays(days) {
                 this.client.expiryTime = -86400000 * days;
             },
         },
@@ -100,15 +100,15 @@
                     this.inModal.inbound.reality = false;
                 }
             },
-            setDefaultCertData(){
+            setDefaultCertData() {
                 inModal.inbound.stream.tls.certs[0].certFile = app.defaultCert;
                 inModal.inbound.stream.tls.certs[0].keyFile = app.defaultKey;
             },
-            setDefaultCertXtls(){
+            setDefaultCertXtls() {
                 inModal.inbound.stream.xtls.certs[0].certFile = app.defaultCert;
                 inModal.inbound.stream.xtls.certs[0].keyFile = app.defaultKey;
             },
-            async getNewX25519Cert(){
+            async getNewX25519Cert() {
                 inModal.loading(true);
                 const msg = await HttpUtil.post('/server/getNewX25519Cert');
                 inModal.loading(false);
@@ -117,15 +117,6 @@
                 }
                 inModal.inbound.stream.reality.privateKey = msg.obj.privateKey;
                 inModal.inbound.stream.reality.settings.publicKey = msg.obj.publicKey;
-            },
-            getNewEmail(client) {
-                var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
-                var string = '';
-                var len = 6 + Math.floor(Math.random() * 5);
-                for(var ii=0; ii<len; ii++){
-                    string += chars[Math.floor(Math.random() * chars.length)];
-                }
-                client.email = string;
             }
         },
     });

web/html/xui/inbounds.html

@@ -12,10 +12,11 @@
         margin-top: 10px;
     }
 </style>
+
 <body>
 <a-layout id="app" v-cloak>
     {{ template "commonSider" . }}
-    <a-layout id="content-layout" :style="siderDrawer.isDarkTheme ? bgDarkStyle : ''">
+    <a-layout id="content-layout" :style="themeSwitcher.bgStyle">
         <a-layout-content>
             <a-spin :spinning="spinning" :delay="500" tip="loading">
                 <transition name="list" appear>
@@ -24,7 +25,7 @@
                     </a-tag>
                 </transition>
                 <transition name="list" appear>
-                    <a-card hoverable style="margin-bottom: 20px;" :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                    <a-card hoverable style="margin-bottom: 20px;" :class="themeSwitcher.darkCardClass">
                         <a-row>
                             <a-col :xs="24" :sm="24" :lg="12">
                                 {{ i18n "pages.inbounds.totalDownUp" }}:
@@ -41,19 +42,19 @@
                             <a-col :xs="24" :sm="24" :lg="12">
                                 {{ i18n "clients" }}:
                                 <a-tag color="green">[[ total.clients ]]</a-tag>
-                                <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.deactive">[[ clientEmail ]]</p>
                                     </template>
                                     <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.depleted">[[ clientEmail ]]</p>
                                     </template>
                                     <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
                                     </template>
@@ -64,14 +65,14 @@
                     </a-card>
                 </transition>
                 <transition name="list" appear>
-                    <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                    <a-card hoverable :class="themeSwitcher.darkCardClass">
                         <div slot="title">
                             <a-row>
                                 <a-col :xs="24" :sm="24" :lg="12">
                                     <a-button type="primary" icon="plus" @click="openAddInbound">{{ i18n "pages.inbounds.addInbound" }}</a-button>
                                     <a-dropdown :trigger="['click']">
                                         <a-button type="primary" icon="menu">{{ i18n "pages.inbounds.generalActions" }}</a-button>
-                                        <a-menu slot="overlay" @click="a => generalActions(a)" :theme="siderDrawer.theme">
+                                        <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
                                             <a-menu-item key="export">
                                                 <a-icon type="export"></a-icon>
                                                 {{ i18n "pages.inbounds.export" }}
@@ -96,7 +97,7 @@
                                               style="width: 65px;"
                                               v-if="isRefreshEnabled"
                                               @change="changeRefreshInterval"
-                                              :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                                              :dropdown-class-name="themeSwitcher.darkCardClass">
                                         <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
                                     </a-select>
                                     <a-icon type="sync" :spin="refreshing" @click="manualRefresh" style="margin: 0 5px;"></a-icon>
@@ -115,7 +116,7 @@
                                 <a-icon type="edit" style="font-size: 22px" @click="openEditInbound(dbInbound.id);"></a-icon>
                                 <a-dropdown :trigger="['click']">
                                     <a @click="e => e.preventDefault()">{{ i18n "pages.inbounds.operate" }}</a>
-                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="siderDrawer.theme">
+                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
                                         <a-menu-item key="edit">
                                             <a-icon type="edit"></a-icon>
                                             {{ i18n "edit" }}
@@ -174,19 +175,19 @@
                             <template slot="clients" slot-scope="text, dbInbound">
                                 <template v-if="clientCount[dbInbound.id]">
                                     <a-tag style="margin:0;" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
-                                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title='{{ i18n "disabled" }}' :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
                                         </template>
                                         <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                                     </a-popover>
-                                    <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title='{{ i18n "depleted" }}' :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
                                         </template>
                                         <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                                     </a-popover>
-                                    <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title='{{ i18n "depletingSoon" }}' :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
                                         </template>
@@ -244,6 +245,7 @@
     </a-layout>
 </a-layout>
 {{template "js" .}}
+{{template "component/themeSwitcher" .}}
 <script>
 
     const columns = [{
@@ -316,6 +318,7 @@
         el: '#app',
         data: {
             siderDrawer,
+            themeSwitcher,
             spinning: false,
             inbounds: [],
             dbInbounds: [],
@@ -331,20 +334,22 @@
             refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
         },
         methods: {
-            loading(spinning=true) {
+            loading(spinning = true) {
                 this.spinning = spinning;
             },
             async getDBInbounds() {
                 this.refreshing = true;
-                const msg = await HttpUtil.post('/xui/inbound/list');
+                const msg = await HttpUtil.post('/panel/inbound/list');
                 if (!msg.success) {
                     return;
                 }
                 this.setInbounds(msg.obj);
-                this.refreshing = false;
+                setTimeout(() => {
+                    this.refreshing = false;
+                }, 500);
             },
             async getDefaultSettings() {
-                const msg = await HttpUtil.post('/xui/setting/defaultSettings');
+                const msg = await HttpUtil.post('/panel/setting/defaultSettings');
                 if (!msg.success) {
                     return;
                 }
@@ -361,29 +366,29 @@
                     to_inbound = dbInbound.toInbound()
                     this.inbounds.push(to_inbound);
                     this.dbInbounds.push(dbInbound);
-                    if([Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN].includes(inbound.protocol) ){
-                        this.clientCount[inbound.id] = this.getClientCounts(inbound,to_inbound);
+                    if ([Protocols.VMESS, Protocols.VLESS, Protocols.TROJAN].includes(inbound.protocol)) {
+                        this.clientCount[inbound.id] = this.getClientCounts(inbound, to_inbound);
                     }
                 }
                 this.searchInbounds(this.searchKey);
             },
-            getClientCounts(dbInbound,inbound){
-                let clientCount = 0,active = [], deactive = [], depleted = [], expiring = [];
+            getClientCounts(dbInbound, inbound) {
+                let clientCount = 0, active = [], deactive = [], depleted = [], expiring = [];
                 clients = this.getClients(dbInbound.protocol, inbound.settings);
                 clientStats = dbInbound.clientStats
                 now = new Date().getTime()
-                if(clients){
+                if (clients) {
                     clientCount = clients.length;
-                    if(dbInbound.enable){
+                    if (dbInbound.enable) {
                         clients.forEach(client => {
                             client.enable ? active.push(client.email) : deactive.push(client.email);
                         });
                         clientStats.forEach(client => {
-                            if(!client.enable) {
+                            if (!client.enable) {
                                 depleted.push(client.email);
                             } else {
-                                if ((client.expiryTime > 0 && (client.expiryTime-now < this.expireDiff)) ||
-                                (client.total > 0 && (client.total-(client.up+client.down) < this.trafficDiff ))) expiring.push(client.email);
+                                if ((client.expiryTime > 0 && (client.expiryTime - now < this.expireDiff)) ||
+                                    (client.total > 0 && (client.total - (client.up + client.down) < this.trafficDiff))) expiring.push(client.email);
                             }
                         });
                     } else {
@@ -409,10 +414,10 @@
                         if (ObjectUtil.deepSearch(inbound, key)) {
                             const newInbound = new DBInbound(inbound);
                             const inboundSettings = JSON.parse(inbound.settings);
-                            if (inboundSettings.hasOwnProperty('clients')){
+                            if (inboundSettings.hasOwnProperty('clients')) {
                                 const searchedSettings = { "clients": [] };
                                 inboundSettings.clients.forEach(client => {
-                                    if (ObjectUtil.deepSearch(client, key)){
+                                    if (ObjectUtil.deepSearch(client, key)) {
                                         searchedSettings.clients.push(client);
                                     }
                                 });
@@ -423,7 +428,7 @@
                     });
                 }
             },
-            generalActions(action){
+            generalActions(action) {
                 switch (action.key) {
                     case "export":
                         this.exportAllLinks();
@@ -476,7 +481,7 @@
                         break;
                 }
             },
-			openCloneInbound(dbInbound) {
+            openCloneInbound(dbInbound) {
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.cloneInbound"}} \"' + dbInbound.remark + '\"',
                     content: '{{ i18n "pages.inbounds.cloneInboundContent"}}',
@@ -491,7 +496,6 @@
                 });
             },
             async cloneInbound(baseInbound, dbInbound) {
-                const inbound = new Inbound();
                 const data = {
                     up: dbInbound.up,
                     down: dbInbound.down,
@@ -500,14 +504,14 @@
                     enable: dbInbound.enable,
                     expiryTime: dbInbound.expiryTime,
 
-                    listen: inbound.listen,
-                    port: inbound.port,
+                    listen: '',
+                    port: RandomUtil.randomIntRange(10000, 60000),
                     protocol: baseInbound.protocol,
-                    settings: inbound.settings.toString(),
+                    settings: Inbound.Settings.getSettings(baseInbound.protocol).toString(),
                     streamSettings: baseInbound.stream.toString(),
                     sniffing: baseInbound.canSniffing() ? baseInbound.sniffing.toString() : '{}',
                 };
-                await this.submit('/xui/inbound/add', data, inModal);
+                await this.submit('/panel/inbound/add', data, inModal);
             },
             openAddInbound() {
                 inModal.show({
@@ -556,7 +560,7 @@
                 if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
                 if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();
 
-                await this.submit('/xui/inbound/add', data, inModal);
+                await this.submit('/panel/inbound/add', data, inModal);
             },
             async updateInbound(inbound, dbInbound) {
                 const data = {
@@ -575,7 +579,7 @@
                 if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
                 if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();
 
-                await this.submit(`/xui/inbound/update/${dbInbound.id}`, data, inModal);
+                await this.submit(`/panel/inbound/update/${dbInbound.id}`, data, inModal);
             },
             openAddClient(dbInboundId) {
                 dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
@@ -621,30 +625,30 @@
                     isEdit: true
                 });
             },
-            findIndexOfClient(clients,client) {
+            findIndexOfClient(clients, client) {
                 firstKey = Object.keys(client)[0];
                 return clients.findIndex(c => c[firstKey] === client[firstKey]);
             },
             async addClient(clients, dbInboundId) {
                 const data = {
                     id: dbInboundId,
-                    settings: '{"clients": [' + clients.toString() +']}',
+                    settings: '{"clients": [' + clients.toString() + ']}',
                 };
-                await this.submit(`/xui/inbound/addClient`, data);
+                await this.submit(`/panel/inbound/addClient`, data);
             },
             async updateClient(client, dbInboundId, clientId) {
                 const data = {
                     id: dbInboundId,
-                    settings: '{"clients": [' + client.toString() +']}',
+                    settings: '{"clients": [' + client.toString() + ']}',
                 };
-                await this.submit(`/xui/inbound/updateClient/${clientId}`, data);
+                await this.submit(`/panel/inbound/updateClient/${clientId}`, data);
             },
             resetTraffic(dbInboundId) {
                 dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                     content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: () => {
@@ -659,26 +663,26 @@
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.deleteInbound"}}',
                     content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "delete"}}',
                     cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit('/xui/inbound/del/' + dbInboundId),
+                    onOk: () => this.submit('/panel/inbound/del/' + dbInboundId),
                 });
             },
-            delClient(dbInboundId,client) {
+            delClient(dbInboundId, client) {
                 dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
-                clientId = this.getClientId(dbInbound.protocol,client);
+                clientId = this.getClientId(dbInbound.protocol, client);
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.deleteInbound"}}',
                     content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "delete"}}',
                     cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit(`/xui/inbound/${dbInboundId}/delClient/${clientId}`),
+                    onOk: () => this.submit(`/panel/inbound/${dbInboundId}/delClient/${clientId}`),
                 });
             },
             getClients(protocol, clientSettings) {
-                switch(protocol){
+                switch (protocol) {
                     case Protocols.VMESS: return clientSettings.vmesses;
                     case Protocols.VLESS: return clientSettings.vlesses;
                     case Protocols.TROJAN: return clientSettings.trojans;
@@ -687,22 +691,23 @@
                 }
             },
             getClientId(protocol, client) {
-                switch(protocol){
+                switch (protocol) {
                     case Protocols.TROJAN: return client.password;
                     case Protocols.SHADOWSOCKS: return client.email;
                     default: return client.id;
                 }
             },
             showQrcode(dbInbound, clientIndex) {
+                const clientName = JSON.parse(dbInbound.settings).clients[clientIndex].email;
                 const link = dbInbound.genLink(clientIndex);
-                qrModal.show('{{ i18n "qrCode"}}', link, dbInbound);
+                qrModal.show('{{ i18n "qrCode"}}', link, dbInbound, '', clientName);
             },
             showInfo(dbInbound, index) {
                 infoModal.show(dbInbound, index);
             },
             switchEnable(dbInboundId) {
                 dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
-                this.submit(`/xui/inbound/update/${dbInboundId}`, dbInbound);
+                this.submit(`/panel/inbound/update/${dbInboundId}`, dbInbound);
             },
             async switchEnableClient(dbInboundId, client) {
                 this.loading()
@@ -711,8 +716,8 @@
                 clients = this.getClients(dbInbound.protocol, inbound.settings);
                 index = this.findIndexOfClient(clients, client);
                 clients[index].enable = !clients[index].enable;
-                clientId = this.getClientId(dbInbound.protocol,clients[index]);
-                await this.updateClient(clients[index],dbInboundId, clientId);
+                clientId = this.getClientId(dbInbound.protocol, clients[index]);
+                await this.updateClient(clients[index], dbInboundId, clientId);
                 this.loading(false);
             },
             async submit(url, data) {
@@ -722,71 +727,71 @@
                 }
             },
             getInboundClients(dbInbound) {
-                if(dbInbound.protocol == Protocols.VLESS) {
+                if (dbInbound.protocol == Protocols.VLESS) {
                     return dbInbound.toInbound().settings.vlesses;
-                } else if(dbInbound.protocol == Protocols.VMESS) {
+                } else if (dbInbound.protocol == Protocols.VMESS) {
                     return dbInbound.toInbound().settings.vmesses;
-                } else if(dbInbound.protocol == Protocols.TROJAN) {
+                } else if (dbInbound.protocol == Protocols.TROJAN) {
                     return dbInbound.toInbound().settings.trojans;
-                } else if(dbInbound.protocol == Protocols.SHADOWSOCKS) {
+                } else if (dbInbound.protocol == Protocols.SHADOWSOCKS) {
                     return dbInbound.toInbound().settings.shadowsockses;
                 }
             },
-            resetClientTraffic(client,dbInboundId) {
+            resetClientTraffic(client, dbInboundId) {
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                     content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit('/xui/inbound/' + dbInboundId + '/resetClientTraffic/'+ client.email),
+                    onOk: () => this.submit('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email),
                 })
             },
             resetAllTraffic() {
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.resetAllTrafficTitle"}}',
                     content: '{{ i18n "pages.inbounds.resetAllTrafficContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit('/xui/inbound/resetAllTraffics'),
+                    onOk: () => this.submit('/panel/inbound/resetAllTraffics'),
                 });
             },
             resetAllClientTraffics(dbInboundId) {
                 this.$confirm({
-                    title: dbInboundId>0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficTitle"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficTitle"}}',
-                    content: dbInboundId>0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficContent"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    title: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficTitle"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficTitle"}}',
+                    content: dbInboundId > 0 ? '{{ i18n "pages.inbounds.resetInboundClientTrafficContent"}}' : '{{ i18n "pages.inbounds.resetAllClientTrafficContent"}}',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit('/xui/inbound/resetAllClientTraffics/' + dbInboundId),
+                    onOk: () => this.submit('/panel/inbound/resetAllClientTraffics/' + dbInboundId),
                 })
             },
             delDepletedClients(dbInboundId) {
                 this.$confirm({
                     title: '{{ i18n "pages.inbounds.delDepletedClientsTitle"}}',
                     content: '{{ i18n "pages.inbounds.delDepletedClientsContent"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     okText: '{{ i18n "reset"}}',
                     cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit('/xui/inbound/delDepletedClients/' + dbInboundId),
+                    onOk: () => this.submit('/panel/inbound/delDepletedClients/' + dbInboundId),
                 })
             },
             isExpiry(dbInbound, index) {
                 return dbInbound.toInbound().isExpiry(index)
             },
             getUpStats(dbInbound, email) {
-                if(email.length == 0) return 0
+                if (email.length == 0) return 0
                 clientStats = dbInbound.clientStats.find(stats => stats.email === email)
                 return clientStats ? clientStats.up : 0
             },
             getDownStats(dbInbound, email) {
-                if(email.length == 0) return 0
+                if (email.length == 0) return 0
                 clientStats = dbInbound.clientStats.find(stats => stats.email === email)
                 return clientStats ? clientStats.down : 0
             },
             isTrafficExhausted(dbInbound, email) {
-                if(email.length == 0) return false
+                if (email.length == 0) return false
                 clientStats = dbInbound.clientStats.find(stats => stats.email === email)
                 return clientStats ? clientStats.down + clientStats.up > clientStats.total : false
             },
@@ -794,28 +799,28 @@
                 clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null
                 return clientStats ? clientStats['enable'] : true
             },
-            isRemovable(dbInbound_id){
+            isRemovable(dbInbound_id) {
                 return this.getInboundClients(this.dbInbounds.find(row => row.id === dbInbound_id)).length > 1
             },
             inboundLinks(dbInboundId) {
                 dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
-                txtModal.show('{{ i18n "pages.inbounds.export"}}',dbInbound.genInboundLinks,dbInbound.remark);
+                txtModal.show('{{ i18n "pages.inbounds.export"}}', dbInbound.genInboundLinks, dbInbound.remark);
             },
-			exportAllLinks() {
+            exportAllLinks() {
                 let copyText = '';
                 for (const dbInbound of this.dbInbounds) {
                     copyText += dbInbound.genInboundLinks
                 }
-                txtModal.show('{{ i18n "pages.inbounds.export"}}',copyText,'All-Inbounds');
+                txtModal.show('{{ i18n "pages.inbounds.export"}}', copyText, 'All-Inbounds');
             },
             async startDataRefreshLoop() {
                 while (this.isRefreshEnabled) {
-                try {
-                    await this.getDBInbounds();
-                } catch (e) {
-                    console.error(e);
-                }
-                await PromiseUtil.sleep(this.refreshInterval);
+                    try {
+                        await this.getDBInbounds();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                    await PromiseUtil.sleep(this.refreshInterval);
                 }
             },
             toggleRefresh() {
@@ -824,11 +829,11 @@
                     this.startDataRefreshLoop();
                 }
             },
-            changeRefreshInterval(){
+            changeRefreshInterval() {
                 localStorage.setItem("refreshInterval", this.refreshInterval);
             },
-            async manualRefresh(){
-                if(!this.refreshing){
+            async manualRefresh() {
+                if (!this.refreshing) {
                     this.spinning = true;
                     await this.getDBInbounds();
                     this.spinning = false;
@@ -876,6 +881,7 @@
             }
         },
     });
+
 </script>
 
 {{template "inboundModal"}}
@@ -885,5 +891,6 @@
 {{template "inboundInfoModal"}}
 {{template "clientsModal"}}
 {{template "clientsBulkModal"}}
+
 </body>
 </html>

web/html/xui/index.html

@@ -13,32 +13,33 @@
     }
 
     .ant-card-dark h2 {
-        color: hsla(0,0%,100%,.65);
+        color: hsla(0, 0%, 100%, .65);
     }
 </style>
+
 <body>
 <a-layout id="app" v-cloak>
     {{ template "commonSider" . }}
-    <a-layout id="content-layout" :style="siderDrawer.isDarkTheme ? bgDarkStyle : ''">
+    <a-layout id="content-layout" :style="themeSwitcher.bgStyle">
         <a-layout-content>
             <a-spin :spinning="spinning" :delay="200" :tip="loadingTip"/>
             <transition name="list" appear>
                 <a-row>
-                    <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                    <a-card hoverable :class="themeSwitcher.darkCardClass">
                         <a-row>
                             <a-col :sm="24" :md="12">
                                 <a-row>
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.cpu.color"
-                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
+                                                    :class="themeSwitcher.darkCardClass"
                                                     :percent="status.cpu.percent"></a-progress>
                                         <div>CPU</div>
                                     </a-col>
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.mem.color"
-                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
+                                                    :class="themeSwitcher.darkCardClass"
                                                     :percent="status.mem.percent"></a-progress>
                                         <div>
                                             {{ i18n "pages.index.memory"}}: [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
@@ -51,7 +52,7 @@
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.swap.color"
-                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
+                                                    :class="themeSwitcher.darkCardClass"
                                                     :percent="status.swap.percent"></a-progress>
                                         <div>
                                             Swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
@@ -60,7 +61,7 @@
                                     <a-col :span="12" style="text-align: center">
                                         <a-progress type="dashboard" status="normal"
                                                     :stroke-color="status.disk.color"
-                                                    :class="siderDrawer.isDarkTheme ? darkClass : ''"
+                                                    :class="themeSwitcher.darkCardClass"
                                                     :percent="status.disk.percent"></a-progress>
                                         <div>
                                             {{ i18n "pages.index.hard"}}: [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
@@ -75,14 +76,14 @@
             <transition name="list" appear>
                 <a-row>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                             3x-ui: <a href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
                             Xray: <a-tag color="green" style="cursor: pointer;" @click="openSelectV2rayVersion">v[[ status.xray.version ]]</a-tag>
                             Telegram: <a href="https://t.me/panel3xui" target="_blank"><a-tag color="green">@panel3xui</a-tag></a>
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                             {{ i18n "pages.index.operationHours" }}:
                             <a-tag color="green">[[ formatSecond(status.uptime) ]]</a-tag>
                             <a-tooltip>
@@ -94,7 +95,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                             {{ i18n "pages.index.xrayStatus" }}:
                             <a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag>
                             <a-tooltip v-if="status.xray.state === State.Error">
@@ -109,7 +110,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                             {{ i18n "menu.link" }}:
                             <a-tag color="blue" style="cursor: pointer;" @click="openLogs(20)">{{ i18n "pages.index.logs" }}</a-tag>
                             <a-tag color="blue" style="cursor: pointer;" @click="openConfig">{{ i18n "pages.index.config" }}</a-tag>
@@ -117,12 +118,12 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                             {{ i18n "pages.index.systemLoad" }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]]
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                             TCP / UDP {{ i18n "pages.index.connectionCount" }}: [[ status.tcpCount ]] / [[ status.udpCount ]]
                             <a-tooltip>
                                 <template slot="title">
@@ -133,7 +134,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                             <a-row>
                                 <a-col :span="12">
                                     <a-icon type="arrow-up"></a-icon>
@@ -159,7 +160,7 @@
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :md="12">
-                        <a-card hoverable :class="siderDrawer.isDarkTheme ? darkClass : ''">
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                             <a-row>
                                 <a-col :span="12">
                                     <a-icon type="cloud-upload"></a-icon>
@@ -191,7 +192,7 @@
 
     <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
              :closable="true" @ok="() => versionModal.visible = false"
-             :class="siderDrawer.isDarkTheme ? darkClass : ''"
+             :class="themeSwitcher.darkCardClass"
              footer="">
         <h2>{{ i18n "pages.index.xraySwitchClick"}}</h2>
         <h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2>
@@ -205,7 +206,7 @@
 
     <a-modal id="log-modal" v-model="logModal.visible" title="X-UI logs"
              :closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false"
-             :class="siderDrawer.isDarkTheme ? darkClass : ''"
+             :class="themeSwitcher.darkCardClass"
              width="800px"
              footer="">
         <a-form layout="inline">
@@ -213,7 +214,7 @@
                 <a-select v-model="logModal.rows"
                 style="width: 80px"
                 @change="openLogs(logModal.rows)"
-                :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                :dropdown-class-name="themeSwitcher.darkCardClass">
                     <a-select-option value="10">10</a-select-option>
                     <a-select-option value="20">20</a-select-option>
                     <a-select-option value="50">50</a-select-option>
@@ -235,13 +236,13 @@
     </a-modal>
 
     <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
-            :closable="true" :class="siderDrawer.isDarkTheme ? darkClass : ''"
+            :closable="true" :class="themeSwitcher.darkCardClass"
             @ok="() => backupModal.hide()" @cancel="() => backupModal.hide()">
         <p style="color: inherit; font-size: 16px; padding: 4px 2px;">
             <a-icon type="warning" style="color: inherit; font-size: 20px;"></a-icon>
             [[ backupModal.description ]]
         </p>
-        <a-space direction="horizontal" align="center" style="margin-bottom: 10px;">
+        <a-space direction="horizontal" style="text-align: center" style="margin-bottom: 10px;">
             <a-button type="primary" @click="exportDatabase()">
                 [[ backupModal.exportText ]]
             </a-button>
@@ -253,6 +254,7 @@
 
 </a-layout>
 {{template "js" .}}
+{{template "component/themeSwitcher" .}}
 {{template "textModal"}}
 <script>
 
@@ -295,13 +297,13 @@
             this.disk = new CurTotal(0, 0);
             this.loads = [0, 0, 0];
             this.mem = new CurTotal(0, 0);
-            this.netIO = {up: 0, down: 0};
-            this.netTraffic = {sent: 0, recv: 0};
+            this.netIO = { up: 0, down: 0 };
+            this.netTraffic = { sent: 0, recv: 0 };
             this.swap = new CurTotal(0, 0);
             this.tcpCount = 0;
             this.udpCount = 0;
             this.uptime = 0;
-            this.xray = {state: State.Stop, errorMsg: "", version: "", color: ""};
+            this.xray = { state: State.Stop, errorMsg: "", version: "", color: "" };
 
             if (data == null) {
                 return;
@@ -387,6 +389,7 @@
         el: '#app',
         data: {
             siderDrawer,
+            themeSwitcher,
             status: new Status(),
             versionModal,
             logModal,
@@ -422,7 +425,7 @@
                     title: '{{ i18n "pages.index.xraySwitchVersionDialog"}}',
                     content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}' + ` ${version}?`,
                     okText: '{{ i18n "confirm"}}',
-                    class: siderDrawer.isDarkTheme ? darkClass : '',
+                    class: themeSwitcher.darkCardClass,
                     cancelText: '{{ i18n "cancel"}}',
                     onOk: async () => {
                         versionModal.hide();
@@ -448,9 +451,9 @@
                     return;
                 }
             },
-            async openLogs(rows){
+            async openLogs(rows) {
                 this.loading(true);
-                const msg = await HttpUtil.post('server/logs/'+rows);
+                const msg = await HttpUtil.post('server/logs/' + rows);
                 this.loading(false);
                 if (!msg.success) {
                     return;
@@ -498,7 +501,7 @@
                             return;
                         }
                         this.loading(true);
-                        const restartMsg = await HttpUtil.post("/xui/setting/restartPanel");
+                        const restartMsg = await HttpUtil.post("/panel/setting/restartPanel");
                         this.loading(false);
                         if (restartMsg.success) {
                             this.loading(true);

web/service/server.go

@@ -179,7 +179,7 @@ func (s *ServerService) GetStatus(lastStatus *Status) *Status {
 }
 
 func (s *ServerService) GetXrayVersions() ([]string, error) {
-	url := "https://api.github.com/repos/mhsanaei/Xray-core/releases"
+	url := "https://api.github.com/repos/MHSanaei/Xray-core/releases"
 	resp, err := http.Get(url)
 	if err != nil {
 		return nil, err
@@ -246,7 +246,7 @@ func (s *ServerService) downloadXRay(version string) (string, error) {
 	}
 
 	fileName := fmt.Sprintf("Xray-%s-%s.zip", osName, arch)
-	url := fmt.Sprintf("https://github.com/mhsanaei/Xray-core/releases/download/%s/%s", version, fileName)
+	url := fmt.Sprintf("https://github.com/MHSanaei/Xray-core/releases/download/%s/%s", version, fileName)
 	resp, err := http.Get(url)
 	if err != nil {
 		return "", err

web/service/sub.go

@@ -38,7 +38,7 @@ func (s *SubService) GetSubs(subId string, host string) ([]string, string, error
 			continue
 		}
 		for _, client := range clients {
-			if client.SubID == subId {
+			if client.Enable && client.SubID == subId {
 				link := s.getLink(inbound, client.Email)
 				result = append(result, link)
 				clientTraffics = append(clientTraffics, s.getClientTraffics(inbound.ClientStats, client.Email))
@@ -73,7 +73,7 @@ func (s *SubService) GetSubs(subId string, host string) ([]string, string, error
 func (s *SubService) getInboundsBySubId(subId string) ([]*model.Inbound, error) {
 	db := database.GetDB()
 	var inbounds []*model.Inbound
-	err := db.Model(model.Inbound{}).Preload("ClientStats").Where("settings like ?", fmt.Sprintf(`%%"subId": "%s"%%`, subId)).Find(&inbounds).Error
+	err := db.Model(model.Inbound{}).Preload("ClientStats").Where("settings like ? and enable = ?", fmt.Sprintf(`%%"subId": "%s"%%`, subId), true).Find(&inbounds).Error
 	if err != nil && err != gorm.ErrRecordNotFound {
 		return nil, err
 	}

web/service/tgbot.go

@@ -381,6 +381,9 @@ func (t *Tgbot) SendAnswer(chatId int64, msg string, isAdmin bool) {
 }
 
 func (t *Tgbot) SendMsgToTgbot(tgid int64, msg string, inlineKeyboard ...tgbotapi.InlineKeyboardMarkup) {
+	if !isRunning {
+		return
+	}
 	var allMessages []string
 	limit := 2000
 	// paging message if it is big

web/translation/translate.en_US.toml

@@ -150,8 +150,6 @@
 "resetAllTrafficContent" = "Are you sure you want to reset all inbounds traffic?"
 "resetAllTrafficOkText" = "Confirm"
 "resetAllTrafficCancelText" = "Cancel"
-"IPLimit" = "IP Limit"
-"IPLimitDesc" = "Disable inbound if the count exceeds the entered value (enter 0 to disable IP limit)."
 "resetInboundClientTraffics" = "Reset Clients Traffic"
 "resetInboundClientTrafficTitle" = "Reset all client traffic"
 "resetInboundClientTrafficContent" = "Are you sure you want to reset all traffic for this inbound's clients?"
@@ -161,8 +159,10 @@
 "delDepletedClients" = "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."
+"email" = "Email"
+"emailDesc" = "Please provide a unique email address."
+"IPLimit" = "IP Limit"
+"IPLimitDesc" = "Disable inbound if the count exceeds the entered value (enter 0 to disable IP limit)."
 "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"
@@ -170,7 +170,7 @@
 "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 )"
-"subscriptionDesc" = "you can find your sub link on Details, also ou can use the same name for several configurations"
+"subscriptionDesc" = "you can find your sub link on Details, also you can use the same name for several configurations"
 
 [pages.client]
 "add" = "Add Client"
@@ -277,6 +277,8 @@
 "xrayConfigAdsDesc" = "Change the configuration template to block ads. Restart the panel to apply changes."
 "xrayConfigPorn" = "Block Porn Websites"
 "xrayConfigPornDesc" = "Change the configuration template to avoid connecting to porn websites. Restart the panel to apply changes."
+"xrayConfigSpeedtest" = "Block Speedtest Websites"
+"xrayConfigSpeedtestDesc" = "Change the configuration template to avoid connecting to speedtest websites. Restart the panel to apply changes."
 "xrayConfigIRIp" = "Disable connection to Iran IP ranges"
 "xrayConfigIRIpDesc" = "Change the configuration template to avoid connecting with Iran IP ranges. Restart the panel to apply changes."
 "xrayConfigIRDomain" = "Disable connection to Iran domains"

web/translation/translate.fa_IR.toml

@@ -157,10 +157,10 @@
 "delDepletedClients" = "حذف کاربران منقضی"
 "delDepletedClientsTitle" = "حذف کاربران منقضی"
 "delDepletedClientsContent" = "آیا مطمئن هستید مه میخواهید تمامی کاربران منقضی شده را حذف کنید؟"
+"email" = "ایمیل"
+"emailDesc" = "ایمیل باید کاملا منحصر به فرد باشد"
 "IPLimit" = "محدودیت ای پی"
 "IPLimitDesc" = "غیرفعال کردن ورودی در صورت بیش از تعداد وارد شده (0 برای غیرفعال کردن محدودیت ای پی )"
-"Email" = "ایمیل"
-"EmailDesc" = "ایمیل باید کاملا منحصر به فرد باشد"
 "IPLimitlog" = "گزارش ها"
 "IPLimitlogDesc" = "گزارش سابقه ای پی (قبل از فعال کردن ورودی پس از غیرفعال شدن توسط محدودیت ای پی، باید گزارش را پاک کنید)"
 "IPLimitlogclear" = "پاک کردن گزارش ها"
@@ -275,6 +275,8 @@
 "xrayConfigAdsDesc" = "الگوی تنظیمات را برای مسدود کردن تبلیغات تغییر میدهد.  پنل را مجدداً راه اندازی کنید تا اعمال شود"
 "xrayConfigPorn" = "جلوگیری از اتصال به سایت های پورن"
 "xrayConfigPornDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال به سایت های پورن تغییر میدهد.  پنل را مجدداً راه اندازی کنید تا اعمال شود"
+"xrayConfigSpeedtest" = "جلوگیری از اتصال به سایت های تست سرعت"
+"xrayConfigSpeedtestDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال به سایت های تست سرعت تغییر میدهد.  پنل را مجدداً راه اندازی کنید تا اعمال شود"
 "xrayConfigIRIp" = "جلوگیری از اتصال آیپی های ایران"
 "xrayConfigIRIpDesc" = "الگوی تنظیمات را برای فیلتر کردن اتصال آیپی های ایران تغییر میدهد.  پنل را مجدداً راه اندازی کنید تا اعمال شود"
 "xrayConfigIRDomain" = "جلوگیری از اتصال دامنه های ایران"

web/translation/translate.ru_RU.toml

@@ -0,0 +1,328 @@
+"username" = "имя пользователя"
+"password" = "пароль"
+"login" = "логин"
+"confirm" = "подтвердить"
+"cancel" = "отмена"
+"close" = "закрыть"
+"copy" = "копировать"
+"copied" = "скопировано"
+"download" = "скачать"
+"remark" = "примечание"
+"enable" = "включить"
+"protocol" = "протокол"
+"search" = "поиск"
+
+"loading" = "загрузка"
+"second" = "секунда"
+"minute" = "минута"
+"hour" = "час"
+"day" = "день"
+"check" = "просмотр"
+"indefinite" = "бессрочно"
+"unlimited" = "безлимитно"
+"none" = "пусто"
+"qrCode" = "QR-код"
+"info" = "больше информации"
+"edit" = "изменить"
+"delete" = "удалить"
+"reset" = "обнулить"
+"copySuccess" = "скопировано"
+"sure" = "да"
+"encryption" = "Шифрование"
+"transmission" = "протокол передачи"
+"host" = "хост"
+"path" = "путь"
+"camouflage" = "маскировка"
+"status" = "статус"
+"enabled" = "включено"
+"disabled" = "отключено"
+"depleted" = "исчерпано"
+"depletingSoon" = "почти исчерпано"
+"domainName" = "домен"
+"additional" = "допольнительно"
+"monitor" = "порт IP"
+"certificate" = "сертификат"
+"fail" = "неудача"
+"success" = "успешно"
+"getVersion" = "узнать версию"
+"install" = "установка"
+"clients" = "клиенты"
+"usage" = "использование"
+"secretToken" = "секретный токен"
+
+[menu]
+"dashboard" = "статус системы"
+"inbounds" = "пользователи"
+"settings" = "настройки"
+"logout" = "выход"
+"link" = "другое"
+
+[pages.login]
+"title" = "логин"
+"loginAgain" = "Время пребывания в сети вышло. Пожалуйста, войдите в систему снова."
+
+[pages.login.toasts]
+"invalidFormData" = "Недопустимый формат данных."
+"emptyUsername" = "Введите имя пользователя."
+"emptyPassword" = "Введите пароль."
+"wrongUsernameOrPassword" = "Неверное имя пользователя или пароль."
+"successLogin" = "успешный вход"
+
+[pages.index]
+"title" = "статус системы"
+"memory" = "память"
+"hard" = "жесткий диск"
+"xrayStatus" = "статус Xray"
+"stopXray" = "стоп"
+"restartXray" = "рестарт Xray"
+"xraySwitch" = "переключить версию"
+"xraySwitchClick" = "Выберите желаемую версию."
+"xraySwitchClickDesk" = "Выбирайте внимательно, так как старые версии могут быть несовместимы с текущими конфигурациями."
+"operationHours" = "Часы работы"
+"operationHoursDesc" = "Аптайм системы: время системы в сети."
+"systemLoad" = "Системная нагрузка"
+"connectionCount" = "количество соединений"
+"connectionCountDesc" = "Всего подключений по всем сетям»."
+"upSpeed" = "Общая скорость upload."
+"downSpeed" = "Общая скорость download."
+"totalSent" = "Общий объем загруженных данных с момента запуска системы"
+"totalReceive" = "Общий объем полученных данных с момента запуска системы.."
+"xraySwitchVersionDialog" = "переключить версию Xray"
+"xraySwitchVersionDialogDesc" = "Вы точно хотите сменить версию Xray?"
+"dontRefresh" = "Установка. Не обновляйте эту страницу."
+"logs" = "Логи"
+"config" = "Конфиг"
+"backup" = "Бекап и восстановление"
+"backupTitle" = "База данных бекапа и восстановления"
+"backupDescription" = "Не забудьте сделать резервную копию перед импортом новой базы данных."
+"exportDatabase" = "Экспорт базы данных"
+"importDatabase" = "Импорт базы данных"
+
+[pages.inbounds]
+"title" = "пользователи"
+"totalDownUp" = "Всего входящих/исходящих"
+"totalUsage" = "Всего использовано"
+"inboundCount" = "Количество пользователей"
+"operate" = "Меню"
+"enable" = "Включить"
+"remark" = "Примечание"
+"protocol" = "Протокол"
+"port" = "Порт"
+"traffic" = "Траффик"
+"details" = "Подробнее"
+"transportConfig" = "Перенести"
+"expireDate" = "Дата окончания"
+"resetTraffic" = "Обнулить траффик"
+"addInbound" = "Добавить пользователя"
+"generalActions" = "Общие действия"
+"create" = "Создать"
+"update" = "Обновить"
+"modifyInbound" = "Изменить данные"
+"deleteInbound" = "Удалить пользователя"
+"deleteInboundContent" = "Подтвердите удаление пользователя?"
+"resetTrafficContent" = "Подтвердите обнуление траффика?"
+"copyLink" = "Копировать ключ"
+"address" = "Адрес"
+"network" = "Сеть"
+"destinationPort" = "Порт назначения"
+"targetAddress" = "Целевой адрес"
+"disableInsecureEncryption" = "Отключить небезопасное шифрование"
+"monitorDesc" = "Оставьте пустым по умолчанию"
+"meansNoLimit" = "Значит без ограничений"
+"totalFlow" = "Общий расход"
+"leaveBlankToNeverExpire" = "Оставьте пустым = бессрочно"
+"noRecommendKeepDefault" = "Нет требований для сохранения настроек по умолчанию"
+"certificatePath" = "Путь файла сертификата"
+"certificateContent" = "Содержимое файла сертификата"
+"publicKeyPath" = "Путь к публичному ключу"
+"publicKeyContent" = "Содержимое публичного ключа"
+"keyPath" = "Путь к приватному ключу"
+"keyContent" = "Содержимое приватного ключа"
+"clickOnQRcode" = "Нажмите на QR-код, чтобы скопировать"
+"client" = "Клиент"
+"export" = "Поделиться ключом"
+"clone" = "Клонировать"
+"cloneInbound" = "Клонировать пользователя"
+"cloneInboundContent" = "Все настройки этого пользователя, кроме порта, порт прослушки и клиентов, будут клонированы."
+"cloneInboundOk" = "Клонировано"
+"resetAllTraffic" = "Обнулить весь траффик"
+"resetAllTrafficTitle" = "Обнуление всего траффика"
+"resetAllTrafficContent" = "Подтверждаете обнуление всего траффика пользователей?"
+"resetAllTrafficOkText" = "Подтвердить"
+"resetAllTrafficCancelText" = "Отмена"
+"resetInboundClientTraffics" = "Обнулить траффик пользователей"
+"resetInboundClientTrafficTitle" = "Обнуление траффика пользователей"
+"resetInboundClientTrafficContent" = "Вы уверены, что хотите обнулить весь трафик для этих пользователей?"
+"resetAllClientTraffics" = "Обнулить весь траффик пользователей"
+"resetAllClientTrafficTitle" = "Обнуление всего траффика пользователей"
+"resetAllClientTrafficContent" = "Подтверждаете обнуление всего траффика пользователей?"
+"delDepletedClients" = "Удалить отключенных пользователей"
+"delDepletedClientsTitle" = "Удаление отключенных пользователей"
+"delDepletedClientsContent" = "Подтверждаете удаление отключенных пользователей?"
+"email" = "Email"
+"emailDesc" = "Пожалуйста, укажите уникальный Email"
+"IPLimit" = "ограничение по IP"
+"IPLimitDesc" = "Отключить ключ, если подключено больше введенного значения (введите 0, чтобы отключить ограничение IP-адресов)."
+"IPLimitlog" = "IP лог"
+"IPLimitlogDesc" = "Лог IP-адресов (перед включением лога IP-адресов, вы должны очистить список)."
+"IPLimitlogclear" = "Очистить список"
+"setDefaultCert" = "Установить сертификат с панели"
+"xtlsDesc" = "Версия Xray должна быть не ниже 1.7.5"
+"realityDesc" = "Версия Xray должна быть 1.8.0 или выше."
+"telegramDesc" = "используйте Telegram ID (вы можете получить его у @userinfobot)"
+"subscriptionDesc" = "вы можете найти свою ссылку подписки в разделе «Подробнее», также вы можете использовать одно и то же имя для нескольких конфигов."
+
+[pages.client]
+"add" = "Добавить пользователя"
+"edit" = "Редактировать пользователя"
+"submitAdd" = "Добавить пользователя"
+"submitEdit" = "Сохранить изменения"
+"clientCount" = "Количество пользователей"
+"bulk" = "Добавить несколько"
+"method" = "Метод"
+"first" = "Первый"
+"last" = "Последний"
+"prefix" = "Префикс"
+"postfix" = "Постфикс"
+"delayedStart" = "Начать со времени первого подключения"
+"expireDays" = "Срок действия"
+"days" = "дней"
+
+[pages.inbounds.toasts]
+"obtain" = "Получить"
+
+[pages.inbounds.stream.general]
+"requestHeader" = "Требуется заголовок"
+"name" = "Имя"
+"value" = "Значение"
+
+[pages.inbounds.stream.tcp]
+"requestVersion" = "Требуется версия"
+"requestMethod" = "Требуется метод"
+"requestPath" = "Требуется путь"
+"responseVersion" = "Указать версию"
+"responseStatus" = "Указать статус"
+"responseStatusDescription" = "Указать примечание статуса"
+"responseHeader" = "Указать заголовок"
+
+[pages.inbounds.stream.quic]
+"encryption" = "Шифрование"
+
+[pages.settings]
+"title" = "Настройки"
+"save" = "Сохранить"
+"restartPanel" = "Рестарт панели"
+"restartPanelDesc" = "Подтвердите рестарт панели? ОК для рестарта панели через 3 сек. Если вы не можете пользоваться панелью после рестарта, пожалуйста, посмотрите лог панели на сервере"
+"actions" = "Действия"
+"resetDefaultConfig" = "Сбросить всё по-умолчанию"
+"panelSettings" = "Настройки панели"
+"securitySettings" = "Настройки безопасности"
+"xrayConfiguration" = "Конфигурация Xray"
+"TGBotSettings" = "Настройки Телеграм-бота"
+"panelListeningIP" = "IP-порт панели"
+"panelListeningIPDesc" = "Оставьте пустым для работы с любого IP. Перезагрузите панель для применения настроек."
+"panelPort" = "Порт панели"
+"panelPortDesc" = "Перезагрузите панель для применения настроек."
+"publicKeyPath" = "Путь к файлу публичного ключа сертификата панели"
+"publicKeyPathDesc" = "Введите полный путь, начинающийся с «/». Перезагрузите панель для применения настроек."
+"privateKeyPath" = "Путь к файлу приватного ключа сертификата панели"
+"privateKeyPathDesc" = "Введите полный путь, начинающийся с «/». Перезагрузите панель для применения настроек."
+"panelUrlPath" = "Корневой путь URL-адреса панели"
+"panelUrlPathDesc" = "Должен начинаться с «/» и заканчиваться на «/». Перезагрузите панель для применения настроек."
+"oldUsername" = "Имя пользователя сейчас"
+"currentPassword" = "Пароль сейчас"
+"newUsername" = "Новое имя пользователя"
+"newPassword" = "Новый пароль"
+"telegramBotEnable" = "Включить Телеграм-бота"
+"telegramBotEnableDesc" = "Перезагрузите панель для применения настроек."
+"telegramToken" = "Токен Телеграм-бота"
+"telegramTokenDesc" = "Перезагрузите панель для применения настроек."
+"telegramChatId" = "Телеграм-ID админа бота"
+"telegramChatIdDesc" = "Если несколько Телеграм-ID, разделить запятой. Используйте @userinfobot, чтобы получить Телеграм-ID. Перезагрузите панель для применения настроек."
+"telegramNotifyTime" = "Частота уведомлений телеграм-бота"
+"telegramNotifyTimeDesc" = "Используйте формат Crontab. Перезагрузите панель для применения настроек."
+"tgNotifyBackup" = "Резервное копирование базы данных"
+"tgNotifyBackupDesc" = "Включать файл резервной копии базы данных с уведомлением об отчете. Перезагрузите панель для применения настроек."
+"sessionMaxAge" = "Продолжительность сессии"
+"sessionMaxAgeDesc" = "Продолжительность сессии в системе (значение: минута)"
+"expireTimeDiff" = "Порог истечения срока сессии для уведомления"
+"expireTimeDiffDesc" = "Получение уведомления об истечении срока действия сессии до достижения порогового значения (значение: день)"
+"trafficDiff" = "Порог траффика для уведомления"
+"trafficDiffDesc" = "Получение уведомления об исчерпании трафика до достижения порога (значение: ГБ)"
+"tgNotifyCpu" = "Порог нагрузки на ЦП для уведомления"
+"tgNotifyCpuDesc" = "Получение уведомления, если нагрузка на ЦП превышает этот порог (значение:%)"
+"timeZone" = "Временная зона"
+"timeZoneDesc" = "Запланированные задачи выполняются в соответствии со временем в этом часовом поясе. Перезагрузите панель для применения настроек."
+
+[pages.settings.templates]
+"title" = "Шаблоны"
+"basicTemplate" = "Базовые шаблоны"
+"advancedTemplate" = "Расширенные шаблоны"
+"completeTemplate" = "Конфигурация шаблона"
+"generalConfigs" = "Основные настройки"
+"generalConfigsDesc" = "Эти параметры не позволят пользователям подключаться к определенным протоколам и веб-сайтам."
+"countryConfigs" = "Настройки по гео"
+"countryConfigsDesc" = "Эти параметры не позволят пользователям подключаться к доменам определенной страны."
+"ipv4Configs" = "Настройки IPv4 "
+"ipv4ConfigsDesc" = "Эти параметры будут маршрутизироваться к целевым доменам только через IPv4."
+"warpConfigs" = "Настройки  WARP"
+"warpConfigsDesc" = "Внимание: перед использованием этих параметров установите WARP в режиме прокси-сервера socks5 на свой сервер, следуя инструкциям на GitHub панели. WARP будет направлять трафик на веб-сайты через серверы Cloudflare."
+"xrayConfigTemplate" = "Шаблон конфигурации Xray"
+"xrayConfigTemplateDesc" = "Создание файла конфигурации Xray на основе этого шаблона. Перезагрузите панель для применения настроек."
+"xrayConfigTorrent" = "Запретить использование BitTorrent"
+"xrayConfigTorrentDesc" = "Измените конфигурацию, чтобы пользователи не использовали BitTorrent. Перезагрузите панель для применения настроек."
+"xrayConfigPrivateIp" = "Запрет частных диапазонов IP-адресов для подключения"
+"xrayConfigPrivateIpDesc" = "Измените конфигурацию, чтобы избежать подключения к диапазонам частных IP-адресов. Перезагрузите панель для применения настроек."
+"xrayConfigAds" = "Бокировка рекламы"
+"xrayConfigAdsDesc" = "Измените конфигурацию, чтобы заблокировать рекламу. Перезагрузите панель для применения настроек."
+"xrayConfigPorn" = "Блокировка порносайтов"
+"xrayConfigPornDesc" = "Измените конфигурацию, чтобы отключить подключения к порносайтам. Перезагрузите панель для применения настроек."
+"xrayConfigSpeedtest" = "Блокировать сайты для проверки скорости"
+"xrayConfigSpeedtestDesc" = "Измените шаблон конфигурации, чтобы избежать подключения к веб-сайтам для тестирования скорости. Перезапустите панель, чтобы применить изменения."
+"xrayConfigIRIp" = "Отключить подключение к диапазонам IP-адресов Ирана"
+"xrayConfigIRIpDesc" = "Измените конфигурацию, чтобы отключить подключение к диапазонам IP-адресов Ирана. Перезагрузите панель для применения настроек."
+"xrayConfigIRDomain" = "Отключить подключение к доменам Ирана"
+"xrayConfigIRDomainDesc" = "Измените конфигурацию, чтобы отключить подключение к доменам Ирана. Перезагрузите панель для применения настроек."
+"xrayConfigChinaIp" = "Отключить подключение к диапазонам IP-адресов Китая"
+"xrayConfigChinaIpDesc" = "Измените конфигурацию, чтобы отключить подключение к диапазонам IP-адресов Китая. Перезагрузите панель для применения настроек."
+"xrayConfigChinaDomain" = "Отключить подключение к доменам Китая"
+"xrayConfigChinaDomainDesc" = "Измените конфигурацию, чтобы отключить подключение к доменам Китая. Перезагрузите панель для применения настроек."
+"xrayConfigRussiaIp" = "Отключить подключение к диапазонам IP-адресов России"
+"xrayConfigRussiaIpDesc" = "Измените конфигурацию, чтобы отключить соединения с диапазонами IP-адресов России. Перезагрузите панель для применения настроек."
+"xrayConfigRussiaDomain" = "Отключить подключение к доменам России"
+"xrayConfigRussiaDomainDesc" = "Измените конфигурацию, чтобы избежать подключения к доменам России. Перезагрузите панель для применения настроек."
+"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" = "Изменение шаблона конфигурации, для определения правил маршрутизации для этого сервера. Перезагрузите панель для применения настроек."
+
+[pages.settings.security]
+"admin" = "Админ"
+"secret" = "Секретный токен"
+"loginSecurity" = "Безопасность входа"
+"loginSecurityDesc" = "Включить дополнительные меры безопасности входа пользователя"
+"secretToken" = "Секретный токен"
+"secretTokenDesc" = "Пожалуйста, скопируйте и сохраните этот токен в безопасном месте. Этот токен необходим для входа в систему и не может быть восстановлен с помощью командного инструмента x-ui."
+
+[pages.settings.toasts]
+"modifySettings" = "Изменение настроек"
+"getSettings" = "Просмотр настроек"
+"modifyUser" = "Изменение пользователя "
+"originalUserPassIncorrect" = "Неверное имя пользователя или пароль"
+"userPassMustBeNotEmpty" = "Новое имя пользователя и новый пароль должны быть заполнены"

web/translation/translate.zh_Hans.toml

@@ -157,10 +157,10 @@
 "delDepletedClients" = "删除耗尽的客户端"
 "delDepletedClientsTitle" = "删除耗尽的客户"
 "delDepletedClientsContent" = "你确定要删除所有耗尽的客户端吗？"
+"email" = "电子邮件"
+"emailDesc" = "电子邮件必须完全唯"
 "IPLimit" = "IP限制"
 "IPLimitDesc" = "如果超过输入的计数则禁用入站（0 表示禁用限制 ip）"
-"Email" = "电子邮件"
-"EmailDesc" = "电子邮件必须完全唯"
 "IPLimitlog" = "IP日志"
 "IPLimitlogDesc" = "IP 历史日志 （通过IP限制禁用inbound之前，需要清空日志）"
 "IPLimitlogclear" = "清除日志"
@@ -275,6 +275,8 @@
 "xrayConfigAdsDesc" = "修改配置模板屏蔽广告，重启面板生效"
 "xrayConfigPorn" = "禁止色情网站连接"
 "xrayConfigPornDesc" = "更改配置模板避免连接色情网站，重启面板生效"
+"xrayConfigSpeedtest" = "阻止测速网站"
+"xrayConfigSpeedtestDesc" = "更改配置模板以避免连接到速度测试网站。 重新启动面板以应用更改。"
 "xrayConfigIRIp" = "禁止伊朗 IP 范围连接"
 "xrayConfigIRIpDesc" = "修改配置模板避免连接伊朗IP段，重启面板生效"
 "xrayConfigIRDomain" = "禁止伊朗域连接"

web/web.go

@@ -83,7 +83,7 @@ type Server struct {
 
 	index  *controller.IndexController
 	server *controller.ServerController
-	xui    *controller.XUIController
+	panel  *controller.XUIController
 	api    *controller.APIController
 	sub    *controller.SUBController
 
@@ -147,6 +147,28 @@ func (s *Server) getHtmlTemplate(funcMap template.FuncMap) (*template.Template,
 	return t, nil
 }
 
+func redirectMiddleware(basePath string) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		// Redirect from old '/xui' path to '/panel'
+		path := c.Request.URL.Path
+		redirects := map[string]string{
+			"panel/API": "panel/api",
+			"xui/API":   "panel/api",
+			"xui":       "panel",
+		}
+		for from, to := range redirects {
+			from, to = basePath+from, basePath+to
+			if strings.HasPrefix(path, from) {
+				newPath := to + path[len(from):]
+				c.Redirect(http.StatusMovedPermanently, newPath)
+				c.Abort()
+				return
+			}
+		}
+		c.Next()
+	}
+}
+
 func (s *Server) initRouter() (*gin.Engine, error) {
 	if config.IsDebug() {
 		gin.SetMode(gin.DebugMode)
@@ -203,11 +225,14 @@ func (s *Server) initRouter() (*gin.Engine, error) {
 		engine.StaticFS(basePath+"assets", http.FS(&wrapAssetsFS{FS: assetsFS}))
 	}
 
+	// Apply the redirect middleware (`/xui` to `/panel`)
+	engine.Use(redirectMiddleware(basePath))
+
 	g := engine.Group(basePath)
 
 	s.index = controller.NewIndexController(g)
 	s.server = controller.NewServerController(g)
-	s.xui = controller.NewXUIController(g)
+	s.panel = controller.NewXUIController(g)
 	s.api = controller.NewAPIController(g)
 	s.sub = controller.NewSUBController(g)
 

x-ui.sh

@@ -42,7 +42,7 @@ if [[ "${release}" == "centos" ]]; then
     if [[ ${os_version} -lt 8 ]]; then
         echo -e "${red} Please use CentOS 8 or higher ${plain}\n" && exit 1
     fi
-elif [[ "${release}" ==  "ubuntu" ]]; then
+elif [[ "${release}" == "ubuntu" ]]; then
     if [[ ${os_version} -lt 20 ]]; then
         echo -e "${red}please use Ubuntu 20 or higher version! ${plain}\n" && exit 1
     fi
@@ -432,8 +432,7 @@ show_xray_status() {
 }
 
 open_ports() {
-    if ! command -v ufw &> /dev/null
-    then
+    if ! command -v ufw &>/dev/null; then
         echo "ufw firewall is not installed. Installing now..."
         sudo apt-get update
         sudo apt-get install -y ufw
@@ -460,22 +459,23 @@ open_ports() {
 
     # Check if the input is valid
     if ! [[ $ports =~ ^([0-9]+|[0-9]+-[0-9]+)(,([0-9]+|[0-9]+-[0-9]+))*$ ]]; then
-        echo "Error: Invalid input. Please enter a comma-separated list of ports or a range of ports (e.g. 80,443,2053 or 400-500)." >&2; exit 1
+        echo "Error: Invalid input. Please enter a comma-separated list of ports or a range of ports (e.g. 80,443,2053 or 400-500)." >&2
+        exit 1
     fi
 
     # Open the specified ports using ufw
-    IFS=',' read -ra PORT_LIST <<< "$ports"
+    IFS=',' read -ra PORT_LIST <<<"$ports"
     for port in "${PORT_LIST[@]}"; do
         if [[ $port == *-* ]]; then
-        # Split the range into start and end ports
-        start_port=$(echo $port | cut -d'-' -f1)
-        end_port=$(echo $port | cut -d'-' -f2)
-        # Loop through the range and open each port
-        for ((i=start_port; i<=end_port; i++)); do
-            sudo ufw allow $i
-        done
+            # Split the range into start and end ports
+            start_port=$(echo $port | cut -d'-' -f1)
+            end_port=$(echo $port | cut -d'-' -f2)
+            # Loop through the range and open each port
+            for ((i = start_port; i <= end_port; i++)); do
+                sudo ufw allow $i
+            done
         else
-        sudo ufw allow "$port"
+            sudo ufw allow "$port"
         fi
     done
 
@@ -529,7 +529,7 @@ ssl_cert_issue() {
         fi
     fi
     #install socat second
-    if [[ "${release}" == "centos" ]] || [[ "${release}" == "fedora" ]] ; then
+    if [[ "${release}" == "centos" ]] || [[ "${release}" == "fedora" ]]; then
         yum install socat -y
     else
         apt install socat -y
@@ -555,16 +555,16 @@ ssl_cert_issue() {
     else
         LOGI "your domain is ready for issuing cert now..."
     fi
-	
-	#create a directory for install cert
-	certPath="/root/cert/${domain}"
-	if [ ! -d "$certPath" ]; then
-		mkdir -p "$certPath"
-	else
-		rm -rf "$certPath"
-		mkdir -p "$certPath"
-	fi
-	
+
+    #create a directory for install cert
+    certPath="/root/cert/${domain}"
+    if [ ! -d "$certPath" ]; then
+        mkdir -p "$certPath"
+    else
+        rm -rf "$certPath"
+        mkdir -p "$certPath"
+    fi
+
     #get needed port here
     local WebPort=80
     read -p "please choose which port do you use,default will be 80 port:" WebPort
@@ -595,22 +595,21 @@ ssl_cert_issue() {
     else
         LOGI "install certs succeed,enable auto renew..."
     fi
-	
-	~/.acme.sh/acme.sh --upgrade --auto-upgrade
-	if [ $? -ne 0 ]; then
-		LOGE "auto renew failed, certs details:"
-		ls -lah cert/*
-		chmod 755 $certPath/*
-		exit 1
-	else
-		LOGI "auto renew succeed, certs details:"
-		ls -lah cert/*
-		chmod 755 $certPath/*
-	fi
+
+    ~/.acme.sh/acme.sh --upgrade --auto-upgrade
+    if [ $? -ne 0 ]; then
+        LOGE "auto renew failed, certs details:"
+        ls -lah cert/*
+        chmod 755 $certPath/*
+        exit 1
+    else
+        LOGI "auto renew succeed, certs details:"
+        ls -lah cert/*
+        chmod 755 $certPath/*
+    fi
 
 }
 
-
 warp_fixchatgpt() {
     curl -fsSL https://gist.githubusercontent.com/hamid-gh98/dc5dd9b0cc5b0412af927b1ccdb294c7/raw/install_warp_proxy.sh | bash
     echo ""
@@ -619,21 +618,21 @@ warp_fixchatgpt() {
 
 run_speedtest() {
     # Check if Speedtest is already installed
-    if ! command -v speedtest &> /dev/null; then
+    if ! command -v speedtest &>/dev/null; then
         # If not installed, install it
-        if command -v dnf &> /dev/null; then
+        if command -v dnf &>/dev/null; then
             sudo dnf install -y curl
             curl -s https://packagecloud.io/install/repositories/ookla/speedtest-cli/script.rpm.sh | sudo bash
             sudo dnf install -y speedtest
-        elif command -v yum &> /dev/null; then
+        elif command -v yum &>/dev/null; then
             sudo yum install -y curl
             curl -s https://packagecloud.io/install/repositories/ookla/speedtest-cli/script.rpm.sh | sudo bash
             sudo yum install -y speedtest
-        elif command -v apt-get &> /dev/null; then
+        elif command -v apt-get &>/dev/null; then
             sudo apt-get update && sudo apt-get install -y curl
             curl -s https://packagecloud.io/install/repositories/ookla/speedtest-cli/script.deb.sh | sudo bash
             sudo apt-get install -y speedtest
-        elif command -v apt &> /dev/null; then
+        elif command -v apt &>/dev/null; then
             sudo apt update && sudo apt install -y curl
             curl -s https://packagecloud.io/install/repositories/ookla/speedtest-cli/script.deb.sh | sudo bash
             sudo apt install -y speedtest
@@ -647,8 +646,6 @@ run_speedtest() {
     speedtest
 }
 
-
-
 show_usage() {
     echo "x-ui control menu usages: "
     echo "------------------------------------------"
@@ -760,7 +757,7 @@ show_menu() {
     19)
         warp_fixchatgpt
         ;;
-	20)
+    20)
         run_speedtest
         ;;
     *)

xray/inbound.go

@@ -6,7 +6,7 @@ import (
 )
 
 type InboundConfig struct {
-	Listen         json_util.RawMessage `json:"listen"` // listen 不能为空字符串
+	Listen         json_util.RawMessage `json:"listen"` // listen cannot be an empty string
 	Port           int                  `json:"port"`
 	Protocol       string               `json:"protocol"`
 	Settings       json_util.RawMessage `json:"settings"`