v1.4.5

Merge branch 'main' of https://github.com/MHSanaei/3x-ui
bug fixed - random user pass
2023-05-13 22:31:13 +03:30 · 2023-05-13 19:06:19 +03:30 · 2023-05-13 19:06:16 +03:30 · 2023-05-13 18:43:53 +03:30 · 2023-05-13 22:55:47 +08:00 · 2023-05-13 18:15:39 +03:30
117 changed files with 14458 additions and 2962 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,56 @@
+name: Issue Report
+description: "Create a report to help us improve."
+body:
+  - type:  checkboxes
+    id: terms
+    attributes:
+      label: Welcome
+      options:
+        - label: Yes, I'm using the latest major release. Only such installations are supported.
+          required: true
+        - label: Yes, I'm using the supported system. Only such systems are supported.
+          required: true
+        - label: Yes, I have read all WIKI document,nothing can help me in my problem.
+          required: true
+        - label: Yes, I've searched similar issues on GitHub and didn't find any.
+          required: true
+        - label: Yes, I've included all information below (version, config, log, etc).
+          required: true
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: Description of the problem,screencshot would be good 
+      placeholder: Your problem description
+    validations:
+      required: true
+
+  - type: textarea
+    id: version
+    attributes:
+      label: Version of 3x-ui
+      value: |-
+        <details>
+
+        ```console
+        # Paste here
+        ```
+
+        </details>
+    validations:
+      required: true
+
+  - type: textarea
+    id: log
+    attributes:
+      label: x-ui log reports or xray log
+      value: |-
+        <details>
+
+        ```console
+        # paste log here
+        ```
+
+        </details>
+    validations:
+      required: true
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
--- a/.github/ISSUE_TEMPLATE/question-.md
+++ b/.github/ISSUE_TEMPLATE/question-.md
@@ -0,0 +1,10 @@
+---
+name: 'Question '
+about: Describe this issue template's purpose here.
+title: ''
+labels: question
+assignees: ''
+
+---
+
+
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -0,0 +1,41 @@
+name: Release X-ui dockerhub
+on:
+  push:
+    tags:
+      - "*"
+  workflow_dispatch:
+
+jobs:
+  build_and_push:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the code
+        uses: actions/checkout@v3
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ghcr.io/${{ github.repository }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          platforms: linux/amd64, linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,16 +1,20 @@
-name: Release 3X-ui
+name: Release X-ui
 on:
+  push:
+    tags:
+      - "*"
  workflow_dispatch:
+
 jobs:
- linuxamd64build:
+  linuxamd64build:
    name: build x-ui amd64 version
    runs-on: ubuntu-20.04
    steps:
-      - uses: actions/checkout@v3.3.0
+      - uses: actions/checkout@v3.5.2
      - name: Set up Go
-        uses: actions/setup-go@v3.5.0
+        uses: actions/setup-go@v4.0.0
        with:
-          go-version: '1.20.1'
+          go-version: "stable"
      - name: build linux amd64 version
        run: |
          CGO_ENABLED=1 GOOS=linux GOARCH=amd64 go build -o xui-release -v main.go
@@ -24,9 +28,10 @@ jobs:
          cd bin
          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
+          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
          cd ..
          cd ..
@@ -41,3 +46,45 @@ jobs:
          asset_name: x-ui-linux-amd64.tar.gz
          prerelease: true
          overwrite: true
+  linuxarm64build:
+    name: build x-ui arm64 version
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v3.5.2
+      - name: Set up Go
+        uses: actions/setup-go@v4.0.0
+        with:
+          go-version: "stable"
+      - name: build linux arm64 version
+        run: |
+          sudo apt-get update
+          sudo apt install gcc-aarch64-linux-gnu
+          CGO_ENABLED=1 GOOS=linux GOARCH=arm64 CC=aarch64-linux-gnu-gcc go build -o xui-release -v main.go
+          mkdir x-ui
+          cp xui-release x-ui/xui-release
+          cp x-ui.service x-ui/x-ui.service
+          cp x-ui.sh x-ui/x-ui.sh
+          cd x-ui
+          mv xui-release x-ui
+          mkdir bin
+          cd bin
+          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
+          cd ..
+          cd ..
+      - name: package
+        run: tar -zcvf x-ui-linux-arm64.tar.gz x-ui
+      - name: upload
+        uses: svenstaro/upload-release-action@2.5.0
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          tag: ${{ github.ref }}
+          file: x-ui-linux-arm64.tar.gz
+          asset_name: x-ui-linux-arm64.tar.gz
+          prerelease: true
+          overwrite: true
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,7 @@
 .idea
+.vscode
 tmp
+backup/
 bin/
 dist/
 x-ui-*.tar.gz
@@ -9,4 +11,5 @@ x-ui-*.tar.gz
 main
 release/
 access.log
+error.log
 .cache
--- a/DockerInit.sh
+++ b/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 ../../
--- a/20
+++ b/20
@@ -0,0 +1,20 @@
+#Build latest x-ui from source
+FROM --platform=$BUILDPLATFORM golang:1.20.4-alpine AS builder
+WORKDIR /app
+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"
+
+
+#Build app image using latest x-ui
+FROM alpine
+ENV TZ=Asia/Tehran
+WORKDIR /app
+
+RUN apk add ca-certificates tzdata
+
+COPY --from=builder  /app/build/ /app/
+VOLUME [ "/etc/x-ui" ]
+ENTRYPOINT [ "/app/x-ui" ]
--- a/README.md
+++ b/README.md
@@ -1,13 +1,20 @@
 # 3x-ui
-![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)
-![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)
-[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg)](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui)
-[![Downloads](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total.svg)](https://img.shields.io/github/downloads/mhsanaei/3x-ui/total)
-[![License](https://img.shields.io/badge/license-GPL%20V3-blue.svg?longCache=true)](https://www.gnu.org/licenses/gpl-3.0.en.html)

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

-xray panel supporting multi-protocol, **Multi-lang (English,Farsi,Chinese)**
+[![](https://img.shields.io/github/v/release/mhsanaei/3x-ui.svg)](https://github.com/MHSanaei/3x-ui/releases)
+[![](https://img.shields.io/github/actions/workflow/status/mhsanaei/3x-ui/release.yml.svg)](#)
+[![GO Version](https://img.shields.io/github/go-mod/go-version/mhsanaei/3x-ui.svg)](#)
+[![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,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`

 # Install & Upgrade

@@ -15,52 +22,218 @@ xray panel supporting multi-protocol, **Multi-lang (English,Farsi,Chinese)**
 bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh)
 ```

+## Install custom version
+
+To install your desired version you can add the version to the end of install command. Example for ver `v1.4.5`:
+
+```
+bash <(curl -Ls https://raw.githubusercontent.com/mhsanaei/3x-ui/master/install.sh) v1.4.5
+```
+
 # SSL
+
 ```
 apt-get install certbot -y
 certbot certonly --standalone --agree-tos --register-unsafely-without-email -d yourdomain.com
 certbot renew --dry-run
 ```

-**If you think this project is helpful to you, you may wish to give a** :star2: 
+or you can use x-ui menu then number '16' (Apply for an SSL Certificate)

 # Default settings

 - Port: 2053
- username and password will be generated randomly you can see them after you install it (x-ui "7")
+- username and password will be generated randomly if you skip to modify your own security(x-ui "7")
 - database path: /etc/x-ui/x-ui.db
+- xray config path: /usr/local/x-ui/bin/config.json

-before you set ssl on settings
- http:// ip or domain:2053/xui
+Before you set ssl on settings

-After you set ssl on settings 
- https://yourdomain:2053/xui
+- http://ip:2053/panel
+- http://domain:2053/panel

-# Enable Traffic For Users:
+After you set ssl on settings
+
+- https://yourdomain:2053/panel
+
+# Environment Variables
+
+| Variable       |                      Type                      | Default       |
+| -------------- | :--------------------------------------------: | :------------ |
+| XUI_LOG_LEVEL  | `"debug"` \| `"info"` \| `"warn"` \| `"error"` | `"info"`      |
+| XUI_DEBUG      |                   `boolean`                    | `false`       |
+| XUI_BIN_FOLDER |                    `string`                    | `"bin"`       |
+| XUI_DB_FOLDER  |                    `string`                    | `"/etc/x-ui"` |
+
+Example:
+
+```sh
+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)
- [for enable traffic](https://raw.githubusercontent.com/MHSanaei/3x-ui/main/media/for%20enable%20traffic.txt)
- [for enable traffic+block all iran ip address](https://raw.githubusercontent.com/MHSanaei/3x-ui/main/media/for%20enable%20traffic%2Bblock%20all%20iran%20ip.txt)
+
+- [traffic](./media/configs/traffic.json)
+- [traffic + Block all Iran IP address](./media/configs/traffic+block-iran-ip.json)
+- [traffic + Block all Iran Domains](./media/configs/traffic+block-iran-domains.json)
+- [traffic + Block Ads + Use IPv4 for Google](./media/configs/traffic+block-ads+ipv4-google.json)
+- [traffic + Block Ads + Route Google + Netflix + Spotify + OpenAI (ChatGPT) to WARP](./media/configs/traffic+block-ads+warp.json)
+
+# [WARP Configuration](https://github.com/fscarmen/warp) (Optional)
+
+If you want to use routing to WARP follow steps as below:
+
+1. If you already installed warp, you can uninstall using below command:
+
+   ```sh
+   warp u
+   ```
+
+2. Install WARP on **socks proxy mode**:
+
+   ```sh
+   curl -fsSL https://gist.githubusercontent.com/hamid-gh98/dc5dd9b0cc5b0412af927b1ccdb294c7/raw/install_warp_proxy.sh | bash
+   ```
+
+3. Turn on the config you need in panel or [Copy and paste this file to Xray Configuration](./media/configs/traffic+block-ads+warp.json)
+
+   Config Features:
+
+   - Block Ads
+   - Route Google + Netflix + Spotify + OpenAI (ChatGPT) to WARP
+   - Fix Google 403 error
+
+# Features
+
+- System Status Monitoring
+- Search within all inbounds and clients
+- Support Dark/Light theme UI
+- Support multi-user multi-protocol, web page visualization operation
+- Supported protocols: vmess, vless, trojan, shadowsocks, dokodemo-door, socks, http
+- Support for configuring more transport configurations
+- Traffic statistics, limit traffic, limit expiration time
+- Customizable xray configuration templates
+- Support https access panel (self-provided domain name + ssl certificate)
+- Support one-click SSL certificate application and automatic renewal
+- For more advanced configuration items, please refer to the panel
+- Fix api routes (user setting will create with api)
+- Support to change configs by different items provided in panel
+- Support export/import database from panel
+
+# Tg robot use
+
+X-UI supports daily traffic notification, panel login reminder and other functions through the Tg robot. To use the Tg robot, you need to apply for the specific application tutorial. You can refer to the [blog](https://coderfan.net/how-to-use-telegram-bot-to-alarm-you-when-someone-login-into-your-vps.html)
+Set the robot-related parameters in the panel background, including:
+
+- Tg robot Token
+- Tg robot ChatId
+- Tg robot cycle runtime, in crontab syntax
+- Tg robot Expiration threshold
+- Tg robot Traffic threshold
+- Tg robot Enable send backup in cycle runtime
+- Tg robot Enable CPU usage alarm threshold
+
+Reference syntax:
+
+- 30 \* \* \* \* \* //Notify at the 30s of each point
+- 0 \*/10 \* \* \* \* //Notify at the first second of each 10 minutes
+- @hourly // hourly notification
+- @daily // Daily notification (00:00 in the morning)
+- @weekly // weekly notification
+- @every 8h // notify every 8 hours
+
+# Telegram Bot Features
+
+- Report periodic
+- Login notification
+- CPU threshold notification
+- Threshold for Expiration time and Traffic to report in advance
+- Support client report menu if client's telegram username added to the user's configurations
+- Support telegram traffic report searched with UID (VMESS/VLESS) or Password (TROJAN) - anonymously
+- Menu based bot
+- Search client by email ( only admin )
+- Check all inbounds
+- Check server status
+- Check depleted users
+- Receive backup by request and in periodic reports
+
+## API routes
+
+- `/login` with `PUSH` user data: `{username: '', password: ''}` for login
+- `/xui/API/inbounds` base for following actions:
+
+| Method | Path                               | Action                                      |
+| :----: | ---------------------------------- | ------------------------------------------- |
+| `GET`  | `"/list"`                          | Get all inbounds                            |
+| `GET`  | `"/get/:id"`                       | Get inbound with inbound.id                 |
+| `GET`  | `"/getClientTraffics/:email"`      | Get Client Traffics with email              |
+| `POST` | `"/add"`                           | Add inbound                                 |
+| `POST` | `"/del/:id"`                       | Delete Inbound                              |
+| `POST` | `"/update/:id"`                    | Update Inbound                              |
+| `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/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:
+
+- `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
+
+- [alireza0](https://github.com/alireza0/)

 # Suggestion System
+
 - Ubuntu 20.04+
 - Debian 10+
 - CentOS 8+
+- Fedora 36+

 # Pictures

-![1](https://raw.githubusercontent.com/MHSanaei/3x-ui/main/media/1.png)
-![2](https://raw.githubusercontent.com/MHSanaei/3x-ui/main/media/2.png)
-![3](https://raw.githubusercontent.com/MHSanaei/3x-ui/main/media/3.png)
-![4](https://raw.githubusercontent.com/MHSanaei/3x-ui/main/media/4.png)
-
-# A Special Thanks To
- [vaxilu](https://github.com/vaxilu/)
- [HexaSoftwareTech](https://github.com/HexaSoftwareTech/)
- [diditra](https://github.com/diditra/)
- [FranzKafkaYu](https://github.com/FranzKafkaYu)
- [alireza0](https://github.com/alireza0/)
-
+![1](./media/1.png)
+![2](./media/2.png)
+![3](./media/3.png)
+![4](./media/4.png)
+![5](./media/5.png)
+![6](./media/6.png)

 ## Stargazers over time

--- a/config/config.go
+++ b/config/config.go
@@ -45,6 +45,22 @@ func IsDebug() bool {
 	return os.Getenv("XUI_DEBUG") == "true"
 }

-func GetDBPath() string {
-	return fmt.Sprintf("/etc/%s/%s.db", GetName(), GetName())
+func GetBinFolderPath() string {
+	binFolderPath := os.Getenv("XUI_BIN_FOLDER")
+	if binFolderPath == "" {
+		binFolderPath = "bin"
+	}
+	return binFolderPath
+}
+
+func GetDBFolderPath() string {
+	dbFolderPath := os.Getenv("XUI_DB_FOLDER")
+	if dbFolderPath == "" {
+		dbFolderPath = "/etc/x-ui"
+	}
+	return dbFolderPath
+}
+
+func GetDBPath() string {
+	return fmt.Sprintf("%s/%s.db", GetDBFolderPath(), GetName())
 }
--- a/config/version
+++ b/config/version
@@ -1 +1 @@
-1.0.8
+1.4.5
--- a/database/db.go
+++ b/database/db.go
@@ -1,6 +1,8 @@
 package database

 import (
+	"bytes"
+	"io"
 	"io/fs"
 	"os"
 	"path"
@@ -27,8 +29,9 @@ func initUser() error {
 	}
 	if count == 0 {
 		user := &model.User{
-			Username: "admin",
-			Password: "admin",
+			Username:    "admin",
+			Password:    "admin",
+			LoginSecret: "",
 		}
 		return db.Create(user).Error
 	}
@@ -92,7 +95,7 @@ func InitDB(dbPath string) error {
 	if err != nil {
 		return err
 	}
-	
+
 	return nil
 }

@@ -103,3 +106,13 @@ func GetDB() *gorm.DB {
 func IsNotFound(err error) bool {
 	return err == gorm.ErrRecordNotFound
 }
+
+func IsSQLiteDB(file io.Reader) (bool, error) {
+	signature := []byte("SQLite format 3\x00")
+	buf := make([]byte, len(signature))
+	_, err := file.Read(buf)
+	if err != nil {
+		return false, err
+	}
+	return bytes.Equal(buf, signature), nil
+}
--- a/database/model/model.go
+++ b/database/model/model.go
@@ -18,9 +18,10 @@ const (
 )

 type User struct {
-	Id       int    `json:"id" gorm:"primaryKey;autoIncrement"`
-	Username string `json:"username"`
-	Password string `json:"password"`
+	Id          int    `json:"id" gorm:"primaryKey;autoIncrement"`
+	Username    string `json:"username"`
+	Password    string `json:"password"`
+	LoginSecret string `json:"loginSecret"`
 }

 type Inbound struct {
@@ -44,9 +45,9 @@ type Inbound struct {
 	Sniffing       string   `json:"sniffing" form:"sniffing"`
 }
 type InboundClientIps struct {
-	Id       int    `json:"id" gorm:"primaryKey;autoIncrement"`
+	Id          int    `json:"id" gorm:"primaryKey;autoIncrement"`
 	ClientEmail string `json:"clientEmail" form:"clientEmail" gorm:"unique"`
-	Ips string `json:"ips" form:"ips"`
+	Ips         string `json:"ips" form:"ips"`
 }

 func (i *Inbound) GenXrayInboundConfig() *xray.InboundConfig {
@@ -73,10 +74,14 @@ type Setting struct {

 type Client struct {
 	ID         string `json:"id"`
+	Password   string `json:"password"`
+	Flow       string `json:"flow"`
 	AlterIds   uint16 `json:"alterId"`
 	Email      string `json:"email"`
 	LimitIP    int    `json:"limitIp"`
-	Security   string `json:"security"`
 	TotalGB    int64  `json:"totalGB" form:"totalGB"`
 	ExpiryTime int64  `json:"expiryTime" form:"expiryTime"`
+	Enable     bool   `json:"enable" form:"enable"`
+	TgID       string `json:"tgId" form:"tgId"`
+	SubID      string `json:"subId" form:"subId"`
 }
--- a/docker-compose.yml
+++ b/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
--- a/go.mod
+++ b/go.mod
@@ -8,30 +8,30 @@ require (
 	github.com/gin-gonic/gin v1.9.0
 	github.com/go-cmd/cmd v1.4.1
 	github.com/go-telegram-bot-api/telegram-bot-api/v5 v5.5.1
+	github.com/goccy/go-json v0.10.2
 	github.com/nicksnyder/go-i18n/v2 v2.2.1
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
-	github.com/pelletier/go-toml/v2 v2.0.6
+	github.com/pelletier/go-toml/v2 v2.0.7
 	github.com/robfig/cron/v3 v3.0.1
-	github.com/shirou/gopsutil/v3 v3.23.1
-	github.com/xtls/xray-core v1.7.5
-	go.uber.org/atomic v1.10.0
-	golang.org/x/text v0.7.0
-	google.golang.org/grpc v1.53.0
-	gorm.io/driver/sqlite v1.4.4
-	gorm.io/gorm v1.24.5
+	github.com/shirou/gopsutil/v3 v3.23.4
+	github.com/xtls/xray-core v1.8.1
+	go.uber.org/atomic v1.11.0
+	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.1
 )

 require (
 	github.com/BurntSushi/toml v1.2.1 // indirect
-	github.com/bytedance/sonic v1.8.2 // indirect
+	github.com/bytedance/sonic v1.8.8 // indirect
 	github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311 // indirect
 	github.com/gin-contrib/sse v0.1.0 // indirect
 	github.com/go-ole/go-ole v1.2.6 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
-	github.com/go-playground/validator/v10 v10.11.2 // indirect
-	github.com/goccy/go-json v0.10.0 // indirect
-	github.com/golang/protobuf v1.5.2 // indirect
+	github.com/go-playground/validator/v10 v10.13.0 // indirect
+	github.com/golang/protobuf v1.5.3 // indirect
 	github.com/gorilla/context v1.1.1 // indirect
 	github.com/gorilla/securecookie v1.1.1 // indirect
 	github.com/gorilla/sessions v1.2.1 // indirect
@@ -39,24 +39,25 @@ require (
 	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
 	github.com/klauspost/cpuid/v2 v2.2.4 // indirect
-	github.com/leodido/go-urn v1.2.1 // indirect
-	github.com/lufia/plan9stats v0.0.0-20230110061619-bbe2e5e100de // indirect
-	github.com/mattn/go-isatty v0.0.17 // indirect
+	github.com/leodido/go-urn v1.2.4 // indirect
+	github.com/lufia/plan9stats v0.0.0-20230326075908-cb1d2100619a // indirect
+	github.com/mattn/go-isatty v0.0.18 // indirect
 	github.com/mattn/go-sqlite3 v1.14.16 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
-	github.com/pires/go-proxyproto v0.6.2 // indirect
+	github.com/pires/go-proxyproto v0.7.0 // indirect
 	github.com/power-devops/perfstat v0.0.0-20221212215047-62379fc7944b // indirect
+	github.com/shoenig/go-m1cpu v0.1.5 // indirect
 	github.com/tklauser/go-sysconf v0.3.11 // indirect
 	github.com/tklauser/numcpus v0.6.0 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
-	github.com/ugorji/go/codec v1.2.10 // indirect
+	github.com/ugorji/go/codec v1.2.11 // indirect
 	github.com/yusufpapurcu/wmi v1.2.2 // indirect
-	golang.org/x/arch v0.2.0 // indirect
-	golang.org/x/crypto v0.6.0 // indirect
-	golang.org/x/net v0.7.0 // indirect
-	golang.org/x/sys v0.5.0 // indirect
-	google.golang.org/genproto v0.0.0-20230223222841-637eb2293923 // indirect
-	google.golang.org/protobuf v1.28.1 // indirect
+	golang.org/x/arch v0.3.0 // indirect
+	golang.org/x/crypto v0.8.0 // indirect
+	golang.org/x/net v0.9.0 // indirect
+	golang.org/x/sys v0.7.0 // indirect
+	google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1 // indirect
+	google.golang.org/protobuf v1.30.0 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
--- a/go.sum
+++ b/go.sum
@@ -3,14 +3,14 @@ github.com/BurntSushi/toml v1.2.1 h1:9F2/+DoOYIOksmaJFPw1tGFy1eDnIJXg+UHjuD8lTak
 github.com/BurntSushi/toml v1.2.1/go.mod h1:CxXYINrC8qIiEnFrOxCa7Jy5BFHlXnUU2pbicEuybxQ=
 github.com/Workiva/go-datastructures v1.0.53 h1:J6Y/52yX10Xc5JjXmGtWoSSxs3mZnGSaq37xZZh7Yig=
 github.com/Workiva/go-datastructures v1.0.53/go.mod h1:1yZL+zfsztete+ePzZz/Zb1/t5BnDuE2Ya2MMGhzP6A=
-github.com/andybalholm/brotli v1.0.4 h1:V7DdXeJtZscaqfNuAdSRuRFzuiKlHSC/Zh3zl9qY3JY=
+github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
 github.com/antonlindstrom/pgstore v0.0.0-20200229204646-b08ebf1105e0/go.mod h1:2Ti6VUHVxpC0VSmTZzEvpzysnaGAfGBOoMIz5ykPyyw=
 github.com/boj/redistore v0.0.0-20180917114910-cd5dcc76aeff/go.mod h1:+RTT1BOk5P97fT2CiHkbFQwkK3mjsFAP6zCYV2aXtjw=
 github.com/bradfitz/gomemcache v0.0.0-20190913173617-a41fca850d0b/go.mod h1:H0wQNHz2YrLsuXOZozoeDmnHXkNCRmMW0gwFWDfEZDA=
 github.com/bradleypeabody/gorilla-sessions-memcache v0.0.0-20181103040241-659414f458e1/go.mod h1:dkChI7Tbtx7H1Tj7TqGSZMOeGpMP5gLHtjroHd4agiI=
 github.com/bytedance/sonic v1.5.0/go.mod h1:ED5hyg4y6t3/9Ku1R6dU/4KyJ48DZ4jPhfY1O2AihPM=
-github.com/bytedance/sonic v1.8.2 h1:Eq1oE3xWIBE3tj2ZtJFK1rDAx7+uA4bRytozVhXMHKY=
-github.com/bytedance/sonic v1.8.2/go.mod h1:i736AoUSYt75HyZLoJW9ERYxcy6eaN6h4BZXU064P/U=
+github.com/bytedance/sonic v1.8.8 h1:Kj4AYbZSeENfyXicsYppYKO0K2YWab+i2UTSY7Ukz9Q=
+github.com/bytedance/sonic v1.8.8/go.mod h1:i736AoUSYt75HyZLoJW9ERYxcy6eaN6h4BZXU064P/U=
 github.com/chenzhuoyu/base64x v0.0.0-20211019084208-fb5309c8db06/go.mod h1:DH46F32mSOjUmXrMHnKwZdA8wcEefY7UVqBKYGjpdQY=
 github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311 h1:qSGYFH7+jGhDF8vLC+iwCD4WpbV1EBDSzWkJODFLams=
 github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311/go.mod h1:b583jCggY9gE99b6G5LEC39OIiVsWj+R97kbl5odCEk=
@@ -19,6 +19,7 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dgryski/go-metro v0.0.0-20211217172704-adc40b04c140 h1:y7y0Oa6UawqTFPCDw9JG6pdKt4F9pAhHv0B7FMGaGD0=
 github.com/francoispqt/gojay v1.2.13 h1:d2m3sFjloqoIUQU3TsHBgj6qg/BVGlTBeHDUmyJnXKk=
+github.com/gaukas/godicttls v0.0.3 h1:YNDIf0d9adcxOijiLrEzpfZGAkNwLRzPaG6OjU7EITk=
 github.com/ghodss/yaml v1.0.1-0.20220118164431-d8423dcdf344 h1:Arcl6UOIS/kgO2nW3A65HN+7CMjSDP/gofXL4CZt1V4=
 github.com/gin-contrib/sessions v0.0.4 h1:gq4fNa1Zmp564iHP5G6EBuktilEos8VKhe2sza1KMgo=
 github.com/gin-contrib/sessions v0.0.4/go.mod h1:pQ3sIyviBBGcxgyR8mkeJuXbeV3h3NYmhJADQTq5+Vo=
@@ -41,19 +42,19 @@ github.com/go-playground/universal-translator v0.17.0/go.mod h1:UkSxE5sNxxRwHyU+
 github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
 github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
 github.com/go-playground/validator/v10 v10.4.1/go.mod h1:nlOn6nFhuKACm19sB/8EGNn9GlaMV7XkbRSipzJ0Ii4=
-github.com/go-playground/validator/v10 v10.11.2 h1:q3SHpufmypg+erIExEKUmsgmhDTyhcJ38oeKGACXohU=
-github.com/go-playground/validator/v10 v10.11.2/go.mod h1:NieE624vt4SCTJtD87arVLvdmjPAeV8BQlHtMnw9D7s=
-github.com/go-task/slim-sprig v0.0.0-20210107165309-348f09dbbbc0 h1:p104kn46Q8WdvHunIJ9dAyjPVtrBPhSr3KT2yUst43I=
+github.com/go-playground/validator/v10 v10.13.0 h1:cFRQdfaSMCOSfGCCLB20MHvuoHb/s5G8L5pu2ppK5AQ=
+github.com/go-playground/validator/v10 v10.13.0/go.mod h1:dwu7+CG8/CtBiJFZDz4e+5Upb6OLw04gtBYw0mcG/z4=
+github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572 h1:tfuBGBXKqDEevZMzYi5KSi8KkcZtzBcTgAUUtapy0OI=
 github.com/go-telegram-bot-api/telegram-bot-api/v5 v5.5.1 h1:wG8n/XJQ07TmjbITcGiUaOtXxdrINDz1b0J1w0SzqDc=
 github.com/go-telegram-bot-api/telegram-bot-api/v5 v5.5.1/go.mod h1:A2S0CWkNylc2phvKXWBBdD3K0iGnDBGbzRpISP2zBl8=
 github.com/go-test/deep v1.0.7 h1:/VSMRlnY/JSyqxQUzQLKVMAskpY/NZKFA5j2P+0pP2M=
-github.com/goccy/go-json v0.10.0 h1:mXKd9Qw4NuzShiRlOXKews24ufknHO7gx30lsDyokKA=
-github.com/goccy/go-json v0.10.0/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
+github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
 github.com/golang/mock v1.6.0 h1:ErTB+efbowRARo13NNdxyJji2egdxLGQhRaY+DUumQc=
 github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
 github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
-github.com/golang/protobuf v1.5.2 h1:ROPKBNFfQgOUMifHyP+KYbvpjbdoFNs+aK7DXlji0Tw=
-github.com/golang/protobuf v1.5.2/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
+github.com/golang/protobuf v1.5.3 h1:KhyjKVUg7Usr/dYsdSqoFveMYd5ko72D+zANwlG1mmg=
+github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
 github.com/gomodule/redigo v2.0.0+incompatible/go.mod h1:B4C85qUVwatsJoIUNIfCRsp7qO0iAmpGFZ4EELWSbC4=
 github.com/google/btree v1.1.2 h1:xf4v41cLI2Z6FxbKm+8Bu+m8ifhj15JuZ9sa0jZCMUU=
 github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
@@ -61,7 +62,7 @@ github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/
 github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
 github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
-github.com/google/pprof v0.0.0-20230207041349-798e818bf904 h1:4/hN5RUoecvl+RmJRE2YxKWtnnQls6rQjjW5oV7qg2U=
+github.com/google/pprof v0.0.0-20230406165453-00490a63f317 h1:hFhpt7CTmR3DX+b4R19ydQFtofxT0Sv3QsKNMVQYTMQ=
 github.com/gorilla/context v1.1.1 h1:AWwleXJkX/nhcU9bZSnZoi3h/qGYqQAGhq6zZe/aQW8=
 github.com/gorilla/context v1.1.1/go.mod h1:kBGZzfjB9CEq2AlWe17Uuf7NDRt0dE0s8S51q0aT7Yg=
 github.com/gorilla/securecookie v1.1.1 h1:miw7JPhV+b/lAHSXz4qd/nN9jRiAFV5FwjeKyCS8BvQ=
@@ -73,33 +74,31 @@ github.com/gorilla/sessions v1.2.1/go.mod h1:dk2InVEVJ0sfLlnXv9EAgkf6ecYs/i80K/z
 github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
 github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
-github.com/jinzhu/now v1.1.4/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
 github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
 github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
 github.com/json-iterator/go v1.1.9/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/kidstuff/mongostore v0.0.0-20181113001930-e650cd85ee4b/go.mod h1:g2nVr8KZVXJSS97Jo8pJ0jgq29P6H7dG0oplUA86MQw=
-github.com/klauspost/compress v1.15.15 h1:EF27CXIuDsYJ6mmvtBRlEuB2UVOqHG1tAXgZ7yIO+lw=
+github.com/klauspost/compress v1.16.5 h1:IFV2oUNUzZaz+XyusxpLzpzS8Pt5rh0Z16For/djlyI=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
 github.com/klauspost/cpuid/v2 v2.2.4 h1:acbojRNwl3o09bUq+yDCtZFc1aiwaAAxtcn8YkZXnvk=
 github.com/klauspost/cpuid/v2 v2.2.4/go.mod h1:RVVoqg1df56z8g3pUjL/3lE5UfnlrJX8tyFgg4nqhuY=
-github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
-github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/leodido/go-urn v1.2.0/go.mod h1:+8+nEpDfqqsY+g338gtMEUOtuK+4dEMhiQEgxpxOKII=
-github.com/leodido/go-urn v1.2.1 h1:BqpAaACuzVSgi/VLzGZIobT2z4v53pjosyNd9Yv6n/w=
-github.com/leodido/go-urn v1.2.1/go.mod h1:zt4jvISO2HfUBqxjfIshjdMTYS56ZS/qv49ictyFfxY=
+github.com/leodido/go-urn v1.2.4 h1:XlAE/cm/ms7TE/VMVoduSpNBoyc2dOxHs5MZSwAN63Q=
+github.com/leodido/go-urn v1.2.4/go.mod h1:7ZrI8mTSeBSHl/UaRyKQW1qZeMgak41ANeCNaVckg+4=
 github.com/lib/pq v1.10.3/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
-github.com/lufia/plan9stats v0.0.0-20230110061619-bbe2e5e100de h1:V53FWzU6KAZVi1tPp5UIsMoUWJ2/PNwYIDXnu7QuBCE=
-github.com/lufia/plan9stats v0.0.0-20230110061619-bbe2e5e100de/go.mod h1:JKx41uQRwqlTZabZc+kILPrO/3jlKnQ2Z8b7YiVw5cE=
+github.com/lufia/plan9stats v0.0.0-20230326075908-cb1d2100619a h1:N9zuLhTvBSRt0gWSiJswwQ2HqDmtX/ZCDJURnKUt1Ik=
+github.com/lufia/plan9stats v0.0.0-20230326075908-cb1d2100619a/go.mod h1:JKx41uQRwqlTZabZc+kILPrO/3jlKnQ2Z8b7YiVw5cE=
 github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
-github.com/mattn/go-isatty v0.0.17 h1:BTarxUcIeDqL27Mc+vyvdWYSL28zpIhv3RoTdsLMPng=
-github.com/mattn/go-isatty v0.0.17/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.18 h1:DOKFKCQ7FNG2L1rbrmstDN4QVRdS89Nkh85u68Uwp98=
+github.com/mattn/go-isatty v0.0.18/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-sqlite3 v1.14.15/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
 github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y=
 github.com/mattn/go-sqlite3 v1.14.16/go.mod h1:2eHXhiwb8IkHr+BDWZGa96P6+rkvnG63S2DGjv9HUNg=
 github.com/memcachier/mc v2.0.1+incompatible/go.mod h1:7bkvFE61leUBvXz+yxsOnGBQSZpBSPIMUQSmmSHvuXc=
+github.com/miekg/dns v1.1.53 h1:ZBkuHr5dxHtB1caEOlZTLPo7D3L3TWckgUUs/RHfDxw=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -108,15 +107,15 @@ github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9G
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
 github.com/nicksnyder/go-i18n/v2 v2.2.1 h1:aOzRCdwsJuoExfZhoiXHy4bjruwCMdt5otbYojM/PaA=
 github.com/nicksnyder/go-i18n/v2 v2.2.1/go.mod h1:fF2++lPHlo+/kPaj3nB0uxtPwzlPm+BlgwGX7MkeGj0=
-github.com/onsi/ginkgo/v2 v2.8.0 h1:pAM+oBNPrpXRs+E/8spkeGx9QgekbRVyr74EUvRVOUI=
+github.com/onsi/ginkgo/v2 v2.9.2 h1:BA2GMJOtfGAfagzYtrAlufIP0lq6QERkFmHLMLPwFSU=
 github.com/op/go-logging v0.0.0-20160315200505-970db520ece7 h1:lDH9UUVJtmYCjyT0CI4q8xvlXPxeZ0gYCVvWbmPlp88=
 github.com/op/go-logging v0.0.0-20160315200505-970db520ece7/go.mod h1:HzydrMdWErDVzsI23lYNej1Htcns9BCg93Dk0bBINWk=
 github.com/pelletier/go-toml v1.9.5 h1:4yBQzkHv+7BHq2PQUZF3Mx0IYxG7LsP222s7Agd3ve8=
-github.com/pelletier/go-toml/v2 v2.0.6 h1:nrzqCb7j9cDFj2coyLNLaZuJTLjWjlaz6nvTvIwycIU=
-github.com/pelletier/go-toml/v2 v2.0.6/go.mod h1:eumQOmlWiOPt5WriQQqoM5y18pDHwha2N+QD+EUNTek=
+github.com/pelletier/go-toml/v2 v2.0.7 h1:muncTPStnKRos5dpVKULv2FVd4bMOhNePj9CjgDb8Us=
+github.com/pelletier/go-toml/v2 v2.0.7/go.mod h1:eumQOmlWiOPt5WriQQqoM5y18pDHwha2N+QD+EUNTek=
 github.com/philhofer/fwd v1.1.1/go.mod h1:gk3iGcWd9+svBvR0sR+KPcfE+RNWozjowpeBVG3ZVNU=
-github.com/pires/go-proxyproto v0.6.2 h1:KAZ7UteSOt6urjme6ZldyFm4wDe/z0ZUP0Yv0Dos0d8=
-github.com/pires/go-proxyproto v0.6.2/go.mod h1:Odh9VFOZJCf9G8cLW5o435Xf1J95Jw9Gw5rnCjcwzAY=
+github.com/pires/go-proxyproto v0.7.0 h1:IukmRewDQFWC7kfnb66CSomk2q/seBuilHBYFwyq0Hs=
+github.com/pires/go-proxyproto v0.7.0/go.mod h1:Vz/1JPY/OACxWGQNIRY2BeyDmpoaWmEP40O9LbuiFR4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
@@ -124,32 +123,34 @@ github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c/go.mod h1:Om
 github.com/power-devops/perfstat v0.0.0-20221212215047-62379fc7944b h1:0LFwY6Q3gMACTjAbMZBjXAqTOzOwFaj2Ld6cjeQ7Rig=
 github.com/power-devops/perfstat v0.0.0-20221212215047-62379fc7944b/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
 github.com/quasoft/memstore v0.0.0-20191010062613-2bce066d2b0b/go.mod h1:wTPjTepVu7uJBYgZ0SdWHQlIas582j6cn2jgk4DDdlg=
-github.com/quic-go/qtls-go1-18 v0.2.0 h1:5ViXqBZ90wpUcZS0ge79rf029yx0dYB0McyPJwqqj7U=
-github.com/quic-go/qtls-go1-19 v0.2.0 h1:Cvn2WdhyViFUHoOqK52i51k4nDX8EwIh5VJiVM4nttk=
-github.com/quic-go/qtls-go1-20 v0.1.0 h1:d1PK3ErFy9t7zxKsG3NXBJXZjp/kMLoIb3y/kV54oAI=
-github.com/quic-go/quic-go v0.32.0 h1:lY02md31s1JgPiiyfqJijpu/UX/Iun304FI3yUqX7tA=
-github.com/refraction-networking/utls v1.2.2-0.20230207151345-a75a4b484849 h1:vNEcNapWFwnYJTBcVkHJa8VrdL40PNDLDbSGVY+ZV7I=
+github.com/quic-go/qtls-go1-19 v0.3.2 h1:tFxjCFcTQzK+oMxG6Zcvp4Dq8dx4yD3dDiIiyc86Z5U=
+github.com/quic-go/qtls-go1-20 v0.2.2 h1:WLOPx6OY/hxtTxKV1Zrq20FtXtDEkeY00CGQm8GEa3E=
+github.com/quic-go/quic-go v0.33.0 h1:ItNoTDN/Fm/zBlq769lLJc8ECe9gYaW40veHCCco7y0=
+github.com/refraction-networking/utls v1.3.2 h1:o+AkWB57mkcoW36ET7uJ002CpBWHu0KPxi6vzxvPnv8=
 github.com/riobard/go-bloom v0.0.0-20200614022211-cdc8013cb5b3 h1:f/FNXud6gA3MNr8meMVVGxhp+QBTqY91tM8HjEuMjGg=
 github.com/robfig/cron/v3 v3.0.1 h1:WdRxkvbJztn8LMz/QEvLN5sBU+xKpSqwwUO1Pjr4qDs=
 github.com/robfig/cron/v3 v3.0.1/go.mod h1:eQICP3HwyT7UooqI/z+Ov+PtYAWygg1TEWWzGIFLtro=
-github.com/rogpeppe/go-internal v1.8.0 h1:FCbCCtXNOY3UtUuHUYaghJg4y7Fd14rXifAYUAtL9R8=
-github.com/sagernet/sing v0.1.6 h1:Qy63OUfKpcqKjfd5rPmUlj0RGjHZSK/PJn0duyCCsRg=
-github.com/sagernet/sing-shadowsocks v0.1.1-0.20230202035033-e3123545f2f7 h1:Plup6oEiyLzY3HDqQ+QsUBzgBGdVmcsgf3t8h940z9U=
+github.com/sagernet/sing v0.2.3 h1:V50MvZ4c3Iij2lYFWPlzL1PyipwSzjGeN9x+Ox89vpk=
+github.com/sagernet/sing-shadowsocks v0.2.1 h1:FvdLQOqpvxHBJUcUe4fvgiYP2XLLwH5i1DtXQviVEPw=
 github.com/sagernet/wireguard-go v0.0.0-20221116151939-c99467f53f2c h1:vK2wyt9aWYHHvNLWniwijBu/n4pySypiKRhN32u/JGo=
 github.com/seiflotfy/cuckoofilter v0.0.0-20220411075957-e3b120b3f5fb h1:XfLJSPIOUX+osiMraVgIrMR27uMXnRJWGm1+GL8/63U=
-github.com/shirou/gopsutil/v3 v3.23.1 h1:a9KKO+kGLKEvcPIs4W62v0nu3sciVDOOOPUD0Hz7z/4=
-github.com/shirou/gopsutil/v3 v3.23.1/go.mod h1:NN6mnm5/0k8jw4cBfCnJtr5L7ErOTg18tMNpgFkn0hA=
+github.com/shirou/gopsutil/v3 v3.23.4 h1:hZwmDxZs7Ewt75DV81r4pFMqbq+di2cbt9FsQBqLD2o=
+github.com/shirou/gopsutil/v3 v3.23.4/go.mod h1:ZcGxyfzAMRevhUR2+cfhXDH6gQdFYE/t8j1nsU4mPI8=
+github.com/shoenig/go-m1cpu v0.1.5 h1:LF57Z/Fpb/WdGLjt2HZilNnmZOxg/q2bSKTQhgbrLrQ=
+github.com/shoenig/go-m1cpu v0.1.5/go.mod h1:Wwvst4LR89UxjeFtLRMrpgRiyY4xPsejnVZym39dbAQ=
+github.com/shoenig/test v0.6.3 h1:GVXWJFk9PiOjN0KoJ7VrJGH6uLPnqxR7/fe3HUPfE0c=
+github.com/shoenig/test v0.6.3/go.mod h1:byHiCGXqrVaflBLAMq/srcZIHynQPQgeyvkvXnjqq0k=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
 github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
-github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
-github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk=
 github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/stretchr/testify v1.8.2 h1:+h33VjcLVPDHtOdpUCuF+7gSuG3yGIftsP1YvFihtJ8=
+github.com/stretchr/testify v1.8.2/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
 github.com/tinylib/msgp v1.1.5/go.mod h1:eQsjooMTnV42mHu917E26IogZ2930nFyBQdofk10Udg=
 github.com/tklauser/go-sysconf v0.3.11 h1:89WgdJhk5SNwJfu+GKyYveZ4IaJ7xAkecBo+KdJV0CM=
 github.com/tklauser/go-sysconf v0.3.11/go.mod h1:GqXfhXY3kiPa0nAXPDIQIWzJbMCB7AmcWpGR8lSZfqI=
@@ -160,39 +161,39 @@ github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/ugorji/go v1.1.7/go.mod h1:kZn38zHttfInRq0xu/PH0az30d+z6vm202qpg1oXVMw=
 github.com/ugorji/go/codec v1.1.7/go.mod h1:Ax+UKWsSmolVDwsd+7N3ZtXu+yMGCf907BLYF3GoBXY=
-github.com/ugorji/go/codec v1.2.10 h1:eimT6Lsr+2lzmSZxPhLFoOWFmQqwk0fllJJ5hEbTXtQ=
-github.com/ugorji/go/codec v1.2.10/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
+github.com/ugorji/go/codec v1.2.11 h1:BMaWp1Bb6fHwEtbplGBGJ498wD+LKlNSl25MjdZY4dU=
+github.com/ugorji/go/codec v1.2.11/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
 github.com/v2fly/ss-bloomring v0.0.0-20210312155135-28617310f63e h1:5QefA066A1tF8gHIiADmOVOV5LS43gt3ONnlEl3xkwI=
-github.com/xtls/go v0.0.0-20230107031059-4610f88d00f3 h1:a3Y4WVjCxwoyO4E2xdNvq577tW8lkSBgyrA8E9+2NtM=
-github.com/xtls/xray-core v1.7.5 h1:Ukr3hXnOG2ciViQL7kfYRl9S3GVej2dkV7DzabmoLL4=
-github.com/xtls/xray-core v1.7.5/go.mod h1:Mx1QzIDvSk4eZ8hKa3AYsSPfyZJNQXWVXTJxJRJ98wI=
+github.com/xtls/reality v0.0.0-20230331223127-176a94313eda h1:psRJD2RrZbnI0OWyHvXfgYCPqlRM5q5SPDcjDoDBWhE=
+github.com/xtls/xray-core v1.8.1 h1:iSTTqXj82ZdwC1ah+eV331X4JTcnrDz+WuKuB/EB3P4=
+github.com/xtls/xray-core v1.8.1/go.mod h1:AXxSso0MZwUE4NhRocCfHCg73BtJ+T2dSpQVo1Cg9VM=
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 github.com/yusufpapurcu/wmi v1.2.2 h1:KBNDSne4vP5mbSWnJbO+51IMOXJB67QiYCSBrubbPRg=
 github.com/yusufpapurcu/wmi v1.2.2/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
-go.starlark.net v0.0.0-20230128213706-3f75dec8e403 h1:jPeC7Exc+m8OBJUlWbBLh0O5UZPM7yU5W4adnhhbG4U=
-go.uber.org/atomic v1.10.0 h1:9qC72Qh0+3MqyJbAn8YU5xVq1frD8bn3JtD2oXtafVQ=
-go.uber.org/atomic v1.10.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0=
+go.starlark.net v0.0.0-20230302034142-4b1e35fe2254 h1:Ss6D3hLXTM0KobyBYEAygXzFfGcjnmfEJOBgSbemCtg=
+go.uber.org/atomic v1.11.0 h1:ZvwS0R+56ePWxUNi+Atn9dWONBPp/AUETXlHW0DxSjE=
+go.uber.org/atomic v1.11.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0=
 golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
-golang.org/x/arch v0.2.0 h1:W1sUEHXiJTfjaFJ5SLo0N6lZn+0eO5gWD1MFeTGqQEY=
-golang.org/x/arch v0.2.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
+golang.org/x/arch v0.3.0 h1:02VY4/ZcO/gBOH6PUaoiptASxtXU10jazRCP865E97k=
+golang.org/x/arch v0.3.0/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
-golang.org/x/crypto v0.6.0 h1:qfktjS5LUO+fFKeJXZ+ikTRijMmljikvG68fpMMruSc=
-golang.org/x/crypto v0.6.0/go.mod h1:OFC/31mSvZgRz0V1QTNCzfAI1aIRzbiufJtkMIlEp58=
-golang.org/x/exp v0.0.0-20230206171751-46f607a40771 h1:xP7rWLUr1e1n2xkK5YB4LI0hPEy3LJC6Wk+D4pGlOJg=
+golang.org/x/crypto v0.8.0 h1:pd9TJtTueMTVQXzk8E2XESSMQDj/U7OUu0PqJqPXQjQ=
+golang.org/x/crypto v0.8.0/go.mod h1:mRqEX+O9/h5TFCrQhkgjo2yKi0yYA+9ecGkdQoHrywE=
+golang.org/x/exp v0.0.0-20230321023759-10a507213a29 h1:ooxPy7fPvB4kwsA2h+iBNHkAbp/4JxTSwCmvdjEYmug=
 golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
-golang.org/x/mod v0.7.0 h1:LapD9S96VoQRhi/GrNTqeBJFrUjs5UHCAtTlgwA5oZA=
+golang.org/x/mod v0.10.0 h1:lFO9qtOdlre5W1jxS3r/4szv2/6iXxScdzjoBMXNhYk=
 golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
-golang.org/x/net v0.7.0 h1:rJrUqqhjsgNp7KqAIc25s9pZnjU7TUcSY7HcVZjdn1g=
-golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/net v0.9.0 h1:aWJ/m6xSmxWBx+V0XRHTlrYrPG56jKsLdTFmsSsCzOM=
+golang.org/x/net v0.9.0/go.mod h1:d48xBJpPfHeWQsugry2m+kC02ZBRGRgulfHnEXEuWns=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
@@ -208,11 +209,10 @@ golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220704084225-05e143d24a9e/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.2.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.4.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
-golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.7.0 h1:3jlCCIQZPdOYu1h8BkNvLz8Kgwtae2cagcG/VamtZRU=
+golang.org/x/sys v0.7.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@@ -220,28 +220,28 @@ golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
 golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/text v0.4.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
-golang.org/x/text v0.7.0 h1:4BRB4x83lYWy72KwLD/qYDuTu7q9PjSagHvijDw7cLo=
-golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/text v0.9.0 h1:2sjJmO8cDvYveuX97RDLsxlyUxLl+GHoLxBiRdHllBE=
+golang.org/x/text v0.9.0/go.mod h1:e1OnstbJyHTd6l/uOt8jFFHp6TRDWZR/bV3emEE/zU8=
 golang.org/x/time v0.3.0 h1:rg5rLMjNzMS1RkNLzCG38eapWhnYLFYXDXj2gOlr8j4=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
 golang.org/x/tools v0.0.0-20201022035929-9cf592e881e9/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
 golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
-golang.org/x/tools v0.5.0 h1:+bSpV5HIeWkuvgaMfI3UmKRThoTA5ODJTUd8T17NO+4=
+golang.org/x/tools v0.8.0 h1:vSDcovVPld282ceKgDimkRSC8kpaH1dgyc9UMzlt84Y=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-google.golang.org/genproto v0.0.0-20230223222841-637eb2293923 h1:znp6mq/drrY+6khTAlJUDNFFcDGV2ENLYKpMq8SyCds=
-google.golang.org/genproto v0.0.0-20230223222841-637eb2293923/go.mod h1:3Dl5ZL0q0isWJt+FVcfpQyirqemEuLAK/iFvg1UP1Hw=
-google.golang.org/grpc v1.53.0 h1:LAv2ds7cmFV/XTS3XG1NneeENYrXGmorPxsBbptIjNc=
-google.golang.org/grpc v1.53.0/go.mod h1:OnIrk0ipVdj4N5d9IUoFUx72/VlD7+jUsHwZgwSMQpw=
+google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1 h1:KpwkzHKEF7B9Zxg18WzOa7djJ+Ha5DzthMyZYQfEn2A=
+google.golang.org/genproto v0.0.0-20230410155749-daa745c078e1/go.mod h1:nKE/iIaLqn2bQwXBg8f1g2Ylh6r5MN5CmZvuzZCgsCU=
+google.golang.org/grpc v1.55.0 h1:3Oj82/tFSCeUrRTg/5E/7d/W5A1tj6Ky1ABAuZuv5ag=
+google.golang.org/grpc v1.55.0/go.mod h1:iYEXKGkEBhg1PjZQvoYEVPTDkHo1/bjTnfwTeGONTY8=
 google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
 google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
-google.golang.org/protobuf v1.28.1 h1:d0NfwRgPtno5B1Wa6L2DAG+KivqkdutMf1UhdNx175w=
-google.golang.org/protobuf v1.28.1/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+google.golang.org/protobuf v1.30.0 h1:kPPoIgf3TsEvrm0PFe15JQ+570QVxYzEvvHqChK+cng=
+google.golang.org/protobuf v1.30.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v2 v2.3.0/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
@@ -249,11 +249,11 @@ gopkg.in/yaml.v2 v2.4.0 h1:D8xgwECY7CYvx+Y2n4sBz93Jn9JRvxdiyyo8CTfuKaY=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gorm.io/driver/sqlite v1.4.4 h1:gIufGoR0dQzjkyqDyYSCvsYR6fba1Gw5YKDqKeChxFc=
-gorm.io/driver/sqlite v1.4.4/go.mod h1:0Aq3iPO+v9ZKbcdiz8gLWRw5VOPcBOPUQJFLq5e2ecI=
-gorm.io/gorm v1.24.0/go.mod h1:DVrVomtaYTbqs7gB/x2uVvqnXzv0nqjB396B8cG4dBA=
-gorm.io/gorm v1.24.5 h1:g6OPREKqqlWq4kh/3MCQbZKImeB9e6Xgc4zD+JgNZGE=
-gorm.io/gorm v1.24.5/go.mod h1:DVrVomtaYTbqs7gB/x2uVvqnXzv0nqjB396B8cG4dBA=
+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.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=
--- a/install.sh
+++ b/install.sh
@@ -10,80 +10,69 @@ cur_dir=$(pwd)
 # check root
 [[ $EUID -ne 0 ]] && echo -e "${red}Fatal error：${plain} Please run this script with root privilege \n " && exit 1

-# check os
-if [[ -f /etc/redhat-release ]]; then
-    release="centos"
-elif cat /etc/issue | grep -Eqi "debian"; then
-    release="debian"
-elif cat /etc/issue | grep -Eqi "ubuntu"; then
-    release="ubuntu"
-elif cat /etc/issue | grep -Eqi "centos|red hat|redhat"; then
-    release="centos"
-elif cat /proc/version | grep -Eqi "debian"; then
-    release="debian"
-elif cat /proc/version | grep -Eqi "ubuntu"; then
-    release="ubuntu"
-elif cat /proc/version | grep -Eqi "centos|red hat|redhat"; then
-    release="centos"
+# Check OS and set release variable
+if [[ -f /etc/os-release ]]; then
+    source /etc/os-release
+    release=$ID
+elif [[ -f /usr/lib/os-release ]]; then
+    source /usr/lib/os-release
+    release=$ID
 else
-    echo -e "${red} Check system OS failed, please contact the author! ${plain}\n" && exit 1
+    echo "Failed to check the system OS, please contact the author!" >&2
+    exit 1
 fi
+echo "The OS release is: $release"

-arch=$(arch)
-
-if [[ $arch == "x86_64" || $arch == "x64" || $arch == "amd64" ]]; then
-    arch="amd64"
-elif [[ $arch == "aarch64" || $arch == "arm64" ]]; then
-    arch="arm64"
-else
-    arch="amd64"
-    echo -e "${red} Failed to check system arch, will use default arch: ${arch}${plain}"
-fi
-
-echo "arch: ${arch}"
-
-if [ $(getconf WORD_BIT) != '32' ] && [ $(getconf LONG_BIT) != '64' ]; then
-    echo "x-ui dosen't support 32-bit(x86) system, please use 64 bit operating system(x86_64) instead, if there is something wrong, please get in touch with me!"
-    exit -1
-fi
+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 ;;
+    esac
+}
+echo "arch: $(arch3xui)"

 os_version=""
+os_version=$(grep -i version_id /etc/os-release | cut -d \" -f2 | cut -d . -f1)

-# os version
-if [[ -f /etc/os-release ]]; then
-    os_version=$(awk -F'[= ."]' '/VERSION_ID/{print $3}' /etc/os-release)
-fi
-if [[ -z "$os_version" && -f /etc/lsb-release ]]; then
-    os_version=$(awk -F'[= ."]+' '/DISTRIB_RELEASE/{print $2}' /etc/lsb-release)
-fi
-
-if [[ x"${release}" == x"centos" ]]; then
-    if [[ ${os_version} -le 7 ]]; then
+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 [[ x"${release}" == x"ubuntu" ]]; then
+elif [[ "${release}" == "ubuntu" ]]; then
    if [[ ${os_version} -lt 20 ]]; then
-        echo -e "${red} Please use Ubuntu 20 or higher ${plain}\n" && exit 1
+        echo -e "${red}please use Ubuntu 20 or higher version！${plain}\n" && exit 1
    fi
-elif [[ x"${release}" == x"debian" ]]; then
-    if [[ ${os_version} -lt 9 ]]; then
+
+elif [[ "${release}" == "fedora" ]]; then
+    if [[ ${os_version} -lt 36 ]]; then
+        echo -e "${red}please use Fedora 36 or higher version！${plain}\n" && exit 1
+    fi
+
+elif [[ "${release}" == "debian" ]]; then
+    if [[ ${os_version} -lt 10 ]]; then
        echo -e "${red} Please use Debian 10 or higher ${plain}\n" && exit 1
    fi
+else
+    echo -e "${red}Failed to check the OS version, please contact the author!${plain}" && exit 1
 fi

 install_base() {
-    if [[ x"${release}" == x"centos" ]]; then
-        yum install wget curl tar -y
-    else
-        apt install wget curl tar -y
-    fi
+    case "${release}" in
+    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() {
    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 [[ x"${config_confirm}" == x"y" || x"${config_confirm}" == x"Y" ]]; then
+    if [[ "${config_confirm}" == "y" || "${config_confirm}" == "Y" ]]; then
        read -p "Please set up your username:" config_account
        echo -e "${yellow}Your username will be:${config_account}${plain}"
        read -p "Please set up your password:" config_password
@@ -103,15 +92,15 @@ config_after_install() {
            /usr/local/x-ui/x-ui setting -username ${usernameTemp} -password ${passwordTemp}
            echo -e "this is a fresh installation,will generate random login info for security concerns:"
            echo -e "###############################################"
-            echo -e "${green}user name:${usernameTemp}${plain}"
-            echo -e "${green}user password:${passwordTemp}${plain}"
-            echo -e "${red}web port:${portTemp}${plain}"
+            echo -e "${green}username:${usernameTemp}${plain}"
+            echo -e "${green}password:${passwordTemp}${plain}"
            echo -e "###############################################"
            echo -e "${red}if you forgot your login info,you can type x-ui and then type 7 to check after installation${plain}"
        else
            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() {
@@ -119,24 +108,24 @@ install_x-ui() {
    cd /usr/local/

    if [ $# == 0 ]; then
-        last_version=$(curl -Ls "https://api.github.com/repos/mhsanaei/3x-ui/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
+        last_version=$(curl -Ls "https://api.github.com/repos/MHSanaei/3x-ui/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
        if [[ ! -n "$last_version" ]]; then
            echo -e "${red}Failed to fetch x-ui version, it maybe due to Github API restrictions, please try it later${plain}"
            exit 1
        fi
        echo -e "Got x-ui latest version: ${last_version}, beginning the installation..."
-        wget -N --no-check-certificate -O /usr/local/x-ui-linux-${arch}.tar.gz https://github.com/mhsanaei/3x-ui/releases/download/${last_version}/x-ui-linux-${arch}.tar.gz
+        wget -N --no-check-certificate -O /usr/local/x-ui-linux-$(arch3xui).tar.gz https://github.com/MHSanaei/3x-ui/releases/download/${last_version}/x-ui-linux-$(arch3xui).tar.gz
        if [[ $? -ne 0 ]]; then
            echo -e "${red}Downloading x-ui failed, please be sure that your server can access Github ${plain}"
            exit 1
        fi
    else
        last_version=$1
-        url="https://github.com/mhsanaei/3x-ui/releases/download/${last_version}/x-ui-linux-${arch}.tar.gz"
+        url="https://github.com/MHSanaei/3x-ui/releases/download/${last_version}/x-ui-linux-$(arch3xui).tar.gz"
        echo -e "Begining to install x-ui $1"
-        wget -N --no-check-certificate -O /usr/local/x-ui-linux-${arch}.tar.gz ${url}
+        wget -N --no-check-certificate -O /usr/local/x-ui-linux-$(arch3xui).tar.gz ${url}
        if [[ $? -ne 0 ]]; then
-            echo -e "${red}Download x-ui $1 failed,please check the version exists${plain}"
+            echo -e "${red}Download x-ui $1 failed,please check the version exists ${plain}"
            exit 1
        fi
    fi
@@ -145,12 +134,12 @@ install_x-ui() {
        rm /usr/local/x-ui/ -rf
    fi

-    tar zxvf x-ui-linux-${arch}.tar.gz
-    rm x-ui-linux-${arch}.tar.gz -f
+    tar zxvf x-ui-linux-$(arch3xui).tar.gz
+    rm x-ui-linux-$(arch3xui).tar.gz -f
    cd x-ui
-    chmod +x x-ui bin/xray-linux-${arch}
+    chmod +x x-ui bin/xray-linux-$(arch3xui)
    cp -f x-ui.service /etc/systemd/system/
-    wget --no-check-certificate -O /usr/bin/x-ui https://raw.githubusercontent.com/mhsanaei/3x-ui/main/x-ui.sh
+    wget --no-check-certificate -O /usr/bin/x-ui https://raw.githubusercontent.com/MHSanaei/3x-ui/main/x-ui.sh
    chmod +x /usr/local/x-ui/x-ui.sh
    chmod +x /usr/bin/x-ui
    config_after_install
--- a/logger/logger.go
+++ b/logger/logger.go
@@ -1,8 +1,9 @@
 package logger

 import (
-	"github.com/op/go-logging"
 	"os"
+
+	"github.com/op/go-logging"
 )

 var logger *logging.Logger
--- a/main.go
+++ b/main.go
@@ -51,8 +51,8 @@ func runWebServer() {
 	}

 	sigCh := make(chan os.Signal, 1)
-	//信号量捕获处理
-	signal.Notify(sigCh, syscall.SIGHUP, syscall.SIGTERM, syscall.SIGKILL)
+	// Trap shutdown signals
+	signal.Notify(sigCh, syscall.SIGHUP, syscall.SIGTERM)
 	for {
 		sig := <-sigCh

@@ -97,7 +97,7 @@ func showSetting(show bool) {
 		settingService := service.SettingService{}
 		port, err := settingService.GetPort()
 		if err != nil {
-			fmt.Println("get current port fialed,error info:", err)
+			fmt.Println("get current port failed,error info:", err)
 		}
 		userService := service.UserService{}
 		userModel, err := userService.GetFirstUser()
@@ -109,7 +109,7 @@ func showSetting(show bool) {
 		if (username == "") || (userpasswd == "") {
 			fmt.Println("current username or password is empty")
 		}
-		fmt.Println("current pannel settings as follows:")
+		fmt.Println("current panel settings as follows:")
 		fmt.Println("username:", username)
 		fmt.Println("userpasswd:", userpasswd)
 		fmt.Println("port:", port)
@@ -136,7 +136,7 @@ func updateTgbotEnableSts(status bool) {
 	return
 }

-func updateTgbotSetting(tgBotToken string, tgBotChatid int, tgBotRuntime string) {
+func updateTgbotSetting(tgBotToken string, tgBotChatid string, tgBotRuntime string) {
 	err := database.InitDB(config.GetDBPath())
 	if err != nil {
 		fmt.Println(err)
@@ -165,7 +165,7 @@ func updateTgbotSetting(tgBotToken string, tgBotChatid int, tgBotRuntime string)
 		}
 	}

-	if tgBotChatid != 0 {
+	if tgBotChatid != "" {
 		err := settingService.SetTgBotChatId(tgBotChatid)
 		if err != nil {
 			fmt.Println(err)
@@ -204,6 +204,36 @@ func updateSetting(port int, username string, password string) {
 	}
 }

+func migrateDb() {
+	inboundService := service.InboundService{}
+
+	err := database.InitDB(config.GetDBPath())
+	if err != nil {
+		log.Fatal(err)
+	}
+	fmt.Println("Start migrating database...")
+	inboundService.MigrateDB()
+	fmt.Println("Migration done!")
+}
+
+func removeSecret() {
+	err := database.InitDB(config.GetDBPath())
+	if err != nil {
+		fmt.Println(err)
+		return
+	}
+	userService := service.UserService{}
+	err = userService.RemoveUserSecret()
+	if err != nil {
+		fmt.Println(err)
+	}
+	settingService := service.SettingService{}
+	err = settingService.SetSecretStatus(false)
+	if err != nil {
+		fmt.Println(err)
+	}
+}
+
 func main() {
 	if len(os.Args) < 2 {
 		runWebServer()
@@ -217,26 +247,27 @@ func main() {

 	v2uiCmd := flag.NewFlagSet("v2-ui", flag.ExitOnError)
 	var dbPath string
-	v2uiCmd.StringVar(&dbPath, "db", "/etc/v2-ui/v2-ui.db", "set v2-ui db file path")
+	v2uiCmd.StringVar(&dbPath, "db", fmt.Sprintf("%s/v2-ui.db", config.GetDBFolderPath()), "set v2-ui db file path")

 	settingCmd := flag.NewFlagSet("setting", flag.ExitOnError)
 	var port int
 	var username string
 	var password string
 	var tgbottoken string
-	var tgbotchatid int
+	var tgbotchatid string
 	var enabletgbot bool
 	var tgbotRuntime string
 	var reset bool
 	var show bool
+	var remove_secret bool
 	settingCmd.BoolVar(&reset, "reset", false, "reset all settings")
 	settingCmd.BoolVar(&show, "show", false, "show current settings")
 	settingCmd.IntVar(&port, "port", 0, "set panel port")
 	settingCmd.StringVar(&username, "username", "", "set login username")
 	settingCmd.StringVar(&password, "password", "", "set login password")
-	settingCmd.StringVar(&tgbottoken, "tgbottoken", "", "set telegrame bot token")
-	settingCmd.StringVar(&tgbotRuntime, "tgbotRuntime", "", "set telegrame bot cron time")
-	settingCmd.IntVar(&tgbotchatid, "tgbotchatid", 0, "set telegrame bot chat id")
+	settingCmd.StringVar(&tgbottoken, "tgbottoken", "", "set telegram bot token")
+	settingCmd.StringVar(&tgbotRuntime, "tgbotRuntime", "", "set telegram bot cron time")
+	settingCmd.StringVar(&tgbotchatid, "tgbotchatid", "", "set telegram bot chat id")
 	settingCmd.BoolVar(&enabletgbot, "enabletgbot", false, "enable telegram bot notify")

 	oldUsage := flag.Usage
@@ -246,6 +277,7 @@ func main() {
 		fmt.Println("Commands:")
 		fmt.Println("    run            run web panel")
 		fmt.Println("    v2-ui          migrate form v2-ui")
+		fmt.Println("    migrate        migrate form other/old x-ui")
 		fmt.Println("    setting        set settings")
 	}

@@ -263,6 +295,8 @@ func main() {
 			return
 		}
 		runWebServer()
+	case "migrate":
+		migrateDb()
 	case "v2-ui":
 		err := v2uiCmd.Parse(os.Args[2:])
 		if err != nil {
@@ -287,9 +321,15 @@ func main() {
 		if show {
 			showSetting(show)
 		}
-		if (tgbottoken != "") || (tgbotchatid != 0) || (tgbotRuntime != "") {
+		if (tgbottoken != "") || (tgbotchatid != "") || (tgbotRuntime != "") {
 			updateTgbotSetting(tgbottoken, tgbotchatid, tgbotRuntime)
 		}
+		if remove_secret {
+			removeSecret()
+		}
+		if enabletgbot {
+			updateTgbotEnableSts(enabletgbot)
+		}
 	default:
 		fmt.Println("except 'run' or 'v2-ui' or 'setting' subcommands")
 		fmt.Println()
--- a/media/1.png
+++ b/media/1.png
--- a/media/2.png
+++ b/media/2.png
--- a/media/3.png
+++ b/media/3.png
--- a/media/4.png
+++ b/media/4.png
--- a/media/5.png
+++ b/media/5.png
--- a/media/6.png
+++ b/media/6.png
--- a/media/configs/traffic+block-ads+ipv4-google.json
+++ b/media/configs/traffic+block-ads+ipv4-google.json
@@ -0,0 +1,88 @@
+{
+  "log": {
+    "loglevel": "warning",
+    "access": "./access.log",
+    "error": "./error.log"
+  },
+  "api": {
+    "tag": "api",
+    "services": ["HandlerService", "LoggerService", "StatsService"]
+  },
+  "inbounds": [
+    {
+      "tag": "api",
+      "listen": "127.0.0.1",
+      "port": 62789,
+      "protocol": "dokodemo-door",
+      "settings": {
+        "address": "127.0.0.1"
+      }
+    }
+  ],
+  "outbounds": [
+    {
+      "protocol": "freedom",
+      "settings": {}
+    },
+    {
+      "tag": "blocked",
+      "protocol": "blackhole",
+      "settings": {}
+    },
+    {
+      "tag": "IPv4",
+      "protocol": "freedom",
+      "settings": {
+        "domainStrategy": "UseIPv4"
+      }
+    }
+  ],
+  "policy": {
+    "levels": {
+      "0": {
+        "statsUserDownlink": true,
+        "statsUserUplink": true
+      }
+    },
+    "system": {
+      "statsInboundDownlink": true,
+      "statsInboundUplink": true
+    }
+  },
+  "routing": {
+    "domainStrategy": "IPIfNonMatch",
+    "rules": [
+      {
+        "type": "field",
+        "inboundTag": ["api"],
+        "outboundTag": "api"
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "ip": ["geoip:private"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "protocol": ["bittorrent"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "domain": [
+          "geosite:category-ads-all",
+          "geosite:category-ads",
+          "geosite:google-ads",
+          "geosite:spotify-ads"
+        ]
+      },
+      {
+        "type": "field",
+        "outboundTag": "IPv4",
+        "domain": ["geosite:google"]
+      }
+    ]
+  },
+  "stats": {}
+}
--- a/media/configs/traffic+block-ads+warp.json
+++ b/media/configs/traffic+block-ads+warp.json
@@ -0,0 +1,98 @@
+{
+  "log": {
+    "loglevel": "warning",
+    "access": "./access.log",
+    "error": "./error.log"
+  },
+  "api": {
+    "tag": "api",
+    "services": ["HandlerService", "LoggerService", "StatsService"]
+  },
+  "inbounds": [
+    {
+      "tag": "api",
+      "listen": "127.0.0.1",
+      "port": 62789,
+      "protocol": "dokodemo-door",
+      "settings": {
+        "address": "127.0.0.1"
+      }
+    }
+  ],
+  "outbounds": [
+    {
+      "protocol": "freedom",
+      "settings": {}
+    },
+    {
+      "tag": "blocked",
+      "protocol": "blackhole",
+      "settings": {}
+    },
+    {
+      "tag": "WARP",
+      "protocol": "socks",
+      "settings": {
+        "servers": [
+          {
+            "address": "127.0.0.1",
+            "port": 40000
+          }
+        ]
+      }
+    }
+  ],
+  "policy": {
+    "levels": {
+      "0": {
+        "statsUserDownlink": true,
+        "statsUserUplink": true
+      }
+    },
+    "system": {
+      "statsInboundDownlink": true,
+      "statsInboundUplink": true
+    }
+  },
+  "routing": {
+    "domainStrategy": "IPIfNonMatch",
+    "rules": [
+      {
+        "type": "field",
+        "inboundTag": ["api"],
+        "outboundTag": "api"
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "ip": ["geoip:private"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "protocol": ["bittorrent"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "domain": [
+          "geosite:category-ads-all",
+          "geosite:category-ads",
+          "geosite:google-ads",
+          "geosite:spotify-ads"
+        ]
+      },
+      {
+        "type": "field",
+        "outboundTag": "WARP",
+        "domain": [
+          "geosite:google",
+          "geosite:netflix",
+          "geosite:spotify",
+          "geosite:openai"
+        ]
+      }
+    ]
+  },
+  "stats": {}
+}
--- a/media/configs/traffic+block-iran-domains.json
+++ b/media/configs/traffic+block-iran-domains.json
@@ -0,0 +1,76 @@
+{
+  "log": {
+    "loglevel": "warning",
+    "access": "./access.log",
+    "error": "./error.log"
+  },
+  "api": {
+    "tag": "api",
+    "services": ["HandlerService", "LoggerService", "StatsService"]
+  },
+  "inbounds": [
+    {
+      "tag": "api",
+      "listen": "127.0.0.1",
+      "port": 62789,
+      "protocol": "dokodemo-door",
+      "settings": {
+        "address": "127.0.0.1"
+      }
+    }
+  ],
+  "outbounds": [
+    {
+      "protocol": "freedom",
+      "settings": {}
+    },
+    {
+      "tag": "blocked",
+      "protocol": "blackhole",
+      "settings": {}
+    }
+  ],
+  "policy": {
+    "levels": {
+      "0": {
+        "statsUserDownlink": true,
+        "statsUserUplink": true
+      }
+    },
+    "system": {
+      "statsInboundDownlink": true,
+      "statsInboundUplink": true
+    }
+  },
+  "routing": {
+    "domainStrategy": "IPIfNonMatch",
+    "rules": [
+      {
+        "type": "field",
+        "inboundTag": ["api"],
+        "outboundTag": "api"
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "ip": ["geoip:private"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "protocol": ["bittorrent"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "domain": [
+          "regexp:.*\\.ir$",
+          "ext:iran.dat:ir",
+          "ext:iran.dat:other",
+          "geosite:category-ir"
+        ]
+      }
+    ]
+  },
+  "stats": {}
+}
--- a/media/configs/traffic+block-iran-ip.json
+++ b/media/configs/traffic+block-iran-ip.json
@@ -0,0 +1,76 @@
+{
+  "log": {
+    "loglevel": "warning",
+    "access": "./access.log",
+    "error": "./error.log"
+  },
+  "api": {
+    "tag": "api",
+    "services": ["HandlerService", "LoggerService", "StatsService"]
+  },
+  "inbounds": [
+    {
+      "tag": "api",
+      "listen": "127.0.0.1",
+      "port": 62789,
+      "protocol": "dokodemo-door",
+      "settings": {
+        "address": "127.0.0.1"
+      }
+    }
+  ],
+  "outbounds": [
+    {
+      "protocol": "freedom",
+      "settings": {}
+    },
+    {
+      "tag": "blocked",
+      "protocol": "blackhole",
+      "settings": {}
+    }
+  ],
+  "policy": {
+    "levels": {
+      "0": {
+        "statsUserDownlink": true,
+        "statsUserUplink": true
+      }
+    },
+    "system": {
+      "statsInboundDownlink": true,
+      "statsInboundUplink": true
+    }
+  },
+  "routing": {
+    "domainStrategy": "IPIfNonMatch",
+    "rules": [
+      {
+        "type": "field",
+        "inboundTag": ["api"],
+        "outboundTag": "api"
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "ip": ["geoip:private"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "protocol": ["bittorrent"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "ip": ["geoip:private"]
+      },
+      {
+        "type": "field",
+        "outboundTag": "blocked",
+        "ip": ["geoip:ir"]
+      }
+    ]
+  },
+  "stats": {}
+}
--- a/media/configs/traffic.json
+++ b/media/configs/traffic.json
@@ -1,26 +1,22 @@
 {
  "log": {
-    "loglevel": "warning", 
-    "access": "./access.log"
+    "loglevel": "warning",
+    "access": "./access.log",
+    "error": "./error.log"
  },
- 
  "api": {
-    "services": [
-      "HandlerService",
-      "LoggerService",
-      "StatsService"
-    ],
-    "tag": "api"
+    "tag": "api",
+    "services": ["HandlerService", "LoggerService", "StatsService"]
  },
  "inbounds": [
    {
+      "tag": "api",
      "listen": "127.0.0.1",
      "port": 62789,
      "protocol": "dokodemo-door",
      "settings": {
        "address": "127.0.0.1"
-      },
-      "tag": "api"
+      }
    }
  ],
  "outbounds": [
@@ -29,16 +25,16 @@
      "settings": {}
    },
    {
+      "tag": "blocked",
      "protocol": "blackhole",
-      "settings": {},
-      "tag": "blocked"
+      "settings": {}
    }
  ],
  "policy": {
    "levels": {
      "0": {
-        "statsUserUplink": true,
-        "statsUserDownlink": true
+        "statsUserDownlink": true,
+        "statsUserUplink": true
      }
    },
    "system": {
@@ -50,28 +46,21 @@
    "domainStrategy": "IPIfNonMatch",
    "rules": [
      {
-        "inboundTag": [
-          "api"
-        ],
-        "outboundTag": "api",
-        "type": "field"
+        "type": "field",
+        "inboundTag": ["api"],
+        "outboundTag": "api"
      },
      {
-        "ip": [
-          "geoip:private",
-          "geoip:ir"
-        ],
+        "type": "field",
        "outboundTag": "blocked",
-        "type": "field"
+        "ip": ["geoip:private"]
      },
      {
+        "type": "field",
        "outboundTag": "blocked",
-        "protocol": [
-          "bittorrent"
-        ],
-        "type": "field"
+        "protocol": ["bittorrent"]
      }
    ]
  },
  "stats": {}
-}
+}
--- a/traffic.txt
+++ b/traffic.txt
@@ -1,75 +0,0 @@
-{
-  "log": {
-    "loglevel": "warning", 
-    "access": "./access.log"
-  },
- 
-  "api": {
-    "services": [
-      "HandlerService",
-      "LoggerService",
-      "StatsService"
-    ],
-    "tag": "api"
-  },
-  "inbounds": [
-    {
-      "listen": "127.0.0.1",
-      "port": 62789,
-      "protocol": "dokodemo-door",
-      "settings": {
-        "address": "127.0.0.1"
-      },
-      "tag": "api"
-    }
-  ],
-  "outbounds": [
-    {
-      "protocol": "freedom",
-      "settings": {}
-    },
-    {
-      "protocol": "blackhole",
-      "settings": {},
-      "tag": "blocked"
-    }
-  ],
-  "policy": {
-    "levels": {
-      "0": {
-        "statsUserUplink": true,
-        "statsUserDownlink": true
-      }
-    },
-    "system": {
-      "statsInboundDownlink": true,
-      "statsInboundUplink": true
-    }
-  },
-  "routing": {
-    "rules": [
-      {
-        "inboundTag": [
-          "api"
-        ],
-        "outboundTag": "api",
-        "type": "field"
-      },
-      {
-        "ip": [
-          "geoip:private"
-        ],
-        "outboundTag": "blocked",
-        "type": "field"
-      },
-      {
-        "outboundTag": "blocked",
-        "protocol": [
-          "bittorrent"
-        ],
-        "type": "field"
-      }
-    ]
-  },
-  "stats": {}
-}
--- a/util/common/err.go
+++ b/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)
--- a/util/common/stringUtil.go
+++ b/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
-}
--- a/util/context.go
+++ b/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
-	}
-}
--- a/util/json_util/json.go
+++ b/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")
--- a/util/sys/a.s
+++ b/util/sys/a.s
--- a/util/sys/sys_darwin.go
+++ b/util/sys/sys_darwin.go
@@ -1,3 +1,4 @@
+//go:build darwin
 // +build darwin

 package sys
--- a/util/sys/sys_linux.go
+++ b/util/sys/sys_linux.go
@@ -1,3 +1,4 @@
+//go:build linux
 // +build linux

 package sys
--- a/web/assets/ant-design-vue@1.7.2/antd-with-locales.min.js
+++ b/web/assets/ant-design-vue@1.7.2/antd-with-locales.min.js
--- a/web/assets/ant-design-vue@1.7.2/antd.min.css
+++ b/web/assets/ant-design-vue@1.7.2/antd.min.css
--- a/web/assets/ant-design-vue@1.7.2/antd.min.js
+++ b/web/assets/ant-design-vue@1.7.2/antd.min.js
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -1,5 +1,23 @@
+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 {
@@ -11,7 +29,7 @@
 }

 .ant-card {
-    border-radius: 30px;
+    border-radius: 1.5rem;
 }

 .ant-card-hoverable {
@@ -150,3 +168,309 @@
    color:rgb(255, 255, 255) !important;
    background-color: rgb(255, 127, 127);
 }
+
+.ant-table-tbody>tr>td,
+.ant-table-thead>tr>th{
+    padding:16px;
+}
+
+.ant-table-expand-icon-th,
+.ant-table-row-expand-icon-cell {
+    width: 30px;
+    min-width: 30px;
+}
+
+.ant-menu-dark,
+.ant-menu-dark .ant-menu-sub,
+.ant-layout-header,
+.ant-layout-sider-dark,
+.ant-layout-sider-zero-width-trigger,
+.ant-dropdown-menu-dark,.ant-dropdown-menu-dark .ant-dropdown-menu,
+.ant-menu-dark.ant-menu-horizontal>.ant-menu-item,.ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu {
+    background:#1A202B
+}
+
+.ant-card-dark {
+    color: hsla(0,0%,100%,.65);
+    background-color: #1a212a;
+    border-color:rgba(0,0,0,.09);
+}
+
+.ant-card-dark:hover {
+    border-color: #e8e8e8;
+    box-shadow: 0 1px 10px -1px rgb(154 175 238 / 70%);
+}
+
+.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;
+}
+
+.ant-card-dark .ant-table-tbody tr td,
+.ant-card-dark .ant-modal-title {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-collapse-content,
+.ant-card-dark .ant-calendar,
+.ant-card-dark .ant-table-placeholder,
+.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,
+.ant-card-dark .ant-list-item-meta-description,
+.ant-card-dark .ant-form-item-label>label,
+.ant-card-dark .ant-form-item,
+.ant-card-dark .ant-divider-inner-text,
+.ant-card-dark .ant-modal-confirm-content,
+.ant-card-dark .ant-modal-confirm-title,
+.ant-card-dark .ant-progress-text,
+.ant-card-dark .ant-modal-close,
+.ant-card-dark i,
+.ant-card-dark .ant-select-dropdown-menu-item,
+.ant-card-dark .ant-calendar-day-select,
+.ant-card-dark .ant-calendar-month-select,
+.ant-card-dark .ant-calendar-year-select,
+.ant-card-dark .ant-calendar-date,
+.ant-card-dark .ant-collapse>.ant-collapse-item>.ant-collapse-header,
+.ant-card-dark .ant-empty-normal,
+.ant-card-dark .ant-checkbox+span {
+    color: hsla(0,0%,100%,.65);
+}
+
+.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 {
+    background-color: #11314d;
+}
+
+.ant-card-dark tbody .ant-table-expanded-row,
+.ant-card-dark .ant-calendar-time-picker-inner {
+    color: hsla(0,0%,100%,.65);
+    background-color: #1a212a; 
+}
+
+.ant-input-number {
+    min-width: 100px;
+}
+
+.ant-card-dark .ant-input,
+.ant-card-dark .ant-input-number,
+.ant-card-dark .ant-input-number-handler-wrap,
+.ant-card-dark .ant-calendar-input,
+.ant-card-dark .ant-select-dropdown-menu-item-selected,
+.ant-card-dark .ant-select-selection,
+.ant-card-dark .ant-calendar-picker-clear {
+    color: hsla(0,0%,100%,.65);
+    background-color: rgb(46 59 82 / 50%);
+    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;
+}
+
+.ant-card-dark .ant-collapse-item {
+    color: hsla(0,0%,100%,.65);
+    background-color: #161b22;
+    border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.ant-dropdown-menu-dark,
+.ant-card-dark .ant-modal-content {
+    border:1px solid rgb(100 100 100 / 20%);
+    box-shadow: 0 2px 8px rgba(255,255,255,.15);
+}
+
+.ant-card-dark .ant-modal-content,
+.ant-card-dark .ant-modal-body,
+.ant-card-dark .ant-modal-header {
+    color: hsla(0,0%,100%,.65);
+    background-color: #222a37;
+}
+
+.ant-card-dark .ant-calendar-selected-day .ant-calendar-date {
+    background-color: rgb(0 150 112);
+}
+
+.ant-card-dark .ant-calendar-time-picker-select li:hover {
+    background: #1668dc;
+}
+
+.client-table-header {
+    background-color: #f0f2f5;
+}
+
+.client-table-odd-row {
+    background-color: #fafafa;
+}
+
+.ant-card-dark .client-table-header {
+    background-color:  #1a212a;
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .client-table-odd-row {
+    color: hsla(0,0%,100%,.65);
+    background-color: #242c3a;
+}
+
+.ant-card-dark .ant-calendar-last-month-cell .ant-calendar-date,
+.ant-card-dark .ant-calendar-next-month-btn-day .ant-calendar-date {
+    color: hsla(0,0%,100%,.30);
+}
+
+.ant-drawer-dark {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-drawer-dark .ant-drawer-wrapper-body,
+.ant-drawer-dark .drawer-handle {
+    background-color: #1a212a;
+    border: 1px solid hsla(0,0%,100%,.30);
+}
+
+.ant-card-dark .ant-tag {
+    color: hsla(0,0%,100%,.65);
+    background: rgba(255,255,255,.04);
+    border-color: #434343;
+}
+
+.ant-card-dark .ant-tag-blue {
+    color: #3c9ae8;
+    background: #111d2c;
+    border-color: #15395b;
+}
+
+.ant-card-dark .ant-tag-green {
+    color: #37b998;
+    background: #101e1a;
+    border-color: #144237;
+}
+
+.ant-card-dark .ant-tag-cyan {
+    color: #33bcb7;
+    background: #112123;
+    border-color: #144848;
+}
+
+.ant-card-dark .ant-tag-red {
+    color: #e84749;
+    background: #2a1215;
+    border-color: #58181c;
+}
+
+.ant-card-dark .ant-tag-orange {
+    color: #e89a3c;
+    background: #2b1d11;
+    border-color: #593815;
+}
+
+.ant-card-dark .ant-table-row-expand-icon,
+.ant-card-dark .ant-checkbox-inner {
+    background: none;
+}
+
+.ant-card-dark .ant-switch-checked {
+    background-color: #009670;
+}
+
+.ant-card-dark .ant-btn,
+.ant-card-dark .ant-radio-button-wrapper {
+    color: hsla(0,0%,100%,.65);
+    background: none;
+    border: 1px solid hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-radio-button-wrapper:hover {
+    color: #009670;
+}
+
+.ant-card-dark .ant-btn-primary {
+    color:  hsla(0,0%,100%,.65);
+    background-color: rgb(7 98 75 / 50%);
+    border-color: #009670;
+    text-shadow: 0 -1px 0 rgba(255,255,255,.12);
+    box-shadow: 0 2px 0 rgba(255,255,255,.045);
+}
+.ant-card-dark .ant-btn-primary:hover {
+    background-color: #009670;
+    border-color: #40a9ff00;
+}
+
+.ant-dark .ant-popover-content {
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(255,255,255,.15);
+}
+
+.ant-dark .ant-popover-inner {
+    background: #222a37;
+}
+
+.ant-dark .ant-popover-title,
+.ant-dark .ant-popover-inner-content {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-dark .ant-popover-placement-top>.ant-popover-content>.ant-popover-arrow {
+    border-color: transparent #2e3b52 #2e3b52 transparent;
+}
+
+::-webkit-scrollbar {
+    width: 0.7em;
+}
+
+::-webkit-scrollbar-track {
+    background: rgb(50 62 82 / 25%);
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgb(133 133 133 / 80%);
+    border-radius: 100vw;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #919191;
+}
--- a/web/assets/favicon.ico
+++ b/web/assets/favicon.ico
--- a/web/assets/js/axios-init.js
+++ b/web/assets/js/axios-init.js
@@ -2,11 +2,15 @@ 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.data = Qs.stringify(config.data, {
-            arrayFormat: 'repeat'
-        });
+    (config) => {
+        if (config.data instanceof FormData) {
+            config.headers['Content-Type'] = 'multipart/form-data';
+        } else {
+            config.data = Qs.stringify(config.data, {
+                arrayFormat: 'repeat',
+            });
+        }
        return config;
    },
-    error => Promise.reject(error)
-);
+    (error) => Promise.reject(error),
+);
--- a/web/assets/js/langs.js
+++ b/web/assets/js/langs.js
@@ -1,36 +1,41 @@
-supportLangs = [
+const supportLangs = [
    {
-       name : "English",
-       value : "en-US",
-       icon : "🇺🇸"
-    },
-	{
-        name : "Farsi",
-        value : "fa_IR",
-        icon : "🇮🇷"
+        name: 'English',
+        value: 'en-US',
+        icon: '🇺🇸',
    },
    {
-        name : "汉语",
-        value : "zh-Hans",
-        icon : "🇨🇳"
+        name: 'Farsi',
+        value: 'fa_IR',
+        icon: '🇮🇷',
    },
-]
+    {
+        name: '汉语',
+        value: 'zh-Hans',
+        icon: '🇨🇳',
+    },
+    {
+        name: 'Russian',
+        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=/";
-}
--- a/web/assets/js/model/models.js
+++ b/web/assets/js/model/models.js
@@ -3,6 +3,7 @@ class User {
    constructor() {
        this.username = "";
        this.password = "";
+        this.LoginSecret = "";
    }
 }

@@ -36,7 +37,8 @@ class DBInbound {
        this.remark = "";
        this.enable = true;
        this.expiryTime = 0;
-        this.iplimit = 0;
+        this.limitIp = 0;
+
        this.listen = "";
        this.port = 0;
        this.protocol = "";
@@ -109,10 +111,6 @@ class DBInbound {
    get isExpiry() {
        return this.expiryTime < new Date().getTime();
    }
-	get isDBInboundEmpty() {
-        const inbound = this.toInbound();
-        return inbound.isInboundEmpty();
-    }

    toInbound() {
        let settings = {};
@@ -155,10 +153,11 @@ class DBInbound {
        }
    }

-    genLink(clientIndex = 0) {
+    genLink(clientIndex) {
        const inbound = this.toInbound();
        return inbound.genLink(this.address, this.remark, clientIndex);
    }
+    
 	get genInboundLinks() {
        const inbound = this.toInbound();
        return inbound.genInboundLinks(this.address, this.remark);
@@ -173,11 +172,17 @@ class AllSetting {
        this.webCertFile = "";
        this.webKeyFile = "";
        this.webBasePath = "/";
+        this.sessionMaxAge = "";
+        this.expireDiff = "";
+        this.trafficDiff = "";
        this.tgBotEnable = false;
        this.tgBotToken = "";
-        this.tgBotChatId = 0;
-        this.tgRunTime = "";
+        this.tgBotChatId = "";
+        this.tgRunTime = "@daily";
+        this.tgBotBackup = false;
+        this.tgCpu = "";
        this.xrayTemplateConfig = "";
+        this.secretEnable = false;

        this.timeLocation = "Asia/Tehran";

--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
--- a/web/assets/js/util/common.js
+++ b/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=/';
+}
--- a/web/assets/js/util/date-util.js
+++ b/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;
    }
-}
+}
--- a/web/assets/js/util/utils.js
+++ b/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 = [
@@ -89,8 +87,12 @@ const seq = [
    'U', 'V', 'W', 'X', 'Y', 'Z'
 ];

-class RandomUtil {
+const shortIdSeq = [
+    'a', 'b', 'c', 'd', 'e', 'f',
+    '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
+];

+class RandomUtil {
    static randomIntRange(min, max) {
        return parseInt(Math.random() * (max - min) + min, 10);
    }
@@ -107,6 +109,14 @@ class RandomUtil {
        return str;
    }

+    static randomShortIdSeq(count) {
+        let str = '';
+        for (let i = 0; i < count; ++i) {
+            str += shortIdSeq[this.randomInt(16)];
+        }
+        return str;
+    }
+
    static randomLowerAndNum(count) {
        let str = '';
        for (let i = 0; i < count; ++i) {
@@ -136,20 +146,30 @@ class RandomUtil {
            return (c === 'x' ? r : (r & 0x7 | 0x8)).toString(16);
        });
    }
-    
+
    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;
    }
+
+    static randowShortId() {
+        let str = '';
+        str += this.randomShortIdSeq(8);
+        return str;
+    }
+
+    static randomShadowsocksPassword() {
+        let array = new Uint8Array(32);
+        window.crypto.getRandomValues(array);
+        return btoa(String.fromCharCode.apply(null, array));
+    }
 }

 class ObjectUtil {
-
    static getPropIgnoreCase(obj, prop) {
        for (const name in obj) {
            if (!obj.hasOwnProperty(name)) {
@@ -297,5 +317,4 @@ class ObjectUtil {
        }
        return true;
    }
-
 }
--- a/web/controller/api.go
+++ b/web/controller/api.go
@@ -1,13 +1,10 @@
 package controller

-import (
-	"github.com/gin-gonic/gin"
-)
+import "github.com/gin-gonic/gin"
+
 type APIController struct {
 	BaseController
-
 	inboundController *InboundController
-	settingController *SettingController
 }

 func NewAPIController(g *gin.RouterGroup) *APIController {
@@ -20,23 +17,33 @@ func (a *APIController) initRouter(g *gin.RouterGroup) {
 	g = g.Group("/xui/API/inbounds")
 	g.Use(a.checkLogin)

-	g.GET("/", a.inbounds)
-	g.GET("/get/:id", a.inbound)
+	g.GET("/list", a.getAllInbounds)
+	g.GET("/get/:id", a.getSingleInbound)
+	g.GET("/getClientTraffics/:email", a.getClientTraffics)
 	g.POST("/add", a.addInbound)
 	g.POST("/del/:id", a.delInbound)
 	g.POST("/update/:id", a.updateInbound)
+	g.POST("/clientIps/:email", a.getClientIps)
+	g.POST("/clearClientIps/:email", a.clearClientIps)
+	g.POST("/addClient", a.addInboundClient)
+	g.POST("/:id/delClient/:clientId", a.delInboundClient)
+	g.POST("/updateClient/:clientId", a.updateInboundClient)
+	g.POST("/:id/resetClientTraffic/:email", a.resetClientTraffic)
+	g.POST("/resetAllTraffics", a.resetAllTraffics)
+	g.POST("/resetAllClientTraffics/:id", a.resetAllClientTraffics)
+	g.POST("/delDepletedClients/:id", a.delDepletedClients)

-	
 	a.inboundController = NewInboundController(g)
 }
-
-
-func (a *APIController) inbounds(c *gin.Context) {
+func (a *APIController) getAllInbounds(c *gin.Context) {
 	a.inboundController.getInbounds(c)
 }
-func (a *APIController) inbound(c *gin.Context) {
+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)
 }
@@ -46,3 +53,32 @@ func (a *APIController) delInbound(c *gin.Context) {
 func (a *APIController) updateInbound(c *gin.Context) {
 	a.inboundController.updateInbound(c)
 }
+
+func (a *APIController) getClientIps(c *gin.Context) {
+	a.inboundController.getClientIps(c)
+}
+
+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)
+}
--- a/web/controller/base.go
+++ b/web/controller/base.go
@@ -1,9 +1,10 @@
 package controller

 import (
-	"github.com/gin-gonic/gin"
 	"net/http"
 	"x-ui/web/session"
+
+	"github.com/gin-gonic/gin"
 )

 type BaseController struct {
--- a/web/controller/inbound.go
+++ b/web/controller/inbound.go
@@ -33,7 +33,13 @@ func (a *InboundController) initRouter(g *gin.RouterGroup) {
 	g.POST("/update/:id", a.updateInbound)
 	g.POST("/clientIps/:email", a.getClientIps)
 	g.POST("/clearClientIps/:email", a.clearClientIps)
-	g.POST("/resetClientTraffic/:email", a.resetClientTraffic)
+	g.POST("/addClient", a.addInboundClient)
+	g.POST("/:id/delClient/:clientId", a.delInboundClient)
+	g.POST("/updateClient/:clientId", a.updateInboundClient)
+	g.POST("/:id/resetClientTraffic/:email", a.resetClientTraffic)
+	g.POST("/resetAllTraffics", a.resetAllTraffics)
+	g.POST("/resetAllClientTraffics/:id", a.resetAllClientTraffics)
+	g.POST("/delDepletedClients/:id", a.delDepletedClients)

 }

@@ -73,11 +79,21 @@ func (a *InboundController) getInbound(c *gin.Context) {
 	jsonObj(c, inbound, nil)
 }

+func (a *InboundController) getClientTraffics(c *gin.Context) {
+	email := c.Param("email")
+	clientTraffics, err := a.inboundService.GetClientTrafficByEmail(email)
+	if err != nil {
+		jsonMsg(c, "Error getting traffics", err)
+		return
+	}
+	jsonObj(c, clientTraffics, nil)
+}
+
 func (a *InboundController) addInbound(c *gin.Context) {
 	inbound := &model.Inbound{}
 	err := c.ShouldBind(inbound)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.addTo"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.create"), err)
 		return
 	}
 	user := session.GetLoginUser(c)
@@ -85,7 +101,7 @@ func (a *InboundController) addInbound(c *gin.Context) {
 	inbound.Enable = true
 	inbound.Tag = fmt.Sprintf("inbound-%v", inbound.Port)
 	inbound, err = a.inboundService.AddInbound(inbound)
-	jsonMsgObj(c, I18n(c, "pages.inbounds.addTo"), inbound, err)
+	jsonMsgObj(c, I18n(c, "pages.inbounds.create"), inbound, err)
 	if err == nil {
 		a.xrayService.SetToNeedRestart()
 	}
@@ -107,7 +123,7 @@ func (a *InboundController) delInbound(c *gin.Context) {
 func (a *InboundController) updateInbound(c *gin.Context) {
 	id, err := strconv.Atoi(c.Param("id"))
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 	inbound := &model.Inbound{
@@ -115,19 +131,20 @@ func (a *InboundController) updateInbound(c *gin.Context) {
 	}
 	err = c.ShouldBind(inbound)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.inbounds.revise"), err)
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
 		return
 	}
 	inbound, err = a.inboundService.UpdateInbound(inbound)
-	jsonMsgObj(c, I18n(c, "pages.inbounds.revise"), inbound, err)
+	jsonMsgObj(c, I18n(c, "pages.inbounds.update"), inbound, err)
 	if err == nil {
 		a.xrayService.SetToNeedRestart()
 	}
 }
+
 func (a *InboundController) getClientIps(c *gin.Context) {
 	email := c.Param("email")

-	ips , err := a.inboundService.GetInboundClientIps(email)
+	ips, err := a.inboundService.GetInboundClientIps(email)
 	if err != nil {
 		jsonObj(c, "No IP Record", nil)
 		return
@@ -139,18 +156,123 @@ func (a *InboundController) clearClientIps(c *gin.Context) {

 	err := a.inboundService.ClearClientIps(email)
 	if err != nil {
-		jsonMsg(c, "修改", err)
+		jsonMsg(c, "Update", err)
 		return
 	}
 	jsonMsg(c, "Log Cleared", nil)
 }
+func (a *InboundController) addInboundClient(c *gin.Context) {
+	data := &model.Inbound{}
+	err := c.ShouldBind(data)
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
+		return
+	}
+
+	err = a.inboundService.AddInboundClient(data)
+	if err != nil {
+		jsonMsg(c, "Something went wrong!", err)
+		return
+	}
+	jsonMsg(c, "Client(s) added", nil)
+	if err == nil {
+		a.xrayService.SetToNeedRestart()
+	}
+}
+
+func (a *InboundController) delInboundClient(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
+		return
+	}
+	clientId := c.Param("clientId")
+
+	err = a.inboundService.DelInboundClient(id, clientId)
+	if err != nil {
+		jsonMsg(c, "Something went wrong!", err)
+		return
+	}
+	jsonMsg(c, "Client deleted", nil)
+	if err == nil {
+		a.xrayService.SetToNeedRestart()
+	}
+}
+
+func (a *InboundController) updateInboundClient(c *gin.Context) {
+	clientId := c.Param("clientId")
+
+	inbound := &model.Inbound{}
+	err := c.ShouldBind(inbound)
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
+		return
+	}
+
+	err = a.inboundService.UpdateInboundClient(inbound, clientId)
+	if err != nil {
+		jsonMsg(c, "Something went wrong!", err)
+		return
+	}
+	jsonMsg(c, "Client updated", nil)
+	if err == nil {
+		a.xrayService.SetToNeedRestart()
+	}
+}
+
 func (a *InboundController) resetClientTraffic(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
+		return
+	}
 	email := c.Param("email")

-	err := a.inboundService.ResetClientTraffic(email)
+	err = a.inboundService.ResetClientTraffic(id, email)
 	if err != nil {
-		jsonMsg(c, "something worng!", err)
+		jsonMsg(c, "Something went wrong!", err)
 		return
 	}
 	jsonMsg(c, "traffic reseted", nil)
+	if err == nil {
+		a.xrayService.SetToNeedRestart()
+	}
+}
+
+func (a *InboundController) resetAllTraffics(c *gin.Context) {
+	err := a.inboundService.ResetAllTraffics()
+	if err != nil {
+		jsonMsg(c, "Something went wrong!", err)
+		return
+	}
+	jsonMsg(c, "All traffics reseted", nil)
+}
+
+func (a *InboundController) resetAllClientTraffics(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
+		return
+	}
+
+	err = a.inboundService.ResetAllClientTraffics(id)
+	if err != nil {
+		jsonMsg(c, "Something went wrong!", err)
+		return
+	}
+	jsonMsg(c, "All traffics of client reseted", nil)
+}
+
+func (a *InboundController) delDepletedClients(c *gin.Context) {
+	id, err := strconv.Atoi(c.Param("id"))
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.inbounds.update"), err)
+		return
+	}
+	err = a.inboundService.DelDepletedClients(id)
+	if err != nil {
+		jsonMsg(c, "Something went wrong!", err)
+		return
+	}
+	jsonMsg(c, "All delpeted clients are deleted", nil)
 }
--- a/web/controller/index.go
+++ b/web/controller/index.go
@@ -4,7 +4,6 @@ import (
 	"net/http"
 	"time"
 	"x-ui/logger"
-	"x-ui/web/job"
 	"x-ui/web/service"
 	"x-ui/web/session"

@@ -12,14 +11,17 @@ import (
 )

 type LoginForm struct {
-	Username string `json:"username" form:"username"`
-	Password string `json:"password" form:"password"`
+	Username    string `json:"username" form:"username"`
+	Password    string `json:"password" form:"password"`
+	LoginSecret string `json:"loginSecret" form:"loginSecret"`
 }

 type IndexController struct {
 	BaseController

-	userService service.UserService
+	settingService service.SettingService
+	userService    service.UserService
+	tgbot          service.Tgbot
 }

 func NewIndexController(g *gin.RouterGroup) *IndexController {
@@ -32,11 +34,12 @@ func (a *IndexController) initRouter(g *gin.RouterGroup) {
 	g.GET("/", a.index)
 	g.POST("/login", a.login)
 	g.GET("/logout", a.logout)
+	g.POST("/getSecretStatus", a.getSecretStatus)
 }

 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)
@@ -57,16 +60,28 @@ func (a *IndexController) login(c *gin.Context) {
 		pureJsonMsg(c, false, I18n(c, "pages.login.toasts.emptyPassword"))
 		return
 	}
-	user := a.userService.CheckUser(form.Username, form.Password)
+	user := a.userService.CheckUser(form.Username, form.Password, form.LoginSecret)
 	timeStr := time.Now().Format("2006-01-02 15:04:05")
 	if user == nil {
-		job.NewStatsNotifyJob().UserLoginNotify(form.Username, getRemoteIp(c), timeStr, 0)
+		a.tgbot.UserLoginNotify(form.Username, getRemoteIp(c), timeStr, 0)
 		logger.Infof("wrong username or password: \"%s\" \"%s\"", form.Username, form.Password)
 		pureJsonMsg(c, false, I18n(c, "pages.login.toasts.wrongUsernameOrPassword"))
 		return
 	} else {
 		logger.Infof("%s login success,Ip Address:%s\n", form.Username, getRemoteIp(c))
-		job.NewStatsNotifyJob().UserLoginNotify(form.Username, getRemoteIp(c), timeStr, 1)
+		a.tgbot.UserLoginNotify(form.Username, getRemoteIp(c), timeStr, 1)
+	}
+
+	sessionMaxAge, err := a.settingService.GetSessionMaxAge()
+	if err != nil {
+		logger.Infof("Unable to get session's max age from DB")
+	}
+
+	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)
@@ -82,3 +97,10 @@ func (a *IndexController) logout(c *gin.Context) {
 	session.ClearSession(c)
 	c.Redirect(http.StatusTemporaryRedirect, c.GetString("base_path"))
 }
+
+func (a *IndexController) getSecretStatus(c *gin.Context) {
+	status, err := a.settingService.GetSecretStatus()
+	if err == nil {
+		jsonObj(c, status, nil)
+	}
+}
--- a/web/controller/server.go
+++ b/web/controller/server.go
@@ -1,10 +1,11 @@
 package controller

 import (
-	"github.com/gin-gonic/gin"
 	"time"
 	"x-ui/web/global"
 	"x-ui/web/service"
+
+	"github.com/gin-gonic/gin"
 )

 type ServerController struct {
@@ -34,7 +35,14 @@ func (a *ServerController) initRouter(g *gin.RouterGroup) {
 	g.Use(a.checkLogin)
 	g.POST("/status", a.status)
 	g.POST("/getXrayVersion", a.getXrayVersion)
+	g.POST("/stopXrayService", a.stopXrayService)
+	g.POST("/restartXrayService", a.restartXrayService)
 	g.POST("/installXray/:version", a.installXray)
+	g.POST("/logs/:count", a.getLogs)
+	g.POST("/getConfigJson", a.getConfigJson)
+	g.GET("/getDb", a.getDb)
+	g.POST("/importDB", a.importDB)
+	g.POST("/getNewX25519Cert", a.getNewX25519Cert)
 }

 func (a *ServerController) refreshStatus() {
@@ -83,3 +91,86 @@ func (a *ServerController) installXray(c *gin.Context) {
 	err := a.serverService.UpdateXray(version)
 	jsonMsg(c, I18n(c, "install")+" xray", err)
 }
+
+func (a *ServerController) stopXrayService(c *gin.Context) {
+	a.lastGetStatusTime = time.Now()
+	err := a.serverService.StopXrayService()
+	if err != nil {
+		jsonMsg(c, "", err)
+		return
+	}
+	jsonMsg(c, "Xray stoped", err)
+}
+
+func (a *ServerController) restartXrayService(c *gin.Context) {
+	err := a.serverService.RestartXrayService()
+	if err != nil {
+		jsonMsg(c, "", err)
+		return
+	}
+	jsonMsg(c, "Xray restarted", err)
+}
+
+func (a *ServerController) getLogs(c *gin.Context) {
+	count := c.Param("count")
+	logs, err := a.serverService.GetLogs(count)
+	if err != nil {
+		jsonMsg(c, "getLogs", err)
+		return
+	}
+	jsonObj(c, logs, nil)
+}
+
+func (a *ServerController) getConfigJson(c *gin.Context) {
+	configJson, err := a.serverService.GetConfigJson()
+	if err != nil {
+		jsonMsg(c, "get config.json", err)
+		return
+	}
+	jsonObj(c, configJson, nil)
+}
+
+func (a *ServerController) getDb(c *gin.Context) {
+	db, err := a.serverService.GetDb()
+	if err != nil {
+		jsonMsg(c, "get Database", err)
+		return
+	}
+	// Set the headers for the response
+	c.Header("Content-Type", "application/octet-stream")
+	c.Header("Content-Disposition", "attachment; filename=x-ui.db")
+
+	// Write the file contents to the response
+	c.Writer.Write(db)
+}
+
+func (a *ServerController) importDB(c *gin.Context) {
+	// Get the file from the request body
+	file, _, err := c.Request.FormFile("db")
+	if err != nil {
+		jsonMsg(c, "Error reading db file", err)
+		return
+	}
+	defer file.Close()
+	// Always restart Xray before return
+	defer a.serverService.RestartXrayService()
+	defer func() {
+		a.lastGetStatusTime = time.Now()
+	}()
+	// Import it
+	err = a.serverService.ImportDB(file)
+	if err != nil {
+		jsonMsg(c, "", err)
+		return
+	}
+	jsonObj(c, "Import DB", nil)
+}
+
+func (a *ServerController) getNewX25519Cert(c *gin.Context) {
+	cert, err := a.serverService.GetNewX25519Cert()
+	if err != nil {
+		jsonMsg(c, "get x25519 certificate", err)
+		return
+	}
+	jsonObj(c, cert, nil)
+}
--- a/web/controller/setting.go
+++ b/web/controller/setting.go
@@ -2,11 +2,12 @@ package controller

 import (
 	"errors"
-	"github.com/gin-gonic/gin"
 	"time"
 	"x-ui/web/entity"
 	"x-ui/web/service"
 	"x-ui/web/session"
+
+	"github.com/gin-gonic/gin"
 )

 type updateUserForm struct {
@@ -16,6 +17,10 @@ type updateUserForm struct {
 	NewPassword string `json:"newPassword" form:"newPassword"`
 }

+type updateSecretForm struct {
+	LoginSecret string `json:"loginSecret" form:"loginSecret"`
+}
+
 type SettingController struct {
 	settingService service.SettingService
 	userService    service.UserService
@@ -32,45 +37,88 @@ func (a *SettingController) initRouter(g *gin.RouterGroup) {
 	g = g.Group("/setting")

 	g.POST("/all", a.getAllSetting)
+	g.POST("/defaultSettings", a.getDefaultSettings)
 	g.POST("/update", a.updateSetting)
 	g.POST("/updateUser", a.updateUser)
 	g.POST("/restartPanel", a.restartPanel)
+	g.GET("/getDefaultJsonConfig", a.getDefaultJsonConfig)
+	g.POST("/updateUserSecret", a.updateSecret)
+	g.POST("/getUserSecret", a.getUserSecret)
 }

 func (a *SettingController) getAllSetting(c *gin.Context) {
 	allSetting, err := a.settingService.GetAllSetting()
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.getSetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
 		return
 	}
 	jsonObj(c, allSetting, nil)
 }

+func (a *SettingController) getDefaultJsonConfig(c *gin.Context) {
+	defaultJsonConfig, err := a.settingService.GetDefaultJsonConfig()
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
+		return
+	}
+	jsonObj(c, defaultJsonConfig, nil)
+}
+
+func (a *SettingController) getDefaultSettings(c *gin.Context) {
+	expireDiff, err := a.settingService.GetExpireDiff()
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
+		return
+	}
+	trafficDiff, err := a.settingService.GetTrafficDiff()
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
+		return
+	}
+	defaultCert, err := a.settingService.GetCertFile()
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
+		return
+	}
+	defaultKey, err := a.settingService.GetKeyFile()
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.settings.toasts.getSettings"), err)
+		return
+	}
+	result := map[string]interface{}{
+		"expireDiff":  expireDiff,
+		"trafficDiff": trafficDiff,
+		"defaultCert": defaultCert,
+		"defaultKey":  defaultKey,
+	}
+	jsonObj(c, result, nil)
+}
+
 func (a *SettingController) updateSetting(c *gin.Context) {
 	allSetting := &entity.AllSetting{}
 	err := c.ShouldBind(allSetting)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifySetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifySettings"), err)
 		return
 	}
 	err = a.settingService.UpdateAllSetting(allSetting)
-	jsonMsg(c, I18n(c, "pages.setting.toasts.modifySetting"), err)
+	jsonMsg(c, I18n(c, "pages.settings.toasts.modifySettings"), err)
 }

 func (a *SettingController) updateUser(c *gin.Context) {
 	form := &updateUserForm{}
 	err := c.ShouldBind(form)
 	if err != nil {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifySetting"), err)
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifySettings"), err)
 		return
 	}
 	user := session.GetLoginUser(c)
 	if user.Username != form.OldUsername || user.Password != form.OldPassword {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifyUser"), errors.New(I18n(c, "pages.setting.toasts.originalUserPassIncorrect")))
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifyUser"), errors.New(I18n(c, "pages.settings.toasts.originalUserPassIncorrect")))
 		return
 	}
 	if form.NewUsername == "" || form.NewPassword == "" {
-		jsonMsg(c, I18n(c, "pages.setting.toasts.modifyUser"), errors.New(I18n(c, "pages.setting.toasts.userPassMustBeNotEmpty")))
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifyUser"), errors.New(I18n(c, "pages.settings.toasts.userPassMustBeNotEmpty")))
 		return
 	}
 	err = a.userService.UpdateUser(user.Id, form.NewUsername, form.NewPassword)
@@ -79,10 +127,33 @@ func (a *SettingController) updateUser(c *gin.Context) {
 		user.Password = form.NewPassword
 		session.SetLoginUser(c, user)
 	}
-	jsonMsg(c, I18n(c, "pages.setting.toasts.modifyUser"), err)
+	jsonMsg(c, I18n(c, "pages.settings.toasts.modifyUser"), err)
 }

 func (a *SettingController) restartPanel(c *gin.Context) {
 	err := a.panelService.RestartPanel(time.Second * 3)
-	jsonMsg(c, I18n(c, "pages.setting.restartPanel"), err)
+	jsonMsg(c, I18n(c, "pages.settings.restartPanel"), err)
+}
+
+func (a *SettingController) updateSecret(c *gin.Context) {
+	form := &updateSecretForm{}
+	err := c.ShouldBind(form)
+	if err != nil {
+		jsonMsg(c, I18n(c, "pages.settings.toasts.modifySettings"), err)
+	}
+	user := session.GetLoginUser(c)
+	err = a.userService.UpdateUserSecret(user.Id, form.LoginSecret)
+	if err == nil {
+		user.LoginSecret = form.LoginSecret
+		session.SetLoginUser(c, user)
+	}
+	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)
+	if user != nil {
+		jsonObj(c, user, nil)
+	}
 }
--- a/web/controller/sub.go
+++ b/web/controller/sub.go
@@ -0,0 +1,46 @@
+package controller
+
+import (
+	"encoding/base64"
+	"strings"
+	"x-ui/web/service"
+
+	"github.com/gin-gonic/gin"
+)
+
+type SUBController struct {
+	BaseController
+
+	subService service.SubService
+}
+
+func NewSUBController(g *gin.RouterGroup) *SUBController {
+	a := &SUBController{}
+	a.initRouter(g)
+	return a
+}
+
+func (a *SUBController) initRouter(g *gin.RouterGroup) {
+	g = g.Group("/sub")
+
+	g.GET("/:subid", a.subs)
+}
+
+func (a *SUBController) subs(c *gin.Context) {
+	subId := c.Param("subid")
+	host := strings.Split(c.Request.Host, ":")[0]
+	subs, header, err := a.subService.GetSubs(subId, host)
+	if err != nil || len(subs) == 0 {
+		c.String(400, "Error!")
+	} else {
+		result := ""
+		for _, sub := range subs {
+			result += sub + "\n"
+		}
+
+		// Add subscription-userinfo
+		c.Writer.Header().Set("Subscription-Userinfo", header)
+
+		c.String(200, base64.StdEncoding.EncodeToString([]byte(result)))
+	}
+}
--- a/web/controller/util.go
+++ b/web/controller/util.go
@@ -1,24 +1,16 @@
 package controller

 import (
-	"github.com/gin-gonic/gin"
 	"net"
 	"net/http"
 	"strings"
 	"x-ui/config"
 	"x-ui/logger"
 	"x-ui/web/entity"
+
+	"github.com/gin-gonic/gin"
 )

-func getUriId(c *gin.Context) int64 {
-	s := struct {
-		Id int64 `uri:"id"`
-	}{}
-
-	_ = c.BindUri(&s)
-	return s.Id
-}
-
 func getRemoteIp(c *gin.Context) string {
 	value := c.GetHeader("X-Forwarded-For")
 	if value != "" {
@@ -75,6 +67,7 @@ func html(c *gin.Context, name string, title string, data gin.H) {
 		data = gin.H{}
 	}
 	data["title"] = title
+	data["host"] = strings.Split(c.Request.Host, ":")[0]
 	data["request_uri"] = c.Request.RequestURI
 	data["base_path"] = c.GetString("base_path")
 	c.HTML(http.StatusOK, name, getContext(data))
@@ -84,10 +77,8 @@ func getContext(h gin.H) gin.H {
 	a := gin.H{
 		"cur_ver": config.GetVersion(),
 	}
-	if h != nil {
-		for key, value := range h {
-			a[key] = value
-		}
+	for key, value := range h {
+		a[key] = value
 	}
 	return a
 }
--- a/web/controller/xui.go
+++ b/web/controller/xui.go
@@ -18,12 +18,12 @@ 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)
 	g.GET("/inbounds", a.inbounds)
-	g.GET("/setting", a.setting)
+	g.GET("/settings", a.settings)

 	a.inboundController = NewInboundController(g)
 	a.settingController = NewSettingController(g)
@@ -37,6 +37,6 @@ func (a *XUIController) inbounds(c *gin.Context) {
 	html(c, "inbounds.html", "pages.inbounds.title", nil)
 }

-func (a *XUIController) setting(c *gin.Context) {
-	html(c, "setting.html", "pages.setting.title", nil)
+func (a *XUIController) settings(c *gin.Context) {
+	html(c, "settings.html", "pages.settings.title", nil)
 }
--- a/web/entity/entity.go
+++ b/web/entity/entity.go
@@ -32,13 +32,18 @@ type AllSetting struct {
 	WebCertFile        string `json:"webCertFile" form:"webCertFile"`
 	WebKeyFile         string `json:"webKeyFile" form:"webKeyFile"`
 	WebBasePath        string `json:"webBasePath" form:"webBasePath"`
+	SessionMaxAge      int    `json:"sessionMaxAge" form:"sessionMaxAge"`
+	ExpireDiff         int    `json:"expireDiff" form:"expireDiff"`
+	TrafficDiff        int    `json:"trafficDiff" form:"trafficDiff"`
 	TgBotEnable        bool   `json:"tgBotEnable" form:"tgBotEnable"`
 	TgBotToken         string `json:"tgBotToken" form:"tgBotToken"`
-	TgBotChatId        int    `json:"tgBotChatId" form:"tgBotChatId"`
+	TgBotChatId        string `json:"tgBotChatId" form:"tgBotChatId"`
 	TgRunTime          string `json:"tgRunTime" form:"tgRunTime"`
+	TgBotBackup        bool   `json:"tgBotBackup" form:"tgBotBackup"`
+	TgCpu              int    `json:"tgCpu" form:"tgCpu"`
 	XrayTemplateConfig string `json:"xrayTemplateConfig" form:"xrayTemplateConfig"`
-
-	TimeLocation string `json:"timeLocation" form:"timeLocation"`
+	TimeLocation       string `json:"timeLocation" form:"timeLocation"`
+	SecretEnable       bool   `json:"secretEnable" form:"secretEnable"`
 }

 func (s *AllSetting) CheckValid() error {
--- a/web/global/global.go
+++ b/web/global/global.go
@@ -2,8 +2,9 @@ package global

 import (
 	"context"
-	"github.com/robfig/cron/v3"
 	_ "unsafe"
+
+	"github.com/robfig/cron/v3"
 )

 var webServer WebServer
--- a/web/html/common/head.html
+++ b/web/html/common/head.html
@@ -7,11 +7,13 @@
    <link rel="stylesheet" href="{{ .base_path }}assets/ant-design-vue@1.7.2/antd.min.css">
    <link rel="stylesheet" href="{{ .base_path }}assets/element-ui@2.15.0/theme-chalk/display.css">
    <link rel="stylesheet" href="{{ .base_path }}assets/css/custom.css?{{ .cur_ver }}">
+    <link rel=”icon” type=”image/x-icon” href="{{ .base_path }}assets/favicon.ico">
+    <link rel="shortcut icon" type="image/x-icon" href="{{ .base_path }}assets/favicon.ico">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
-    <title>{{ i18n .title}}</title>
+    <title>{{ .host }}-{{ i18n .title}}</title>
 </head>
 {{end}}
--- a/web/html/common/prompt_modal.html
+++ b/web/html/common/prompt_modal.html
@@ -1,6 +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="themeSwitcher.darkCardClass"
         :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
    <a-input id="prompt-modal-input" :type="promptModal.type"
             v-model="promptModal.value"
@@ -35,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;
--- a/web/html/common/qrcode_modal.html
+++ b/web/html/common/qrcode_modal.html
@@ -1,8 +1,16 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
-         :closable="true" width="300px" :ok-text="qrModal.okText"
-         cancel-text='{{ i18n "close" }}' :ok-button-props="{attrs:{id:'qr-modal-ok-btn'}}">
-		<canvas id="qrCode" style="width: 100%; height: 100%;"></canvas>
+         :closable="true"
+         :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>
+    <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>
@@ -12,17 +20,17 @@
        content: '',
        inbound: new Inbound(),
        dbInbound: new DBInbound(),
-        okText: '',
        copyText: '',
+        clientName: null,
        qrcode: null,
        clipboard: null,
        visible: false,
-        show: function (title='', content='', dbInbound=new DBInbound(),okText='{{ i18n "copy" }}', 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.okText = okText;
+            this.clientName = clientName;
            if (ObjectUtil.isEmpty(copyText)) {
                this.copyText = content;
            } else {
@@ -30,12 +38,6 @@
            }
            this.visible = true;
            qrModalApp.$nextTick(() => {
-                if (this.clipboard === null) {
-                    this.clipboard = new ClipboardJS('#qr-modal-ok-btn', {
-                        text: () => this.copyText,
-                    });
-                    this.clipboard.on('success', () => app.$message.success('{{ i18n "copied" }}'));
-                }
                if (this.qrcode === null) {
                    this.qrcode = new QRious({
                        element: document.querySelector('#qrCode'),
@@ -53,10 +55,22 @@
    };

    const qrModalApp = new Vue({
+        delimiters: ['[[', ']]'],
        el: '#qrcode-modal',
        data: {
            qrModal: qrModal,
        },
+        methods: {
+            copyToClipboard() {
+                this.qrModal.clipboard = new ClipboardJS('#qrCode', {
+                    text: () => this.qrModal.copyText,
+                });
+                this.qrModal.clipboard.on('success', () => {
+                    app.$message.success('{{ i18n "copied" }}')
+                    this.qrModal.clipboard.destroy();
+                });
+            }
+        },
    });

 </script>
--- a/web/html/common/text_modal.html
+++ b/web/html/common/text_modal.html
@@ -1,9 +1,11 @@
 {{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="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;"
-              @click="downloader.download(txtModal.fileName, txtModal.content)">
+              :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)"
+              :download="txtModal.fileName">
        {{ i18n "download" }} [[ txtModal.fileName ]]
    </a-button>
    <a-input type="textarea" v-model="txtModal.content"
@@ -19,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;
@@ -31,15 +33,6 @@
                    });
                    this.clipboard.on('success', () => app.$message.success('{{ i18n "copied" }}'));
                }
-                if (this.qrcode === null) {
-                    this.qrcode = new QRious({
-                        element: document.querySelector('#qrCode'),
-                        size: 260,
-                        value: content,
-                    });
-                } else {
-                    this.qrcode.value = content;
-                }
            });
        },
        close: function () {
@@ -48,6 +41,7 @@
    };

    const textModalApp = new Vue({
+        delimiters: ['[[', ']]'],
        el: '#text-modal',
        data: {
            txtModal: txtModal,
--- a/web/html/login.html
+++ b/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>3x-ui {{ i18n "pages.login.title" }}</h1>
+                    <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                </a-col>
            </a-row>
            <a-row type="flex" justify="center">
@@ -48,40 +60,44 @@
                        <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">
+                            <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="4"><span>Language : </span></a-col>
-
-                                <a-col :span="6">
-                                    <a-select
-                                            ref="selectLang"
-                                            v-model="lang"
-                                            @change="setLang(lang)"
-                                    >
-                                        <a-select-option  :value="l.value" label="China" 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>
                                    </a-select>
                                </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>
@@ -90,22 +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(),
-            lang : ""
+            secretEnable: false,
+            lang: ""
        },
-        created(){
-          this.lang = getLang();
+        async created() {
+            this.updateBackground();
+            this.lang = getLang();
+            this.secretEnable = await this.getSecretStatus();
        },
        methods: {
            async login() {
@@ -113,11 +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;
+                const msg = await HttpUtil.post('/getSecretStatus');
+                this.loading = false;
+                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>
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -0,0 +1,245 @@
+{{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="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="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>
+                <a-select-option :value="3">Random+Prefix+Num+Postfix</a-select-option>
+                <a-select-option :value="4">Prefix+Num+Postfix [ BE CAREFUL! ]</a-select-option>
+            </a-select>
+        </a-form-item><br />
+        <a-form-item v-if="clientsBulkModal.emailMethod>1">
+            <span slot="label">{{ i18n "pages.client.first" }}</span>
+            <a-input-number v-model="clientsBulkModal.firstNum" :min="1"></a-input-number>
+        </a-form-item>
+        <a-form-item v-if="clientsBulkModal.emailMethod>1">
+            <span slot="label">{{ i18n "pages.client.last" }}</span>
+            <a-input-number v-model="clientsBulkModal.lastNum" :min="clientsBulkModal.firstNum"></a-input-number>
+        </a-form-item>
+        <a-form-item v-if="clientsBulkModal.emailMethod>0">
+            <span slot="label">{{ i18n "pages.client.prefix" }}</span>
+            <a-input v-model="clientsBulkModal.emailPrefix" style="width: 120px"></a-input>
+        </a-form-item>
+        <a-form-item v-if="clientsBulkModal.emailMethod>2">
+            <span slot="label">{{ i18n "pages.client.postfix" }}</span>
+            <a-input v-model="clientsBulkModal.emailPostfix" style="width: 120px"></a-input>
+        </a-form-item>
+        <a-form-item v-if="clientsBulkModal.emailMethod < 2">
+            <span slot="label">{{ i18n "pages.client.clientCount" }}</span>
+            <a-input-number v-model="clientsBulkModal.quantity" :min="1" :max="100"></a-input-number>
+        </a-form-item>
+        <a-form-item>
+                <span slot="label">
+                    Subscription
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-input v-model.trim="clientsBulkModal.subId"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <span slot="label">
+                Telegram ID
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-input v-model.trim="clientsBulkModal.tgId"></a-input>
+        </a-form-item>
+        <a-form-item>
+            <span slot="label">
+                <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                    <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-input-number v-model="clientsBulkModal.limitIp" min="0"></a-input-number>
+        </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="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="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)
+                <a-tooltip>
+                    <template slot="title">
+                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </span>
+        <a-input-number v-model="clientsBulkModal.totalGB" :min="0"></a-input-number>
+        </a-form-item>
+        <br>
+        <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+            <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
+        </a-form-item>
+        <br>
+        <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientsBulkModal.delayedStart">
+            <a-input-number v-model="delayedExpireDays" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item v-else>
+            <span slot="label">
+                <span>{{ i18n "pages.inbounds.expireDate" }}</span>
+                <a-tooltip>
+                    <template slot="title">
+                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                    </template>
+                    <a-icon type="question-circle" theme="filled"></a-icon>
+                </a-tooltip>
+            </span>
+            <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                           :dropdown-class-name="themeSwitcher.darkCardClass"
+                           v-model="clientsBulkModal.expiryTime" style="width: 300px;"></a-date-picker>
+        </a-form-item>
+    </a-form>
+</a-modal>
+<script>
+
+    const clientsBulkModal = {
+        visible: false,
+        confirmLoading: false,
+        title: '',
+        okText: '',
+        confirm: null,
+        dbInbound: new DBInbound(),
+        inbound: new Inbound(),
+        quantity: 1,
+        totalGB: 0,
+        limitIp: 0,
+        expiryTime: '',
+        emailMethod: 0,
+        firstNum: 1,
+        lastNum: 1,
+        emailPrefix: "",
+        emailPostfix: "",
+        subId: "",
+        tgId: "",
+        flow: "",
+        delayedStart: false,
+        ok() {
+            clients = [];
+            method = clientsBulkModal.emailMethod;
+            if (method > 1) {
+                start = clientsBulkModal.firstNum;
+                end = clientsBulkModal.lastNum + 1;
+            } else {
+                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 : "";
+            for (let i = start; i < end; i++) {
+                newClient = clientsBulkModal.newClient(clientsBulkModal.dbInbound.protocol);
+                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()) {
+                    newClient.flow = clientsBulkModal.flow;
+                }
+                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) => { }
+        }) {
+            this.visible = true;
+            this.title = title;
+            this.okText = okText;
+            this.confirm = confirm;
+            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.dbInbound = new DBInbound(dbInbound);
+            this.inbound = dbInbound.toInbound();
+            this.delayedStart = false;
+        },
+        getClients(protocol, clientSettings) {
+            switch (protocol) {
+                case Protocols.VMESS: return clientSettings.vmesses;
+                case Protocols.VLESS: return clientSettings.vlesses;
+                case Protocols.TROJAN: return clientSettings.trojans;
+                default: return null;
+            }
+        },
+        newClient(protocol) {
+            switch (protocol) {
+                case Protocols.VMESS: return new Inbound.VmessSettings.Vmess();
+                case Protocols.VLESS: return new Inbound.VLESSSettings.VLESS();
+                case Protocols.TROJAN: return new Inbound.TrojanSettings.Trojan();
+                default: return null;
+            }
+        },
+        close() {
+            clientsBulkModal.visible = false;
+            clientsBulkModal.loading(false);
+        },
+        loading(loading) {
+            clientsBulkModal.confirmLoading = loading;
+        },
+    };
+
+    const clientsBulkModalApp = new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#client-bulk-modal',
+        data: {
+            clientsBulkModal,
+            get inbound() {
+                return this.clientsBulkModal.inbound;
+            },
+            get delayedExpireDays() {
+                return this.clientsBulkModal.expiryTime < 0 ? this.clientsBulkModal.expiryTime / -86400000 : 0;
+            },
+            set delayedExpireDays(days) {
+                this.clientsBulkModal.expiryTime = -86400000 * days;
+            },
+        },
+    });
+
+</script>
+{{end}}
--- a/web/html/xui/client_modal.html
+++ b/web/html/xui/client_modal.html
@@ -0,0 +1,171 @@
+{{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="themeSwitcher.darkCardClass"
+         :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
+    {{template "form/client"}}
+</a-modal>
+<script>
+
+    const clientModal = {
+        visible: false,
+        confirmLoading: false,
+        title: '',
+        okText: '',
+        isEdit: false,
+        dbInbound: new DBInbound(),
+        inbound: new Inbound(),
+        clients: [],
+        clientStats: [],
+        oldClientId: "",
+        index: null,
+        clientIps: null,
+        isExpired: false,
+        delayedStart: false,
+        ok() {
+            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 }) {
+            this.visible = true;
+            this.title = title;
+            this.okText = okText;
+            this.isEdit = isEdit;
+            this.dbInbound = new DBInbound(dbInbound);
+            this.inbound = dbInbound.toInbound();
+            this.clients = this.getClients(this.inbound.protocol, this.inbound.settings);
+            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) {
+                    this.delayedStart = true;
+                }
+                this.oldClientId = this.getClientId(dbInbound.protocol, clients[index]);
+            } else {
+                this.addClient(this.inbound.protocol, this.clients);
+            }
+            this.clientStats = this.dbInbound.clientStats.find(row => row.email === this.clients[this.index].email);
+            this.confirm = confirm;
+        },
+        getClients(protocol, clientSettings) {
+            switch (protocol) {
+                case Protocols.VMESS: return clientSettings.vmesses;
+                case Protocols.VLESS: return clientSettings.vlesses;
+                case Protocols.TROJAN: return clientSettings.trojans;
+                case Protocols.SHADOWSOCKS: return clientSettings.shadowsockses;
+                default: return null;
+            }
+        },
+        getClientId(protocol, client) {
+            switch (protocol) {
+                case Protocols.TROJAN: return client.password;
+                case Protocols.SHADOWSOCKS: return client.email;
+                default: return client.id;
+            }
+        },
+        addClient(protocol, clients) {
+            switch (protocol) {
+                case Protocols.VMESS: return clients.push(new Inbound.VmessSettings.Vmess());
+                case Protocols.VLESS: return clients.push(new Inbound.VLESSSettings.VLESS());
+                case Protocols.TROJAN: return clients.push(new Inbound.TrojanSettings.Trojan());
+                case Protocols.SHADOWSOCKS: return clients.push(new Inbound.ShadowsocksSettings.Shadowsocks());
+                default: return null;
+            }
+        },
+        close() {
+            clientModal.visible = false;
+            clientModal.loading(false);
+        },
+        loading(loading) {
+            clientModal.confirmLoading = loading;
+        },
+    };
+
+    const clientModalApp = new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#client-modal',
+        data: {
+            clientModal,
+            get inbound() {
+                return this.clientModal.inbound;
+            },
+            get client() {
+                return this.clientModal.clients[this.clientModal.index];
+            },
+            get clientStats() {
+                return this.clientModal.clientStats;
+            },
+            get isEdit() {
+                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
+                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'
+                else return 'red'
+            },
+            get delayedExpireDays() {
+                return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
+            },
+            set delayedExpireDays(days) {
+                this.client.expiryTime = -86400000 * days;
+            },
+        },
+        methods: {
+            async getDBClientIps(email, event) {
+                const msg = await HttpUtil.post('/panel/inbound/clientIps/' + email);
+                if (!msg.success) {
+                    return;
+                }
+                try {
+                    ips = JSON.parse(msg.obj)
+                    ips = ips.join(",")
+                    event.target.value = ips
+                } catch (error) {
+                    // text
+                    event.target.value = msg.obj
+                }
+            },
+            async clearDBClientIps(email) {
+                const msg = await HttpUtil.post('/panel/inbound/clearClientIps/' + email);
+                if (!msg.success) {
+                    return;
+                }
+                document.getElementById("clientIPs").value = ""
+            },
+            resetClientTraffic(email, dbInboundId, iconElement) {
+                this.$confirm({
+                    title: '{{ i18n "pages.inbounds.resetTraffic"}}',
+                    content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
+                    class: themeSwitcher.darkCardClass,
+                    okText: '{{ i18n "reset"}}',
+                    cancelText: '{{ i18n "cancel"}}',
+                    onOk: async () => {
+                        iconElement.disabled = true;
+                        const msg = await HttpUtil.postWithModal('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + email);
+                        if (msg.success) {
+                            this.clientModal.clientStats.up = 0;
+                            this.clientModal.clientStats.down = 0;
+                        }
+                        iconElement.disabled = false;
+                    },
+                })
+            },
+        },
+    });
+
+</script>
+{{end}}
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -1,34 +1,20 @@
 {{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/setting">
+<a-menu-item key="{{ .base_path }}panel/settings">
    <a-icon type="setting"></a-icon>
-    <span>{{ i18n "menu.setting"}}</span>
+    <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>-->
+<!--    <span>Client</span>-->
 <!--</a-menu-item>-->
-<a-sub-menu>
-    <template slot="title">
-        <a-icon type="link"></a-icon>
-        <span>{{ i18n "menu.link"}}</span>
-    </template>
-    <a-menu-item key="https://github.com/mhsanaei/3x-ui/">
-        <a-icon type="github"></a-icon>
-        <span>Github</span>
-    </a-menu-item>
-    <a-menu-item key="https://t.me/xxxuiforever">
-        <a-icon type="usergroup-add"></a-icon>
-        <span>Telegram</span>
-    </a-menu-item>
-</a-sub-menu>
 <a-menu-item key="{{ .base_path }}logout">
    <a-icon type="logout"></a-icon>
    <span>{{ i18n "menu.logout"}}</span>
@@ -37,25 +23,38 @@


 {{define "commonSider"}}
-<a-layout-sider id="sider" collapsible breakpoint="md" collapsed-width="0">
-    <a-menu theme="dark" mode="inline" :selected-keys="['{{ .request_uri }}']"
+<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>
+            <theme-switch />
+        </a-menu-item>
+    </a-menu>
+    <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-layout-sider>
 <a-drawer id="sider-drawer" placement="left" :closable="false"
          @close="siderDrawer.close()"
-          :visible="siderDrawer.visible" :wrap-style="{ padding: 0 }">
+          :visible="siderDrawer.visible"
+          :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="light" mode="inline" :selected-keys="['{{ .request_uri }}']"
+    <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+        <a-menu-item mode="inline">
+            <a-icon type="bg-colors"></a-icon>
+            <theme-switch />
+        </a-menu-item>
+    </a-menu>
+    <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 siderDrawer = {
        visible: false,
        show() {
@@ -66,8 +65,7 @@
        },
        change() {
            this.visible = !this.visible;
-        }
+        },
    };
-
 </script>
 {{end}}
--- a/web/html/xui/component/inbound_info.html
+++ b/web/html/xui/component/inbound_info.html
@@ -1,94 +0,0 @@
-{{define "inboundInfoStream"}}
-<p>{{ i18n "transmission" }}: <a-tag color="green">[[ inbound.network ]]</a-tag></p>
-
-<template v-if="inbound.isTcp || inbound.isWs || inbound.isH2">
-    <p v-if="inbound.host">host: <a-tag color="green">[[ inbound.host ]]</a-tag></p>
-    <p v-else>{{ i18n "host" }}: <a-tag color="orange">{{ i18n "none" }}</a-tag></p>
-
-    <p v-if="inbound.path">path: <a-tag color="green">[[ inbound.path ]]</a-tag></p>
-    <p v-else>{{ i18n "path" }}: <a-tag color="orange">{{ i18n "none" }}</a-tag></p>
-</template>
-
-<template v-if="inbound.isQuic">
-    <p>quic {{ i18n "encryption" }}: <a-tag color="green">[[ inbound.quicSecurity ]]</a-tag></p>
-    <p>quic {{ i18n "password" }}: <a-tag color="green">[[ inbound.quicKey ]]</a-tag></p>
-    <p>quic {{ i18n "camouflage" }}: <a-tag color="green">[[ inbound.quicType ]]</a-tag></p>
-</template>
-
-<template v-if="inbound.isKcp">
-    <p>kcp {{ i18n "encryption" }}: <a-tag color="green">[[ inbound.kcpType ]]</a-tag></p>
-    <p>kcp {{ i18n "password" }}: <a-tag color="green">[[ inbound.kcpSeed ]]</a-tag></p>
-</template>
-
-<template v-if="inbound.isGrpc">
-    <p>grpc serviceName: <a-tag color="green">[[ inbound.serviceName ]]</a-tag></p>
-</template>
-
-<template v-if="inbound.tls || inbound.xtls">
-    <p v-if="inbound.tls">tls: <a-tag color="green">{{ i18n "enabled" }}</a-tag></p>
-    <p v-if="inbound.xtls">xtls: <a-tag color="green">{{ i18n "enabled" }}</a-tag></p>
-</template>
-<template v-else>
-    <p>tls: <a-tag color="red">{{ i18n "disabled" }}</a-tag></p>
-</template>
-<p v-if="inbound.tls">
-    tls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-</p>
-<p v-if="inbound.xtls">
-    xtls {{ i18n "domainName" }}: <a-tag :color="inbound.serverName ? 'green' : 'orange'">[[ inbound.serverName ? inbound.serverName : '' ]]</a-tag>
-</p>
-{{end}}
-
-
-{{define "component/inboundInfoComponent"}}
-<div>
-    <p>{{ i18n "protocol"}}: <a-tag color="green">[[ dbInbound.protocol ]]</a-tag></p>
-    <p>{{ i18n "pages.inbounds.address"}}: <a-tag color="blue">[[ dbInbound.address ]]</a-tag></p>
-    <p>{{ i18n "pages.inbounds.port"}}: <a-tag color="green">[[ dbInbound.port ]]</a-tag></p>
-
-    <template v-if="dbInbound.isVMess" v-for="(vmess, index) in inbound.settings.vmesses">
-        <p>uuid: <a-tag color="green">[[ vmess.id ]]</a-tag></p>
-        <p>alterId: <a-tag color="green">[[ vmess.alterId ]]</a-tag></p>
-        <a-divider style="height: 2px; background-color: #7e7e7e" />
-    </template>
-
-    <template v-if="dbInbound.isVLess" v-for="(vless, index) in inbound.settings.vlesses">
-        <p>uuid: <a-tag color="green">[[ vless.id ]]</a-tag></p>
-        <p v-if="inbound.isXTls">flow: <a-tag color="green">[[ vless.flow ]]</a-tag></p>
-        <a-divider style="height: 2px; background-color: #7e7e7e" />
-    </template>
-
-    <template v-if="dbInbound.isTrojan">
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isSS">
-        <p>{{ i18n "encryption"}}: <a-tag color="green">[[ inbound.method ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isSocks">
-        <p>{{ i18n "username"}}: <a-tag color="green">[[ inbound.username ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isHTTP">
-        <p>{{ i18n "username"}}: <a-tag color="green">[[ inbound.username ]]</a-tag></p>
-        <p>{{ i18n "password"}}: <a-tag color="green">[[ inbound.password ]]</a-tag></p>
-    </template>
-
-    <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-        {{template "inboundInfoStream"}}
-    </template>
-</div>
-{{end}}
-
-{{define "component/inboundInfo"}}
-<script>
-    Vue.component('inbound-info', {
-        delimiters: ['[[', ']]'],
-        props: ["dbInbound", "inbound"],
-        template: `{{template "component/inboundInfoComponent"}}`,
-    });
-</script>
-{{end}}
--- a/web/html/xui/component/password.html
+++ b/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}}
--- a/web/html/xui/component/setting.html
+++ b/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>
@@ -9,10 +16,7 @@
                <a-input :value="value" @input="$emit('input', $event.target.value)"></a-input>
            </template>
            <template v-else-if="type === 'number'">
-                <a-input type="number" :value="value" @input="$emit('input', $event.target.value)"></a-input>
-            </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>
+                <a-input-number :value="value" @change="value => $emit('input', value)" :min="min" style="width: 100%;"></a-input-number>
            </template>
            <template v-else-if="type === 'switch'">
                <a-switch :checked="value" @change="value => $emit('input', value)"></a-switch>
@@ -25,8 +29,8 @@
 {{define "component/setting"}}
 <script>
    Vue.component('setting-list-item', {
-        props: ["type", "title", "desc", "value"],
+        props: ["type", "title", "desc", "value", "min"],
        template: `{{template "component/settingListItem"}}`,
    });
 </script>
-{{end}}
+{{end}}
--- a/web/html/xui/component/themeSwitch.html
+++ b/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}}
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -0,0 +1,163 @@
+{{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>
+    </template>
+    <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
+        <a-switch v-model="client.enable"></a-switch>
+    </a-form-item>
+    <br>
+    <a-form-item>
+        <span slot="label">
+            <span>{{ i18n "pages.inbounds.email" }}</span>
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
+                </template>
+            </a-tooltip>
+        </span>
+        <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-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">
+        <span slot="label">
+            Subscription
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+                </template>
+                <a-icon type="question-circle" theme="filled"></a-icon>
+            </a-tooltip>
+        </span>
+        <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
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+                </template>
+                <a-icon type="question-circle" theme="filled"></a-icon>
+            </a-tooltip>
+        </span>
+        <a-input v-model.trim="client.tgId"></a-input>
+    </a-form-item>
+	<a-form-item>
+		<span slot="label">
+			<span>{{ i18n "pages.inbounds.IPLimit" }}</span>
+			<a-tooltip>
+				<template slot="title">
+				<span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
+				</template>
+				<a-icon type="question-circle" theme="filled"></a-icon>
+			</a-tooltip>
+		</span>
+		<a-input-number v-model="client.limitIp" min="0"></a-input-number>
+	</a-form-item>
+	<a-form-item v-if="client.email && client.limitIp > 0 && isEdit">
+		<span slot="label">
+			<span>{{ i18n "pages.inbounds.IPLimitlog" }}</span>
+			<a-tooltip>
+				<template slot="title">
+				<span>{{ i18n "pages.inbounds.IPLimitlogDesc" }}</span>
+				</template>
+				<a-icon type="question-circle" theme="filled"></a-icon>
+			</a-tooltip>
+			<a-tooltip>
+				<template slot="title">
+				<span>{{ i18n "pages.inbounds.IPLimitlogclear" }}</span>
+				</template>
+				<span style="color: #FF4D4F">
+				<a-icon type="delete" @click="clearDBClientIps(client.email)"></a-icon>
+				</span>
+			</a-tooltip>
+		</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>
+		</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="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="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)
+            <a-tooltip>
+                <template slot="title">
+                    0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                </template>
+                <a-icon type="question-circle" theme="filled"></a-icon>
+            </a-tooltip>
+        </span>
+        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+        <template v-if="isEdit && clientStats">
+            <br>
+            <span> {{ i18n "usage" }}:</span>
+            <a-tag :color="statsColor">
+                [[ sizeFormat(clientStats.up) ]] / 
+                [[ sizeFormat(clientStats.down) ]]
+                ([[ sizeFormat(clientStats.up + clientStats.down) ]])
+            </a-tag>
+            <a-tooltip>
+                <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
+                <a-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
+                        v-if="client.email.length > 0"></a-icon>
+            </a-tooltip>
+        </template>        
+    </a-form-item>
+    <br>
+    <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+        <a-switch v-model="clientModal.delayedStart" @click="client._expiryTime=0"></a-switch>
+    </a-form-item>
+    <br>
+    <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientModal.delayedStart">
+        <a-input-number v-model="delayedExpireDays" :min="0"></a-input-number>
+    </a-form-item>
+    <a-form-item v-else>
+        <span slot="label">
+            <span>{{ i18n "pages.inbounds.expireDate" }}</span>
+            <a-tooltip>
+                <template slot="title">
+                    <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                </template>
+                <a-icon type="question-circle" theme="filled"></a-icon>
+            </a-tooltip>
+        </span>
+        <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                       :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>
+</a-form>
+{{end}}
--- a/web/html/xui/form/inbound.html
+++ b/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;">
+        <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>
@@ -24,12 +24,14 @@
        </span>
        <a-input v-model.trim="inbound.listen"></a-input>
    </a-form-item>
+    <br>
    <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-        <a-input type="number" v-model.number="inbound.port"></a-input>
+        <a-input-number v-model="inbound.port"></a-input-number>
    </a-form-item>
+    <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>
@@ -41,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>
@@ -49,7 +51,8 @@
                <a-icon type="question-circle" theme="filled"></a-icon>
            </a-tooltip>
        </span>
-        <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
+        <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                       :dropdown-class-name="themeSwitcher.darkCardClass"
                       v-model="dbInbound._expiryTime" style="width: 300px;"></a-date-picker>
    </a-form-item>
 </a-form>
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -4,14 +4,19 @@
        <a-input v-model.trim="inbound.settings.address"></a-input>
    </a-form-item>
    <a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
-        <a-input type="number" v-model.number="inbound.settings.port"></a-input>
+        <a-input-number v-model="inbound.settings.port"></a-input-number>
    </a-form-item>
+    <br>
    <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
-        <a-select v-model="inbound.settings.network" style="width: 100px;">
-            <a-select-option value="tcp,udp">tcp+udp</a-select-option>
-            <a-select-option value="tcp">tcp</a-select-option>
-            <a-select-option value="udp">udp</a-select-option>
+        <a-select 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>
        </a-select>
    </a-form-item>
+    <br>
+    <a-form-item label="FollowRedirect">
+        <a-switch v-model="inbound.settings.followRedirect"></a-switch>
+    </a-form-item>
 </a-form>
 {{end}}
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -1,18 +1,124 @@
 {{define "form/shadowsocks"}}
+<a-form layout="inline" style="padding: 10px 0px;">
+    <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.shadowsockses.slice(0,1)" v-if="!isEdit">
+        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
+            <a-form-item>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.email" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
+                        </template>
+                    </a-tooltip>
+                </span>
+                <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>
+                <a-input v-model.trim="client.password" style="width: 250px;"></a-input>
+            </a-form-item>
+            <a-form-item v-if="client.email">
+                <span slot="label">
+                    Subscription
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <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
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-input v-model.trim="client.tgId"></a-input>
+            </a-form-item>
+            <a-form-item>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-input-number v-model="client.limitIp" min="0"></a-input-number>
+            </a-form-item>
+            <br>
+            <a-form-item>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <a-tooltip>
+                        <template slot="title">
+                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+            </a-form-item>
+            <br>
+            <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+                <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+            </a-form-item>
+            <br>
+            <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
+                <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+            </a-form-item>
+            <a-form-item v-else>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                                :dropdown-class-name="themeSwitcher.darkCardClass"
+                                v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
+            </a-form-item>
+        </a-collapse-panel>
+    </a-collapse>
+    <a-collapse v-else>
+        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.shadowsockses.length">
+            <table width="100%">
+                <tr class="client-table-header">
+                    <th v-for="col in Object.keys(inbound.settings.shadowsockses[0]).slice(0, 3)">[[ col ]]</th>
+                </tr>
+                <tr v-for="(client, index) in inbound.settings.shadowsockses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                    <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
+                </tr>
+            </table>
+        </a-collapse-panel>
+    </a-collapse>
+</a-form>
 <a-form layout="inline">
    <a-form-item label='{{ i18n "encryption" }}'>
-        <a-select v-model="inbound.settings.method" style="width: 165px;">
+        <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>
    <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.trim="inbound.settings.password"></a-input>
+        <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;">
-            <a-select-option value="tcp,udp">tcp+udp</a-select-option>
-            <a-select-option value="tcp">tcp</a-select-option>
-            <a-select-option value="udp">udp</a-select-option>
+        <a-select 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>
        </a-select>
    </a-form-item>
 </a-form>
--- a/web/html/xui/form/protocol/socks.html
+++ b/web/html/xui/form/protocol/socks.html
@@ -1,10 +1,10 @@
 {{define "form/socks"}}
 <a-form layout="inline">
-<!--    <a-form-item label="密码认证">-->
    <a-form-item label='{{ i18n "password" }}'>
        <a-switch :checked="inbound.settings.auth === 'password'"
                  @change="checked => inbound.settings.auth = checked ? 'password' : 'noauth'"></a-switch>
    </a-form-item>
+    <br>
    <template v-if="inbound.settings.auth === 'password'">
        <a-form-item label='{{ i18n "username" }}'>
            <a-input v-model.trim="inbound.settings.accounts[0].user"></a-input>
@@ -13,11 +13,11 @@
            <a-input v-model.trim="inbound.settings.accounts[0].pass"></a-input>
        </a-form-item>
    </template>
+    <br>
    <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>
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -1,161 +1,149 @@
 {{define "form/trojan"}}
-<a-form layout="inline">
-<label>{{ i18n "clients"}} </label>
-<a-collapse activeKey="0"  v-for="(trojan, index) in inbound.settings.trojans"
-:key="`trojan-${index}`">
-
-    <a-collapse-panel :class="getHeaderStyle(trojan.email)" :header="getHeaderText(trojan.email)">
-        <a-tag v-if="isExpiry(index) || ((getUpStats(trojan.email) + getDownStats(trojan.email)) > trojan.totalGB && trojan.totalGB != 0)" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag>
-        <a-form layout="inline">
+<a-form layout="inline" style="padding: 10px 0px;">
+    <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.trojans.slice(0,1)" v-if="!isEdit">
+        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
            <a-form-item>
                <span slot="label">
-                    Email
+                    <span>{{ i18n "pages.inbounds.email" }}</span>
                    <a-tooltip>
                        <template slot="title">
-                            The Email Must Be Completely Unique
+                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                        </template>
-                        <!--Renew Svg Icon-->
-                        <svg 
-                            @click="getNewEmail(trojan)"
-                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="anticon anticon-question-circle" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> </svg>
                    </a-tooltip>
                </span>
-                <a-input v-model.trim="trojan.email"></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>
+            <a-form-item label="Password">
+                <a-input v-model.trim="client.password" style="width: 150px;"></a-input>
+            </a-form-item>
+            <a-form-item v-if="client.email">
                <span slot="label">
-                    IP Count Limit
+                    Subscription
                    <a-tooltip>
                        <template slot="title">
-                            disable inbound if more than entered count (0 for disable limit ip)
+                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
                </span>
-                <a-input type="number" v-model.number="trojan.limitIp" min="0" ></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="trojan.email && trojan.limitIp > 0 && isEdit">
+            <a-form-item v-if="client.email">
                <span slot="label">
-                    IP log
+                    Telegram ID
                    <a-tooltip>
                        <template slot="title">
-                            IPs history Log (before enabling inbound after it has been disabled by IP limit, you should clear the log)
+                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
+                </span>
+                <a-input v-model.trim="client.tgId"></a-input>
+            </a-form-item>
+            <a-form-item>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
                    <a-tooltip>
                        <template slot="title">
-                            clear the log
+                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
                        </template>
-                        <span style="color: #FF4D4F">
-                            <a-icon type="delete" @click="clearDBClientIps(trojan.email,$event)"></a-icon>
-                        </span>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
                </span>
-                <a-form layout="block">
-                    <a-textarea readonly @click="getDBClientIps(trojan.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
-                    </a-textarea>
-                </a-form>
+                <a-input-number v-model="client.limitIp" min="0"></a-input-number>
            </a-form-item>
-        </a-form>
-        <a-form-item label="Password">
-            <a-input v-model.trim="trojan.password"></a-input>
-        </a-form-item>
-        <a-form-item v-if="inbound.xtls" label="Flow">
-            <a-select v-model="trojan.flow" style="width: 150px">
-                <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)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-input-number v-model="trojan._totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                           v-model="trojan._expiryTime" style="width: 300px;"></a-date-picker>
-        </a-form-item>
-        <a-form layout="inline">
-            <a-tooltip v-if="trojan._totalGB > 0">
-                <template slot="title">
-                    {{ i18n "pages.inbounds.resetTraffic" }}
-                </template>
-                <span style="color: #FF4D4F">
-                    <a-icon type="delete" @click="resetClientTraffic(trojan,$event)"></a-icon>
+            <br>
+            <a-form-item v-if="inbound.xtls" label="Flow">
+                <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)
+                    <a-tooltip>
+                        <template slot="title">
+                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
                </span>
-            </a-tooltip>
-            <a-tag color="blue">[[ sizeFormat(getUpStats(trojan.email)) ]] / [[ sizeFormat(getDownStats(trojan.email)) ]]</a-tag>
-            <a-tag v-if="trojan._totalGB > 0" color="red">used : [[ sizeFormat(getUpStats(trojan.email) + getDownStats(trojan.email)) ]]</a-tag>
-            <a-tag v-show="inbound.settings.trojans.length > 1" @click="removeClient(index, inbound.settings.trojans)">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22" class="mt-2 cursor-pointer">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path fill="#EC4899"
-                    d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
-                    />
-                </svg>
-            </a-tag>
-        </a-form>
-    </a-collapse-panel>
-</a-collapse>
-<a-tag @click="addClient(inbound.protocol, inbound.settings.trojans)">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="ml-2 cursor-pointer">
-        <path fill="none" d="M0 0h24v24H0z" />
-        <path fill="green"
-        d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
-        />
-    </svg>
-</a-tag>
-
-<a-form layout="inline">
-    <a-form-item label="Fallbacks">
-        <a-row>
-            <a-button type="primary" size="small"
-                      @click="inbound.settings.addTrojanFallback()">
-                +
-            </a-button>
-        </a-row>
-    </a-form-item>
+                <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+            </a-form-item>
+            <br>
+            <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+                <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+            </a-form-item>
+            <br>
+            <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
+                <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+            </a-form-item>
+            <a-form-item v-else>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                                :dropdown-class-name="themeSwitcher.darkCardClass"
+                                v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
+            </a-form-item>
+        </a-collapse-panel>
+    </a-collapse>
+    <a-collapse v-else>
+        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.trojans.length">
+            <table width="100%">
+                <tr class="client-table-header">
+                    <th v-for="col in Object.keys(inbound.settings.trojans[0]).slice(0, 3)">[[ col ]]</th>
+                </tr>
+                <tr v-for="(client, index) in inbound.settings.trojans" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                    <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
+                </tr>
+            </table>
+        </a-collapse-panel>
+    </a-collapse>
 </a-form>
+<template v-if="inbound.isTcp">
+    <a-form layout="inline">
+        <a-form-item label="Fallbacks">
+            <a-row>
+                <a-button type="primary" size="small" @click="inbound.settings.addTrojanFallback()">
+                    +
+                </a-button>
+            </a-row>
+        </a-form-item>
+    </a-form>

-<!-- trojan fallbacks -->
-<a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
-    <a-divider>
-        fallback[[ index + 1 ]]
-        <a-icon type="delete" @click="() => inbound.settings.delTrojanFallback(index)"
-                style="color: rgb(255, 77, 79);cursor: pointer;"/>
-    </a-divider>
-    <a-form-item label="Name">
-        <a-input v-model="fallback.name"></a-input>
-    </a-form-item>
-    <a-form-item label="Alpn">
-        <a-input v-model="fallback.alpn"></a-input>
-    </a-form-item>
-    <a-form-item label="Path">
-        <a-input v-model="fallback.path"></a-input>
-    </a-form-item>
-    <a-form-item label="Dest">
-        <a-input v-model="fallback.dest"></a-input>
-    </a-form-item>
-    <a-form-item label="xVer">
-        <a-input type="number" v-model.number="fallback.xver"></a-input>
-    </a-form-item>
-    <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
-</a-form>
+    <!-- trojan fallbacks -->
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+        <a-divider>
+            fallback[[ index + 1 ]]
+            <a-icon type="delete" @click="() => inbound.settings.delTrojanFallback(index)"
+                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
+        </a-divider>
+        <a-form-item label="Name">
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>
+        <a-form-item label="Alpn">
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label="Path">
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label="Dest">
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label="xVer">
+            <a-input-number v-model="fallback.xver"></a-input-number>
+        </a-form-item>
+        <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
+    </a-form>
+</template>
 {{end}}
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -1,175 +1,156 @@
 {{define "form/vless"}}
-<a-form layout="inline">
-<label>{{ i18n "clients"}}</label>
-<a-collapse activeKey="0"  v-for="(vless, index) in inbound.settings.vlesses"
-:key="`vless-${index}`">
-
-    <a-collapse-panel :class="getHeaderStyle(vless.email)" :header="getHeaderText(vless.email)">
-        <a-tag v-if="isExpiry(index) || ((getUpStats(vless.email) + getDownStats(vless.email)) > vless.totalGB && vless.totalGB != 0)" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag>
-
-        <a-form layout="inline">
+<a-form layout="inline" style="padding: 10px 0px;">
+    <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vlesses.slice(0,1)" v-if="!isEdit">
+        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
            <a-form-item>
                <span slot="label">
-                    Email
+                    <span>{{ i18n "pages.inbounds.email" }}</span>
                    <a-tooltip>
                        <template slot="title">
-                            The Email Must Be Completely Unique
+                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                        </template>
-                        <!--Renew Svg Icon-->
-                        <svg 
-                            @click="getNewEmail(vless)"
-                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="anticon anticon-question-circle" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> </svg>
                    </a-tooltip>
                </span>
-                <a-input v-model.trim="vless.email"></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>
+            <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">
                <span slot="label">
-                    IP Count Limit
+                    Subscription
                    <a-tooltip>
                        <template slot="title">
-                            disable inbound if more than entered count (0 for disable limit ip)
+                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
                </span>
-                <a-input type="number" v-model.number="vless.limitIp" min="0" ></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="vless.email && vless.limitIp > 0 && isEdit">
+            <a-form-item v-if="client.email">
                <span slot="label">
-                    IP log
+                    Telegram ID
                    <a-tooltip>
                        <template slot="title">
-                            IPs history Log (before enabling inbound after it has been disabled by IP limit, you should clear the log)
+                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
+                </span>
+                <a-input v-model.trim="client.tgId"></a-input>
+            </a-form-item>
+            <a-form-item>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
                    <a-tooltip>
                        <template slot="title">
-                            clear the log
+                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
                        </template>
-                        <span style="color: #FF4D4F">
-                            <a-icon type="delete" @click="clearDBClientIps(vless.email,$event)"></a-icon>
-                        </span>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
                </span>
-                <a-form layout="block">
-
-                    <a-textarea readonly @click="getDBClientIps(vless.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
-                    </a-textarea>
-                </a-form>
+                <a-input-number v-model="client.limitIp" min="0"></a-input-number>
            </a-form-item>
-        </a-form>
-        <a-form-item label="ID">
-            <a-input v-model.trim="vless.id"></a-input>
-        </a-form-item>
-		<a-form-item v-if="inbound.xtls" label="Flow">
-            <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 150px">
-                <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" layout="inline">
-            <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 150px">
-                <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 v-if="inbound.tls" label="uTLS" layout="inline">
-                <a-select v-model="inbound.settings.vlesses[index].fingerprint" label="uTLS" style="width: 150px">
-                    <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
+            <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="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>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-input-number v-model="vless._totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                           v-model="vless._expiryTime" style="width: 300px;"></a-date-picker>
-        </a-form-item>
-        <a-form layout="inline">
-            <a-tooltip v-if="vless._totalGB > 0">
-                <template slot="title">
-                    {{ i18n "pages.inbounds.resetTraffic" }}
-                </template>
-                <span style="color: #FF4D4F">
-                    <a-icon type="delete" @click="resetClientTraffic(vless,$event)"></a-icon>
+            </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="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)
+                    <a-tooltip>
+                        <template slot="title">
+                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
                </span>
-            </a-tooltip>
-            <a-tag color="blue">[[ sizeFormat(getUpStats(vless.email)) ]] / [[ sizeFormat(getDownStats(vless.email)) ]]</a-tag>
-            <a-tag v-if="vless._totalGB > 0" color="red">used : [[ sizeFormat(getUpStats(vless.email) + getDownStats(vless.email)) ]]</a-tag>
-
-            <a-tag v-show="inbound.settings.vlesses.length > 1" @click="removeClient(index, inbound.settings.vlesses)">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22" class="mt-2 cursor-pointer">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <path fill="#EC4899"
-                    d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
-                    />
-                </svg>
-            </a-tag>
-        </a-form>
-    </a-collapse-panel>
-</a-collapse>
-<a-tag @click="addClient(inbound.protocol, inbound.settings.vlesses)">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="ml-2 cursor-pointer">
-        <path fill="none" d="M0 0h24v24H0z" />
-        <path fill="green"
-        d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
-        />
-    </svg>
-</a-tag>
-
-<a-form layout="inline">
-    <a-form-item label="Fallbacks">
-        <a-row>
-            <a-button type="primary" size="small"
-                      @click="inbound.settings.addFallback()">
-                +
-            </a-button>
-        </a-row>
-    </a-form-item>
+                <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+            </a-form-item>
+            <br>
+            <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+                <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+            </a-form-item>
+            <br>
+            <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
+                <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+            </a-form-item>
+            <a-form-item v-else>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                               :dropdown-class-name="themeSwitcher.darkCardClass"
+                               v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
+            </a-form-item>
+        </a-collapse-panel>     
+    </a-collapse>
+    <a-collapse v-else>
+        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount"}} : ' + inbound.settings.vlesses.length">
+            <table width="100%">
+                <tr class="client-table-header">
+                    <th v-for="col in Object.keys(inbound.settings.vlesses[0]).slice(0, 3)">[[ col ]]</th>
+                </tr>
+                <tr v-for="(client, index) in inbound.settings.vlesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                    <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
+                </tr>
+            </table>
+        </a-collapse-panel>
+    </a-collapse>
 </a-form>
-
-<!-- vless fallbacks -->
-<a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
-    <a-divider>
-        fallback[[ index + 1 ]]
-        <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
-                style="color: rgb(255, 77, 79);cursor: pointer;"/>
-    </a-divider>
-    <a-form-item label="Name">
-        <a-input v-model="fallback.name"></a-input>
-    </a-form-item>
-    <a-form-item label="Alpn">
-        <a-input v-model="fallback.alpn"></a-input>
-    </a-form-item>
-    <a-form-item label="Path">
-        <a-input v-model="fallback.path"></a-input>
-    </a-form-item>
-    <a-form-item label="Dest">
-        <a-input v-model="fallback.dest"></a-input>
-    </a-form-item>
-    <a-form-item label="xVer">
-        <a-input type="number" v-model.number="fallback.xver"></a-input>
-    </a-form-item>
-    <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
-</a-form>
-{{end}}
+<template v-if="inbound.isTcp">
+    <a-form layout="inline">
+        <a-form-item label="Fallbacks">
+            <a-row>
+                <a-button type="primary" size="small" @click="inbound.settings.addFallback()">
+                    +
+                </a-button>
+            </a-row>
+        </a-form-item>
+    </a-form>
+    
+    <!-- vless fallbacks -->
+    <a-form v-for="(fallback, index) in inbound.settings.fallbacks" layout="inline">
+        <a-divider>
+            fallback[[ index + 1 ]]
+            <a-icon type="delete" @click="() => inbound.settings.delFallback(index)"
+                    style="color: rgb(255, 77, 79);cursor: pointer;"/>
+        </a-divider>
+        <a-form-item label="Name">
+            <a-input v-model="fallback.name"></a-input>
+        </a-form-item>
+        <a-form-item label="Alpn">
+            <a-input v-model="fallback.alpn"></a-input>
+        </a-form-item>
+        <a-form-item label="Path">
+            <a-input v-model="fallback.path"></a-input>
+        </a-form-item>
+        <a-form-item label="Dest">
+            <a-input v-model="fallback.dest"></a-input>
+        </a-form-item>
+        <a-form-item label="xVer">
+            <a-input-number v-model="fallback.xver"></a-input-number>
+        </a-form-item>
+        <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
+    </a-form>
+</template>
+{{end}}
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -1,131 +1,118 @@
 {{define "form/vmess"}}
-<a-form layout="inline">
-<label>{{ i18n "clients"}}</label>
-<a-collapse activeKey="0"  v-for="(vmess, index) in inbound.settings.vmesses"
-:key="`vmess-${index}`">
-    <a-collapse-panel :class="getHeaderStyle(vmess.email)" :header="getHeaderText(vmess.email)">
-        <a-tag v-if="isExpiry(index) || ((getUpStats(vmess.email) + getDownStats(vmess.email)) > vmess.totalGB && vmess.totalGB != 0)" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag>
-
-        <a-form layout="inline">
+<a-form layout="inline" style="padding: 10px 0px;">
+    <a-collapse activeKey="0" v-for="(client, index) in inbound.settings.vmesses.slice(0,1)" v-if="!isEdit">
+        <a-collapse-panel header='{{ i18n "pages.inbounds.client" }}'>
            <a-form-item>
                <span slot="label">
-                    Email
+                    <span>{{ i18n "pages.inbounds.email" }}</span>
                    <a-tooltip>
                        <template slot="title">
-                            The Email Must Be Completely Unique
+                            <span>{{ i18n "pages.inbounds.emailDesc" }}</span>
                        </template>
-                        <!--Renew Svg Icon-->
-                        <svg 
-                            @click="getNewEmail(vmess)"
-                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="anticon anticon-question-circle" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> </svg>
                    </a-tooltip>
                </span>
-                <a-input v-model.trim="vmess.email"></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>
+            <br>
+            <a-form-item label='{{ i18n "additional" }} ID'>
+                <a-input-number v-model="client.alterId"></a-input-number>
+            </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">
                <span slot="label">
-                    IP Count Limit
+                    Subscription
                    <a-tooltip>
                        <template slot="title">
-                            disable inbound if more than entered count (0 for disable limit ip)
+                            <span>{{ i18n "pages.inbounds.subscriptionDesc" }}</span>
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
                </span>
-              <a-input type="number" v-model.number="vmess.limitIp" min="0" ></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="vmess.email && vmess.limitIp > 0 && isEdit">
+            <a-form-item v-if="client.email">
                <span slot="label">
-                    IP Log 
+                    Telegram ID
                    <a-tooltip>
                        <template slot="title">
-                            IPs history Log (before enabling inbound after it has been disabled by IP limit, you should clear the log)
+                            <span>{{ i18n "pages.inbounds.telegramDesc" }}</span>
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
+                </span>
+                <a-input v-model.trim="client.tgId"></a-input>
+            </a-form-item>
+            <a-form-item>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.IPLimit" }}</span>
                    <a-tooltip>
                        <template slot="title">
-                            clear the log
+                            <span>{{ i18n "pages.inbounds.IPLimitDesc" }}</span>
                        </template>
-                        <span style="color: #FF4D4F">
-                            <a-icon type="delete" @click="clearDBClientIps(vmess.email,$event)"></a-icon>
-                        </span>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
                    </a-tooltip>
                </span>
-                <a-textarea readonly @click="getDBClientIps(vmess.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 0.5, maxRows: 10 }">
-                </a-textarea>
+                <a-input-number v-model="client.limitIp" min="0"></a-input-number>
            </a-form-item>
-        </a-form>
-        <a-form-item label="ID">
-            <a-input v-model.trim="vmess.id"></a-input>
-        </a-form-item>
-        <a-form-item label='{{ i18n "additional" }} ID'>
-            <a-input type="number" v-model.number="vmess.alterId"></a-input>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.totalFlow" }}</span>(GB)
-                <a-tooltip>
-                    <template slot="title">
-                        0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-input-number v-model="vmess._totalGB" :min="0"></a-input-number>
-        </a-form-item>
-        <a-form-item>
-            <span slot="label">
-                <span >{{ i18n "pages.inbounds.expireDate" }}</span>
-                <a-tooltip>
-                    <template slot="title">
-                        <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-            <a-date-picker :show-time="{ format: 'HH:mm' }" format="YYYY-MM-DD HH:mm"
-                           v-model="vmess._expiryTime" style="width: 300px;"></a-date-picker>
-        </a-form-item>
-        <a-form layout="inline">
-            <a-tooltip v-if="vmess._totalGB > 0">
-                <template slot="title">
-                    {{ i18n "pages.inbounds.resetTraffic" }}
-                </template>
-                <span style="color: #FF4D4F">
-                    <a-icon type="delete" @click="resetClientTraffic(vmess,$event)"></a-icon>
+            <br>
+            <a-form-item>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <a-tooltip>
+                        <template slot="title">
+                            0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
                </span>
-            </a-tooltip>
-            <a-tag color="blue">[[ sizeFormat(getUpStats(vmess.email)) ]] / [[ sizeFormat(getDownStats(vmess.email)) ]]</a-tag>
-            <a-tag v-if="vmess._totalGB > 0" color="red">used : [[ sizeFormat(getUpStats(vmess.email) + getDownStats(vmess.email)) ]]</a-tag>
-                <a-tag v-show="inbound.settings.vmesses.length > 1" @click="removeClient(index, inbound.settings.vmesses)">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" width="22" height="22" class="mt-2 cursor-pointer">
-                        <path fill="none" d="M0 0h24v24H0z" />
-                        <path fill="#EC4899"
-                        d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
-                        />
-                    </svg>
-            </a-tag>
-        </a-form>
-
-
-    </a-collapse-panel>
-
-</a-collapse>
-
-<a-tag @click="addClient(inbound.protocol, inbound.settings.vmesses)">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="ml-2 cursor-pointer">
-        <path fill="none" d="M0 0h24v24H0z" />
-        <path fill="green"
-        d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
-        />
-    </svg>
-</a-tag>
-
+                <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
+            </a-form-item>
+            <br>
+            <a-form-item label='{{ i18n "pages.client.delayedStart" }}'>
+                <a-switch v-model="delayedStart" @click="client._expiryTime=0"></a-switch>
+            </a-form-item>
+            <br>
+            <a-form-item v-if="delayedStart" label='{{ i18n "pages.client.expireDays" }}'>
+                <a-input-number v-model.number="delayedExpireDays" :min="0"></a-input-number>
+            </a-form-item>
+            <a-form-item v-else>
+                <span slot="label">
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <a-tooltip>
+                        <template slot="title">
+                            <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
+                        </template>
+                        <a-icon type="question-circle" theme="filled"></a-icon>
+                    </a-tooltip>
+                </span>
+                <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
+                                :dropdown-class-name="themeSwitcher.darkCardClass"
+                                v-model="client._expiryTime" style="width: 170px;"></a-date-picker>
+            </a-form-item>
+        </a-collapse-panel>     
+    </a-collapse>
+    <a-collapse v-else>
+        <a-collapse-panel :header="'{{ i18n "pages.client.clientCount" }}: ' + inbound.settings.vmesses.length">
+            <table width="100%">
+                    <tr class="client-table-header">
+                    <th v-for="col in Object.keys(inbound.settings.vmesses[0]).slice(0, 3)">[[ col ]]</th>
+                </tr>
+                <tr v-for="(client, index) in inbound.settings.vmesses" :class="index % 2 == 1 ? 'client-table-odd-row' : ''">
+                    <td v-for="col in Object.values(client).slice(0, 3)">[[ col ]]</td>
+                </tr>
+            </table>
+        </a-collapse-panel>
+    </a-collapse>
+</a-form>
 <a-form layout="inline">
    <a-form-item label='{{ i18n "pages.inbounds.disableInsecureEncryption" }}'>
        <a-switch v-model.number="inbound.settings.disableInsecure"></a-switch>
    </a-form-item>
 </a-form>
-
-{{end}}
+{{end}}
--- a/web/html/xui/form/sniffing.html
+++ b/web/html/xui/form/sniffing.html
@@ -1,16 +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>
+        <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}}
--- a/web/html/xui/form/stream/stream_grpc.html
+++ b/web/html/xui/form/stream/stream_grpc.html
@@ -3,5 +3,8 @@
    <a-form-item label="ServiceName">
        <a-input v-model.trim="inbound.stream.grpc.serviceName"></a-input>
    </a-form-item>
+    <a-form-item label="Multi Mode">
+        <a-switch v-model="inbound.stream.grpc.multiMode"></a-switch>
+    </a-form-item>
 </a-form>
 {{end}}
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -1,38 +1,46 @@
 {{define "form/streamKCP"}}
 <a-form layout="inline">
    <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;">
-            <a-select-option value="none">None（Not Camouflage）</a-select-option>
-            <a-select-option value="srtp">SRTP（Camouflage Video Call）</a-select-option>
-            <a-select-option value="utp">UTP（Camouflage BT Download）</a-select-option>
-            <a-select-option value="wechat-video">Wechat-Video（Camouflage WeChat Video）</a-select-option>
-            <a-select-option value="dtls">DTLS（Camouflage DTLS 1.2 Packages）</a-select-option>
-            <a-select-option value="wireguard">Wireguard（Camouflage Wireguard Packages）</a-select-option>
+        <a-select 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>
+            <a-select-option value="wechat-video">Wechat-Video (Camouflage WeChat Video)</a-select-option>
+            <a-select-option value="dtls">DTLS (Camouflage DTLS 1.2 Packages)</a-select-option>
+            <a-select-option value="wireguard">Wireguard (Camouflage Wireguard Packages)</a-select-option>
        </a-select>
    </a-form-item>
+    <br>
    <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.number="inbound.stream.kcp.seed"></a-input>
+        <a-input v-model="inbound.stream.kcp.seed"></a-input>
    </a-form-item>
+    <br>
    <a-form-item label="MTU">
-        <a-input type="number" v-model.number="inbound.stream.kcp.mtu"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.mtu"></a-input-number>
    </a-form-item>
+    <br>
    <a-form-item label="TTI (ms)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.tti"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.tti"></a-input-number>
    </a-form-item>
+    <br>
    <a-form-item label="Uplink Capacity (MB/S)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.upCap"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.upCap"></a-input-number>
    </a-form-item>
+    <br>
    <a-form-item label="Downlink Capacity (MB/S)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.downCap"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.downCap"></a-input-number>
    </a-form-item>
+    <br>
    <a-form-item label="Congestion">
        <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
    </a-form-item>
+    <br>
    <a-form-item label="Read Buffer Size (MB)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.readBuffer"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.readBuffer"></a-input-number>
    </a-form-item>
+    <br>
    <a-form-item label="Write Buffer Size (MB)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.writeBuffer"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.writeBuffer"></a-input-number>
    </a-form-item>
 </a-form>
 {{end}}
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/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;">
+        <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,13 +11,13 @@
        <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;">
-            <a-select-option value="none">none（not camouflage）</a-select-option>
-            <a-select-option value="srtp">srtp（camouflage video call）</a-select-option>
-            <a-select-option value="utp">utp（camouflage BT download）</a-select-option>
-            <a-select-option value="wechat-video">wechat-video（camouflage WeChat video）</a-select-option>
-            <a-select-option value="dtls">dtls（camouflage DTLS 1.2 packages）</a-select-option>
-            <a-select-option value="wireguard">wireguard（camouflage wireguard packages）</a-select-option>
+        <a-select 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>
+            <a-select-option value="wechat-video">wechat-video (camouflage WeChat video)</a-select-option>
+            <a-select-option value="dtls">dtls (camouflage DTLS 1.2 packages)</a-select-option>
+            <a-select-option value="wireguard">wireguard (camouflage wireguard packages)</a-select-option>
        </a-select>
    </a-form-item>
 </a-form>
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -2,13 +2,13 @@
 <!-- select stream network -->
 <a-form layout="inline">
    <a-form-item label='{{ i18n "transmission" }}'>
-        <a-select v-model="inbound.stream.network" @change="streamNetworkChange">
+        <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>
-            <a-select-option value="http">HTTP</a-select-option>
+            <a-select-option value="http">H2</a-select-option>
            <a-select-option value="quic">QUIC</a-select-option>
-            <a-select-option value="grpc">GRPC</a-select-option>
+            <a-select-option value="grpc">gRPC</a-select-option>
        </a-select>
    </a-form-item>
 </a-form>
--- a/web/html/xui/form/stream/stream_tcp.html
+++ b/web/html/xui/form/stream/stream_tcp.html
@@ -4,7 +4,7 @@
    <a-form-item label="AcceptProxyProtocol">
        <a-switch v-model="inbound.stream.tcp.acceptProxyProtocol"></a-switch>
    </a-form-item>
-    <a-form-item label="HTTP Camouflage">
+    <a-form-item label='HTTP {{ i18n "camouflage" }}'>
        <a-switch
                :checked="inbound.stream.tcp.type === 'http'"
                @change="checked => inbound.stream.tcp.type = checked ? 'http' : 'none'">
@@ -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>
--- a/web/html/xui/form/stream/stream_ws.html
+++ b/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>
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -1,38 +1,74 @@
 {{define "form/tlsSettings"}}
 <!-- tls enable -->
 <a-form layout="inline" v-if="inbound.canSetTls()">
-    <a-form-item label="TLS">
+    <a-form-item v-if="inbound.canEnableTls()" label="TLS">
        <a-switch v-model="inbound.tls">
        </a-switch>
    </a-form-item>
-    <a-form-item v-if="inbound.canEnableXTls()" label="XTLS">
+    <a-form-item v-if="inbound.canEnableReality()">
+        <span slot="label">
+            Reality
+            <a-tooltip>
+                <template slot="title">
+                  <span>{{ i18n "pages.inbounds.realityDesc" }}</span>
+                </template>
+                <a-icon type="question-circle" theme="filled"></a-icon>
+            </a-tooltip>
+        </span>
+        <a-switch v-model="inbound.reality"></a-switch>
+    </a-form-item>
+    <a-form-item v-if="inbound.canEnableXtls()">
+        <span slot="label">
+            XTLS
+            <a-tooltip>
+                <template slot="title">
+                  <span>{{ i18n "pages.inbounds.xtlsDesc" }}</span>
+                </template>
+                <a-icon type="question-circle" theme="filled"></a-icon>
+            </a-tooltip>
+        </span>
        <a-switch v-model="inbound.xtls"></a-switch>
    </a-form-item>
 </a-form>

 <!-- tls settings -->
-<a-form v-if="inbound.tls || inbound.xtls"layout="inline">
-    <a-form-item label="MinVersion">
-        <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px">
-            <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">
-            <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
-        </a-select>
+<a-form v-if="inbound.tls" layout="inline">
+    <a-form-item label='{{ i18n "domainName" }}'>
+        <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">
+        <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='{{ i18n "domainName" }}'>
-        <a-input v-model.trim="inbound.stream.tls.server"></a-input>
+    <a-form-item label="MinVersion">
+        <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="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="SNI" placeholder="Server Name Indication">
+        <a-input v-model.trim="inbound.stream.tls.settings.serverName" style="width: 250px"></a-input>
+    </a-form-item>
+    <a-form-item label="uTLS">
+        <a-select v-model="inbound.stream.tls.settings.fingerprint"
+                  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>
    </a-form-item>
    <a-form-item label="Alpn">
-        <a-input v-model.trim="inbound.stream.tls.alpn"></a-input>
+        <a-checkbox-group v-model="inbound.stream.tls.alpn" style="width:200px">
+            <a-checkbox v-for="key,value in ALPN_OPTION" :value="key">[[ value ]]</a-checkbox>
+        </a-checkbox-group>
+    </a-form-item>
+    <a-form-item label="Allow insecure">
+        <a-switch v-model="inbound.stream.tls.settings.allowInsecure"></a-switch>
    </a-form-item>
    <a-form-item label='{{ i18n "certificate" }}'>
        <a-radio-group v-model="inbound.stream.tls.certs[0].useFile" button-style="solid">
@@ -42,19 +78,99 @@
    </a-form-item>
    <template v-if="inbound.stream.tls.certs[0].useFile">
        <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
-            <a-input v-model.trim="inbound.stream.tls.certs[0].certFile"></a-input>
+            <a-input v-model.trim="inbound.stream.tls.certs[0].certFile" style="width:300px;"></a-input>
        </a-form-item>
        <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
-            <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile"></a-input>
+            <a-input v-model.trim="inbound.stream.tls.certs[0].keyFile" style="width:300px;"></a-input>
        </a-form-item>
+        <a-button type="primary" icon="import" @click="setDefaultCertData">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
    </template>
    <template v-else>
        <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
-            <a-input type="textarea" :rows="2" v-model="inbound.stream.tls.certs[0].cert"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].cert"></a-input>
        </a-form-item>
        <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
-            <a-input type="textarea" :rows="2" v-model="inbound.stream.tls.certs[0].key"></a-input>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.tls.certs[0].key"></a-input>
        </a-form-item>
    </template>
 </a-form>
+
+<!-- xtls settings -->
+<a-form v-if="inbound.xtls" layout="inline">
+    <a-form-item label='{{ i18n "domainName" }}'>
+        <a-input v-model.trim="inbound.stream.xtls.server"></a-input>
+    </a-form-item>
+    <a-form-item label="SNI" placeholder="Server Name Indication">
+        <a-input v-model.trim="inbound.stream.xtls.settings.serverName" style="width: 250px"></a-input>
+    </a-form-item>
+    <a-form-item label="Alpn">
+        <a-checkbox-group v-model="inbound.stream.xtls.alpn" style="width:200px">
+            <a-checkbox v-for="key in ALPN_OPTION" :value="key">[[ key ]]</a-checkbox>
+        </a-checkbox-group>
+    </a-form-item>
+    <a-form-item label="Allow insecure">
+        <a-switch v-model="inbound.stream.xtls.settings.allowInsecure"></a-switch>
+    </a-form-item>
+    <a-form-item label='{{ i18n "certificate" }}'>
+        <a-radio-group v-model="inbound.stream.xtls.certs[0].useFile" button-style="solid">
+            <a-radio-button :value="true">{{ i18n "pages.inbounds.certificatePath" }}</a-radio-button>
+            <a-radio-button :value="false">{{ i18n "pages.inbounds.certificateContent" }}</a-radio-button>
+        </a-radio-group>
+    </a-form-item>
+    <template v-if="inbound.stream.xtls.certs[0].useFile">
+        <a-form-item label='{{ i18n "pages.inbounds.publicKeyPath" }}'>
+            <a-input v-model.trim="inbound.stream.xtls.certs[0].certFile" style="width:300px;"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.keyPath" }}'>
+            <a-input v-model.trim="inbound.stream.xtls.certs[0].keyFile" style="width:300px;"></a-input>
+        </a-form-item>
+        <a-button type="primary" icon="import" @click="setDefaultCertXtls">{{ i18n "pages.inbounds.setDefaultCert" }}</a-button>
+    </template>
+    <template v-else>
+        <a-form-item label='{{ i18n "pages.inbounds.publicKeyContent" }}'>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.xtls.certs[0].cert"></a-input>
+        </a-form-item>
+        <a-form-item label='{{ i18n "pages.inbounds.keyContent" }}'>
+            <a-input type="textarea" :rows="3" style="width:300px;" v-model="inbound.stream.xtls.certs[0].key"></a-input>
+        </a-form-item>
+    </template>
+</a-form>
+
+<!-- reality settings -->
+<a-form v-else-if="inbound.reality" layout="inline">
+    <a-form-item label="Show">
+        <a-switch v-model="inbound.stream.reality.show">
+        </a-switch>
+    </a-form-item>
+    <a-form-item label="xVer">
+        <a-input-number v-model="inbound.stream.reality.xver" :min="0" style="width: 60px"></a-input-number>
+    </a-form-item>
+    <a-form-item label="uTLS">
+        <a-select v-model="inbound.stream.reality.settings.fingerprint" 
+                    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>
+    <a-form-item label='{{ i18n "domainName" }}'>
+        <a-input v-model.trim="inbound.stream.reality.settings.serverName" style="width: 250px"></a-input>
+    </a-form-item>
+	<a-form-item label="dest">
+        <a-input v-model.trim="inbound.stream.reality.dest" style="width: 300px"></a-input>
+    </a-form-item>
+    <a-form-item label="Server Names">
+        <a-input v-model.trim="inbound.stream.reality.serverNames" style="width: 300px"></a-input>
+    </a-form-item>
+    <a-form-item label="ShortIds">
+        <a-input v-model.trim="inbound.stream.reality.shortIds"></a-input>
+    </a-form-item>
+    <a-form-item label="Private Key">
+        <a-input v-model.trim="inbound.stream.reality.privateKey" style="width: 300px"></a-input>
+    </a-form-item>
+    <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-button type="primary" icon="import" @click="getNewX25519Cert">Get New Key</a-button>
+    </a-form-item>
+</a-form>
 {{end}}
--- a/web/html/xui/inbound_client_table.html
+++ b/web/html/xui/inbound_client_table.html
@@ -1,36 +1,52 @@
-{{define "client_row"}}
+{{define "client_table"}}
 <template slot="actions" slot-scope="text, client, index">
    <a-tooltip>
        <template slot="title">{{ i18n "qrCode" }}</template>
        <a-icon style="font-size: 24px;" type="qrcode" v-if="record.hasLink()" @click="showQrcode(record,index);"></a-icon>
    </a-tooltip>
+    <a-tooltip>
+        <template slot="title">{{ i18n "pages.client.edit" }}</template>
+        <a-icon style="font-size: 24px;" type="edit" @click="openEditClient(record.id,client);"></a-icon>
+    </a-tooltip>
    <a-tooltip>
        <template slot="title">{{ i18n "info" }}</template>
        <a-icon style="font-size: 24px;" type="info-circle" @click="showInfo(record,index);"></a-icon>
    </a-tooltip>
    <a-tooltip>
        <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-        <a-icon style="font-size: 24px;" type="retweet" @click="resetClientTraffic(client,record,$event)" v-if="client.email != ''"></a-icon>
+        <a-icon style="font-size: 24px;" type="retweet" @click="resetClientTraffic(client,record.id)" v-if="client.email.length > 0"></a-icon>
+    </a-tooltip>
+    <a-tooltip>
+        <template slot="title"><span style="color: #FF4D4F"> {{ i18n "delete"}}</span></template>
+        <a-icon style="font-size: 24px;" type="delete" v-if="isRemovable(record.id)" @click="delClient(record.id,client)"></a-icon>
    </a-tooltip>
 </template>
+<template slot="enable" slot-scope="text, client, index">
+    <a-switch v-model="client.enable" @change="switchEnableClient(record.id,client)"></a-switch>
+</template>   
 <template slot="client" slot-scope="text, client">
    [[ client.email ]]
-    <a-tag v-if="!isClientEnabled(record, client.email)" color="red">{{ i18n "disabled" }}</a-tag>
-</template>                                  
+    <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>                                    
 <template slot="expiryTime" slot-scope="text, client, index">
-    <template v-if="client._expiryTime > 0">
+    <template v-if="client.expiryTime > 0">
        <a-tag :color="isExpiry(record, index)? 'red' : 'blue'">
            [[ 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 color="green">{{ i18n "indefinite" }}</a-tag>
 </template>
-{{end}}
+{{end}}
--- a/web/html/xui/inbound_info_modal.html
+++ b/web/html/xui/inbound_info_modal.html
@@ -3,73 +3,93 @@
    v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
    :closable="true"
    :mask-closable="true"
+    :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>
-            </template>
-            </table>
-        </td></tr>
-            <tr colspan="2">
-                <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>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>
+    <template v-if="infoModal.clientSettings">
    <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider>
-    <table style="margin-bottom: 10px; width: 100%;">
-        <tr><th>[[ Object.keys(infoModal.clientSettings)[0] ]]</th><th>[[ Object.keys(infoModal.clientSettings)[1] ]]</th><th>[[ Object.keys(infoModal.clientSettings)[2] ]]</th></tr>
+    <table style="margin-bottom: 10px;">
+        <tr v-for="col,index in Object.keys(infoModal.clientSettings).slice(0, 3)">
+            <td>[[ col ]]</td>
+            <td><a-tag color="green">[[ infoModal.clientSettings[col] ]]</a-tag></td>
+        </tr>
        <tr>
-            <td><a-tag color="green">[[ Object.values(infoModal.clientSettings)[0] ]]</a-tag></td>
-            <td><a-tag color="green">[[ Object.values(infoModal.clientSettings)[1] ]]</a-tag></td>
-            <td><a-tag color="green">[[ Object.values(infoModal.clientSettings)[2] ]]</a-tag></td>
+            <td>{{ i18n "status" }}</td>
+            <td>
+                <a-tag v-if="isEnable" color="blue">{{ i18n "enabled" }}</a-tag>
+                <a-tag v-else color="red">{{ i18n "disabled" }}</a-tag>
+                <a-tag v-if="!isActive" color="red">{{ i18n "depleted" }}</a-tag>
+            </td>
        </tr>
    </table>
    <table style="margin-bottom: 10px; width: 100%;">
-            <tr><th>{{ i18n "usage" }}</th><th>{{ i18n "pages.inbounds.totalFlow" }}</th><th>{{ i18n "pages.inbounds.expireDate" }}</th><th>{{ i18n "enable" }}</th></tr>    
+            <tr>
+                <th>{{ i18n "usage" }}</th>
+                <th>{{ i18n "pages.inbounds.totalFlow" }}</th>
+                <th>{{ i18n "pages.inbounds.expireDate" }}</th>
        <tr>
            <td>
-                <a-tag :color="statsColor(infoModal.clientStats)">
+                <a-tag v-if="infoModal.clientStats" :color="statsColor(infoModal.clientStats)">
                    [[ sizeFormat(infoModal.clientStats['up']) ]] / 
                    [[ sizeFormat(infoModal.clientStats['down']) ]]
                    ([[ sizeFormat(infoModal.clientStats['up'] + infoModal.clientStats['down']) ]])
@@ -85,18 +105,93 @@
                        [[ DateUtil.formatMillis(infoModal.clientSettings.expiryTime) ]]
                    </a-tag>
                </template>
+                <a-tag v-else-if="infoModal.clientSettings.expiryTime < 0" color="cyan">[[ infoModal.clientSettings.expiryTime / -86400000 ]] {{ i18n "pages.client.days" }}</a-tag>
                <a-tag v-else color="green">{{ i18n "indefinite" }}</a-tag>
            </td>
-            <td>
-                <a-tag v-if="infoModal.clientStats.enable" color="blue">{{ i18n "enabled" }}</a-tag>
-                <a-tag v-else color="red">{{ i18n "disabled" }}</a-tag>
-            </td>
        </tr>
    </table>
+    <table v-if="infoModal.clientSettings.subId + infoModal.clientSettings.tgId" style="margin-bottom: 10px;">
+        <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>
+            <td><a :href="[[ tgBase + infoModal.clientSettings.tgId ]]" target="_blank">@[[ infoModal.clientSettings.tgId ]]</a></td>
+        </tr>
+    </table>
+    </template>
+    <template v-else>
+        <a-divider></a-divider>
+        <table v-if="inbound.protocol == Protocols.SHADOWSOCKS" style="margin-bottom: 10px; width: 100%;">
+            <tr>
+                <th>{{ i18n "encryption" }}</th>
+                <th>{{ i18n "password" }}</th>
+                <th>{{ i18n "pages.inbounds.network" }}</th>
+            </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>
+            </tr>
+        </table>
+        <table v-if="inbound.protocol == Protocols.DOKODEMO" style="margin-bottom: 10px; width: 100%;">
+            <tr>
+                <th>{{ i18n "pages.inbounds.targetAddress" }}</th>
+                <th>{{ i18n "pages.inbounds.destinationPort" }}</th>
+                <th>{{ i18n "pages.inbounds.network" }}</th>
+                <th>FollowRedirect</th>
+            </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>
+                <td><a-tag color="blue">[[ inbound.settings.followRedirect ]]</a-tag></td>
+            </tr>
+        </table>
+        </table>
+        <table v-if="inbound.protocol == Protocols.SOCKS" style="margin-bottom: 10px; width: 100%;">
+            <tr>
+                <th>{{ i18n "password" }} Auth</th>
+                <th>{{ i18n "pages.inbounds.enable" }} udp</th>
+                <th>IP</th>
+            </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'">
+                <td> </td>
+                <td>{{ i18n "username" }}</td>
+                <td>{{ i18n "password" }}</td>
+            </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>
+            </tr>
+        </table>
+        </table>
+        <table v-if="inbound.protocol == Protocols.HTTP" style="margin-bottom: 10px; width: 100%;">
+            <tr>
+                <th> </th>
+                <th>{{ i18n "username" }}</th>
+                <th>{{ i18n "password" }}</th>
+            </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>
+            </tr>
+        </table>
+        </table>
+    </template>
    <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>
@@ -105,46 +200,31 @@
        visible: false,
        inbound: new Inbound(),
        dbInbound: new DBInbound(),
-        clientSettings: new Inbound.Settings(),
+        settings: null,
+        clientSettings: null,
        clientStats: [],
        upStats: 0,
        downStats: 0,
        clipboard: null,
        link: null,
-        index: 0,
+        index: null,
        isExpired: false,
-        show(dbInbound, index=0) {
+        show(dbInbound, index) {
            this.index = index;
            this.inbound = dbInbound.toInbound();
            this.dbInbound = new DBInbound(dbInbound);
            this.link = dbInbound.genLink(index);
-            this.clientSettings = Object.values(JSON.parse(this.inbound.settings).clients)[index];
-            this.clientStats = dbInbound.clientStats;
+            this.settings = JSON.parse(this.inbound.settings);
+            this.clientSettings = this.settings.clients ? Object.values(this.settings.clients)[index] : null;
            this.isExpired = this.inbound.isExpiry(index);
-            if(dbInbound.clientStats.length > 0)
-            {
-                for (const key in dbInbound.clientStats) {
-                    if (Object.hasOwnProperty.call(dbInbound.clientStats, key)) {
-                        if(dbInbound.clientStats[key]['email'] == this.clientSettings.email)
-                            this.clientStats = dbInbound.clientStats[key];
-
-                    }
-                }
-            }
+            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 "copySuccess" }}'));
-                }
-            });
        },
        close() {
            infoModal.visible = false;
        },
    };
+
    const infoModalApp = new Vue({
        delimiters: ['[[', ']]'],
        el: '#inbound-info-modal',
@@ -155,32 +235,44 @@
            },
            get inbound() {
                return this.infoModal.inbound;
-            }
+            },
+            get isActive() {
+                if (infoModal.clientStats) {
+                    return infoModal.clientStats.enable;
+                }
+                return infoModal.dbInbound.isEnable;
+            },
+            get isEnable() {
+                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/";
+            },
+            get tgBase() {
+                return "https://t.me/"
+            },
        },
        methods: {
-            setQrCode(elmentId,index) {
-                content = infoModal.inbound.genLink(infoModal.dbInbound.address,infoModal.dbInbound.remark,index)
-                new QRious({
-                        element: document.querySelector('#'+elmentId),
-                        size: 260,
-                        value: content,
-                    });
-            },
-            copyTextToClipboard(elmentId,content) {
+            copyToClipboard(elmentId, content) {
                this.infoModal.clipboard = new ClipboardJS('#' + elmentId, {
-                        text: () => content,
-                    });
-                this.infoModal.clipboard.on('success', () => { 
-                    app.$message.success('{{ i18n "copySuccess" }}')
+                    text: () => content,
+                });
+                this.infoModal.clipboard.on('success', () => {
+                    app.$message.success('{{ i18n "copied" }}')
                    this.infoModal.clipboard.destroy();
                });
            },
            statsColor(stats) {
-                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>
 {{end}}
--- a/web/html/xui/inbound_modal.html
+++ b/web/html/xui/inbound_modal.html
@@ -1,6 +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="themeSwitcher.darkCardClass"
         :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
    {{template "form/inbound"}}
 </a-modal>
@@ -18,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) {
@@ -42,6 +43,15 @@
        loading(loading) {
            inModal.confirmLoading = loading;
        },
+        getClients(protocol, clientSettings) {
+            switch (protocol) {
+                case Protocols.VMESS: return clientSettings.vmesses;
+                case Protocols.VLESS: return clientSettings.vlesses;
+                case Protocols.TROJAN: return clientSettings.trojans;
+                case Protocols.SHADOWSOCKS: return clientSettings.shadowsockses;
+                default: return null;
+            }
+        },
    };

    const protocols = {
@@ -61,6 +71,7 @@
            inModal: inModal,
            Protocols: protocols,
            SSMethods: SSMethods,
+            delayedStart: false,
            get inbound() {
                return inModal.inbound;
            },
@@ -69,120 +80,46 @@
            },
            get isEdit() {
                return inModal.isEdit;
-            }
+            },
+            get client() {
+                return inModal.getClients(this.inbound.protocol, this.inbound.settings)[0];
+            },
+            get delayedExpireDays() {
+                return this.client && this.client.expiryTime < 0 ? this.client.expiryTime / -86400000 : 0;
+            },
+            set delayedExpireDays(days) {
+                this.client.expiryTime = -86400000 * days;
+            },
        },
        methods: {
-            streamNetworkChange(oldValue) {
-                if (oldValue === 'kcp') {
-                    this.inModal.inbound.tls = false;
+            streamNetworkChange() {
+                if (!inModal.inbound.canSetTls()) {
+                    this.inModal.inbound.stream.security = 'none';
+                }
+                if (!inModal.inbound.canEnableReality()) {
+                    this.inModal.inbound.reality = false;
                }
            },
-            addClient(protocol, clients) {
-                switch (protocol) {
-                    case Protocols.VMESS: return clients.push(new Inbound.VmessSettings.Vmess());
-                    case Protocols.VLESS: return clients.push(new Inbound.VLESSSettings.VLESS());
-                    case Protocols.TROJAN: return clients.push(new Inbound.TrojanSettings.Trojan());
-                    default: return null;
-                }
+            setDefaultCertData() {
+                inModal.inbound.stream.tls.certs[0].certFile = app.defaultCert;
+                inModal.inbound.stream.tls.certs[0].keyFile = app.defaultKey;
            },
-            removeClient(index, clients) {
-                clients.splice(index, 1);
+            setDefaultCertXtls() {
+                inModal.inbound.stream.xtls.certs[0].certFile = app.defaultCert;
+                inModal.inbound.stream.xtls.certs[0].keyFile = app.defaultKey;
            },
-            async getDBClientIps(email,event) {
-
-                const msg = await HttpUtil.post('/xui/inbound/clientIps/'+ email);
+            async getNewX25519Cert() {
+                inModal.loading(true);
+                const msg = await HttpUtil.post('/server/getNewX25519Cert');
+                inModal.loading(false);
                if (!msg.success) {
                    return;
                }
-                try {
-                    ips = JSON.parse(msg.obj)
-                    ips = ips.join(",")
-                    event.target.value = ips
-                } catch (error) {
-                    // text
-                    event.target.value = msg.obj
-
-                }
-
-            },
-            async clearDBClientIps(email,event) {
-                const msg = await HttpUtil.post('/xui/inbound/clearClientIps/'+ email);
-                if (!msg.success) {
-                    return;
-                }
-                event.target.value = ""
-            },
-            async resetClientTraffic(client,event) {
-                const msg = await HttpUtil.post('/xui/inbound/resetClientTraffic/'+ client.email);
-                if (!msg.success) {
-                    return;
-                }
-                clientStats = this.inbound.clientStats
-                if(clientStats.length > 0)
-                {
-                    for (const key in clientStats) {
-                        if (Object.hasOwnProperty.call(clientStats, key)) {
-                            if(clientStats[key]['email'] == client.email){ 
-                                clientStats[key]['up'] = 0
-                                clientStats[key]['down'] = 0
-                            }
-                        }
-                    }
-                }
-            },
-            isExpiry(index) {
-                return this.inbound.isExpiry(index)
-            },
-            getUpStats(email) {
-                clientStats = this.inbound.clientStats
-                if(clientStats.length > 0)
-                {
-                    for (const key in clientStats) {
-                        if (Object.hasOwnProperty.call(clientStats, key)) {
-                            if(clientStats[key]['email'] == email)
-                                return clientStats[key]['up']
-
-                        }
-                    }
-                }
-            },
-            getDownStats(email) {
-                clientStats = this.inbound.clientStats
-                if(clientStats.length > 0)
-                {
-                    for (const key in clientStats) {
-                        if (Object.hasOwnProperty.call(clientStats, key)) {
-                            if(clientStats[key]['email'] == email)
-                                return clientStats[key]['down']
-
-                        }
-                    }
-                }
-            },
-            isClientEnable(email) {
-                clientStats = this.dbInbound.clientStats ? this.dbInbound.clientStats.find(stats => stats.email === email) : null
-                return clientStats ? clientStats['enable'] : true
-            },
-            getHeaderText(email) {
-                if(email == "")
-                    return "Add Client"
-                
-                return email + (this.isClientEnable(email) == true ? ' Active' : ' Deactive')
-            },
-            getHeaderStyle(email) {
-                return (this.isClientEnable(email) == true ? '' : 'deactive-client')
-            },
-            getNewEmail(client) {
-                var chars = 'abcdefghijklmnopqrstuvwxyz1234567890';
-                var string = '';
-                var len = 7 + Math.floor(Math.random() * 5)
-                for(var ii=0; ii<len; ii++){
-                    string += chars[Math.floor(Math.random() * chars.length)];
-                }
-                client.email = string
+                inModal.inbound.stream.reality.privateKey = msg.obj.privateKey;
+                inModal.inbound.stream.reality.settings.publicKey = msg.obj.publicKey;
            }
        },
    });

 </script>
-{{end}}
+{{end}}
--- a/web/html/xui/inbounds.html
+++ b/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">
+    <a-layout id="content-layout" :style="themeSwitcher.bgStyle">
        <a-layout-content>
            <a-spin :spinning="spinning" :delay="500" tip="loading">
                <transition name="list" appear>
@@ -24,30 +25,87 @@
                    </a-tag>
                </transition>
                <transition name="list" appear>
-                    <a-card hoverable style="margin-bottom: 20px;">
+                    <a-card hoverable style="margin-bottom: 20px;" :class="themeSwitcher.darkCardClass">
                        <a-row>
                            <a-col :xs="24" :sm="24" :lg="12">
-                                {{ i18n "pages.inbounds.totalDownUp" }}：
+                                {{ i18n "pages.inbounds.totalDownUp" }}:
                                <a-tag color="green">[[ sizeFormat(total.up) ]] / [[ sizeFormat(total.down) ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
-                                {{ i18n "pages.inbounds.totalUsage" }}：
+                                {{ i18n "pages.inbounds.totalUsage" }}:
                                <a-tag color="green">[[ sizeFormat(total.up + total.down) ]]</a-tag>
                            </a-col>
                            <a-col :xs="24" :sm="24" :lg="12">
-                                {{ i18n "pages.inbounds.inboundCount" }}：
+                                {{ i18n "pages.inbounds.inboundCount" }}:
                                <a-tag color="green">[[ dbInbounds.length ]]</a-tag>
                            </a-col>
+                            <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="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="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="themeSwitcher.darkClass">
+                                    <template slot="content">
+                                        <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
+                                    </template>
+                                    <a-tag color="orange" v-if="total.expiring.length">[[ total.expiring.length ]]</a-tag>
+                                </a-popover>
+                            </a-col>
                        </a-row>
                    </a-card>
                </transition>
                <transition name="list" appear>
-                    <a-card hoverable>
+                    <a-card hoverable :class="themeSwitcher.darkCardClass">
                        <div slot="title">
-                             <a-button type="primary" @click="openAddInbound">Add Inbound</a-button>
-							 <a-button type="primary" @click="exportAllLinks" class="copy-btn">Export Links</a-button>
+                            <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="themeSwitcher.currentTheme">
+                                            <a-menu-item key="export">
+                                                <a-icon type="export"></a-icon>
+                                                {{ i18n "pages.inbounds.export" }}
+                                            </a-menu-item>
+                                            <a-menu-item key="resetInbounds">
+                                                <a-icon type="reload"></a-icon>
+                                                {{ i18n "pages.inbounds.resetAllTraffic" }}
+                                            </a-menu-item>
+                                            <a-menu-item key="resetClients">
+                                                <a-icon type="file-done"></a-icon>
+                                                {{ i18n "pages.inbounds.resetAllClientTraffics" }}
+                                            </a-menu-item>
+                                            <a-menu-item key="delDepletedClients">
+                                                <a-icon type="rest"></a-icon>
+                                                {{ i18n "pages.inbounds.delDepletedClients" }}
+                                            </a-menu-item>
+                                        </a-menu>
+                                    </a-dropdown>
+                                </a-col>
+                                <a-col :xs="24" :sm="24" :lg="12" style="text-align: right;">
+                                    <a-select v-model="refreshInterval"
+                                              style="width: 65px;"
+                                              v-if="isRefreshEnabled"
+                                              @change="changeRefreshInterval"
+                                              :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>
+                                    <a-switch v-model="isRefreshEnabled" @change="toggleRefresh"></a-switch>
+                                </a-col>
+                            </a-row>
                        </div>
-						<a-input v-model.lazy="searchKey" placeholder="{{ i18n "search" }}" autofocus style="max-width: 300px"></a-input>
+                        <a-input v-model.lazy="searchKey" placeholder='{{ i18n "search" }}' autofocus style="max-width: 300px"></a-input>
                        <a-table :columns="columns" :row-key="dbInbound => dbInbound.id"
                                 :data-source="searchedInbounds"
                                 :loading="spinning" :scroll="{ x: 1300 }"
@@ -55,21 +113,48 @@
                                 style="margin-top: 20px"
                                 @change="() => getDBInbounds()">
                            <template slot="action" slot-scope="text, dbInbound">
-                                <a-icon type="edit" style="font-size: 25px" @click="openEditInbound(dbInbound.id);"></a-icon>
+                                <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)">
-                                        <a-menu-item v-if="dbInbound.isSS" key="qrcode">
-                                            <a-icon type="qrcode"></a-icon>
-                                            {{ i18n "qrCode" }}
-                                        </a-menu-item>
+                                    <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" }}
                                        </a-menu-item>
+                                        <template v-if="dbInbound.isTrojan || dbInbound.isVLess || dbInbound.isVMess || dbInbound.isSS">
+                                            <a-menu-item key="addClient">
+                                                <a-icon type="user-add"></a-icon>
+                                                {{ i18n "pages.client.add"}}
+                                            </a-menu-item>
+                                            <a-menu-item key="addBulkClient">
+                                                <a-icon type="usergroup-add"></a-icon>
+                                                {{ i18n "pages.client.bulk"}}
+                                            </a-menu-item>
+                                            <a-menu-item key="resetClients">
+                                                <a-icon type="file-done"></a-icon>
+                                                {{ i18n "pages.inbounds.resetInboundClientTraffics"}}
+                                            </a-menu-item>
+                                            <a-menu-item key="export">
+                                                <a-icon type="export"></a-icon>
+                                                {{ i18n "pages.inbounds.export"}}
+                                            </a-menu-item>
+                                            <a-menu-item key="delDepletedClients">
+                                                <a-icon type="rest"></a-icon>
+                                                {{ i18n "pages.inbounds.delDepletedClients" }}
+                                            </a-menu-item>
+                                        </template>
+                                        <template v-else>
+                                            <a-menu-item key="showInfo">
+                                                <a-icon type="info-circle"></a-icon>
+                                                {{ i18n "info"}}
+                                            </a-menu-item>
+                                        </template>
                                        <a-menu-item key="resetTraffic">
                                            <a-icon type="retweet"></a-icon> {{ i18n "pages.inbounds.resetTraffic" }}
                                        </a-menu-item>
+                                        <a-menu-item key="clone">
+                                            <a-icon type="block"></a-icon> {{ i18n "pages.inbounds.clone"}}
+                                        </a-menu-item>
                                        <a-menu-item key="delete">
                                            <span style="color: #FF4D4F">
                                                <a-icon type="delete"></a-icon> {{ i18n "delete"}}
@@ -79,7 +164,36 @@
                                </a-dropdown>
                            </template>
                            <template slot="protocol" slot-scope="text, dbInbound">
-                                <a-tag color="blue">[[ dbInbound.protocol ]]</a-tag>
+                                <a-tag style="margin:0;" color="blue">[[ dbInbound.protocol ]]</a-tag>
+                                <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan">
+                                    <a-tag style="margin:0;" color="green">[[ dbInbound.toInbound().stream.network ]]</a-tag>
+                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isTls" color="cyan">TLS</a-tag>
+                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isXtls" color="cyan">XTLS</a-tag>
+                                    <a-tag style="margin:0;" v-if="dbInbound.toInbound().stream.isReality" color="cyan">Reality</a-tag>
+                                </template>
+                            </template>
+                            <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="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="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="themeSwitcher.darkClass">
+                                        <template slot="content">
+                                            <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
+                                        </template>
+                                        <a-tag style="margin:0; padding: 0 2px;" color="orange" v-if="clientCount[dbInbound.id].expiring.length">[[ clientCount[dbInbound.id].expiring.length ]]</a-tag>
+                                    </a-popover>
+                                </template>
                            </template>
                            <template slot="traffic" slot-scope="text, dbInbound">
                                <a-tag color="blue">[[ sizeFormat(dbInbound.up) ]] / [[ sizeFormat(dbInbound.down) ]]</a-tag>
@@ -89,16 +203,8 @@
                                </template>
                                <a-tag v-else color="green">{{ i18n "unlimited" }}</a-tag>
                            </template>
-                            <template slot="stream" slot-scope="text, dbInbound, index">
-                                <template v-if="dbInbound.isVMess || dbInbound.isVLess || dbInbound.isTrojan || dbInbound.isSS">
-                                    <a-tag color="green">[[ inbounds[index].stream.network ]]</a-tag>
-                                    <a-tag v-if="inbounds[index].stream.isTls" color="blue">tls</a-tag>
-                                    <a-tag v-if="inbounds[index].stream.isXTls" color="blue">xtls</a-tag>
-                                </template>
-                                <template v-else>{{ i18n "none" }}</template>
-                            </template>
                            <template slot="enable" slot-scope="text, dbInbound">
-                                <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound)"></a-switch>
+                                <a-switch v-model="dbInbound.enable" @change="switchEnable(dbInbound.id)"></a-switch>
                            </template>
                            <template slot="expiryTime" slot-scope="text, dbInbound">
                                <template v-if="dbInbound.expiryTime > 0">
@@ -119,25 +225,16 @@
                                :data-source="getInboundClients(record)"
                                :pagination="false"
                                >
-                                    {{template "client_row"}}
+                                    {{template "client_table"}}
                                </a-table>
                                <a-table
-                                v-else-if="record.protocol === Protocols.TROJAN"
+                                v-else-if="record.protocol === Protocols.TROJAN || record.protocol === Protocols.SHADOWSOCKS"
                                :row-key="client => client.id"
                                :columns="innerTrojanColumns"
                                :data-source="getInboundClients(record)"
                                :pagination="false"
                                >
-                                    {{template "client_row"}}
-                                </a-table>
-                                <a-table
-                                v-else
-                                :row-key="client => client.id"
-                                :columns="innerOneColumns"
-                                :data-source="record"
-                                :pagination="false"
-                                >
-                                    {{template "client_row"}}
+                                    {{template "client_table"}}
                                </a-table>
                            </template>
                        </a-table>
@@ -148,6 +245,7 @@
    </a-layout>
 </a-layout>
 {{template "js" .}}
+{{template "component/themeSwitcher" .}}
 <script>

    const columns = [{
@@ -161,35 +259,35 @@
        width: 40,
        scopedSlots: { customRender: 'enable' },
    }, {
-        title: "Id",
+        title: "ID",
        align: 'center',
        dataIndex: "id",
-        width: 30,
+        width: 40,
    }, {
        title: '{{ i18n "pages.inbounds.remark" }}',
        align: 'center',
        width: 80,
        dataIndex: "remark",
-    }, {
-        title: '{{ i18n "pages.inbounds.protocol" }}',
-        align: 'center',
-        width: 50,
-        scopedSlots: { customRender: 'protocol' },
    }, {
        title: '{{ i18n "pages.inbounds.port" }}',
        align: 'center',
        dataIndex: "port",
        width: 40,
+    }, {
+        title: '{{ i18n "pages.inbounds.protocol" }}',
+        align: 'left',
+        width: 90,
+        scopedSlots: { customRender: 'protocol' },
+    }, {
+        title: '{{ i18n "clients" }}',
+        align: 'left',
+        width: 50,
+        scopedSlots: { customRender: 'clients' },
    }, {
        title: '{{ i18n "pages.inbounds.traffic" }}↑|↓',
        align: 'center',
-        width: 150,
+        width: 120,
        scopedSlots: { customRender: 'traffic' },
-    },{
-        title: '{{ i18n "pages.inbounds.transportConfig" }}',
-        align: 'center',
-        width: 60,
-        scopedSlots: { customRender: 'stream' },
    }, {
        title: '{{ i18n "pages.inbounds.expireDate" }}',
        align: 'center',
@@ -198,60 +296,113 @@
    }];

    const innerColumns = [
-        { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
-        { title: '{{ i18n "pages.inbounds.client" }}', width: 60, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 100, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.enable" }}', width: 40, scopedSlots: { customRender: 'enable' } },
+        { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 120, scopedSlots: { customRender: 'traffic' } },
        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
        { title: 'UID', width: 120, dataIndex: "id" },
-		
    ];

    const innerTrojanColumns = [
-        { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
-        { title: '{{ i18n "pages.inbounds.client" }}', width: 60, scopedSlots: { customRender: 'client' } },
-        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 100, scopedSlots: { customRender: 'traffic' } },
+        { title: '{{ i18n "pages.inbounds.operate" }}', width: 70, scopedSlots: { customRender: 'actions' } },
+        { title: '{{ i18n "pages.inbounds.enable" }}', width: 40, scopedSlots: { customRender: 'enable' } },
+        { title: '{{ i18n "pages.inbounds.client" }}', width: 80, scopedSlots: { customRender: 'client' } },
+        { title: '{{ i18n "pages.inbounds.traffic" }}↑|↓', width: 120, scopedSlots: { customRender: 'traffic' } },
        { title: '{{ i18n "pages.inbounds.expireDate" }}', width: 70, scopedSlots: { customRender: 'expiryTime' } },
-        { title: 'Password', width: 100, dataIndex: "password" },
-    ];
-
-    const innerOneColumns = [
-        { title: '', width: 70, scopedSlots: { customRender: 'actions' } },
+        { title: 'Password', width: 170, dataIndex: "password" },
    ];

    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
-            siderDrawer,
+            themeSwitcher,
            spinning: false,
            inbounds: [],
            dbInbounds: [],
            searchKey: '',
            searchedInbounds: [],
+            expireDiff: 0,
+            trafficDiff: 0,
+            defaultCert: '',
+            defaultKey: '',
+            clientCount: {},
+            isRefreshEnabled: localStorage.getItem("isRefreshEnabled") === "true" ? true : false,
+            refreshing: false,
+            refreshInterval: Number(localStorage.getItem("refreshInterval")) || 5000,
        },
        methods: {
-            loading(spinning=true) {
+            loading(spinning = true) {
                this.spinning = spinning;
            },
            async getDBInbounds() {
-                this.loading();
-                const msg = await HttpUtil.post('/xui/inbound/list');
-                this.loading(false);
+                this.refreshing = true;
+                const msg = await HttpUtil.post('/panel/inbound/list');
                if (!msg.success) {
                    return;
                }
                this.setInbounds(msg.obj);
+                setTimeout(() => {
+                    this.refreshing = false;
+                }, 500);
+            },
+            async getDefaultSettings() {
+                const msg = await HttpUtil.post('/panel/setting/defaultSettings');
+                if (!msg.success) {
+                    return;
+                }
+                this.expireDiff = msg.obj.expireDiff * 86400000;
+                this.trafficDiff = msg.obj.trafficDiff * 1073741824;
+                this.defaultCert = msg.obj.defaultCert;
+                this.defaultKey = msg.obj.defaultKey;
            },
            setInbounds(dbInbounds) {
                this.inbounds.splice(0);
                this.dbInbounds.splice(0);
-                this.searchedInbounds.splice(0);
                for (const inbound of dbInbounds) {
                    const dbInbound = new DBInbound(inbound);
-                    this.inbounds.push(dbInbound.toInbound());
+                    to_inbound = dbInbound.toInbound()
+                    this.inbounds.push(to_inbound);
                    this.dbInbounds.push(dbInbound);
-                    this.searchedInbounds.push(dbInbound);
+                    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 = [];
+                clients = this.getClients(dbInbound.protocol, inbound.settings);
+                clientStats = dbInbound.clientStats
+                now = new Date().getTime()
+                if (clients) {
+                    clientCount = clients.length;
+                    if (dbInbound.enable) {
+                        clients.forEach(client => {
+                            client.enable ? active.push(client.email) : deactive.push(client.email);
+                        });
+                        clientStats.forEach(client => {
+                            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);
+                            }
+                        });
+                    } else {
+                        clients.forEach(client => {
+                            deactive.push(client.email);
+                        });
+                    }
+                }
+                return {
+                    clients: clientCount,
+                    active: active,
+                    deactive: deactive,
+                    depleted: depleted,
+                    expiring: expiring,
+                };
            },
            searchInbounds(key) {
                if (ObjectUtil.isEmpty(key)) {
@@ -262,10 +413,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);
                                    }
                                });
@@ -276,26 +427,95 @@
                    });
                }
            },
+            generalActions(action) {
+                switch (action.key) {
+                    case "export":
+                        this.exportAllLinks();
+                        break;
+                    case "resetInbounds":
+                        this.resetAllTraffic();
+                        break;
+                    case "resetClients":
+                        this.resetAllClientTraffics(-1);
+                        break;
+                    case "delDepletedClients":
+                        this.delDepletedClients(-1)
+                        break;
+                }
+            },
            clickAction(action, dbInbound) {
                switch (action.key) {
                    case "qrcode":
                        this.showQrcode(dbInbound);
                        break;
+                    case "showInfo":
+                        this.showInfo(dbInbound);
+                        break;
                    case "edit":
                        this.openEditInbound(dbInbound.id);
                        break;
+                    case "addClient":
+                        this.openAddClient(dbInbound.id)
+                        break;
+                    case "addBulkClient":
+                        this.openAddBulkClient(dbInbound.id)
+                        break;
+                    case "export":
+                        this.inboundLinks(dbInbound.id);
+                        break;
                    case "resetTraffic":
-                        this.resetTraffic(dbInbound);
+                        this.resetTraffic(dbInbound.id);
+                        break;
+                    case "resetClients":
+                        this.resetAllClientTraffics(dbInbound.id);
+                        break;
+                    case "clone":
+                        this.openCloneInbound(dbInbound);
                        break;
                    case "delete":
-                        this.delInbound(dbInbound);
+                        this.delInbound(dbInbound.id);
+                        break;
+                    case "delDepletedClients":
+                        this.delDepletedClients(dbInbound.id)
                        break;
                }
            },
+            openCloneInbound(dbInbound) {
+                this.$confirm({
+                    title: '{{ i18n "pages.inbounds.cloneInbound"}} \"' + dbInbound.remark + '\"',
+                    content: '{{ i18n "pages.inbounds.cloneInboundContent"}}',
+                    okText: '{{ i18n "pages.inbounds.cloneInboundOk"}}',
+                    cancelText: '{{ i18n "cancel" }}',
+                    onOk: () => {
+                        const baseInbound = dbInbound.toInbound();
+                        dbInbound.up = 0;
+                        dbInbound.down = 0;
+                        this.cloneInbound(baseInbound, dbInbound);
+                    },
+                });
+            },
+            async cloneInbound(baseInbound, dbInbound) {
+                const data = {
+                    up: dbInbound.up,
+                    down: dbInbound.down,
+                    total: dbInbound.total,
+                    remark: dbInbound.remark + " - Cloned",
+                    enable: dbInbound.enable,
+                    expiryTime: dbInbound.expiryTime,
+
+                    listen: '',
+                    port: RandomUtil.randomIntRange(10000, 60000),
+                    protocol: baseInbound.protocol,
+                    settings: Inbound.Settings.getSettings(baseInbound.protocol).toString(),
+                    streamSettings: baseInbound.stream.toString(),
+                    sniffing: baseInbound.canSniffing() ? baseInbound.sniffing.toString() : '{}',
+                };
+                await this.submit('/panel/inbound/add', data, inModal);
+            },
            openAddInbound() {
                inModal.show({
                    title: '{{ i18n "pages.inbounds.addInbound"}}',
-                    okText: '{{ i18n "pages.inbounds.addTo"}}',
+                    okText: '{{ i18n "pages.inbounds.create"}}',
                    cancelText: '{{ i18n "close" }}',
                    confirm: async (inbound, dbInbound) => {
                        inModal.loading();
@@ -305,12 +525,12 @@
                    isEdit: false
                });
            },
-            openEditInbound(dbInbound_id) {
-                dbInbound = this.dbInbounds.find(row => row.id === dbInbound_id);
+            openEditInbound(dbInboundId) {
+                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
                const inbound = dbInbound.toInbound();
                inModal.show({
                    title: '{{ i18n "pages.inbounds.modifyInbound"}}',
-                    okText: '{{ i18n "pages.inbounds.revise"}}',
+                    okText: '{{ i18n "pages.inbounds.update"}}',
                    cancelText: '{{ i18n "close" }}',
                    inbound: inbound,
                    dbInbound: dbInbound,
@@ -335,10 +555,11 @@
                    port: inbound.port,
                    protocol: inbound.protocol,
                    settings: inbound.settings.toString(),
-                    streamSettings: inbound.stream.toString(),
-                    sniffing: inbound.canSniffing() ? inbound.sniffing.toString() : '{}',
                };
-                await this.submit('/xui/inbound/add', data, inModal);
+                if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
+                if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();
+
+                await this.submit('/panel/inbound/add', data, inModal);
            },
            async updateInbound(inbound, dbInbound) {
                const data = {
@@ -353,15 +574,80 @@
                    port: inbound.port,
                    protocol: inbound.protocol,
                    settings: inbound.settings.toString(),
-                    streamSettings: inbound.stream.toString(),
-                    sniffing: inbound.canSniffing() ? inbound.sniffing.toString() : '{}',
                };
-                await this.submit(`/xui/inbound/update/${dbInbound.id}`, data, inModal);
+                if (inbound.canEnableStream()) data.streamSettings = inbound.stream.toString();
+                if (inbound.canSniffing()) data.sniffing = inbound.sniffing.toString();
+
+                await this.submit(`/panel/inbound/update/${dbInbound.id}`, data, inModal);
            },
-            resetTraffic(dbInbound) {
+            openAddClient(dbInboundId) {
+                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+                clientModal.show({
+                    title: '{{ i18n "pages.client.add"}}',
+                    okText: '{{ i18n "pages.client.submitAdd"}}',
+                    dbInbound: dbInbound,
+                    confirm: async (clients, dbInboundId) => {
+                        clientModal.loading();
+                        await this.addClient(clients, dbInboundId);
+                        clientModal.close();
+                    },
+                    isEdit: false
+                });
+            },
+            openAddBulkClient(dbInboundId) {
+                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+                clientsBulkModal.show({
+                    title: '{{ i18n "pages.client.bulk"}} ' + dbInbound.remark,
+                    okText: '{{ i18n "pages.client.bulk"}}',
+                    dbInbound: dbInbound,
+                    confirm: async (clients, dbInboundId) => {
+                        clientsBulkModal.loading();
+                        await this.addClient(clients, dbInboundId);
+                        clientsBulkModal.close();
+                    },
+                });
+            },
+            openEditClient(dbInboundId, client) {
+                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+                clients = this.getInboundClients(dbInbound);
+                index = this.findIndexOfClient(clients, client);
+                clientModal.show({
+                    title: '{{ i18n "pages.client.edit"}}',
+                    okText: '{{ i18n "pages.client.submitEdit"}}',
+                    dbInbound: dbInbound,
+                    index: index,
+                    confirm: async (client, dbInboundId, clientId) => {
+                        clientModal.loading();
+                        await this.updateClient(client, dbInboundId, clientId);
+                        clientModal.close();
+                    },
+                    isEdit: true
+                });
+            },
+            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() + ']}',
+                };
+                await this.submit(`/panel/inbound/addClient`, data);
+            },
+            async updateClient(client, dbInboundId, clientId) {
+                const data = {
+                    id: dbInboundId,
+                    settings: '{"clients": [' + client.toString() + ']}',
+                };
+                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: themeSwitcher.darkCardClass,
                    okText: '{{ i18n "reset"}}',
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: () => {
@@ -372,138 +658,184 @@
                    },
                });
            },
-			exportAllLinks() {
-                    let copyText = '';
-                    for (const dbInbound of this.dbInbounds) {
-                        copyText += dbInbound.genInboundLinks
-                    }
-                    const clipboard = new ClipboardJS('.copy-btn', {
-                        text: function () {
-                            return copyText;
-                        }
-                    });
-                    clipboard.on('success', () => { this.$message.success('Export Links succeed'); });
-                },
-            delInbound(dbInbound) {
+            delInbound(dbInboundId) {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.deleteInbound"}}',
                    content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
+                    class: themeSwitcher.darkCardClass,
                    okText: '{{ i18n "delete"}}',
                    cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => this.submit('/xui/inbound/del/' + dbInbound.id),
+                    onOk: () => this.submit('/panel/inbound/del/' + dbInboundId),
                });
            },
+            delClient(dbInboundId, client) {
+                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+                clientId = this.getClientId(dbInbound.protocol, client);
+                this.$confirm({
+                    title: '{{ i18n "pages.inbounds.deleteInbound"}}',
+                    content: '{{ i18n "pages.inbounds.deleteInboundContent"}}',
+                    class: themeSwitcher.darkCardClass,
+                    okText: '{{ i18n "delete"}}',
+                    cancelText: '{{ i18n "cancel"}}',
+                    onOk: () => this.submit(`/panel/inbound/${dbInboundId}/delClient/${clientId}`),
+                });
+            },
+            getClients(protocol, clientSettings) {
+                switch (protocol) {
+                    case Protocols.VMESS: return clientSettings.vmesses;
+                    case Protocols.VLESS: return clientSettings.vlesses;
+                    case Protocols.TROJAN: return clientSettings.trojans;
+                    case Protocols.SHADOWSOCKS: return clientSettings.shadowsockses;
+                    default: return null;
+                }
+            },
+            getClientId(protocol, client) {
+                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(dbInbound) {
-                this.submit(`/xui/inbound/update/${dbInbound.id}`, dbInbound);
+            switchEnable(dbInboundId) {
+                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+                this.submit(`/panel/inbound/update/${dbInboundId}`, dbInbound);
            },
-            async submit(url, data, modal) {
-                const msg = await HttpUtil.postWithModal(url, data, modal);
+            async switchEnableClient(dbInboundId, client) {
+                this.loading()
+                dbInbound = this.dbInbounds.find(row => row.id === dbInboundId);
+                inbound = dbInbound.toInbound();
+                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);
+                this.loading(false);
+            },
+            async submit(url, data) {
+                const msg = await HttpUtil.postWithModal(url, data);
                if (msg.success) {
                    await this.getDBInbounds();
                }
            },
            getInboundClients(dbInbound) {
-                if(dbInbound.protocol == Protocols.VLESS) {
-                    return dbInbound.toInbound().settings.vlesses
-                } else if(dbInbound.protocol == Protocols.VMESS) {
-                    return dbInbound.toInbound().settings.vmesses
-                } else if(dbInbound.protocol == Protocols.TROJAN) {
-                    return dbInbound.toInbound().settings.trojans
+                if (dbInbound.protocol == Protocols.VLESS) {
+                    return dbInbound.toInbound().settings.vlesses;
+                } else if (dbInbound.protocol == Protocols.VMESS) {
+                    return dbInbound.toInbound().settings.vmesses;
+                } else if (dbInbound.protocol == Protocols.TROJAN) {
+                    return dbInbound.toInbound().settings.trojans;
+                } else if (dbInbound.protocol == Protocols.SHADOWSOCKS) {
+                    return dbInbound.toInbound().settings.shadowsockses;
                }
            },
-            resetClientTraffic(client,inbound,event) {
+            resetClientTraffic(client, dbInboundId) {
                this.$confirm({
                    title: '{{ i18n "pages.inbounds.resetTraffic"}}',
                    content: '{{ i18n "pages.inbounds.resetTrafficContent"}}',
+                    class: themeSwitcher.darkCardClass,
                    okText: '{{ i18n "reset"}}',
                    cancelText: '{{ i18n "cancel"}}',
-                    onOk: () => {
-                        this.resetClTraffic(client,inbound,event);
-                    },
+                    onOk: () => this.submit('/panel/inbound/' + dbInboundId + '/resetClientTraffic/' + client.email),
+                })
+            },
+            resetAllTraffic() {
+                this.$confirm({
+                    title: '{{ i18n "pages.inbounds.resetAllTrafficTitle"}}',
+                    content: '{{ i18n "pages.inbounds.resetAllTrafficContent"}}',
+                    class: themeSwitcher.darkCardClass,
+                    okText: '{{ i18n "reset"}}',
+                    cancelText: '{{ i18n "cancel"}}',
+                    onOk: () => this.submit('/panel/inbound/resetAllTraffics'),
                });
            },
-            async resetClTraffic(client,inbound,event) {
-                const msg = await HttpUtil.post('/xui/inbound/resetClientTraffic/'+ client.email);
-                if (!msg.success) {
-                    return;
-                }
-                clientStats = inbound.clientStats
-                if(clientStats.length > 0)
-                {
-                    for (const key in clientStats) {
-                        if (Object.hasOwnProperty.call(clientStats, key)) {
-                            if(clientStats[key]['email'] == client.email){ 
-                                clientStats[key]['up'] = 0
-                                clientStats[key]['down'] = 0
-                            }
-                        }
-                    }
-                }
+            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: themeSwitcher.darkCardClass,
+                    okText: '{{ i18n "reset"}}',
+                    cancelText: '{{ i18n "cancel"}}',
+                    onOk: () => this.submit('/panel/inbound/resetAllClientTraffics/' + dbInboundId),
+                })
+            },
+            delDepletedClients(dbInboundId) {
+                this.$confirm({
+                    title: '{{ i18n "pages.inbounds.delDepletedClientsTitle"}}',
+                    content: '{{ i18n "pages.inbounds.delDepletedClientsContent"}}',
+                    class: themeSwitcher.darkCardClass,
+                    okText: '{{ i18n "reset"}}',
+                    cancelText: '{{ i18n "cancel"}}',
+                    onOk: () => this.submit('/panel/inbound/delDepletedClients/' + dbInboundId),
+                })
            },
            isExpiry(dbInbound, index) {
                return dbInbound.toInbound().isExpiry(index)
            },
            getUpStats(dbInbound, email) {
-                clientStats = dbInbound.clientStats
-                if(clientStats.length > 0)
-                {
-                    for (const key in clientStats) {
-                        if (Object.hasOwnProperty.call(clientStats, key)) {
-                            if(clientStats[key]['email'] == email)
-                                return clientStats[key]['up']
-
-                        }
-                    }
-                }
-
+                if (email.length == 0) return 0
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
+                return clientStats ? clientStats.up : 0
            },
            getDownStats(dbInbound, email) {
-                clientStats = dbInbound.clientStats
-                if(clientStats.length > 0)
-                {
-                    for (const key in clientStats) {
-                        if (Object.hasOwnProperty.call(clientStats, key)) {
-                            if(clientStats[key]['email'] == email)
-                                return clientStats[key]['down']
-
-                        }
-                    }
-                }
+                if (email.length == 0) return 0
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
+                return clientStats ? clientStats.down : 0
            },
            isTrafficExhausted(dbInbound, email) {
-                clientStats = dbInbound.clientStats
-                if(clientStats.length > 0)
-                {
-                    for (const key in clientStats) {
-                        if (Object.hasOwnProperty.call(clientStats, key)) {
-                            if(clientStats[key]['email'] == email)
-                                return clientStats[key]['down']+clientStats[key]['up'] > clientStats[key]['total']
-
-                        }
-                    }
-                }
+                if (email.length == 0) return false
+                clientStats = dbInbound.clientStats.find(stats => stats.email === email)
+                return clientStats ? clientStats.down + clientStats.up > clientStats.total : false
            },
            isClientEnabled(dbInbound, email) {
-                clientStats = dbInbound.clientStats
-                if(clientStats.length > 0)
-                {
-                    for (const key in clientStats) {
-                        if (Object.hasOwnProperty.call(clientStats, key)) {
-                            if(clientStats[key]['email'] == email)
-                                return clientStats[key]['enable']
-
-                        }
-                    }
+                clientStats = dbInbound.clientStats ? dbInbound.clientStats.find(stats => stats.email === email) : null
+                return clientStats ? clientStats['enable'] : true
+            },
+            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);
+            },
+            exportAllLinks() {
+                let copyText = '';
+                for (const dbInbound of this.dbInbounds) {
+                    copyText += dbInbound.genInboundLinks
                }
-                 else{
-                    return true
+                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);
+                }
+            },
+            toggleRefresh() {
+                localStorage.setItem("isRefreshEnabled", this.isRefreshEnabled);
+                if (this.isRefreshEnabled) {
+                    this.startDataRefreshLoop();
+                }
+            },
+            changeRefreshInterval() {
+                localStorage.setItem("refreshInterval", this.refreshInterval);
+            },
+            async manualRefresh() {
+                if (!this.refreshing) {
+                    this.spinning = true;
+                    await this.getDBInbounds();
+                    this.spinning = false;
                }
            },
        },
@@ -513,18 +845,37 @@
            }, 500)
        },
        mounted() {
-            this.getDBInbounds();
+            this.loading();
+            this.getDefaultSettings();
+            if (this.isRefreshEnabled) {
+                this.startDataRefreshLoop();
+            }
+            else {
+                this.getDBInbounds();
+            }
+            this.loading(false);
        },
        computed: {
            total() {
                let down = 0, up = 0;
-                for (let i = 0; i < this.dbInbounds.length; ++i) {
-                    down += this.dbInbounds[i].down;
-                    up += this.dbInbounds[i].up;
-                }
+                let clients = 0, deactive = [], depleted = [], expiring = [];
+                this.dbInbounds.forEach(dbInbound => {
+                    down += dbInbound.down;
+                    up += dbInbound.up;
+                    if (this.clientCount[dbInbound.id]) {
+                        clients += this.clientCount[dbInbound.id].clients;
+                        deactive = deactive.concat(this.clientCount[dbInbound.id].deactive);
+                        depleted = depleted.concat(this.clientCount[dbInbound.id].depleted);
+                        expiring = expiring.concat(this.clientCount[dbInbound.id].expiring);
+                    }
+                });
                return {
                    down: down,
                    up: up,
+                    clients: clients,
+                    deactive: deactive,
+                    depleted: depleted,
+                    expiring: expiring,
                };
            }
        },
@@ -537,5 +888,8 @@
 {{template "qrcodeModal"}}
 {{template "textModal"}}
 {{template "inboundInfoModal"}}
+{{template "clientsModal"}}
+{{template "clientsBulkModal"}}
+
 </body>
-</html>
+</html>
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -11,28 +11,35 @@
    .ant-col-sm-24 {
        margin-top: 10px;
    }
+
+    .ant-card-dark h2 {
+        color: hsla(0, 0%, 100%, .65);
+    }
 </style>
+
 <body>
 <a-layout id="app" v-cloak>
    {{ template "commonSider" . }}
-    <a-layout id="content-layout">
+    <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>
+                    <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="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="themeSwitcher.darkCardClass"
                                                    :percent="status.mem.percent"></a-progress>
                                        <div>
                                            {{ i18n "pages.index.memory"}}: [[ sizeFormat(status.mem.current) ]] / [[ sizeFormat(status.mem.total) ]]
@@ -45,6 +52,7 @@
                                    <a-col :span="12" style="text-align: center">
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.swap.color"
+                                                    :class="themeSwitcher.darkCardClass"
                                                    :percent="status.swap.percent"></a-progress>
                                        <div>
                                            Swap: [[ sizeFormat(status.swap.current) ]] / [[ sizeFormat(status.swap.total) ]]
@@ -53,6 +61,7 @@
                                    <a-col :span="12" style="text-align: center">
                                        <a-progress type="dashboard" status="normal"
                                                    :stroke-color="status.disk.color"
+                                                    :class="themeSwitcher.darkCardClass"
                                                    :percent="status.disk.percent"></a-progress>
                                        <div>
                                            {{ i18n "pages.index.hard"}}: [[ sizeFormat(status.disk.current) ]] / [[ sizeFormat(status.disk.total) ]]
@@ -67,23 +76,16 @@
            <transition name="list" appear>
                <a-row>
                    <a-col :sm="24" :md="12">
-                        <a-card hoverable>
-                            {{ i18n "pages.index.xrayStatus" }}:
-                            <a-tag :color="status.xray.color">[[ status.xray.state ]]</a-tag>
-                            <a-tooltip v-if="status.xray.state === State.Error">
-                                <template slot="title">
-                                    <p v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
-                                </template>
-                                <a-icon type="question-circle" theme="filled"></a-icon>
-                            </a-tooltip>
-                            <a-tag color="green" @click="openSelectV2rayVersion">[[ status.xray.version ]]</a-tag>
-                            <a-tag color="blue" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch"}}</a-tag>
+                        <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>
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                            {{ i18n "pages.index.operationHours" }}:
-                            <a-tag color="#87d068">[[ formatSecond(status.uptime) ]]</a-tag>
+                            <a-tag color="green">[[ formatSecond(status.uptime) ]]</a-tag>
                            <a-tooltip>
                                <template slot="title">
                                    {{ i18n "pages.index.operationHoursDesc" }}
@@ -93,12 +95,35 @@
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <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">
+                                <template slot="title">
+                                    <p v-for="line in status.xray.errorMsg.split('\n')">[[ line ]]</p>
+                                </template>
+                                <a-icon type="question-circle" theme="filled"></a-icon>
+                            </a-tooltip>
+                            <a-tag color="blue" style="cursor: pointer;" @click="stopXrayService">{{ i18n "pages.index.stopXray" }}</a-tag>
+                            <a-tag color="blue" style="cursor: pointer;" @click="restartXrayService">{{ i18n "pages.index.restartXray" }}</a-tag>                    
+                            <a-tag color="blue" style="cursor: pointer;" @click="openSelectV2rayVersion">{{ i18n "pages.index.xraySwitch" }}</a-tag>
+                        </a-card>
+                    </a-col>
+                    <a-col :sm="24" :md="12">
+                        <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>
+                            <a-tag color="blue" style="cursor: pointer;" @click="openBackup">{{ i18n "pages.index.backup" }}</a-tag>
+                        </a-card>
+                    </a-col>
+                    <a-col :sm="24" :md="12">
+                        <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>
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                            TCP / UDP {{ i18n "pages.index.connectionCount" }}: [[ status.tcpCount ]] / [[ status.udpCount ]]
                            <a-tooltip>
                                <template slot="title">
@@ -109,7 +134,7 @@
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                            <a-row>
                                <a-col :span="12">
                                    <a-icon type="arrow-up"></a-icon>
@@ -135,7 +160,7 @@
                        </a-card>
                    </a-col>
                    <a-col :sm="24" :md="12">
-                        <a-card hoverable>
+                        <a-card hoverable :class="themeSwitcher.darkCardClass">
                            <a-row>
                                <a-col :span="12">
                                    <a-icon type="cloud-upload"></a-icon>
@@ -164,9 +189,11 @@
            </transition>
        </a-layout-content>
    </a-layout>
+
    <a-modal id="version-modal" v-model="versionModal.visible" title='{{ i18n "pages.index.xraySwitch" }}'
             :closable="true" @ok="() => versionModal.visible = false"
-             ok-text='{{ i18n "confirm" }}' cancel-text='{{ i18n "cancel"}}'>
+             :class="themeSwitcher.darkCardClass"
+             footer="">
        <h2>{{ i18n "pages.index.xraySwitchClick"}}</h2>
        <h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2>
        <template v-for="version, index in versionModal.versions">
@@ -176,8 +203,59 @@
            </a-tag>
        </template>
    </a-modal>
+
+    <a-modal id="log-modal" v-model="logModal.visible" title="X-UI logs"
+             :closable="true" @ok="() => logModal.visible = false" @cancel="() => logModal.visible = false"
+             :class="themeSwitcher.darkCardClass"
+             width="800px"
+             footer="">
+        <a-form layout="inline">
+            <a-form-item label="Count">
+                <a-select v-model="logModal.rows"
+                style="width: 80px"
+                @change="openLogs(logModal.rows)"
+                :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>
+                    <a-select-option value="100">100</a-select-option>
+                </a-select>
+            </a-form-item>
+            <a-form-item>
+                <button class="ant-btn ant-btn-primary" @click="openLogs(logModal.rows)"><a-icon type="sync"></a-icon> Reload</button>
+            </a-form-item>
+            <a-form-item>
+                <a-button type="primary" style="margin-bottom: 10px;"
+                :href="'data:application/text;charset=utf-8,' + encodeURIComponent(logModal.logs)" download="x-ui.log">
+                    {{ i18n "download" }} x-ui.log
+                </a-button>
+            </a-form-item>
+        </a-form>
+        <a-input type="textarea" v-model="logModal.logs" disabled="true"
+                :autosize="{ minRows: 10, maxRows: 22}"></a-input>
+    </a-modal>
+
+    <a-modal id="backup-modal" v-model="backupModal.visible" :title="backupModal.title"
+            :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" style="text-align: center" style="margin-bottom: 10px;">
+            <a-button type="primary" @click="exportDatabase()">
+                [[ backupModal.exportText ]]
+            </a-button>
+            <a-button type="primary" @click="importDatabase()">
+                [[ backupModal.importText ]]
+            </a-button>
+        </a-space>
+    </a-modal>
+
 </a-layout>
 {{template "js" .}}
+{{template "component/themeSwitcher" .}}
+{{template "textModal"}}
 <script>

    const State = {
@@ -219,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;
@@ -269,13 +347,52 @@
        },
    };

+    const logModal = {
+        visible: false,
+        logs: '',
+        rows: 20,
+        show(logs, rows) {
+            this.visible = true;
+            this.rows = rows;
+            this.logs = logs.join("\n");
+        },
+        hide() {
+            this.visible = false;
+        },
+    };
+
+    const backupModal = {
+        visible: false,
+        title: '',
+        description: '',
+        exportText: '',
+        importText: '',
+        show({
+            title = '{{ i18n "pages.index.backupTitle" }}',
+            description = '{{ i18n "pages.index.backupDescription" }}',
+            exportText = '{{ i18n "pages.index.exportDatabase" }}',
+            importText = '{{ i18n "pages.index.importDatabase" }}',
+        }) {
+            this.title = title;
+            this.description = description;
+            this.exportText = exportText;
+            this.importText = importText;
+            this.visible = true;
+        },
+        hide() {
+            this.visible = false;
+        },
+    };
+
    const app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
-            siderDrawer,
+            themeSwitcher,
            status: new Status(),
            versionModal,
+            logModal,
+            backupModal,
            spinning: false,
            loadingTip: '{{ i18n "loading"}}',
        },
@@ -307,15 +424,93 @@
                    title: '{{ i18n "pages.index.xraySwitchVersionDialog"}}',
                    content: '{{ i18n "pages.index.xraySwitchVersionDialogDesc"}}' + ` ${version}?`,
                    okText: '{{ i18n "confirm"}}',
+                    class: themeSwitcher.darkCardClass,
                    cancelText: '{{ i18n "cancel"}}',
                    onOk: async () => {
                        versionModal.hide();
-                        this.loading(true, '{{ i18n "pages.index.dontRefreshh"}}');
+                        this.loading(true, '{{ i18n "pages.index.dontRefresh"}}');
                        await HttpUtil.post(`/server/installXray/${version}`);
                        this.loading(false);
                    },
                });
            },
+            async stopXrayService() {
+                this.loading(true);
+                const msg = await HttpUtil.post('server/stopXrayService');
+                this.loading(false);
+                if (!msg.success) {
+                    return;
+                }
+            },
+            async restartXrayService() {
+                this.loading(true);
+                const msg = await HttpUtil.post('server/restartXrayService');
+                this.loading(false);
+                if (!msg.success) {
+                    return;
+                }
+            },
+            async openLogs(rows) {
+                this.loading(true);
+                const msg = await HttpUtil.post('server/logs/' + rows);
+                this.loading(false);
+                if (!msg.success) {
+                    return;
+                }
+                logModal.show(msg.obj, rows);
+            },
+            async openConfig() {
+                this.loading(true);
+                const msg = await HttpUtil.post('server/getConfigJson');
+                this.loading(false);
+                if (!msg.success) {
+                    return;
+                }
+                txtModal.show('config.json', JSON.stringify(msg.obj, null, 2), 'config.json');
+            },
+            openBackup() {
+                backupModal.show({
+                    title: '{{ i18n "pages.index.backupTitle" }}',
+                    description: '{{ i18n "pages.index.backupDescription" }}',
+                    exportText: '{{ i18n "pages.index.exportDatabase" }}',
+                    importText: '{{ i18n "pages.index.importDatabase" }}',
+                });
+            },
+            exportDatabase() {
+                window.location = basePath + 'server/getDb';
+            },
+            importDatabase() {
+                const fileInput = document.createElement('input');
+                fileInput.type = 'file';
+                fileInput.accept = '.db';
+                fileInput.addEventListener('change', async (event) => {
+                    const dbFile = event.target.files[0];
+                    if (dbFile) {
+                        const formData = new FormData();
+                        formData.append('db', dbFile);
+                        backupModal.hide();
+                        this.loading(true);
+                        const uploadMsg = await HttpUtil.post('server/importDB', formData, {
+                            headers: {
+                                'Content-Type': 'multipart/form-data',
+                            }
+                        });
+                        this.loading(false);
+                        if (!uploadMsg.success) {
+                            return;
+                        }
+                        this.loading(true);
+                        const restartMsg = await HttpUtil.post("/panel/setting/restartPanel");
+                        this.loading(false);
+                        if (restartMsg.success) {
+                            this.loading(true);
+                            await PromiseUtil.sleep(5000);
+                            location.reload();
+                        }
+                    }
+                });
+                fileInput.click();
+            },
        },
        async mounted() {
            while (true) {
--- a/web/html/xui/setting.html
+++ b/web/html/xui/setting.html
@@ -1,196 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-{{template "head" .}}
-<style>
-    @media (min-width: 769px) {
-        .ant-layout-content {
-            margin: 24px 16px;
-        }
-    }
-
-    .ant-col-sm-24 {
-        margin-top: 10px;
-    }
-
-    .ant-tabs-bar {
-        margin: 0;
-    }
-
-    .ant-list-item {
-        display: block;
-    }
-
-    .ant-tabs-top-bar {
-        background: white;
-    }
-</style>
-<body>
-<a-layout id="app" v-cloak>
-    {{ template "commonSider" . }}
-    <a-layout id="content-layout">
-        <a-layout-content>
-            <a-spin :spinning="spinning" :delay="500" tip="loading">
-                <a-space direction="vertical">
-                    <a-space direction="horizontal">
-                        <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.setting.save" }}</a-button>
-                        <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.setting.restartPanel" }}</a-button>
-                    </a-space>
-                    <a-tabs default-active-key="1">
-                        <a-tab-pane key="1" tab='{{ i18n "pages.setting.panelConfig"}}'>
-
-                            <a-list item-layout="horizontal" style="background: white">
-                                <setting-list-item type="text" title='{{ i18n "pages.setting.panelListeningIP"}}' desc='{{ i18n "pages.setting.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.setting.panelPort"}}' desc='{{ i18n "pages.setting.panelPortDesc"}}' v-model.number="allSetting.webPort"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.setting.publicKeyPath"}}' desc='{{ i18n "pages.setting.publicKeyPathDesc"}}' v-model="allSetting.webCertFile"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.setting.privateKeyPath"}}' desc='{{ i18n "pages.setting.privateKeyPathDesc"}}' v-model="allSetting.webKeyFile"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.setting.panelUrlPath"}}' desc='{{ i18n "pages.setting.panelUrlPathDesc"}}' v-model="allSetting.webBasePath"></setting-list-item>
-                                <a-list-item>
-                                    <a-row  style="padding: 20px">
-                                        <a-col :lg="24" :xl="12">
-                                            <a-list-item-meta title="Language"/>
-                                        </a-col>
-
-                                        <a-col :lg="24" :xl="12">
-                                            <temlate>
-                                                <a-select
-                                                        ref="selectLang"
-                                                        v-model="lang"
-                                                        @change="setLang(lang)"
-                                                        style="width: 100%"
-                                                >
-                                                    <a-select-option  :value="l.value" label="China" v-for="l in supportLangs" >
-                                                        <span role="img" aria-label="l.name" v-text="l.icon"></span>
-                                                        &nbsp;&nbsp;<span v-text="l.name"></span>
-                                                    </a-select-option>
-                                                </a-select>
-                                            </temlate>
-                                        </a-col>
-                                    </a-row>
-
-                                </a-list-item>
-                            </a-list>
-                        </a-tab-pane>
-                        <a-tab-pane key="2" tab='{{ i18n "pages.setting.userSetting"}}'>
-                            <a-form style="background: white; padding: 20px">
-                                <a-form-item label='{{ i18n "pages.setting.oldUsername"}}'>
-                                    <a-input v-model="user.oldUsername" style="max-width: 300px"></a-input>
-                                </a-form-item>
-                                <a-form-item label='{{ i18n "pages.setting.currentPassword"}}'>
-                                    <a-input type="password" v-model="user.oldPassword"
-                                             style="max-width: 300px"></a-input>
-                                </a-form-item>
-                                <a-form-item label='{{ i18n "pages.setting.newUsername"}}'>
-                                    <a-input v-model="user.newUsername" style="max-width: 300px"></a-input>
-                                </a-form-item>
-                                <a-form-item label='{{ i18n "pages.setting.newPassword"}}'>
-                                    <a-input type="password" v-model="user.newPassword"
-                                             style="max-width: 300px"></a-input>
-                                </a-form-item>
-                                <a-form-item>
-<!--                                    <a-button type="primary" @click="updateUser">update</a-button>-->
-                                    <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
-                                </a-form-item>
-                            </a-form>
-                        </a-tab-pane>
-                        <a-tab-pane key="3" tab='{{ i18n "pages.setting.xrayConfiguration"}}'>
-                            <a-list item-layout="horizontal" style="background: white">
-                                <setting-list-item type="textarea" title='{{ i18n "pages.setting.xrayConfigTemplate"}}' desc='{{ i18n "pages.setting.xrayConfigTemplateDesc"}}' v-model="allSetting.xrayTemplateConfig"></setting-list-item>
-                            </a-list>
-                        </a-tab-pane>
-                        <a-tab-pane key="4" tab='{{ i18n "pages.setting.TGReminder"}}'>
-                            <a-list item-layout="horizontal" style="background: white">
-                                <setting-list-item type="switch" title='{{ i18n "pages.setting.telegramBotEnable" }}' desc='{{ i18n "pages.setting.telegramBotEnableDesc" }}'  v-model="allSetting.tgBotEnable"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.setting.telegramToken"}}' desc='{{ i18n "pages.setting.telegramTokenDesc"}}'  v-model="allSetting.tgBotToken"></setting-list-item>
-                                <setting-list-item type="number" title='{{ i18n "pages.setting.telegramChatId"}}' desc='{{ i18n "pages.setting.telegramChatIdDesc"}}'  v-model.number="allSetting.tgBotChatId"></setting-list-item>
-                                <setting-list-item type="text" title='{{ i18n "pages.setting.telegramNotifyTime"}}' desc='{{ i18n "pages.setting.telegramNotifyTimeDesc"}}'  v-model="allSetting.tgRunTime"></setting-list-item>
-                            </a-list>
-                        </a-tab-pane>
-                        <a-tab-pane key="5" tab='{{ i18n "pages.setting.otherSetting"}}'>
-                            <a-list item-layout="horizontal" style="background: white">
-                                <setting-list-item type="text" title='{{ i18n "pages.setting.timeZonee"}}' desc='{{ i18n "pages.setting.timeZoneDesc"}}' v-model="allSetting.timeLocation"></setting-list-item>
-                            </a-list>
-                        </a-tab-pane>
-                    </a-tabs>
-                </a-space>
-            </a-spin>
-        </a-layout-content>
-    </a-layout>
-</a-layout>
-{{template "js" .}}
-{{template "component/setting"}}
-<script>
-
-    const app = new Vue({
-        delimiters: ['[[', ']]'],
-        el: '#app',
-        data: {
-            siderDrawer,
-            spinning: false,
-            oldAllSetting: new AllSetting(),
-            allSetting: new AllSetting(),
-            saveBtnDisable: true,
-            user: {},
-            lang : getLang()
-        },
-        methods: {
-            loading(spinning = true) {
-                this.spinning = spinning;
-            },
-            async getAllSetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/all");
-                this.loading(false);
-                if (msg.success) {
-                    this.oldAllSetting = new AllSetting(msg.obj);
-                    this.allSetting = new AllSetting(msg.obj);
-                    this.saveBtnDisable = true;
-                }
-            },
-            async updateAllSetting() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/update", this.allSetting);
-                this.loading(false);
-                if (msg.success) {
-                    await this.getAllSetting();
-                }
-            },
-            async updateUser() {
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/updateUser", this.user);
-                this.loading(false);
-                if (msg.success) {
-                    this.user = {};
-                }
-            },
-            async restartPanel() {
-                await new Promise(resolve => {
-                    this.$confirm({
-                        title: '{{ i18n "pages.setting.restartPanel" }}',
-                        content: '{{ i18n "pages.setting.restartPanelDesc" }}',
-                        okText: '{{ i18n "sure" }}',
-                        cancelText: '{{ i18n "cancel" }}',
-                        onOk: () => resolve(),
-                    });
-                });
-                this.loading(true);
-                const msg = await HttpUtil.post("/xui/setting/restartPanel");
-                this.loading(false);
-                if (msg.success) {
-                    this.loading(true);
-                    await PromiseUtil.sleep(5000);
-                    location.reload();
-                }
-            }
-        },
-        async mounted() {
-            await this.getAllSetting();
-            while (true) {
-                await PromiseUtil.sleep(1000);
-                this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
-            }
-        },
-    });
-
-</script>
-</body>
-</html>
--- a/web/html/xui/settings.html
+++ b/web/html/xui/settings.html
@@ -0,0 +1,805 @@
+<!DOCTYPE html>
+<html lang="en">
+{{template "head" .}}
+<style>
+    @media (min-width: 769px) {
+        .ant-layout-content {
+            margin: 24px 16px;
+        }
+    }
+
+    .ant-col-sm-24 {
+        margin-top: 10px;
+    }
+
+    .ant-tabs-bar {
+        margin: 0;
+    }
+
+    .ant-list-item {
+        display: block;
+    }
+
+    :not(.ant-card-dark)>.ant-tabs-top-bar {
+        background: white;
+    }
+</style>
+
+<body>
+<a-layout id="app" v-cloak>
+    {{ template "commonSider" . }}
+    <a-layout id="content-layout" :style="themeSwitcher.bgStyle">
+        <a-layout-content>
+            <a-spin :spinning="spinning" :delay="500" tip="loading">
+                <a-space direction="vertical">
+                    <a-space direction="horizontal">
+                        <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
+                        <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
+                    </a-space>
+                    <a-tabs style="margin:1rem 0.5rem;" default-active-key="1" :class="themeSwitcher.darkCardClass" >
+                        <a-tab-pane key="1" tab='{{ i18n "pages.settings.panelSettings"}}'>
+                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.panelListeningIP"}}' desc='{{ i18n "pages.settings.panelListeningIPDesc"}}' v-model="allSetting.webListen"></setting-list-item>
+                                <setting-list-item type="number" title='{{ i18n "pages.settings.panelPort"}}' desc='{{ i18n "pages.settings.panelPortDesc"}}' v-model="allSetting.webPort" :min="0"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.publicKeyPath"}}' desc='{{ i18n "pages.settings.publicKeyPathDesc"}}' v-model="allSetting.webCertFile"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.privateKeyPath"}}' desc='{{ i18n "pages.settings.privateKeyPathDesc"}}' v-model="allSetting.webKeyFile"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.panelUrlPath"}}' desc='{{ i18n "pages.settings.panelUrlPathDesc"}}' v-model="allSetting.webBasePath"></setting-list-item>
+                                <setting-list-item type="number" title='{{ i18n "pages.settings.sessionMaxAge" }}' desc='{{ i18n "pages.settings.sessionMaxAgeDesc" }}' v-model="allSetting.sessionMaxAge" :min="0"></setting-list-item>
+                                <setting-list-item type="number" title='{{ i18n "pages.settings.expireTimeDiff" }}' desc='{{ i18n "pages.settings.expireTimeDiffDesc" }}' v-model="allSetting.expireDiff" :min="0"></setting-list-item>
+                                <setting-list-item type="number" title='{{ i18n "pages.settings.trafficDiff" }}' desc='{{ i18n "pages.settings.trafficDiffDesc" }}' v-model="allSetting.trafficDiff" :min="0"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.timeZone"}}' desc='{{ i18n "pages.settings.timeZoneDesc"}}' v-model="allSetting.timeLocation"></setting-list-item>
+                                <a-list-item>
+                                    <a-row style="padding: 20px">
+                                        <a-col :lg="24" :xl="12">
+                                            <a-list-item-meta title="Language" />
+                                        </a-col>
+
+                                        <a-col :lg="24" :xl="12">
+                                            <template>
+                                                <a-select
+                                                    ref="selectLang"
+                                                    v-model="lang"
+                                                    @change="setLang(lang)"
+                                                    :dropdown-class-name="themeSwitcher.darkCardClass"
+                                                    style="width: 100%"
+                                                >
+                                                    <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
+                                                        <span role="img" aria-label="l.name" v-text="l.icon"></span>&nbsp;&nbsp;<span v-text="l.name"></span>
+                                                    </a-select-option>
+                                                </a-select>
+                                            </template>
+                                        </a-col>
+                                    </a-row>
+                                </a-list-item>
+                            </a-list>
+                        </a-tab-pane>
+
+                        <a-tab-pane key="2" tab='{{ i18n "pages.settings.securitySettings"}}' style="padding: 20px;">
+                            <a-tabs class="ant-card-dark-securitybox-nohover" default-active-key="sec-1" :class="themeSwitcher.darkCardClass">
+                                <a-tab-pane key="sec-1" tab='{{ i18n "pages.settings.security.admin"}}'>
+                                    <a-form :style="'padding: 20px;' + themeSwitcher.textStyle">
+                                        <a-form-item label='{{ i18n "pages.settings.oldUsername"}}'>
+                                            <a-input v-model="user.oldUsername" style="max-width: 300px"></a-input>
+                                        </a-form-item>
+                                        <a-form-item label='{{ i18n "pages.settings.currentPassword"}}'>
+                                            <password-input v-model="user.oldPassword" style="max-width: 300px"></password-input>
+                                        </a-form-item>
+                                        <a-form-item label='{{ i18n "pages.settings.newUsername"}}'>
+                                            <a-input v-model="user.newUsername" style="max-width: 300px"></a-input>
+                                        </a-form-item>
+                                        <a-form-item label='{{ i18n "pages.settings.newPassword"}}'>
+                                            <password-input v-model="user.newPassword" style="max-width: 300px"></password-input>
+                                        </a-form-item>
+                                        <a-form-item>
+                                            <a-button type="primary" @click="updateUser">{{ i18n "confirm" }}</a-button>
+                                        </a-form-item>
+                                    </a-form>
+                                </a-tab-pane>
+                                <a-tab-pane key="sec-2" tab='{{ i18n "pages.settings.security.secret"}}'>
+                                    <a-form :style="'padding: 20px;' + themeSwitcher.textStyle">
+                                        <a-list-item style="padding: 20px">
+                                            <a-row>
+                                                <a-col :lg="24" :xl="12">
+                                                    <a-list-item-meta title='{{ i18n "pages.settings.security.loginSecurity" }}' description='{{ i18n "pages.settings.security.loginSecurityDesc" }}' />
+                                                </a-col>
+                                                <a-col :lg="24" :xl="12">
+                                                    <template>
+                                                        <a-switch @change="toggleToken(allSetting.secretEnable)" v-model="allSetting.secretEnable"></a-switch>
+                                                    </template>
+                                                </a-col>
+                                            </a-row>
+                                        </a-list-item>
+                                        <a-list-item style="padding: 20px">
+                                            <a-row>
+                                                <a-col :lg="24" :xl="12">
+                                                    <a-list-item-meta title='{{ i18n "pages.settings.security.secretToken" }}' description='{{ i18n "pages.settings.security.secretTokenDesc" }}' />
+                                                </a-col>
+                                                <a-col :lg="24" :xl="12">
+                                                    <svg 
+                                                        @click="getNewSecret"
+                                                        xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="anticon anticon-question-circle" viewBox="0 0 16 16"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/><path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> 
+                                                    </svg>
+                                                    <template>
+                                                        <a-textarea type="text" id='token' :disabled="!allSetting.secretEnable" v-model="user.loginSecret"></a-textarea>
+                                                    </template>
+                                                </a-col>
+                                            </a-row>
+                                        </a-list-item>
+                                        <a-button type="primary" @click="updateSecret">{{ i18n "confirm" }}</a-button>
+                                    </a-form>
+                                </a-tab-pane>
+                            </a-tabs>
+                        </a-tab-pane>
+
+                        <a-tab-pane key="3" tab='{{ i18n "pages.settings.xrayConfiguration"}}'>
+                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
+                                <a-divider style="padding: 20px;">{{ i18n "pages.settings.actions"}}</a-divider>
+                                <a-space direction="horizontal" style="padding: 0px 20px">
+                                    <a-button type="primary" @click="resetXrayConfigToDefault">{{ i18n "pages.settings.resetDefaultConfig" }}</a-button>
+                                </a-space>
+                                <a-divider style="padding: 20px;">{{ i18n "pages.settings.templates.title"}} </a-divider>
+                                
+                                <a-tabs class="ant-card-dark-box-nohover" default-active-key="tpl-1" :class="themeSwitcher.darkCardClass" style="padding: 20px 20px;">
+                                    <a-tab-pane key="tpl-1" tab='{{ i18n "pages.settings.templates.basicTemplate"}}' style="padding-top: 20px;">
+                                        <a-collapse>
+                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.generalConfigs"}}'>
+                                                <a-row :xs="24" :sm="24" :lg="12">
+                                                    <h2 style="color: inherit; font-weight: bold; font-size: 18px; padding: 10px 20px; border-bottom: 2px solid;">
+                                                        <a-icon type="warning" style="color: inherit; font-size: 24px;"></a-icon>
+                                                        {{ i18n "pages.settings.templates.generalConfigsDesc" }}
+                                                    </h2>
+                                                </a-row>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigTorrent"}}' desc='{{ i18n "pages.settings.templates.xrayConfigTorrentDesc"}}' v-model="torrentSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigPrivateIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigPrivateIpDesc"}}' v-model="privateIpSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigAds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigAdsDesc"}}' v-model="AdsSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigPorn"}}' desc='{{ i18n "pages.settings.templates.xrayConfigPornDesc"}}' v-model="PornSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigSpeedtest"}}' desc='{{ i18n "pages.settings.templates.xrayConfigSpeedtestDesc"}}' v-model="SpeedTestSettings"></setting-list-item>
+                                            </a-collapse-panel>
+                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.countryConfigs"}}'>
+                                                <a-row :xs="24" :sm="24" :lg="12">
+                                                    <h2 style="color: inherit; font-weight: bold; font-size: 18px; padding: 10px 20px; border-bottom: 2px solid;">
+                                                        <a-icon type="warning" style="color: inherit; font-size: 24px;"></a-icon>
+                                                        {{ i18n "pages.settings.templates.countryConfigsDesc" }}
+                                                    </h2>
+                                                </a-row>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigIRIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigIRIpDesc"}}' v-model="IRIpSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigIRDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigIRDomainDesc"}}' v-model="IRDomainSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigChinaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigChinaIpDesc"}}' v-model="ChinaIpSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigChinaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigChinaDomainDesc"}}' v-model="ChinaDomainSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigRussiaIp"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRussiaIpDesc"}}' v-model="RussiaIpSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigRussiaDomain"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRussiaDomainDesc"}}' v-model="RussiaDomainSettings"></setting-list-item>
+                                            </a-collapse-panel>
+                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.ipv4Configs"}}'>
+                                                <a-row :xs="24" :sm="24" :lg="12">
+                                                    <h2 style="color: inherit; font-weight: bold; font-size: 18px; padding: 10px 20px; border-bottom: 2px solid;">
+                                                        <a-icon type="warning" style="color: inherit; font-size: 24px;"></a-icon>
+                                                        {{ i18n "pages.settings.templates.ipv4ConfigsDesc" }}
+                                                    </h2>
+                                                </a-row>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigGoogleIPv4"}}' desc='{{ i18n "pages.settings.templates.xrayConfigGoogleIPv4Desc"}}' v-model="GoogleIPv4Settings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigNetflixIPv4"}}' desc='{{ i18n "pages.settings.templates.xrayConfigNetflixIPv4Desc"}}' v-model="NetflixIPv4Settings"></setting-list-item>
+                                            </a-collapse-panel>
+                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.warpConfigs"}}'>
+                                                <a-row :xs="24" :sm="24" :lg="12">
+                                                    <h2 style="color: inherit; font-weight: bold; font-size: 18px; padding: 10px 20px; border-bottom: 2px solid;">
+                                                        <a-icon type="warning" style="color: inherit; font-size: 24px;"></a-icon>
+                                                        {{ i18n "pages.settings.templates.warpConfigsDesc" }}
+                                                    </h2>
+                                                </a-row>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigGoogleWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigGoogleWARPDesc"}}' v-model="GoogleWARPSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigOpenAIWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigOpenAIWARPDesc"}}' v-model="OpenAIWARPSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigNetflixWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigNetflixWARPDesc"}}' v-model="NetflixWARPSettings"></setting-list-item>
+                                                <setting-list-item type="switch" title='{{ i18n "pages.settings.templates.xrayConfigSpotifyWARP"}}' desc='{{ i18n "pages.settings.templates.xrayConfigSpotifyWARPDesc"}}' v-model="SpotifyWARPSettings"></setting-list-item>
+                                            </a-collapse-panel>
+                                        </a-collapse>
+                                    </a-tab-pane>
+                                    <a-tab-pane key="tpl-2" tab='{{ i18n "pages.settings.templates.advancedTemplate"}}' style="padding-top: 20px;">
+                                        <a-collapse>
+                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigInbounds"}}'>
+                                                <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigInbounds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigInboundsDesc"}}' v-model="inboundSettings"></setting-list-item>
+                                            </a-collapse-panel>
+                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigOutbounds"}}'>
+                                                <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigOutbounds"}}' desc='{{ i18n "pages.settings.templates.xrayConfigOutboundsDesc"}}' v-model="outboundSettings"></setting-list-item>
+                                            </a-collapse-panel>
+                                            <a-collapse-panel header='{{ i18n "pages.settings.templates.xrayConfigRoutings"}}'>
+                                                <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigRoutings"}}' desc='{{ i18n "pages.settings.templates.xrayConfigRoutingsDesc"}}' v-model="routingRuleSettings"></setting-list-item>
+                                            </a-collapse-panel>
+                                        </a-collapse>
+                                    </a-tab-pane>
+                                    <a-tab-pane key="tpl-3" tab='{{ i18n "pages.settings.templates.completeTemplate"}}' style="padding-top: 20px;">
+                                        <setting-list-item type="textarea" title='{{ i18n "pages.settings.templates.xrayConfigTemplate"}}' desc='{{ i18n "pages.settings.templates.xrayConfigTemplateDesc"}}' v-model="allSetting.xrayTemplateConfig"></setting-list-item>
+                                    </a-tab-pane>
+                                </a-tabs>
+                            </a-list>
+                        </a-tab-pane>
+
+                        <a-tab-pane key="4" tab='{{ i18n "pages.settings.TGBotSettings"}}'>
+                            <a-list item-layout="horizontal" :style="themeSwitcher.textStyle">
+                                <setting-list-item type="switch" title='{{ i18n "pages.settings.telegramBotEnable" }}' desc='{{ i18n "pages.settings.telegramBotEnableDesc" }}' v-model="allSetting.tgBotEnable"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.telegramToken"}}' desc='{{ i18n "pages.settings.telegramTokenDesc"}}' v-model="allSetting.tgBotToken"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.telegramChatId"}}' desc='{{ i18n "pages.settings.telegramChatIdDesc"}}' v-model="allSetting.tgBotChatId"></setting-list-item>
+                                <setting-list-item type="text" title='{{ i18n "pages.settings.telegramNotifyTime"}}' desc='{{ i18n "pages.settings.telegramNotifyTimeDesc"}}' v-model="allSetting.tgRunTime"></setting-list-item>
+                                <setting-list-item type="switch" title='{{ i18n "pages.settings.tgNotifyBackup" }}' desc='{{ i18n "pages.settings.tgNotifyBackupDesc" }}' v-model="allSetting.tgBotBackup"></setting-list-item>
+                                <setting-list-item type="number" title='{{ i18n "pages.settings.tgNotifyCpu" }}' desc='{{ i18n "pages.settings.tgNotifyCpuDesc" }}' v-model="allSetting.tgCpu" :min="0" :max="100"></setting-list-item>
+                            </a-list>
+                        </a-tab-pane>
+                    </a-tabs>
+                </a-space>
+            </a-spin>
+        </a-layout-content>
+    </a-layout>
+</a-layout>
+
+{{template "js" .}}
+{{template "component/themeSwitcher" .}}
+{{template "component/password" .}}
+{{template "component/setting"}}
+
+<script>
+
+    const app = new Vue({
+        delimiters: ['[[', ']]'],
+        el: '#app',
+        data: {
+            themeSwitcher,
+            spinning: false,
+            oldAllSetting: new AllSetting(),
+            allSetting: new AllSetting(),
+            saveBtnDisable: true,
+            user: new User(),
+            lang: getLang(),
+            ipv4Settings: {
+                tag: "IPv4",
+                protocol: "freedom",
+                settings: {
+                    domainStrategy: "UseIPv4"
+                }
+            },
+            warpSettings: {
+                tag: "WARP",
+                protocol: "socks",
+                settings: {
+                    servers: [
+                        {
+                            address: "127.0.0.1",
+                            port: 40000
+                        }
+                    ]
+                }
+            },
+            settingsData: {
+                protocols: {
+                    bittorrent: ["bittorrent"],
+                },
+                ips: {
+                    local: ["geoip:private"],
+                    google: ["geoip:google"],
+                    cn: ["geoip:cn"],
+                    ir: ["geoip:ir"],
+                    ru: ["geoip:ru"],
+                },
+                domains: {
+                    ads: [
+                        "geosite:category-ads-all",
+                        "geosite:category-ads",
+                        "geosite:google-ads",
+                        "geosite:spotify-ads"
+                    ],
+                    porn: ["geosite:category-porn"],
+                    speedtest: ["geosite:speedtest"],
+                    openai: ["geosite:openai"],
+                    google: ["geosite:google"],
+                    spotify: ["geosite:spotify"],
+                    netflix: ["geosite:netflix"],
+                    cn: [
+                        "geosite:cn",
+                        "regexp:.*\\.cn$"
+                    ],
+                    ru: [
+                        "geosite:category-gov-ru",
+                        "regexp:.*\\.ru$"
+                    ],
+                    ir: [
+                        "regexp:.*\\.ir$",
+                        "ext:iran.dat:ir",
+                        "ext:iran.dat:other",
+                        "ext:iran.dat:ads",
+                        "geosite:category-ir"
+                    ]
+                },
+            }
+        },
+        methods: {
+            loading(spinning = true, obj) {
+                if (obj == null) this.spinning = spinning;
+            },
+            async getAllSetting() {
+                this.loading(true);
+                const msg = await HttpUtil.post("/panel/setting/all");
+                this.loading(false);
+                if (msg.success) {
+                    this.oldAllSetting = new AllSetting(msg.obj);
+                    this.allSetting = new AllSetting(msg.obj);
+                    this.saveBtnDisable = true;
+                }
+                await this.getUserSecret();
+            },
+            async updateAllSetting() {
+                this.loading(true);
+                const msg = await HttpUtil.post("/panel/setting/update", this.allSetting);
+                this.loading(false);
+                if (msg.success) {
+                    await this.getAllSetting();
+                }
+            },
+            async updateUser() {
+                this.loading(true);
+                const msg = await HttpUtil.post("/panel/setting/updateUser", this.user);
+                this.loading(false);
+                if (msg.success) {
+                    this.user = {};
+                    window.location.replace(basePath + "logout")
+                }
+            },
+            async restartPanel() {
+                await new Promise(resolve => {
+                    this.$confirm({
+                        title: '{{ i18n "pages.settings.restartPanel" }}',
+                        content: '{{ i18n "pages.settings.restartPanelDesc" }}',
+                        okText: '{{ i18n "sure" }}',
+                        cancelText: '{{ i18n "cancel" }}',
+                        onOk: () => resolve(),
+                    });
+                });
+                this.loading(true);
+                const msg = await HttpUtil.post("/panel/setting/restartPanel");
+                this.loading(false);
+                if (msg.success) {
+                    this.loading(true);
+                    await PromiseUtil.sleep(5000);
+                    location.reload();
+                }
+            },
+            async getUserSecret() {
+                const user_msg = await HttpUtil.post("/panel/setting/getUserSecret", this.user);
+                if (user_msg.success) {
+                    this.user = user_msg.obj;
+                }
+                this.loading(false);
+            },
+            async updateSecret() {
+                this.loading(true);
+                const msg = await HttpUtil.post("/panel/setting/updateUserSecret", this.user);
+                if (msg.success) {
+                    this.user = msg.obj;
+                    window.location.replace(basePath + "logout")
+                }
+                this.loading(false);
+                await this.updateAllSetting();
+            },
+            async getNewSecret() {
+                this.loading(true);
+                await PromiseUtil.sleep(1000);
+                var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
+                var string = "";
+                var len = 64;
+                for (var ii = 0; ii < len; ii++) {
+                    string += chars[Math.floor(Math.random() * chars.length)];
+                }
+                this.user.loginSecret = string;
+                document.getElementById("token").value = this.user.loginSecret;
+                this.loading(false);
+            },
+            async toggleToken(value) {
+                if (value) this.getNewSecret();
+                else this.user.loginSecret = "";
+            },
+            async resetXrayConfigToDefault() {
+                this.loading(true);
+                const msg = await HttpUtil.get("/panel/setting/getDefaultJsonConfig");
+                this.loading(false);
+                if (msg.success) {
+                    this.templateSettings = JSON.parse(JSON.stringify(msg.obj, null, 2));
+                    this.saveBtnDisable = true;
+                }
+            },
+            checkRequiredOutbounds() {
+                const newTemplateSettings = this.templateSettings;
+                const haveIPv4Outbounds = newTemplateSettings.outbounds.some((o) => o?.tag === "IPv4");
+                const haveIPv4Rules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === "IPv4");
+                const haveWARPOutbounds = newTemplateSettings.outbounds.some((o) => o?.tag === "WARP");
+                const haveWARPRules = newTemplateSettings.routing.rules.some((r) => r?.outboundTag === "WARP");
+                if (haveWARPRules && !haveWARPOutbounds) {
+                    newTemplateSettings.outbounds.push(this.warpSettings);
+                }
+                if (haveIPv4Rules && !haveIPv4Outbounds) {
+                    newTemplateSettings.outbounds.push(this.ipv4Settings);
+                }
+                this.templateSettings = newTemplateSettings;
+            },
+            templateRuleGetter(routeSettings) {
+                const { data, property, outboundTag } = routeSettings;
+                let result = false;
+                if (this.templateSettings != null) {
+                    this.templateSettings.routing.rules.forEach(
+                        (routingRule) => {
+                            if (
+                                routingRule.hasOwnProperty(property) &&
+                                routingRule.hasOwnProperty("outboundTag") &&
+                                routingRule.outboundTag === outboundTag
+                            ) {
+                                if (data.includes(routingRule[property][0])) {
+                                    result = true;
+                                }
+                            }
+                        }
+                    );
+                }
+                return result;
+            },
+            templateRuleSetter(routeSettings) {
+                const { newValue, data, property, outboundTag } = routeSettings;
+                const oldTemplateSettings = this.templateSettings;
+                const newTemplateSettings = oldTemplateSettings;
+                if (newValue) {
+                    const propertyRule = {
+                        type: "field",
+                        outboundTag,
+                        [property]: data
+                    };
+                    newTemplateSettings.routing.rules.push(propertyRule);
+                }
+                else {
+                    const newRules = [];
+                    newTemplateSettings.routing.rules.forEach(
+                        (routingRule) => {
+                            if (
+                                routingRule.hasOwnProperty(property) &&
+                                routingRule.hasOwnProperty("outboundTag") &&
+                                routingRule.outboundTag === outboundTag
+                            ) {
+                                if (data.includes(routingRule[property][0])) {
+                                    return;
+                                }
+                            }
+                            newRules.push(routingRule);
+                        }
+                    );
+                    newTemplateSettings.routing.rules = newRules;
+                }
+                this.templateSettings = newTemplateSettings;
+                this.checkRequiredOutbounds();
+            }
+        },
+        async mounted() {
+            await this.getAllSetting();
+            while (true) {
+                await PromiseUtil.sleep(1000);
+                this.saveBtnDisable = this.oldAllSetting.equals(this.allSetting);
+            }
+        },
+        computed: {
+            templateSettings: {
+                get: function () { return this.allSetting.xrayTemplateConfig ? JSON.parse(this.allSetting.xrayTemplateConfig) : null; },
+                set: function (newValue) { this.allSetting.xrayTemplateConfig = JSON.stringify(newValue, null, 2) },
+            },
+            inboundSettings: {
+                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.inbounds, null, 2) : null; },
+                set: function (newValue) {
+                    newTemplateSettings = this.templateSettings;
+                    newTemplateSettings.inbounds = JSON.parse(newValue)
+                    this.templateSettings = newTemplateSettings
+                },
+            },
+            outboundSettings: {
+                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.outbounds, null, 2) : null; },
+                set: function (newValue) {
+                    newTemplateSettings = this.templateSettings;
+                    newTemplateSettings.outbounds = JSON.parse(newValue)
+                    this.templateSettings = newTemplateSettings
+                },
+            },
+            routingRuleSettings: {
+                get: function () { return this.templateSettings ? JSON.stringify(this.templateSettings.routing.rules, null, 2) : null; },
+                set: function (newValue) {
+                    newTemplateSettings = this.templateSettings;
+                    newTemplateSettings.routing.rules = JSON.parse(newValue)
+                    this.templateSettings = newTemplateSettings
+                },
+            },
+            torrentSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "protocol",
+                        data: this.settingsData.protocols.bittorrent
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "protocol",
+                        data: this.settingsData.protocols.bittorrent
+                    });
+                },
+            },
+            privateIpSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "ip",
+                        data: this.settingsData.ips.local
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "ip",
+                        data: this.settingsData.ips.local
+                    });
+                },
+            },
+            AdsSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.ads
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.ads
+                    });
+                },
+            },
+            PornSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.porn
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.porn
+                    });
+                },
+            },
+            SpeedTestSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.speedtest
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.speedtest
+                    });
+                },
+            },
+            GoogleIPv4Settings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "IPv4",
+                        property: "domain",
+                        data: this.settingsData.domains.google
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "IPv4",
+                        property: "domain",
+                        data: this.settingsData.domains.google
+                    });
+                },
+            },
+            NetflixIPv4Settings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "IPv4",
+                        property: "domain",
+                        data: this.settingsData.domains.netflix
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "IPv4",
+                        property: "domain",
+                        data: this.settingsData.domains.netflix
+                    });
+                },
+            },
+            IRIpSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "ip",
+                        data: this.settingsData.ips.ir
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "ip",
+                        data: this.settingsData.ips.ir
+                    });
+                },
+            },
+            IRDomainSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.ir
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.ir
+                    });
+                },
+            },
+            ChinaIpSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "ip",
+                        data: this.settingsData.ips.cn
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "ip",
+                        data: this.settingsData.ips.cn
+                    });
+                },
+            },
+            ChinaDomainSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.cn
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.cn
+                    });
+                },
+            },
+            RussiaIpSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "ip",
+                        data: this.settingsData.ips.ru
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "ip",
+                        data: this.settingsData.ips.ru
+                    });
+                },
+            },
+            RussiaDomainSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.ru
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "blocked",
+                        property: "domain",
+                        data: this.settingsData.domains.ru
+                    });
+                },
+            },
+            GoogleWARPSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "WARP",
+                        property: "domain",
+                        data: this.settingsData.domains.google
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "WARP",
+                        property: "domain",
+                        data: this.settingsData.domains.google
+                    });
+                },
+            },
+            OpenAIWARPSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "WARP",
+                        property: "domain",
+                        data: this.settingsData.domains.openai
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "WARP",
+                        property: "domain",
+                        data: this.settingsData.domains.openai
+                    });
+                },
+            },
+            NetflixWARPSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "WARP",
+                        property: "domain",
+                        data: this.settingsData.domains.netflix
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "WARP",
+                        property: "domain",
+                        data: this.settingsData.domains.netflix
+                    });
+                },
+            },
+            SpotifyWARPSettings: {
+                get: function () {
+                    return this.templateRuleGetter({
+                        outboundTag: "WARP",
+                        property: "domain",
+                        data: this.settingsData.domains.spotify
+                    });
+                },
+                set: function (newValue) {
+                    this.templateRuleSetter({
+                        newValue,
+                        outboundTag: "WARP",
+                        property: "domain",
+                        data: this.settingsData.domains.spotify
+                    });
+                },
+            },
+        }
+    });
+
+</script>
+</body>
+
+</html>
--- a/web/job/check_client_ip_job.go
+++ b/web/job/check_client_ip_job.go
@@ -1,28 +1,29 @@
 package job

 import (
-	"x-ui/logger"
-	"x-ui/web/service"
+	"encoding/json"
+	"os"
+	"regexp"
 	"x-ui/database"
 	"x-ui/database/model"
-    "os"
- 	ss "strings"
-	"regexp"
-    "encoding/json"
-    // "strconv"
+	"x-ui/logger"
+	"x-ui/web/service"
+	"x-ui/xray"
+
+	"net"
+	"sort"
 	"strings"
 	"time"
-	"net"
- 	"github.com/go-cmd/cmd"
-	"sort"
+
+	"github.com/go-cmd/cmd"
 )

 type CheckClientIpJob struct {
-	xrayService    service.XrayService
-	inboundService service.InboundService
+	xrayService service.XrayService
 }
+
 var job *CheckClientIpJob
-var disAllowedIps []string 
+var disAllowedIps []string

 func NewCheckClientIpJob() *CheckClientIpJob {
 	job = new(CheckClientIpJob)
@@ -34,94 +35,89 @@ func (j *CheckClientIpJob) Run() {
 	processLogFile()

 	// disAllowedIps = []string{"192.168.1.183","192.168.1.197"}
-	blockedIps := []byte(ss.Join(disAllowedIps,","))
-    err := os.WriteFile("./bin/blockedIPs", blockedIps, 0755)
+	blockedIps := []byte(strings.Join(disAllowedIps, ","))
+	err := os.WriteFile(xray.GetBlockedIPsPath(), blockedIps, 0755)
 	checkError(err)

 }

 func processLogFile() {
 	accessLogPath := GetAccessLogPath()
-	if(accessLogPath == "") {
+	if accessLogPath == "" {
 		logger.Warning("xray log not init in config.json")
 		return
 	}

-    data, err := os.ReadFile(accessLogPath)
+	data, err := os.ReadFile(accessLogPath)
 	InboundClientIps := make(map[string][]string)
-    checkError(err)
+	checkError(err)

 	// clean log
 	if err := os.Truncate(GetAccessLogPath(), 0); err != nil {
 		checkError(err)
 	}
-	
-	lines := ss.Split(string(data), "\n")
+
+	lines := strings.Split(string(data), "\n")
 	for _, line := range lines {
 		ipRegx, _ := regexp.Compile(`[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+`)
 		emailRegx, _ := regexp.Compile(`email:.+`)

 		matchesIp := ipRegx.FindString(line)
-		if(len(matchesIp) > 0) {
+		if len(matchesIp) > 0 {
 			ip := string(matchesIp)
-			if( ip == "127.0.0.1" || ip == "1.1.1.1") {
+			if ip == "127.0.0.1" || ip == "1.1.1.1" {
 				continue
 			}

 			matchesEmail := emailRegx.FindString(line)
-			if(matchesEmail == "") {
+			if matchesEmail == "" {
 				continue
 			}
-			matchesEmail = ss.Split(matchesEmail, "email: ")[1]
-	
-			if(InboundClientIps[matchesEmail] != nil) {
-				if(contains(InboundClientIps[matchesEmail],ip)){
+			matchesEmail = strings.Split(matchesEmail, "email: ")[1]
+
+			if InboundClientIps[matchesEmail] != nil {
+				if contains(InboundClientIps[matchesEmail], ip) {
 					continue
 				}
-				InboundClientIps[matchesEmail] = append(InboundClientIps[matchesEmail],ip)
+				InboundClientIps[matchesEmail] = append(InboundClientIps[matchesEmail], ip)

-				
-
-			}else{
-			InboundClientIps[matchesEmail] = append(InboundClientIps[matchesEmail],ip)
-		}
+			} else {
+				InboundClientIps[matchesEmail] = append(InboundClientIps[matchesEmail], ip)
+			}
 		}

 	}
 	disAllowedIps = []string{}

 	for clientEmail, ips := range InboundClientIps {
-		inboundClientIps,err := GetInboundClientIps(clientEmail)
-		sort.Sort(sort.StringSlice(ips))
-		if(err != nil){
-			addInboundClientIps(clientEmail,ips)
-
-		}else{
-			updateInboundClientIps(inboundClientIps,clientEmail,ips)
+		inboundClientIps, err := GetInboundClientIps(clientEmail)
+		sort.Strings(ips)
+		if err != nil {
+			addInboundClientIps(clientEmail, ips)
+		} else {
+			updateInboundClientIps(inboundClientIps, clientEmail, ips)
 		}
-			
 	}

-
 	// check if inbound connection is more than limited ip and drop connection
 	LimitDevice := func() { LimitDevice() }

-	stop := schedule(LimitDevice, 1000 *time.Millisecond)
+	stop := schedule(LimitDevice, 1000*time.Millisecond)
 	time.Sleep(10 * time.Second)
 	stop <- true
- 
+
 }
 func GetAccessLogPath() string {
-	
-    config, err := os.ReadFile("bin/config.json")
-    checkError(err)
+
+	config, err := os.ReadFile(xray.GetConfigPath())
+	checkError(err)

 	jsonConfig := map[string]interface{}{}
-    err = json.Unmarshal([]byte(config), &jsonConfig)
+	err = json.Unmarshal([]byte(config), &jsonConfig)
 	checkError(err)
-	if(jsonConfig["log"] != nil) {
+	if jsonConfig["log"] != nil {
 		jsonLog := jsonConfig["log"].(map[string]interface{})
-		if(jsonLog["access"] != nil) {
+		if jsonLog["access"] != nil {

 			accessLogPath := jsonLog["access"].(string)

@@ -132,7 +128,7 @@ func GetAccessLogPath() string {

 }
 func checkError(e error) {
-    if e != nil {
+	if e != nil {
 		logger.Warning("client ip job err:", e)
 	}
 }
@@ -154,14 +150,16 @@ func GetInboundClientIps(clientEmail string) (*model.InboundClientIps, error) {
 	}
 	return InboundClientIps, nil
 }
-func addInboundClientIps(clientEmail string,ips []string) error {
+func addInboundClientIps(clientEmail string, ips []string) error {
 	inboundClientIps := &model.InboundClientIps{}
-    jsonIps, err := json.Marshal(ips)
+	jsonIps, err := json.Marshal(ips)
 	checkError(err)

+	// Trim any leading/trailing whitespace from clientEmail
+	clientEmail = strings.TrimSpace(clientEmail)
+
 	inboundClientIps.ClientEmail = clientEmail
 	inboundClientIps.Ips = string(jsonIps)
-	

 	db := database.GetDB()
 	tx := db.Begin()
@@ -180,20 +178,20 @@ func addInboundClientIps(clientEmail string,ips []string) error {
 	}
 	return nil
 }
-func updateInboundClientIps(inboundClientIps *model.InboundClientIps,clientEmail string,ips []string) error {
+func updateInboundClientIps(inboundClientIps *model.InboundClientIps, clientEmail string, ips []string) error {

-    jsonIps, err := json.Marshal(ips)
+	jsonIps, err := json.Marshal(ips)
 	checkError(err)

 	inboundClientIps.ClientEmail = clientEmail
 	inboundClientIps.Ips = string(jsonIps)
-	
+
 	// check inbound limitation
 	inbound, err := GetInboundByEmail(clientEmail)
 	checkError(err)

 	if inbound.Settings == "" {
-		logger.Debug("wrong data ",inbound)
+		logger.Debug("wrong data ", inbound)
 		return nil
 	}

@@ -201,19 +199,21 @@ func updateInboundClientIps(inboundClientIps *model.InboundClientIps,clientEmail
 	json.Unmarshal([]byte(inbound.Settings), &settings)
 	clients := settings["clients"]

+	var disAllowedIps []string // initialize the slice
+
 	for _, client := range clients {
 		if client.Email == clientEmail {
-			
+
 			limitIp := client.LimitIP
-			
-			if(limitIp < len(ips) && limitIp != 0 && inbound.Enable) {
-				
-				disAllowedIps = append(disAllowedIps,ips[limitIp:]...)
+
+			if limitIp < len(ips) && limitIp != 0 && inbound.Enable {
+
+				disAllowedIps = append(disAllowedIps, ips[limitIp:]...)
 			}
 		}
 	}
-	logger.Debug("disAllowedIps ",disAllowedIps)
-    sort.Sort(sort.StringSlice(disAllowedIps))
+	logger.Debug("disAllowedIps ", disAllowedIps)
+	sort.Strings(disAllowedIps)

 	db := database.GetDB()
 	err = db.Save(inboundClientIps).Error
@@ -222,13 +222,14 @@ func updateInboundClientIps(inboundClientIps *model.InboundClientIps,clientEmail
 	}
 	return nil
 }
-func DisableInbound(id int) error{
+
+func DisableInbound(id int) error {
 	db := database.GetDB()
 	result := db.Model(model.Inbound{}).
 		Where("id = ? and enable = ?", id, true).
 		Update("enable", false)
 	err := result.Error
-	logger.Warning("disable inbound with id:",id)
+	logger.Warning("disable inbound with id:", id)

 	if err == nil {
 		job.xrayService.SetToNeedRestart()
@@ -240,19 +241,20 @@ func DisableInbound(id int) error{
 func GetInboundByEmail(clientEmail string) (*model.Inbound, error) {
 	db := database.GetDB()
 	var inbounds *model.Inbound
-	err := db.Model(model.Inbound{}).Where("settings LIKE ?", "%" + clientEmail + "%").Find(&inbounds).Error
+	err := db.Model(model.Inbound{}).Where("settings LIKE ?", "%"+clientEmail+"%").Find(&inbounds).Error
 	if err != nil {
 		return nil, err
 	}
 	return inbounds, nil
 }

-func LimitDevice(){
-	
-	localIp,err := LocalIP()
+func LimitDevice() {
+	var destIp, destPort, srcIp, srcPort string
+
+	localIp, err := LocalIP()
 	checkError(err)

-	c := cmd.NewCmd("bash","-c","ss --tcp | grep -E '" + IPsToRegex(localIp) + "'| awk '{if($1==\"ESTAB\") print $4,$5;}'","| sort | uniq -c | sort -nr | head")
+	c := cmd.NewCmd("bash", "-c", "ss --tcp | grep -E '"+IPsToRegex(localIp)+"'| awk '{if($1==\"ESTAB\") print $4,$5;}'", "| sort | uniq -c | sort -nr | head")

 	<-c.Start()
 	if len(c.Status().Stdout) > 0 {
@@ -260,32 +262,29 @@ func LimitDevice(){
 		portRegx, _ := regexp.Compile(`(?:(:))([0-9]..[^.][0-9]+)`)

 		for _, row := range c.Status().Stdout {
-			
-			data := strings.Split(row," ")
-			
-			destIp,destPort,srcIp,srcPort := "","","",""
- 
+
+			data := strings.Split(row, " ")
+
+			if len(data) < 2 {
+				continue // Skip this row if it doesn't have at least two elements
+			}

 			destIp = string(ipRegx.FindString(data[0]))
-
 			destPort = portRegx.FindString(data[0])
-			destPort = strings.Replace(destPort,":","",-1)
-			
-			
+			destPort = strings.Replace(destPort, ":", "", -1)
+
 			srcIp = string(ipRegx.FindString(data[1]))
-
 			srcPort = portRegx.FindString(data[1])
-			srcPort = strings.Replace(srcPort,":","",-1)
+			srcPort = strings.Replace(srcPort, ":", "", -1)

-			if(contains(disAllowedIps,srcIp)){
-				dropCmd := cmd.NewCmd("bash","-c","ss -K dport = " + srcPort)
+			if contains(disAllowedIps, srcIp) {
+				dropCmd := cmd.NewCmd("bash", "-c", "ss -K dport = "+srcPort)
 				dropCmd.Start()

-				logger.Debug("request droped : ",srcIp,srcPort,"to",destIp,destPort)
-			} 
+				logger.Debug("request droped : ", srcIp, srcPort, "to", destIp, destPort)
+			}
 		}
 	}
-
 }

 func LocalIP() ([]string, error) {
@@ -311,24 +310,23 @@ func LocalIP() ([]string, error) {
 				ip = v.IP
 			}

-			ips = append(ips,ip.String())
-			
+			ips = append(ips, ip.String())
+
 		}
 	}
-	logger.Debug("System IPs : ",ips)
+	logger.Debug("System IPs : ", ips)

 	return ips, nil
 }

-
-func IPsToRegex(ips []string) (string){
+func IPsToRegex(ips []string) string {

 	regx := ""
 	for _, ip := range ips {
 		regx += "(" + strings.Replace(ip, ".", "\\.", -1) + ")"

 	}
-	regx = "(" + strings.Replace(regx, ")(", ")|(.", -1)  + ")"
+	regx = "(" + strings.Replace(regx, ")(", ")|(.", -1) + ")"

 	return regx
 }
--- a/web/job/check_cpu_usage.go
+++ b/web/job/check_cpu_usage.go
@@ -0,0 +1,30 @@
+package job
+
+import (
+	"fmt"
+	"time"
+	"x-ui/web/service"
+
+	"github.com/shirou/gopsutil/v3/cpu"
+)
+
+type CheckCpuJob struct {
+	tgbotService   service.Tgbot
+	settingService service.SettingService
+}
+
+func NewCheckCpuJob() *CheckCpuJob {
+	return new(CheckCpuJob)
+}
+
+// Here run is a interface method of Job interface
+func (j *CheckCpuJob) Run() {
+	threshold, _ := j.settingService.GetTgCpu()
+
+	// get latest status of server
+	percent, err := cpu.Percent(1*time.Second, false)
+	if err == nil && percent[0] > float64(threshold) {
+		msg := fmt.Sprintf("🔴 CPU usage %.2f%% is more than threshold %d%%", percent[0], threshold)
+		j.tgbotService.SendMsgToTgbotAdmins(msg)
+	}
+}
--- a/web/job/stats_notify_job.go
+++ b/web/job/stats_notify_job.go
@@ -1,15 +1,7 @@
 package job

 import (
-	"fmt"
-	"net"
-	"os"
-	"time"
-	"x-ui/logger"
-	"x-ui/util/common"
 	"x-ui/web/service"
-
-	tgbotapi "github.com/go-telegram-bot-api/telegram-bot-api/v5"
 )

 type LoginStatus byte
@@ -20,229 +12,18 @@ const (
 )

 type StatsNotifyJob struct {
-	enable         bool
-	xrayService    service.XrayService
-	inboundService service.InboundService
-	settingService service.SettingService
+	xrayService  service.XrayService
+	tgbotService service.Tgbot
 }

 func NewStatsNotifyJob() *StatsNotifyJob {
 	return new(StatsNotifyJob)
 }

-func (j *StatsNotifyJob) SendMsgToTgbot(msg string) {
-	//Telegram bot basic info
-	tgBottoken, err := j.settingService.GetTgBotToken()
-	if err != nil || tgBottoken == "" {
-		logger.Warning("sendMsgToTgbot failed,GetTgBotToken fail:", err)
-		return
-	}
-	tgBotid, err := j.settingService.GetTgBotChatId()
-	if err != nil {
-		logger.Warning("sendMsgToTgbot failed,GetTgBotChatId fail:", err)
-		return
-	}
-
-	bot, err := tgbotapi.NewBotAPI(tgBottoken)
-	if err != nil {
-		fmt.Println("get tgbot error:", err)
-		return
-	}
-	bot.Debug = true
-	fmt.Printf("Authorized on account %s", bot.Self.UserName)
-	info := tgbotapi.NewMessage(int64(tgBotid), msg)
-	//msg.ReplyToMessageID = int(tgBotid)
-	bot.Send(info)
-}
-
 // Here run is a interface method of Job interface
 func (j *StatsNotifyJob) Run() {
 	if !j.xrayService.IsXrayRunning() {
 		return
 	}
-	var info string
-	//get hostname
-	name, err := os.Hostname()
-	if err != nil {
-		fmt.Println("get hostname error:", err)
-		return
-	}
-	info = fmt.Sprintf("Hostname:%s\r\n", name)
-	//get ip address
-	var ip string
-	netInterfaces, err := net.Interfaces()
-	if err != nil {
-		fmt.Println("net.Interfaces failed, err:", err.Error())
-		return
-	}
-
-	for i := 0; i < len(netInterfaces); i++ {
-		if (netInterfaces[i].Flags & net.FlagUp) != 0 {
-			addrs, _ := netInterfaces[i].Addrs()
-
-			for _, address := range addrs {
-				if ipnet, ok := address.(*net.IPNet); ok && !ipnet.IP.IsLoopback() {
-					if ipnet.IP.To4() != nil {
-						ip = ipnet.IP.String()
-						break
-					} else {
-						ip = ipnet.IP.String()
-						break
-					}
-				}
-			}
-		}
-	}
-	info += fmt.Sprintf("IP:%s\r\n \r\n", ip)
-
-	// get traffic
-	inbouds, err := j.inboundService.GetAllInbounds()
-	if err != nil {
-		logger.Warning("StatsNotifyJob run failed:", err)
-		return
-	}
-	// NOTE:If there no any sessions here,need to notify here
-	// TODO:Sub-node push, automatic conversion format
-	for _, inbound := range inbouds {
-		info += fmt.Sprintf("Node name:%s\r\nPort:%d\r\nUpload↑:%s\r\nDownload↓:%s\r\nTotal:%s\r\n", inbound.Remark, inbound.Port, common.FormatTraffic(inbound.Up), common.FormatTraffic(inbound.Down), common.FormatTraffic((inbound.Up + inbound.Down)))
-		if inbound.ExpiryTime == 0 {
-			info += fmt.Sprintf("Expire date:unlimited\r\n \r\n")
-		} else {
-			info += fmt.Sprintf("Expire date:%s\r\n \r\n", time.Unix((inbound.ExpiryTime/1000), 0).Format("2006-01-02 15:04:05"))
-		}
-	}
-	j.SendMsgToTgbot(info)
-}
-
-func (j *StatsNotifyJob) UserLoginNotify(username string, ip string, time string, status LoginStatus) {
-	if username == "" || ip == "" || time == "" {
-		logger.Warning("UserLoginNotify failed,invalid info")
-		return
-	}
-	var msg string
-	// Get hostname
-	name, err := os.Hostname()
-	if err != nil {
-		fmt.Println("get hostname error:", err)
-		return
-	}
-	if status == LoginSuccess {
-		msg = fmt.Sprintf("Successfully logged-in to the panel\r\nHostname:%s\r\n", name)
-	} else if status == LoginFail {
-		msg = fmt.Sprintf("Login to the panel was unsuccessful\r\nHostname:%s\r\n", name)
-	}
-	msg += fmt.Sprintf("Time:%s\r\n", time)
-	msg += fmt.Sprintf("Username:%s\r\n", username)
-	msg += fmt.Sprintf("IP:%s\r\n", ip)
-	j.SendMsgToTgbot(msg)
-}
-
-var numericKeyboard = tgbotapi.NewInlineKeyboardMarkup(
-	tgbotapi.NewInlineKeyboardRow(
-		tgbotapi.NewInlineKeyboardButtonData("Get Usage", "get_usage"),
-	),
-)
-
-func (j *StatsNotifyJob) OnReceive() *StatsNotifyJob {
-	tgBottoken, err := j.settingService.GetTgBotToken()
-	if err != nil || tgBottoken == "" {
-		logger.Warning("sendMsgToTgbot failed,GetTgBotToken fail:", err)
-		return j
-	}
-	bot, err := tgbotapi.NewBotAPI(tgBottoken)
-	if err != nil {
-		fmt.Println("get tgbot error:", err)
-		return j
-	}
-	bot.Debug = false
-	u := tgbotapi.NewUpdate(0)
-	u.Timeout = 10
-
-	updates := bot.GetUpdatesChan(u)
-
-	for update := range updates {
-		if update.Message == nil {
-
-			if update.CallbackQuery != nil {
-				// Respond to the callback query, telling Telegram to show the user
-				// a message with the data received.
-				callback := tgbotapi.NewCallback(update.CallbackQuery.ID, update.CallbackQuery.Data)
-				if _, err := bot.Request(callback); err != nil {
-					logger.Warning(err)
-				}
-
-				// And finally, send a message containing the data received.
-				msg := tgbotapi.NewMessage(update.CallbackQuery.Message.Chat.ID, "")
-
-				switch update.CallbackQuery.Data {
-				case "get_usage":
-					msg.Text = "for get your usage send command like this : \n <code>/usage uuid | id</code> \n example : <code>/usage fc3239ed-8f3b-4151-ff51-b183d5182142</code>"
-					msg.ParseMode = "HTML"
-				}
-				if _, err := bot.Send(msg); err != nil {
-					logger.Warning(err)
-				}
-			}
-
-			continue
-		}
-
-		if !update.Message.IsCommand() { // ignore any non-command Messages
-			continue
-		}
-
-		// Create a new MessageConfig. We don't have text yet,
-		// so we leave it empty.
-		msg := tgbotapi.NewMessage(update.Message.Chat.ID, "")
-
-		// Extract the command from the Message.
-		switch update.Message.Command() {
-		case "help":
-			msg.Text = "What you need?"
-			msg.ReplyMarkup = numericKeyboard
-		case "start":
-			msg.Text = "Hi :) \n What you need?"
-			msg.ReplyMarkup = numericKeyboard
-
-		case "status":
-			msg.Text = "bot is ok."
-
-		case "usage":
-			msg.Text = j.getClientUsage(update.Message.CommandArguments())
-		default:
-			msg.Text = "I don't know that command, /help"
-			msg.ReplyMarkup = numericKeyboard
-
-		}
-
-		if _, err := bot.Send(msg); err != nil {
-			logger.Warning(err)
-		}
-	}
-	return j
-
-}
-func (j *StatsNotifyJob) getClientUsage(id string) string {
-	traffic, err := j.inboundService.GetClientTrafficById(id)
-	if err != nil {
-		logger.Warning(err)
-		return "something wrong!"
-	}
-	expiryTime := ""
-	if traffic.ExpiryTime == 0 {
-		expiryTime = fmt.Sprintf("unlimited")
-	} else {
-		expiryTime = fmt.Sprintf("%s", time.Unix((traffic.ExpiryTime/1000), 0).Format("2006-01-02 15:04:05"))
-	}
-	total := ""
-	if traffic.Total == 0 {
-		total = fmt.Sprintf("unlimited")
-	} else {
-		total = fmt.Sprintf("%s", common.FormatTraffic((traffic.Total)))
-	}
-	output := fmt.Sprintf("💡 Active: %t\r\n📧 Email: %s\r\n🔼 Download↑: %s\r\n🔽 Upload↓: %s\r\n🔄 Total: %s / %s\r\n📅 Expire in: %s\r\n",
-		traffic.Enable, traffic.Email, common.FormatTraffic(traffic.Up), common.FormatTraffic(traffic.Down), common.FormatTraffic((traffic.Up + traffic.Down)),
-		total, expiryTime)
-
-	return output
+	j.tgbotService.SendReport()
 }
--- a/web/job/xray_traffic_job.go
+++ b/web/job/xray_traffic_job.go
@@ -28,11 +28,10 @@ func (j *XrayTrafficJob) Run() {
 	if err != nil {
 		logger.Warning("add traffic failed:", err)
 	}
-	
+
 	err = j.inboundService.AddClientTraffic(clientTraffics)
 	if err != nil {
 		logger.Warning("add client traffic failed:", err)
 	}

-
 }
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .0.8
 .4.5