v1.1.0

Co-authored-by: admiralhr99 <admiralhr99@gmail.com>

.github/FUNDING.yml

@@ -0,0 +1 @@
+buy_me_a_coffee: alireza7

.github/workflows/docker-core.yml

@@ -0,0 +1,57 @@
+name: Sing-box Docker Image CI
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Get latest release
+      id: get_release
+      run: |
+        latest_release=$(curl -Ls "https://api.github.com/repos/sagernet/sing-box/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
+        echo "latest_release: $latest_release"
+        echo "latest_release=$latest_release" >> $GITHUB_OUTPUT
+   
+    - name: Docker meta
+      id: meta
+      uses: docker/metadata-action@v5
+      with:
+        images: |
+          alireza7/s-ui-singbox
+          ghcr.io/alireza0/s-ui-singbox
+        tags: |
+          type=sha
+          type=pep440,pattern=${{ steps.get_release.outputs.latest_release }}
+
+    - name: Set up QEMU
+      uses: docker/setup-qemu-action@v3
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Login to Docker Hub
+      uses: docker/login-action@v3
+      with:
+        username: ${{ secrets.DOCKER_HUB_USERNAME }}
+        password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+    - name: Login to GHCR
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.repository_owner }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Build and push
+      uses: docker/build-push-action@v6
+      with:
+        context: core/
+        push: true
+        build-args: SINGBOX_VER=${{ steps.get_release.outputs.latest_release }}
+        platforms: linux/amd64,linux/arm64/v8,linux/arm/v7,linux/386
+        tags: ${{ steps.meta.outputs.tags }}
+        labels: ${{ steps.meta.outputs.labels }}

.github/workflows/docker.yml

@@ -11,8 +11,6 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
-      with:
-        submodules: true
    
     - name: Docker meta
       id: meta
@@ -46,10 +44,10 @@ jobs:
         password: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Build and push
-      uses: docker/build-push-action@v5
+      uses: docker/build-push-action@v6
       with:
         context: .
         push: true
-        platforms: linux/amd64,linux/arm64/v8
+        platforms: linux/amd64, linux/arm64/v8, linux/arm/v7, linux/arm/v6, linux/386
         tags: ${{ steps.meta.outputs.tags }}
         labels: ${{ steps.meta.outputs.labels }}

.github/workflows/release.yml

@@ -14,7 +14,10 @@ jobs:
           - amd64
           - arm64
           - armv7
+          - armv6
+          - armv5
           - 386
+          - s390x
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout repository
@@ -24,12 +27,12 @@ jobs:
         uses: actions/setup-go@v5
         with:
           cache: false
-          go-version: '1.22'
+          go-version-file: backend/go.mod
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
           registry-url: 'https://registry.npmjs.org'
           
       - name: Install dependencies
@@ -39,8 +42,14 @@ jobs:
             sudo apt install gcc-aarch64-linux-gnu
           elif [ "${{ matrix.platform }}" == "armv7" ]; then
             sudo apt install gcc-arm-linux-gnueabihf
+          elif [ "${{ matrix.platform }}" == "armv6" ]; then
+            sudo apt install gcc-arm-linux-gnueabihf
+          elif [ "${{ matrix.platform }}" == "armv5" ]; then
+            sudo apt install gcc-arm-linux-gnueabi
           elif [ "${{ matrix.platform }}" == "386" ]; then
             sudo apt install gcc-i686-linux-gnu
+          elif [ "${{ matrix.platform }}" == "s390x" ]; then
+            sudo apt install gcc-s390x-linux-gnu
           fi
 
       - name: Build frontend
@@ -63,15 +72,29 @@ jobs:
             export GOARCH=arm
             export GOARM=7
             export CC=arm-linux-gnueabihf-gcc
+          elif [ "${{ matrix.platform }}" == "armv6" ]; then
+            export GOARCH=arm
+            export GOARM=6
+            export CC=arm-linux-gnueabihf-gcc
+          elif [ "${{ matrix.platform }}" == "armv5" ]; then
+            export GOARCH=arm
+            export GOARM=5
+            export CC=arm-linux-gnueabi-gcc
           elif [ "${{ matrix.platform }}" == "386" ]; then
             export GOARCH=386
             export CC=i686-linux-gnu-gcc
+          elif [ "${{ matrix.platform }}" == "s390x" ]; then
+            export GOARCH=s390x
+            export CC=s390x-linux-gnu-gcc
           fi
 
           #### Build Sing-Box
-          git clone -b v1.8.7 https://github.com/SagerNet/sing-box
+          export VERSION=v1.10.1
+          git clone -b $VERSION https://github.com/SagerNet/sing-box
           cd sing-box
-          go build -tags with_v2ray_api,with_clash_api,with_grpc,with_quic,with_ech -o sing-box ./cmd/sing-box
+          go build -tags with_quic,with_grpc,with_wireguard,with_ech,with_utls,with_reality_server,with_acme,with_v2ray_api,with_clash_api,with_gvisor \
+          -v -trimpath -ldflags "-X 'github.com/sagernet/sing-box/constant.Version=${VERSION}' -s -w -buildid=" \
+          -o sing-box ./cmd/sing-box
           cd ..
 
           ### Build s-ui
@@ -85,7 +108,7 @@ jobs:
           cp sing-box.service s-ui/
           mkdir s-ui/bin
           cp sing-box/sing-box s-ui/bin/
-          cp runSingbox.sh s-ui/bin/
+          cp core/runSingbox.sh s-ui/bin/
 
       - name: Package
         run: tar -zcvf s-ui-linux-${{ matrix.platform }}.tar.gz s-ui

Dockerfile

@@ -1,23 +1,25 @@
-FROM node:alpine as front-builder
+FROM --platform=$BUILDPLATFORM node:alpine AS front-builder
 WORKDIR /app
 COPY frontend/ ./
 RUN npm install && npm run build
 
-FROM golang:1.22-alpine AS backend-builder
+FROM golang:1.23-alpine AS backend-builder
 WORKDIR /app
 ARG TARGETARCH
 ENV CGO_CFLAGS="-D_LARGEFILE64_SOURCE"
 ENV CGO_ENABLED=1
-RUN apk --no-cache --update add build-base gcc wget unzip
+ENV GOARCH=$TARGETARCH
+RUN apk update && apk --no-cache --update add build-base gcc wget unzip
 COPY backend/ ./
 COPY --from=front-builder  /app/dist/ /app/web/html/
-RUN go build -o sui main.go
+RUN go build -ldflags="-w -s" -o sui main.go
 
-FROM alpine
+FROM --platform=$TARGETPLATFORM alpine
 LABEL org.opencontainers.image.authors="alireza7@gmail.com"
 ENV TZ=Asia/Tehran
 WORKDIR /app
 RUN apk add  --no-cache --update ca-certificates tzdata
 COPY --from=backend-builder  /app/sui /app/
+COPY entrypoint.sh /app/
 VOLUME [ "s-ui" ]
-CMD [ "./sui" ]
+ENTRYPOINT [ "./entrypoint.sh" ]

README.md

@@ -2,7 +2,8 @@
 **An Advanced Web Panel • Built on SagerNet/Sing-Box**
 
 ![](https://img.shields.io/github/v/release/alireza0/s-ui.svg)
-![](https://img.shields.io/docker/pulls/alireza7/s-ui.svg)
+![S-UI Docker pull](https://img.shields.io/docker/pulls/alireza7/s-ui.svg)
+![S-UI-Singbox Docker pull](https://img.shields.io/docker/pulls/alireza7/s-ui-singbox.svg)
 [![Downloads](https://img.shields.io/github/downloads/alireza0/s-ui/total.svg)](https://img.shields.io/github/downloads/alireza0/s-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)
 
@@ -22,13 +23,15 @@
 | Multi-Client/Inbound                   | :heavy_check_mark: |
 | Advanced Traffic Routing Interface     | :heavy_check_mark: |
 | Client & Traffic & System Status       | :heavy_check_mark: |
-| Subscription Service (link + info)     | :heavy_check_mark: |
+| Subscription Service (link/json + info)| :heavy_check_mark: |
 | Dark/Light Theme                       | :heavy_check_mark: |
 
 
-## Default Installation Informarion
+## Default Installation Information
 - Panel Port: 2095
+- Panel Path: /app/
 - Subscription Port: 2096
+- Subscription Path: /sub/
 - User/Passowrd: admin
 
 ## Install & Upgrade to Latest Version
@@ -37,12 +40,12 @@
 bash <(curl -Ls https://raw.githubusercontent.com/alireza0/s-ui/master/install.sh)
 ```
 
-## Install Custom Version
+## Install legacy Version
 
-**Step 1:** To install your desired version, add the version to the end of the installation command. e.g., ver `0.0.1`:
+**Step 1:** To install your desired legacy version, add the version to the end of the installation command. e.g., ver `1.0.0`:
 
 ```sh
-bash <(curl -Ls https://raw.githubusercontent.com/alireza0/s-ui/master/install.sh) 0.0.1
+bash <(curl -Ls https://raw.githubusercontent.com/alireza0/s-ui/master/install.sh) 1.0.0
 ```
 
 ## Uninstall S-UI
@@ -73,10 +76,20 @@ curl -fsSL https://get.docker.com | sh
 
 **Step 2:** Install S-UI
 
+> Docker compose method
+
+```shell
+mkdir s-ui && cd s-ui
+wget -q https://raw.githubusercontent.com/alireza0/s-ui/master/docker-compose.yml
+docker compose up -d
+```
+
+> Use docker for s-ui only
+
 ```shell
 mkdir s-ui && cd s-ui
 docker run -itd \
-    -p 2095:2095 -p 443:443 -p 80:80 \
+    -p 2095:2095 -p 2096:2096 -p 443:443 -p 80:80 \
     -v $PWD/db/:/usr/local/s-ui/db/ \
     -v $PWD/cert/:/root/cert/ \
     --name s-ui --restart=unless-stopped \
@@ -91,10 +104,64 @@ docker build -t s-ui .
 
 </details>
 
+## Manual run ( contribution )
+
+<details>
+   <summary>Click for details</summary>
+
+### Build and run whole project
+```shell
+./runSUI.sh
+```
+
+### - Frontend
+
+Frontend codes are in `frontend` folder in the root of repository.
+
+To run it localy for instant developement you can use (apply automatic changes on file save):
+```shell
+cd frontend
+npm run dev
+```
+> By this command it will run a `vite` web server on separate port `3000`, with backend proxy to `http://localhost:2095`. You can change it in `frontend/vite.config.mts`.
+
+To build frontend:
+```shell
+cd frontend
+npm run build
+```
+
+### - Backend
+Backend codes are in `backend` folder in the root of repository.
+> Please build frontend once before!
+
+To build backend:
+```shell
+cd backend
+
+# remove old frontend compiled files
+rm -fr web/html/*
+# apply new frontend compiled files
+cp -R ../frontend/dist/ web/html/
+# build
+go build -o ../sui main.go
+```
+
+To run backend (from root folder of repository):
+```shell
+./sui
+```
+
+</details>
+
 ## Languages
 
 - English
 - Farsi
+- Vietnamese
+- Chinese (Simplified)
+- Chinese (Traditional)
+- Russian
 
 ## Features
 
@@ -113,10 +180,18 @@ docker build -t s-ui .
 
 ## Recommended OS
 
+- Ubuntu 20.04+
+- Debian 11+
 - CentOS 8+
-- Ubuntu 20+
-- Debian 10+
 - Fedora 36+
+- Arch Linux
+- Parch Linux
+- Manjaro
+- Armbian
+- AlmaLinux 9+
+- Rocky Linux 9+
+- Oracle Linux 8+
+- OpenSUSE Tubleweed
 
 ## Environment Variables
 
@@ -153,5 +228,4 @@ certbot certonly --standalone --register-unsafely-without-email --non-interactiv
 </details>
 
 ## Stargazers over Time
-
 [![Stargazers over time](https://starchart.cc/alireza0/s-ui.svg)](https://starchart.cc/alireza0/s-ui)

backend/api/api.go

@@ -1,9 +1,10 @@
 package api
 
 import (
-	"fmt"
 	"s-ui/logger"
 	"s-ui/service"
+	"s-ui/singbox"
+	"s-ui/util"
 	"strconv"
 	"strings"
 
@@ -15,9 +16,12 @@ type APIHandler struct {
 	service.UserService
 	service.ConfigService
 	service.ClientService
+	service.TlsService
+	service.InDataService
 	service.PanelService
 	service.StatsService
 	service.ServerService
+	singbox.Controller
 }
 
 func NewAPIHandler(g *gin.RouterGroup) {
@@ -55,14 +59,7 @@ func (a *APIHandler) postHandler(c *gin.Context) {
 			logger.Infof("Unable to get session's max age from DB")
 		}
 
-		if sessionMaxAge > 0 {
+		err = SetLoginUser(c, loginUser, sessionMaxAge)
-			err = SetMaxAge(c, sessionMaxAge*60)
-			if err != nil {
-				logger.Infof("Unable to set session's max age")
-			}
-		}
-
-		err = SetLoginUser(c, loginUser)
 		if err == nil {
 			logger.Info("user ", loginUser, " login success")
 		} else {
@@ -94,6 +91,13 @@ func (a *APIHandler) postHandler(c *gin.Context) {
 	case "restartApp":
 		err = a.PanelService.RestartPanel(3)
 		jsonMsg(c, "restartApp", err)
+	case "restartSb":
+		err = a.Controller.Restart()
+		jsonMsg(c, "restartSb", err)
+	case "linkConvert":
+		link := c.Request.FormValue("link")
+		result, _, err := util.GetOutbound(link, 0)
+		jsonObj(c, result, err)
 	default:
 		jsonMsg(c, "API call", nil)
 	}
@@ -151,19 +155,45 @@ func (a *APIHandler) getHandler(c *gin.Context) {
 	case "onlines":
 		onlines, err := a.StatsService.GetOnlines()
 		jsonObj(c, onlines, err)
+	case "logs":
+		service := c.Query("s")
+		count := c.Query("c")
+		level := c.Query("l")
+		logs := a.ServerService.GetLogs(service, count, level)
+		jsonObj(c, logs, nil)
+	case "changes":
+		actor := c.Query("a")
+		chngKey := c.Query("k")
+		count := c.Query("c")
+		changes := a.ConfigService.GetChanges(actor, chngKey, count)
+		jsonObj(c, changes, nil)
+	case "keypairs":
+		kType := c.Query("k")
+		options := c.Query("o")
+		keypair := a.ServerService.GenKeypair(kType, options)
+		jsonObj(c, keypair, nil)
 	default:
 		jsonMsg(c, "API call", nil)
 	}
 }
 
-func (a *APIHandler) loadData(c *gin.Context) (string, error) {
+func (a *APIHandler) loadData(c *gin.Context) (interface{}, error) {
-	var data string
+	data := make(map[string]interface{}, 0)
 	lu := c.Query("lu")
-	isUpdated, err := a.ConfigService.CheckChnages(lu)
+	isUpdated, err := a.ConfigService.CheckChanges(lu)
 	if err != nil {
 		return "", err
 	}
 	onlines, err := a.StatsService.GetOnlines()
+
+	sysInfo := a.ServerService.GetSingboxInfo()
+	if sysInfo["running"] == false {
+		logs := a.ServerService.GetLogs("sing-box", "1", "debug")
+		if len(logs) > 0 {
+			data["lastLog"] = logs[0]
+		}
+	}
+
 	if err != nil {
 		return "", err
 	}
@@ -176,13 +206,26 @@ func (a *APIHandler) loadData(c *gin.Context) (string, error) {
 		if err != nil {
 			return "", err
 		}
+		tlsConfigs, err := a.TlsService.GetAll()
+		if err != nil {
+			return "", err
+		}
+		inData, err := a.InDataService.GetAll()
+		if err != nil {
+			return "", err
+		}
 		subURI, err := a.SettingService.GetFinalSubURI(strings.Split(c.Request.Host, ":")[0])
 		if err != nil {
 			return "", err
 		}
-		data = fmt.Sprintf(`{"config": %s,"clients": %s,"subURI": "%s", "onlines": %s}`, string(*config), clients, subURI, onlines)
+		data["config"] = *config
+		data["clients"] = clients
+		data["tls"] = tlsConfigs
+		data["inData"] = inData
+		data["subURI"] = subURI
+		data["onlines"] = onlines
 	} else {
-		data = fmt.Sprintf(`{"onlines": %s}`, onlines)
+		data["onlines"] = onlines
 	}
 
 	return data, nil

backend/api/session.go

@@ -4,7 +4,7 @@ import (
 	"encoding/gob"
 	"s-ui/database/model"
 
-	sessions "github.com/Calidity/gin-sessions"
+	"github.com/gin-contrib/sessions"
 	"github.com/gin-gonic/gin"
 )
 
@@ -16,17 +16,26 @@ func init() {
 	gob.Register(model.User{})
 }
 
-func SetLoginUser(c *gin.Context, userName string) error {
+func SetLoginUser(c *gin.Context, userName string, maxAge int) error {
+	options := sessions.Options{
+		Path:   "/",
+		Secure: false,
+	}
+	if maxAge > 0 {
+		options.MaxAge = maxAge * 60
+	}
+
 	s := sessions.Default(c)
 	s.Set(loginUser, userName)
+	s.Options(options)
+
 	return s.Save()
 }
 
-func SetMaxAge(c *gin.Context, maxAge int) error {
+func SetMaxAge(c *gin.Context) error {
 	s := sessions.Default(c)
 	s.Options(sessions.Options{
 		Path: "/",
-		MaxAge: maxAge,
 	})
 	return s.Save()
 }

backend/app/app.go

@@ -51,7 +51,13 @@ func (a *APP) Start() error {
 	if err != nil {
 		return err
 	}
-	err = a.cronJob.Start(loc)
+
+	trafficAge, err := a.SettingService.GetTrafficAge()
+	if err != nil {
+		return err
+	}
+
+	err = a.cronJob.Start(loc, trafficAge)
 	if err != nil {
 		return err
 	}

backend/cmd/cmd.go

@@ -40,6 +40,7 @@ func ParseCmd() {
 		fmt.Println()
 		fmt.Println("Commands:")
 		fmt.Println("    admin          set/reset/show first admin credentials")
+		fmt.Println("    migrate        migrate form older version")
 		fmt.Println("    setting        set/reset/show settings")
 		fmt.Println()
 		adminCmd.Usage()
@@ -70,6 +71,9 @@ func ParseCmd() {
 			showAdmin()
 		}
 
+	case "migrate":
+		migrateDb()
+
 	case "setting":
 		err := settingCmd.Parse(os.Args[2:])
 		if err != nil {

backend/cmd/migration.go

@@ -0,0 +1,104 @@
+package cmd
+
+import (
+	"encoding/json"
+	"fmt"
+	"log"
+	"os"
+	"s-ui/config"
+	"s-ui/database/model"
+	"strings"
+
+	"gorm.io/driver/sqlite"
+	"gorm.io/gorm"
+)
+
+func migrateDb() {
+	// void running on first install
+	path := config.GetDBPath()
+	_, err := os.Stat(path)
+	if err != nil {
+		return
+	}
+
+	db, err := gorm.Open(sqlite.Open(path))
+	if err != nil {
+		log.Fatal(err)
+	}
+	tx := db.Begin()
+	defer func() {
+		if err == nil {
+			tx.Commit()
+		} else {
+			tx.Rollback()
+		}
+	}()
+	fmt.Println("Start migrating database...")
+	err = migrateClientSchema(tx)
+	if err != nil {
+		log.Fatal(err)
+	}
+	err = changesObj(tx)
+	if err != nil {
+		log.Fatal(err)
+	}
+	fmt.Println("Migration done!")
+}
+
+func migrateClientSchema(db *gorm.DB) error {
+	rows, err := db.Raw("PRAGMA table_info(clients)").Rows()
+	if err != nil {
+		fmt.Println(err)
+		return err
+	}
+	defer rows.Close()
+
+	for rows.Next() {
+		var (
+			cid       int
+			cname     string
+			ctype     string
+			notnull   int
+			dfltValue interface{}
+			pk        int
+		)
+
+		rows.Scan(&cid, &cname, &ctype, &notnull, &dfltValue, &pk)
+		if cname == "config" || cname == "inbounds" || cname == "links" {
+			if ctype == "text" {
+				fmt.Printf("Column %s has type TEXT\n", cname)
+				oldData := make([]struct {
+					Id   uint
+					Data string
+				}, 0)
+				db.Model(model.Client{}).Select("id", cname+" as data").Scan(&oldData)
+				for _, data := range oldData {
+					var newData []byte
+					switch cname {
+					case "inbounds":
+						inbounds := strings.Split(data.Data, ",")
+						newData, _ = json.MarshalIndent(inbounds, "", "  ")
+					case "config":
+						jsonData := map[string]interface{}{}
+						json.Unmarshal([]byte(data.Data), &jsonData)
+						newData, _ = json.MarshalIndent(jsonData, "", "  ")
+					case "links":
+						jsonData := make([]interface{}, 0)
+						json.Unmarshal([]byte(data.Data), &jsonData)
+						newData, _ = json.MarshalIndent(jsonData, "", "  ")
+					}
+					err = db.Model(model.Client{}).Where("id = ?", data.Id).UpdateColumn(cname, newData).Error
+					if err != nil {
+						return err
+					}
+				}
+			}
+		}
+	}
+	db.AutoMigrate(model.Client{})
+	return nil
+}
+
+func changesObj(db *gorm.DB) error {
+	return db.Exec("UPDATE changes SET obj = CAST('\"' || CAST(obj AS TEXT) || '\"' AS BLOB) WHERE actor = ? and obj not like ?", "DepleteJob", "\"%\"").Error
+}

backend/config/config.go

@@ -69,9 +69,22 @@ func GetDBPath() string {
 }
 
 func GetDefaultConfig() string {
+	apiEnv := GetEnvApi()
+	if len(apiEnv) > 0 {
+		return strings.Replace(defaultConfig, "127.0.0.1:1080", apiEnv, 1)
+	}
 	return defaultConfig
 }
 
 func GetEnvApi() string {
 	return os.Getenv("SINGBOX_API")
 }
+
+func IsSystemd() bool {
+	pid := os.Getppid()
+	cmdline, err := os.ReadFile(fmt.Sprintf("/proc/%d/comm", pid))
+	if err != nil {
+		return false
+	}
+	return string(cmdline) == "systemd\n"
+}

backend/config/version

@@ -1 +1 @@
-0.0.2
+1.1.0

backend/cronjob/cronJob.go

@@ -14,7 +14,7 @@ func NewCronJob() *CronJob {
 	return &CronJob{}
 }
 
-func (c *CronJob) Start(loc *time.Location) error {
+func (c *CronJob) Start(loc *time.Location, trafficAge int) error {
 	c.cron = cron.New(cron.WithLocation(loc), cron.WithSeconds())
 	c.cron.Start()
 
@@ -24,7 +24,7 @@ func (c *CronJob) Start(loc *time.Location) error {
 		// Start expiry job
 		c.cron.AddJob("@every 1m", NewDepleteJob())
 		// Start deleting old stats
-		c.cron.AddJob("@daily", NewDelStatsJob())
+		c.cron.AddJob("@daily", NewDelStatsJob(trafficAge))
 	}()
 
 	return nil

backend/cronjob/delStatsJob.go

@@ -7,16 +7,20 @@ import (
 
 type DelStatsJob struct {
 	service.StatsService
+	trafficAge int
 }
 
-func NewDelStatsJob() *DelStatsJob {
+func NewDelStatsJob(ta int) *DelStatsJob {
-	return &DelStatsJob{}
+	return &DelStatsJob{
+		trafficAge: ta,
+	}
 }
 
 func (s *DelStatsJob) Run() {
-	err := s.StatsService.DelOldStats(30)
+	err := s.StatsService.DelOldStats(s.trafficAge)
 	if err != nil {
 		logger.Warning("Deleting old statistics failed: ", err)
 		return
 	}
+	logger.Debug("Stats older than ", s.trafficAge, " days were deleted")
 }

backend/database/db.go

@@ -29,7 +29,7 @@ func initUser() error {
 	return nil
 }
 
-func InitDB(dbPath string) error {
+func OpenDB(dbPath string) error {
 	dir := path.Dir(dbPath)
 	err := os.MkdirAll(dir, 01740)
 	if err != nil {
@@ -48,12 +48,19 @@ func InitDB(dbPath string) error {
 		Logger: gormLogger,
 	}
 	db, err = gorm.Open(sqlite.Open(dbPath), c)
+	return err
+}
+
+func InitDB(dbPath string) error {
+	err := OpenDB(dbPath)
 	if err != nil {
 		return err
 	}
 
 	err = db.AutoMigrate(
 		&model.Setting{},
+		&model.Tls{},
+		&model.InboundData{},
 		&model.User{},
 		&model.Stats{},
 		&model.Client{},

backend/database/model/model.go

@@ -8,6 +8,21 @@ type Setting struct {
 	Value string `json:"value" form:"value"`
 }
 
+type Tls struct {
+	Id       uint            `json:"id" form:"id" gorm:"primaryKey;autoIncrement"`
+	Name     string          `json:"name" form:"name"`
+	Inbounds json.RawMessage `json:"inbounds" form:"inbounds"`
+	Server   json.RawMessage `json:"server" form:"server"`
+	Client   json.RawMessage `json:"client" form:"client"`
+}
+
+type InboundData struct {
+	Id      uint            `json:"id" form:"id" gorm:"primaryKey;autoIncrement"`
+	Tag     string          `json:"tag" form:"tag"`
+	Addrs   json.RawMessage `json:"addrs" form:"addrs"`
+	OutJson json.RawMessage `json:"outJson" form:"outJson"`
+}
+
 type User struct {
 	Id         uint   `json:"id" form:"id" gorm:"primaryKey;autoIncrement"`
 	Username   string `json:"username" form:"username"`
@@ -19,13 +34,15 @@ type Client struct {
 	Id       uint            `json:"id" form:"id" gorm:"primaryKey;autoIncrement"`
 	Enable   bool            `json:"enable" form:"enable"`
 	Name     string          `json:"name" form:"name"`
-	Config   string `json:"config" form:"config"`
+	Config   json.RawMessage `json:"config" form:"config"`
-	Inbounds string `json:"inbounds" form:"inbounds"`
+	Inbounds json.RawMessage `json:"inbounds" form:"inbounds"`
-	Links    string `json:"links" form:"links"`
+	Links    json.RawMessage `json:"links" form:"links"`
 	Volume   int64           `json:"volume" form:"volume"`
 	Expiry   int64           `json:"expiry" form:"expiry"`
 	Down     int64           `json:"down" form:"down"`
 	Up       int64           `json:"up" form:"up"`
+	Desc     string          `json:"desc" form:"desc"`
+	Group    string          `json:"group" form:"group"`
 }
 
 type Stats struct {

backend/go.mod

@@ -1,64 +1,68 @@
 module s-ui
 
-go 1.22.0
+go 1.23.2
 
 require (
-	github.com/gin-contrib/gzip v0.0.6
+	github.com/gin-contrib/gzip v1.0.1
-	github.com/gin-gonic/gin v1.9.1
+	github.com/gin-gonic/gin v1.10.0
 	github.com/op/go-logging v0.0.0-20160315200505-970db520ece7
-	github.com/v2fly/v2ray-core/v5 v5.13.0
+	github.com/robfig/cron/v3 v3.0.1
-	gorm.io/driver/sqlite v1.5.5
+	github.com/shirou/gopsutil/v3 v3.24.5
-	gorm.io/gorm v1.25.7
+	github.com/v2fly/v2ray-core/v5 v5.17.1
+	google.golang.org/grpc v1.67.1
+	gorm.io/driver/sqlite v1.5.6
+	gorm.io/gorm v1.25.12
 )
 
 require (
-	github.com/adrg/xdg v0.4.0 // indirect
+	github.com/adrg/xdg v0.5.0 // indirect
-	github.com/bytedance/sonic v1.11.1 // indirect
+	github.com/bytedance/sonic v1.12.3 // indirect
-	github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d // indirect
+	github.com/bytedance/sonic/loader v0.2.1 // indirect
-	github.com/chenzhuoyu/iasm v0.9.1 // indirect
+	github.com/cloudwego/base64x v0.1.4 // indirect
-	github.com/gabriel-vasile/mimetype v1.4.3 // indirect
+	github.com/cloudwego/iasm v0.2.0 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.6 // indirect
+	github.com/gin-contrib/sessions v1.0.1
+	github.com/gin-contrib/sse v0.1.0 // indirect
 	github.com/go-ole/go-ole v1.3.0 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
-	github.com/goccy/go-json v0.10.2 // indirect
+	github.com/go-playground/validator/v10 v10.22.1 // indirect
-	github.com/golang/protobuf v1.5.3 // indirect
+	github.com/goccy/go-json v0.10.3 // indirect
+	github.com/golang/protobuf v1.5.4 // indirect
+	github.com/google/pprof v0.0.0-20231101202521-4ca4178f5c7a // indirect
 	github.com/gorilla/context v1.1.2 // indirect
 	github.com/gorilla/securecookie v1.1.2 // indirect
-	github.com/gorilla/sessions v1.2.2 // indirect
+	github.com/gorilla/sessions v1.4.0 // indirect
+	github.com/jinzhu/inflection v1.0.0 // indirect
+	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
-	github.com/klauspost/cpuid/v2 v2.2.7 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.8 // indirect
+	github.com/kr/text v0.2.0 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
-	github.com/lufia/plan9stats v0.0.0-20240226150601-1dcf7310316a // indirect
+	github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mattn/go-sqlite3 v2.0.3+incompatible // 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.7.0 // indirect
+	github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e // indirect
+	github.com/pelletier/go-toml/v2 v2.2.3 // indirect
+	github.com/pires/go-proxyproto v0.8.0 // indirect
 	github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 // indirect
 	github.com/shoenig/go-m1cpu v0.1.6 // indirect
-	github.com/tklauser/go-sysconf v0.3.13 // indirect
+	github.com/tklauser/go-sysconf v0.3.14 // indirect
-	github.com/tklauser/numcpus v0.7.0 // indirect
+	github.com/tklauser/numcpus v0.9.0 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.12 // indirect
 	github.com/yusufpapurcu/wmi v1.2.4 // indirect
-	golang.org/x/arch v0.7.0 // indirect
+	go4.org/netipx v0.0.0-20231129151722-fdeea329fbba // indirect
-	golang.org/x/crypto v0.20.0 // indirect
+	golang.org/x/arch v0.11.0 // indirect
-	golang.org/x/net v0.21.0 // indirect
+	golang.org/x/crypto v0.28.0 // indirect
-	golang.org/x/sys v0.17.0 // indirect
+	golang.org/x/exp v0.0.0-20240719175910-8a7402abbf56 // indirect
-	golang.org/x/text v0.14.0 // indirect
+	golang.org/x/net v0.30.0 // indirect
-	google.golang.org/genproto/googleapis/rpc v0.0.0-20240221002015-b0ce06bbee7c // indirect
+	golang.org/x/sys v0.26.0 // indirect
-	google.golang.org/protobuf v1.32.0 // indirect
+	golang.org/x/text v0.19.0 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20241015192408-796eee8c2d53 // indirect
+	google.golang.org/protobuf v1.35.1 // indirect
+	gopkg.in/check.v1 v1.0.0-20200227125254-8fa46927fb4f // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )
-
-require (
-	github.com/Calidity/gin-sessions v1.3.1
-	github.com/gin-contrib/sse v0.1.0 // indirect
-	github.com/go-playground/validator/v10 v10.18.0 // indirect
-	github.com/jinzhu/inflection v1.0.0 // indirect
-	github.com/jinzhu/now v1.1.5 // indirect
-	github.com/mattn/go-sqlite3 v2.0.3+incompatible // indirect
-	github.com/pelletier/go-toml/v2 v2.1.1 // indirect
-	github.com/robfig/cron/v3 v3.0.1
-	github.com/shirou/gopsutil/v3 v3.24.1
-	google.golang.org/grpc v1.62.0
-)

backend/go.sum

@@ -1,30 +1,26 @@
-github.com/Calidity/gin-sessions v1.3.1 h1:nF3dCBWa7TZ4j26iYLwGRmzZy9YODhWoOS3fmi+snyE=
+github.com/adrg/xdg v0.5.0 h1:dDaZvhMXatArP1NPHhnfaQUqWBLBsmx1h1HXQdMoFCY=
-github.com/Calidity/gin-sessions v1.3.1/go.mod h1:I0+QE6qkO50TeN/n6If6novvxHk4Isvr23U8EdvPdns=
+github.com/adrg/xdg v0.5.0/go.mod h1:dDdY4M4DF9Rjy4kHPeNL+ilVF+p2lK8IdM9/rTSGcI4=
-github.com/adrg/xdg v0.4.0 h1:RzRqFcjH4nE5C6oTAxhBtoE2IRyjBSa62SCbyPidvls=
-github.com/adrg/xdg v0.4.0/go.mod h1:N6ag73EX4wyxeaoeHctc1mas01KZgsj5tYiAIwqJE/E=
 github.com/aead/cmac v0.0.0-20160719120800-7af84192f0b1 h1:+JkXLHME8vLJafGhOH4aoV2Iu8bR55nU6iKMVfYVLjY=
 github.com/aead/cmac v0.0.0-20160719120800-7af84192f0b1/go.mod h1:nuudZmJhzWtx2212z+pkuy7B6nkBqa+xwNXZHL1j8cg=
 github.com/ajg/form v1.5.1 h1:t9c7v8JUKu/XxOGBU0yjNpaMloxGEJhUkqFRq0ibGeU=
 github.com/ajg/form v1.5.1/go.mod h1:uL1WgH+h2mgNtvBq0339dVnzXdBETtL2LeUXaIv25UY=
-github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
+github.com/andybalholm/brotli v1.0.6 h1:Yf9fFpf49Zrxb9NlQaluyE92/+X7UVHlhMNJN2sxfOI=
-github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/andybalholm/brotli v1.0.6/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
 github.com/boljen/go-bitmap v0.0.0-20151001105940-23cd2fb0ce7d h1:zsO4lp+bjv5XvPTF58Vq+qgmZEYZttJK+CWtSZhKenI=
 github.com/boljen/go-bitmap v0.0.0-20151001105940-23cd2fb0ce7d/go.mod h1:f1iKL6ZhUWvbk7PdWVmOaak10o86cqMUYEmn1CZNGEI=
-github.com/bufbuild/protocompile v0.6.0 h1:Uu7WiSQ6Yj9DbkdnOe7U4mNKp58y9WDMKDn28/ZlunY=
+github.com/bufbuild/protocompile v0.10.0 h1:+jW/wnLMLxaCEG8AX9lD0bQ5v9h1RUiMKOBOT5ll9dM=
-github.com/bufbuild/protocompile v0.6.0/go.mod h1:YNP35qEYoYGme7QMtz5SBCoN4kL4g12jTtjuzRNdjpE=
+github.com/bufbuild/protocompile v0.10.0/go.mod h1:G9qQIQo0xZ6Uyj6CMNz0saGmx2so+KONo8/KrELABiY=
-github.com/bytedance/sonic v1.5.0/go.mod h1:ED5hyg4y6t3/9Ku1R6dU/4KyJ48DZ4jPhfY1O2AihPM=
+github.com/bytedance/sonic v1.12.3 h1:W2MGa7RCU1QTeYRTPE3+88mVC0yXmsRQRChiyVocVjU=
-github.com/bytedance/sonic v1.10.0-rc/go.mod h1:ElCzW+ufi8qKqNW0FY314xriJhyJhuoJ3gFZdAHF7NM=
+github.com/bytedance/sonic v1.12.3/go.mod h1:B8Gt/XvtZ3Fqj+iSKMypzymZxw/FVwgIGKzMzT9r/rk=
-github.com/bytedance/sonic v1.11.1 h1:JC0+6c9FoWYYxakaoa+c5QTtJeiSZNeByOBhXtAFSn4=
+github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
-github.com/bytedance/sonic v1.11.1/go.mod h1:iZcSUejdk5aukTND/Eu/ivjQuEL0Cu9/rf50Hi0u/g4=
+github.com/bytedance/sonic/loader v0.2.1 h1:1GgorWTqf12TA8mma4DDSbaQigE2wOgQo7iCjjJv3+E=
-github.com/chenzhuoyu/base64x v0.0.0-20211019084208-fb5309c8db06/go.mod h1:DH46F32mSOjUmXrMHnKwZdA8wcEefY7UVqBKYGjpdQY=
+github.com/bytedance/sonic/loader v0.2.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
-github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311/go.mod h1:b583jCggY9gE99b6G5LEC39OIiVsWj+R97kbl5odCEk=
+github.com/cloudflare/circl v1.3.7 h1:qlCDlTPz2n9fu58M0Nh1J/JzcFpfgkFHHX3O35r5vcU=
-github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d h1:77cEq6EriyTZ0g/qfRdp61a3Uu/AWrgIq2s0ClJV1g0=
+github.com/cloudflare/circl v1.3.7/go.mod h1:sRTcRWXGLrKw6yIGJ+l7amYJFfAXbZG0kBSc8r4zxgA=
-github.com/chenzhuoyu/base64x v0.0.0-20230717121745-296ad89f973d/go.mod h1:8EPpVsBuRksnlj1mLy4AWzRNQYxauNi62uWcE3to6eA=
+github.com/cloudwego/base64x v0.1.4 h1:jwCgWpFanWmN8xoIUHa2rtzmkd5J2plF/dnLS6Xd/0Y=
-github.com/chenzhuoyu/iasm v0.9.0/go.mod h1:Xjy2NpN3h7aUqeqM+woSuuvxmIe6+DDsiNLIrkAmYog=
+github.com/cloudwego/base64x v0.1.4/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
-github.com/chenzhuoyu/iasm v0.9.1 h1:tUHQJXo3NhBqw6s33wkGn9SP3bvrWLdlVIJ3hQBL7P0=
+github.com/cloudwego/iasm v0.2.0 h1:1KNIy1I1H9hNNFEEH3DVnI4UujN+1zjpuk6gwHLTssg=
-github.com/chenzhuoyu/iasm v0.9.1/go.mod h1:Xjy2NpN3h7aUqeqM+woSuuvxmIe6+DDsiNLIrkAmYog=
+github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQPiEFhY=
-github.com/cloudflare/circl v1.3.3 h1:fE/Qz0QdIGqeWfnwq0RE0R7MI51s0M2E4Ga9kq5AEMs=
-github.com/cloudflare/circl v1.3.3/go.mod h1:5XYMA4rFBvNIrhs50XuiBJ15vF2pZn4nnUKZrLbUZFA=
 github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
@@ -33,51 +29,43 @@ github.com/dgryski/go-metro v0.0.0-20211217172704-adc40b04c140 h1:y7y0Oa6UawqTFP
 github.com/dgryski/go-metro v0.0.0-20211217172704-adc40b04c140/go.mod h1:c9O8+fpSOX1DM8cPNSkX/qsBWdkD4yd2dpciOWQjpBw=
 github.com/ebfe/bcrypt_pbkdf v0.0.0-20140212075826-3c8d2dcb253a h1:YtdtTUN1iH97s+6PUjLnaiKSQj4oG1/EZ3N9bx6g4kU=
 github.com/ebfe/bcrypt_pbkdf v0.0.0-20140212075826-3c8d2dcb253a/go.mod h1:/CZpbhAusDOobpcb9yubw46kdYjq0zRC0Wpg9a9zFQM=
-github.com/gabriel-vasile/mimetype v1.4.3 h1:in2uUcidCuFcDKtdcBxlR0rJ1+fsokWf+uqxgUFjbI0=
+github.com/gabriel-vasile/mimetype v1.4.6 h1:3+PzJTKLkvgjeTbts6msPJt4DixhT4YtFNf1gtGe3zc=
-github.com/gabriel-vasile/mimetype v1.4.3/go.mod h1:d8uq/6HKRL6CGdk+aubisF/M5GcPfT7nKyLpA0lbSSk=
+github.com/gabriel-vasile/mimetype v1.4.6/go.mod h1:JX1qVKqZd40hUPpAfiNTe0Sne7hdfKSbOqqmkq8GCXc=
-github.com/gaukas/godicttls v0.0.4 h1:NlRaXb3J6hAnTmWdsEKb9bcSBD6BvcIjdGdeb0zfXbk=
+github.com/gin-contrib/gzip v1.0.1 h1:HQ8ENHODeLY7a4g1Au/46Z92bdGFl74OhxcZble9WJE=
-github.com/gaukas/godicttls v0.0.4/go.mod h1:l6EenT4TLWgTdwslVb4sEMOCf7Bv0JAK67deKr9/NCI=
+github.com/gin-contrib/gzip v1.0.1/go.mod h1:njt428fdUNRvjuJf16tZMYZ2Yl+WQB53X5wmhDwXvC4=
-github.com/gin-contrib/gzip v0.0.6 h1:NjcunTcGAj5CO1gn4N8jHOSIeRFHIbn51z6K+xaN4d4=
+github.com/gin-contrib/sessions v1.0.1 h1:3hsJyNs7v7N8OtelFmYXFrulAf6zSR7nW/putcPEHxI=
-github.com/gin-contrib/gzip v0.0.6/go.mod h1:QOJlmV2xmayAjkNS2Y8NQsMneuRShOU/kjovCXNuzzk=
+github.com/gin-contrib/sessions v1.0.1/go.mod h1:ouxSFM24/OgIud5MJYQJLpy6AwxQ5EYO9yLhbtObGkM=
 github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
 github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
-github.com/gin-gonic/gin v1.8.1/go.mod h1:ji8BvRH1azfM+SYow9zQ6SZMvR8qOMZHmsCuWR9tTTk=
+github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
-github.com/gin-gonic/gin v1.9.1 h1:4idEAncQnU5cB7BeOkPtxjfCSye0AAm1R0RVIqJ+Jmg=
+github.com/gin-gonic/gin v1.10.0/go.mod h1:4PMNQiOhvDRa013RKVbsiNwoyezlm2rm0uX/T7kzp5Y=
-github.com/gin-gonic/gin v1.9.1/go.mod h1:hPrL7YrpYKXt5YId3A/Tnip5kqbEAP+KLuI3SUcPTeU=
+github.com/go-chi/chi/v5 v5.1.0 h1:acVI1TYaD+hhedDJ3r54HyA6sExp3HfXq7QWEEY/xMw=
-github.com/go-chi/chi/v5 v5.0.10 h1:rLz5avzKpjqxrYwXNfmjkrYYXOyLJd37pz53UFHC6vk=
+github.com/go-chi/chi/v5 v5.1.0/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
-github.com/go-chi/chi/v5 v5.0.10/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
 github.com/go-chi/render v1.0.3 h1:AsXqd2a1/INaIfUSKq3G5uA8weYx20FOsM7uSoCyyt4=
 github.com/go-chi/render v1.0.3/go.mod h1:/gr3hVkmYR0YlEy3LxCuVRFzEu9Ruok+gFqbIofjao0=
 github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
 github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE=
 github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78=
-github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
 github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
-github.com/go-playground/locales v0.14.0/go.mod h1:sawfccIbzZTqEDETgFXqTho0QybSa7l++s0DH+LDiLs=
 github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
 github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
-github.com/go-playground/universal-translator v0.18.0/go.mod h1:UvRDBj+xPUEGrFYl+lu/H90nyDXpg0fqeB/AQUGNTVA=
 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.10.0/go.mod h1:74x4gJWsvQexRdW8Pn3dXSGrTK4nAUsbPlLADvpJkos=
+github.com/go-playground/validator/v10 v10.22.1 h1:40JcKH+bBNGFczGuoBYgX4I6m/i27HYW8P9FDk5PbgA=
-github.com/go-playground/validator/v10 v10.18.0 h1:BvolUXjp4zuvkZ5YN5t7ebzbhlUtPsPm2S9NAZ5nl9U=
+github.com/go-playground/validator/v10 v10.22.1/go.mod h1:dbuPbCMFw/DrkbEynArYaCwl3amGuJotoKCe95atGMM=
-github.com/go-playground/validator/v10 v10.18.0/go.mod h1:dbuPbCMFw/DrkbEynArYaCwl3amGuJotoKCe95atGMM=
 github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572 h1:tfuBGBXKqDEevZMzYi5KSi8KkcZtzBcTgAUUtapy0OI=
 github.com/go-task/slim-sprig v0.0.0-20230315185526-52ccab3ef572/go.mod h1:9Pwr4B2jHnOSGXyyzV8ROjYa2ojvAY6HCGYYfMoC3Ls=
-github.com/goccy/go-json v0.9.7/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/goccy/go-json v0.10.3 h1:KZ5WoDbxAIgm2HNbYckL0se1fHD6rz5j4ywS6ebzDqA=
-github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
+github.com/goccy/go-json v0.10.3/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
-github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/golang-collections/go-datastructures v0.0.0-20150211160725-59788d5eb259 h1:ZHJ7+IGpuOXtVf6Zk/a3WuHQgkC+vXwaqfUBDFwahtI=
+github.com/golang-collections/go-datastructures v0.0.0-20150211160725-59788d5eb259/go.mod h1:9Qcha0gTWLw//0VNka1Cbnjvg3pNKGFdAm7E9sBabxE=
 github.com/golang/mock v1.6.0 h1:ErTB+efbowRARo13NNdxyJji2egdxLGQhRaY+DUumQc=
 github.com/golang/mock v1.6.0/go.mod h1:p6yTPP+5HYm5mzsMV8JkE6ZKdX+/wYM6Hr+LicevLPs=
-github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
+github.com/golang/protobuf v1.5.4 h1:i7eJL8qZTpSEXOPTxNKhASYpMn+8e5Q6AdndVa1dWek=
-github.com/golang/protobuf v1.5.3 h1:KhyjKVUg7Usr/dYsdSqoFveMYd5ko72D+zANwlG1mmg=
+github.com/golang/protobuf v1.5.4/go.mod h1:lnTiLA8Wa4RWRcIUkrtSVa5nRhsEGBg48fD6rSs7xps=
-github.com/golang/protobuf v1.5.3/go.mod h1:XVQd3VNwM+JqD3oG2Ue2ip4fOMUkwXdXDdiuN0vRsmY=
 github.com/google/btree v1.1.2 h1:xf4v41cLI2Z6FxbKm+8Bu+m8ifhj15JuZ9sa0jZCMUU=
 github.com/google/btree v1.1.2/go.mod h1:qOPhT0dTNdNzV6Z/lhRX0YXUafgPLFUh+gZMl761Gm4=
-github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/go-cmp v0.5.6/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
-github.com/google/go-cmp v0.5.9/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/go-cmp v0.6.0 h1:ofyhxvXcZhMsU5ulbFiLKl/XBFqE1GSq7atu8tAmTRI=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
@@ -85,49 +73,42 @@ github.com/google/gofuzz v1.2.0 h1:xRy4A+RhZaiKjJ1bPfwQ8sedCA+YS2YcCHW6ec7JMi0=
 github.com/google/gofuzz v1.2.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
 github.com/google/gopacket v1.1.19 h1:ves8RnFZPGiFnTS0uPQStjwru6uO6h+nlr9j6fL7kF8=
 github.com/google/gopacket v1.1.19/go.mod h1:iJ8V8n6KS+z2U1A8pUwu8bW5SyEMkXJB8Yo/Vo+TKTo=
-github.com/google/pprof v0.0.0-20230602150820-91b7bce49751 h1:hR7/MlvK23p6+lIw9SN1TigNLn9ZnF3W4SYRKq2gAHs=
+github.com/google/pprof v0.0.0-20231101202521-4ca4178f5c7a h1:fEBsGL/sjAuJrgah5XqmmYsTLzJp/TO9Lhy39gkverk=
-github.com/google/pprof v0.0.0-20230602150820-91b7bce49751/go.mod h1:Jh3hGz2jkYak8qXPD19ryItVnUgpgeqzdkY/D0EaeuA=
+github.com/google/pprof v0.0.0-20231101202521-4ca4178f5c7a/go.mod h1:czg5+yv1E0ZGTi6S6vVK1mke0fV+FaUhNGcd6VRS9Ik=
 github.com/gorilla/context v1.1.2 h1:WRkNAv2uoa03QNIc1A6u4O7DAGMUVoopZhkiXWA2V1o=
 github.com/gorilla/context v1.1.2/go.mod h1:KDPwT9i/MeWHiLl90fuTgrt4/wPcv75vFAZLaOOcbxM=
 github.com/gorilla/securecookie v1.1.2 h1:YCIWL56dvtr73r6715mJs5ZvhtnY73hBvEF8kXD8ePA=
 github.com/gorilla/securecookie v1.1.2/go.mod h1:NfCASbcHqRSY+3a8tlWJwsQap2VX5pwzwo4h3eOamfo=
-github.com/gorilla/sessions v1.2.2 h1:lqzMYz6bOfvn2WriPUjNByzeXIlVzURcPmgMczkmTjY=
+github.com/gorilla/sessions v1.4.0 h1:kpIYOp/oi6MG/p5PgxApU8srsSw9tuFbt46Lt7auzqQ=
-github.com/gorilla/sessions v1.2.2/go.mod h1:ePLdVu+jbEgHH+KWw8I1z2wqd0BAdAQh/8LRvBeoNcQ=
+github.com/gorilla/sessions v1.4.0/go.mod h1:FLWm50oby91+hl7p/wRxDth9bWSuk0qVL2emc7lT5ik=
-github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
-github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
-github.com/jhump/protoreflect v1.15.3 h1:6SFRuqU45u9hIZPJAoZ8c28T3nK64BNdp9w6jFonzls=
+github.com/jhump/protoreflect v1.16.0 h1:54fZg+49widqXYQ0b+usAFHbMkBGR4PpXrsHc8+TBDg=
-github.com/jhump/protoreflect v1.15.3/go.mod h1:4ORHmSBmlCW8fh3xHmJMGyul1zNqZK4Elxc8qKP+p1k=
+github.com/jhump/protoreflect v1.16.0/go.mod h1:oYPd7nPvcBw/5wlDfm/AVmU9zH9BgqGCI469pGxfj/8=
 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.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
 github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
 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/klauspost/compress v1.16.7 h1:2mk3MPGNzKyxErAw8YaohYh69+pa4sIQSC0fPGCFR9I=
+github.com/klauspost/compress v1.17.7 h1:ehO88t2UGzQK66LMdE8tibEd1ErmzZjNEqWkjLAKQQg=
-github.com/klauspost/compress v1.16.7/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/klauspost/compress v1.17.7/go.mod h1:Di0epgTjJY877eYKx5yC51cX2A2Vl2ibi7bDH9ttBbw=
 github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
-github.com/klauspost/cpuid/v2 v2.2.7 h1:ZWSB3igEs+d0qvnxR/ZBzXVmxkgt8DdzP6m9pfuVLDM=
+github.com/klauspost/cpuid/v2 v2.2.8 h1:+StwCXwm9PdpiEkPyzBXIy+M9KUb4ODm0Zarf1kS5BM=
-github.com/klauspost/cpuid/v2 v2.2.7/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
+github.com/klauspost/cpuid/v2 v2.2.8/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
 github.com/klauspost/reedsolomon v1.11.7 h1:9uaHU0slncktTEEg4+7Vl7q7XUNMBUOK4R9gnKhMjAU=
 github.com/klauspost/reedsolomon v1.11.7/go.mod h1:4bXRN+cVzMdml6ti7qLouuYi32KHJ5MGv0Qd8a47h6A=
 github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
-github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
-github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfnI=
-github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
-github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
 github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
 github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
-github.com/leodido/go-urn v1.2.1/go.mod h1:zt4jvISO2HfUBqxjfIshjdMTYS56ZS/qv49ictyFfxY=
 github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
 github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
-github.com/lufia/plan9stats v0.0.0-20211012122336-39d0f177ccd0/go.mod h1:zJYVVT2jmtg6P3p1VtQj7WsuWi/y4VnjVBn7F8KPB3I=
+github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683 h1:7UMa6KCCMjZEMDtTVdcGu0B1GmmC7QJKiCCjyTAWQy0=
-github.com/lufia/plan9stats v0.0.0-20240226150601-1dcf7310316a h1:3Bm7EwfUQUvhNeKIkUct/gl9eod1TcXuj8stxvi/GoI=
+github.com/lufia/plan9stats v0.0.0-20240909124753-873cd0166683/go.mod h1:ilwx/Dta8jXAgpFYFvSWEMwxmbWXyiUHkd5FwyKhb5k=
-github.com/lufia/plan9stats v0.0.0-20240226150601-1dcf7310316a/go.mod h1:ilwx/Dta8jXAgpFYFvSWEMwxmbWXyiUHkd5FwyKhb5k=
 github.com/lunixbochs/struc v0.0.0-20200707160740-784aaebc1d40 h1:EnfXoSqDfSNJv0VBNqY/88RNnhSGYkrHaO0mmFGbVsc=
 github.com/lunixbochs/struc v0.0.0-20200707160740-784aaebc1d40/go.mod h1:vy1vK6wD6j7xX6O6hXe621WabdtNkou2h7uRtTfRMyg=
-github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-sqlite3 v2.0.3+incompatible h1:gXHsfypPkaMZrKbD5209QV9jbUTJKjyR5WD3HYQSd+U=
@@ -141,6 +122,8 @@ github.com/mustafaturan/bus v1.0.2 h1:2x3ErwZ0uUPwwZ5ZZoknEQprdaxr68Yl3mY8jDye1W
 github.com/mustafaturan/bus v1.0.2/go.mod h1:h7gfehm8TThv4Dcaa+wDQG7r7j6p74v+7ftr0Rq9i1Q=
 github.com/mustafaturan/monoton v1.0.0 h1:8SCej+JiNn0lyps7V+Jzc1CRAkDR4EZPWrTupQ61YCQ=
 github.com/mustafaturan/monoton v1.0.0/go.mod h1:FOnE7NV3s3EWPXb8/7+/OSdiMBbdlkV0Lz8p1dc+vy8=
+github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e h1:fD57ERR4JtEqsWbfPhv4DMiApHyliiK5xCTNVSPiaAs=
+github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e/go.mod h1:zD1mROLANZcx1PVRCS0qkT7pwLkGfwJo4zjcN/Tysno=
 github.com/onsi/ginkgo/v2 v2.10.0 h1:sfUl4qgLdvkChZrWCYndY2EAu9BRIw1YphNAzy1VNWs=
 github.com/onsi/ginkgo/v2 v2.10.0/go.mod h1:UDQOh5wbQUlMnkLfVaIUMtQ1Vus92oM+P2JX1aulgcE=
 github.com/op/go-logging v0.0.0-20160315200505-970db520ece7 h1:lDH9UUVJtmYCjyT0CI4q8xvlXPxeZ0gYCVvWbmPlp88=
@@ -149,46 +132,38 @@ github.com/patrickmn/go-cache v2.1.0+incompatible h1:HRMgzkcYKYpi3C8ajMPV8OFXaaR
 github.com/patrickmn/go-cache v2.1.0+incompatible/go.mod h1:3Qf8kWWT7OJRJbdiICTKqZju1ZixQ/KpMGzzAfe6+WQ=
 github.com/pelletier/go-toml v1.9.5 h1:4yBQzkHv+7BHq2PQUZF3Mx0IYxG7LsP222s7Agd3ve8=
 github.com/pelletier/go-toml v1.9.5/go.mod h1:u1nR/EPcESfeI/szUZKdtJ0xRNbUoANCkoOuaOx1Y+c=
-github.com/pelletier/go-toml/v2 v2.0.1/go.mod h1:r9LEWfGN8R5k0VXJ+0BkIe7MYkRdwZOjgMj2KwnJFUo=
+github.com/pelletier/go-toml/v2 v2.2.3 h1:YmeHyLY8mFWbdkNWwpr+qIL2bEqT0o95WSdkNHvL12M=
-github.com/pelletier/go-toml/v2 v2.1.1 h1:LWAJwfNvjQZCFIDKWYQaM62NcYeYViCmWIwmOStowAI=
+github.com/pelletier/go-toml/v2 v2.2.3/go.mod h1:MfCQTFTvCcUyyvvwm1+G6H/jORL20Xlb6rzQu9GuUkc=
-github.com/pelletier/go-toml/v2 v2.1.1/go.mod h1:tJU2Z3ZkXwnxa4DPO899bsyIoywizdUvyaeZurnPPDc=
+github.com/pion/dtls/v2 v2.2.12 h1:KP7H5/c1EiVAAKUmXyCzPiQe5+bCJrpOeKg/L05dunk=
-github.com/pion/dtls/v2 v2.2.7 h1:cSUBsETxepsCSFSxC3mc/aDo14qQLMSL+O6IjG28yV8=
+github.com/pion/dtls/v2 v2.2.12/go.mod h1:d9SYc9fch0CqK90mRk1dC7AkzzpwJj6u2GU3u+9pqFE=
-github.com/pion/dtls/v2 v2.2.7/go.mod h1:8WiMkebSHFD0T+dIU+UeBaoV7kDhOW5oDCzZ7WZ/F9s=
 github.com/pion/logging v0.2.2 h1:M9+AIj/+pxNsDfAT64+MAVgJO0rsyLnoJKCqf//DoeY=
 github.com/pion/logging v0.2.2/go.mod h1:k0/tDVsRCX2Mb2ZEmTqNa7CWsQPc+YYCB7Q+5pahoms=
 github.com/pion/randutil v0.1.0 h1:CFG1UdESneORglEsnimhUjf33Rwjubwj6xfiOXBa3mA=
 github.com/pion/randutil v0.1.0/go.mod h1:XcJrSMMbbMRhASFVOlj/5hQial/Y8oH/HVo7TBZq+j8=
 github.com/pion/sctp v1.8.7 h1:JnABvFakZueGAn4KU/4PSKg+GWbF6QWbKTWZOSGJjXw=
 github.com/pion/sctp v1.8.7/go.mod h1:g1Ul+ARqZq5JEmoFy87Q/4CePtKnTJ1QCL9dBBdN6AU=
-github.com/pion/transport/v2 v2.2.4 h1:41JJK6DZQYSeVLxILA2+F4ZkKb4Xd/tFJZRFZQ9QAlo=
+github.com/pion/transport/v2 v2.2.10 h1:ucLBLE8nuxiHfvkFKnkDQRYWYfp8ejf4YBOPfaQpw6Q=
-github.com/pion/transport/v2 v2.2.4/go.mod h1:q2U/tf9FEfnSBGSW6w5Qp5PFWRLRj3NjLhCCgpRK4p0=
+github.com/pion/transport/v2 v2.2.10/go.mod h1:sq1kSLWs+cHW9E+2fJP95QudkzbK7wscs8yYgQToO5E=
-github.com/pires/go-proxyproto v0.7.0 h1:IukmRewDQFWC7kfnb66CSomk2q/seBuilHBYFwyq0Hs=
+github.com/pires/go-proxyproto v0.8.0 h1:5unRmEAPbHXHuLjDg01CxJWf91cw3lKHc/0xzKpXEe0=
-github.com/pires/go-proxyproto v0.7.0/go.mod h1:Vz/1JPY/OACxWGQNIRY2BeyDmpoaWmEP40O9LbuiFR4=
+github.com/pires/go-proxyproto v0.8.0/go.mod h1:iknsfgnH8EkjrMeMyvfKByp9TiBZCKZM0jx2xmKqnVY=
-github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/power-devops/perfstat v0.0.0-20210106213030-5aafc221ea8c/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
 github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55 h1:o4JXh1EVt9k/+g42oCprj/FisM4qX9L3sZB3upGN2ZU=
 github.com/power-devops/perfstat v0.0.0-20240221224432-82ca36839d55/go.mod h1:OmDBASR4679mdNQnz2pUhc2G8CO2JrUAVFDRBDP/hJE=
-github.com/quic-go/qtls-go1-20 v0.4.1 h1:D33340mCNDAIKBqXuAvexTNMUByrYmFYVfKfDN5nfFs=
+github.com/quic-go/quic-go v0.46.0 h1:uuwLClEEyk1DNvchH8uCByQVjo3yKL9opKulExNDs7Y=
-github.com/quic-go/qtls-go1-20 v0.4.1/go.mod h1:X9Nh97ZL80Z+bX/gUXMbipO6OxdiDi58b/fMC9mAL+k=
+github.com/quic-go/quic-go v0.46.0/go.mod h1:1dLehS7TIR64+vxGR70GDcatWTOtMX2PUtnKsjbTurI=
-github.com/quic-go/quic-go v0.40.0 h1:GYd1iznlKm7dpHD7pOVpUvItgMPo/jrMgDWZhMCecqw=
+github.com/refraction-networking/utls v1.6.7 h1:zVJ7sP1dJx/WtVuITug3qYUq034cDq9B2MR1K67ULZM=
-github.com/quic-go/quic-go v0.40.0/go.mod h1:PeN7kuVJ4xZbxSv/4OX6S1USOX8MJvydwpTx31vx60c=
+github.com/refraction-networking/utls v1.6.7/go.mod h1:BC3O4vQzye5hqpmDTWUqi4P5DDhzJfkV1tdqtawQIH0=
-github.com/refraction-networking/utls v1.5.4 h1:9k6EO2b8TaOGsQ7Pl7p9w6PUhx18/ZCeT0WNTZ7Uw4o=
-github.com/refraction-networking/utls v1.5.4/go.mod h1:SPuDbBmgLGp8s+HLNc83FuavwZCFoMmExj+ltUHiHUw=
 github.com/riobard/go-bloom v0.0.0-20200614022211-cdc8013cb5b3 h1:f/FNXud6gA3MNr8meMVVGxhp+QBTqY91tM8HjEuMjGg=
 github.com/riobard/go-bloom v0.0.0-20200614022211-cdc8013cb5b3/go.mod h1:HgjTstvQsPGkxUsCd2KWxErBblirPizecHcpD3ffK+s=
 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.6.1/go.mod h1:xXDCJY+GAPziupqXw64V24skbSoqbTEfhy4qGm1nDQc=
-github.com/rogpeppe/go-internal v1.8.0 h1:FCbCCtXNOY3UtUuHUYaghJg4y7Fd14rXifAYUAtL9R8=
-github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6poM+XZ2dLUbcbE=
 github.com/secure-io/siv-go v0.0.0-20180922214919-5ff40651e2c4 h1:zOjq+1/uLzn/Xo40stbvjIY/yehG0+mfmlsiEmc0xmQ=
 github.com/secure-io/siv-go v0.0.0-20180922214919-5ff40651e2c4/go.mod h1:aI+8yClBW+1uovkHw6HM01YXnYB8vohtB9C83wzx34E=
 github.com/seiflotfy/cuckoofilter v0.0.0-20220411075957-e3b120b3f5fb h1:XfLJSPIOUX+osiMraVgIrMR27uMXnRJWGm1+GL8/63U=
 github.com/seiflotfy/cuckoofilter v0.0.0-20220411075957-e3b120b3f5fb/go.mod h1:bR6DqgcAl1zTcOX8/pE2Qkj9XO00eCNqmKb7lXP8EAg=
-github.com/shirou/gopsutil/v3 v3.24.1 h1:R3t6ondCEvmARp3wxODhXMTLC/klMa87h2PHUw5m7QI=
+github.com/shirou/gopsutil/v3 v3.24.5 h1:i0t8kL+kQTvpAYToeuiVk3TgDeKOFioZO3Ztz/iZ9pI=
-github.com/shirou/gopsutil/v3 v3.24.1/go.mod h1:UU7a2MSBQa+kW1uuDq8DeEBS8kmrnQwsv2b5O513rwU=
+github.com/shirou/gopsutil/v3 v3.24.5/go.mod h1:bsoOS1aStSs9ErQ1WWfxllSeS1K5D+U30r2NfcubMVk=
 github.com/shoenig/go-m1cpu v0.1.6 h1:nxdKQNcEB6vzgA2E2bvzKIYRuNj7XNJ4S/aRSwKzFtM=
 github.com/shoenig/go-m1cpu v0.1.6/go.mod h1:1JJMcUBvfNwpq05QDQVAnx3gUHr9IYF7GNg9SUEw2VQ=
 github.com/shoenig/test v0.6.4 h1:kVTaSd7WLz5WZ2IaoM0RSzRsUD+m8wRR+5qvntpn4LU=
@@ -197,23 +172,18 @@ github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+
 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.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/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
-github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
+github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
-github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
-github.com/tklauser/go-sysconf v0.3.12/go.mod h1:Ho14jnntGE1fpdOqQEEaiKRpvIavV0hSfmBq8nJbHYI=
+github.com/tklauser/go-sysconf v0.3.14 h1:g5vzr9iPFFz24v2KZXs/pvpvh8/V9Fw6vQK5ZZb78yU=
-github.com/tklauser/go-sysconf v0.3.13 h1:GBUpcahXSpR2xN01jhkNAbTLRk2Yzgggk8IM08lq3r4=
+github.com/tklauser/go-sysconf v0.3.14/go.mod h1:1ym4lWMLUOhuBOPGtRcJm7tEGX4SCYNEEEtghGG/8uY=
-github.com/tklauser/go-sysconf v0.3.13/go.mod h1:zwleP4Q4OehZHGn4CYZDipCgg9usW5IJePewFCGVEa0=
+github.com/tklauser/numcpus v0.9.0 h1:lmyCHtANi8aRUgkckBgoDk1nHCux3n2cgkJLXdQGPDo=
-github.com/tklauser/numcpus v0.6.1/go.mod h1:1XfjsgE2zo8GVw7POkMbHENHzVg3GzmoZ9fESEdAacY=
+github.com/tklauser/numcpus v0.9.0/go.mod h1:SN6Nq1O3VychhC1npsWostA+oW+VOQTxZrS604NSRyI=
-github.com/tklauser/numcpus v0.7.0 h1:yjuerZP127QG9m5Zh/mSO4wqurYil27tHrqwRoRjpr4=
-github.com/tklauser/numcpus v0.7.0/go.mod h1:bb6dMVcj8A42tSE7i32fsIUCbQNllK5iDguyOZRUzAY=
 github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
-github.com/ugorji/go v1.2.7/go.mod h1:nF9osbDWLy6bDVv/Rtoh6QgnvNDpmCalQV5urGCCS6M=
-github.com/ugorji/go/codec v1.2.7/go.mod h1:WGN1fab3R1fzQlVQTkfxVtIBhWDRqOviHU95kRgeqEY=
 github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
 github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
 github.com/v2fly/BrowserBridge v0.0.0-20210430233438-0570fc1d7d08 h1:4Yh46CVE3k/lPq6hUbEdbB1u1anRBXLewm3k+L0iOMc=
@@ -222,90 +192,65 @@ github.com/v2fly/VSign v0.0.0-20201108000810-e2adc24bf848 h1:p1UzXK6VAutXFFQMnre
 github.com/v2fly/VSign v0.0.0-20201108000810-e2adc24bf848/go.mod h1:p80Bv154ZtrGpXMN15slDCqc9UGmfBuUzheDFBYaW/M=
 github.com/v2fly/ss-bloomring v0.0.0-20210312155135-28617310f63e h1:5QefA066A1tF8gHIiADmOVOV5LS43gt3ONnlEl3xkwI=
 github.com/v2fly/ss-bloomring v0.0.0-20210312155135-28617310f63e/go.mod h1:5t19P9LBIrNamL6AcMQOncg/r10y3Pc01AbHeMhwlpU=
-github.com/v2fly/v2ray-core/v5 v5.13.0 h1:BDJfi3Ftx1NpQlZZPpeWJe3RDqRNyIVBs+YGG4RRMDU=
+github.com/v2fly/v2ray-core/v5 v5.17.1 h1:IIMMtmRdaG5HTYNn6VX1xKULknJl7nhkSFnmoTb5TDQ=
-github.com/v2fly/v2ray-core/v5 v5.13.0/go.mod h1:Bc3gmQWLr8UR7xBSCYI9FbfKuVvqA9lbkeBTWNRRAS4=
+github.com/v2fly/v2ray-core/v5 v5.17.1/go.mod h1:IhDN0rhXJnNcs9jUuC5sILTGCT2L+4yr0+tfD8ZVuL8=
 github.com/vincent-petithory/dataurl v1.0.0 h1:cXw+kPto8NLuJtlMsI152irrVw9fRDX8AbShPRpg2CI=
 github.com/vincent-petithory/dataurl v1.0.0/go.mod h1:FHafX5vmDzyP+1CQATJn7WFKc9CvnvxyvZy6I1MrG/U=
 github.com/xiaokangwang/VLite v0.0.0-20220418190619-cff95160a432 h1:I/ATawgO2RerCq9ACwL0wBB8xNXZdE3J+93MCEHReRs=
 github.com/xiaokangwang/VLite v0.0.0-20220418190619-cff95160a432/go.mod h1:QN7Go2ftTVfx0aCTh9RXHV8pkpi0FtmbwQw40dy61wQ=
 github.com/xtaci/smux v1.5.24 h1:77emW9dtnOxxOQ5ltR+8BbsX1kzcOxQ5gB+aaV9hXOY=
 github.com/xtaci/smux v1.5.24/go.mod h1:OMlQbT5vcgl2gb49mFkYo6SMf+zP3rcjcwQz7ZU7IGY=
-github.com/yusufpapurcu/wmi v1.2.3/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
 github.com/yusufpapurcu/wmi v1.2.4 h1:zFUKzehAFReQwLys1b/iSMl+JQGSCSjtVqQn9bBrPo0=
 github.com/yusufpapurcu/wmi v1.2.4/go.mod h1:SBZ9tNy3G9/m5Oi98Zks0QjeHVDvuK0qfxQmPyzfmi0=
 go.starlark.net v0.0.0-20230612165344-9532f5667272 h1:2/wtqS591wZyD2OsClsVBKRPEvBsQt/Js+fsCiYhwu8=
 go.starlark.net v0.0.0-20230612165344-9532f5667272/go.mod h1:jxU+3+j+71eXOW14274+SmmuW82qJzl6iZSeqEtTGds=
-go.uber.org/mock v0.3.0 h1:3mUxI1No2/60yUYax92Pt8eNOEecx2D3lcXZh2NEZJo=
+go.uber.org/mock v0.4.0 h1:VcM4ZOtdbR4f6VXfiOpwpVJDL6lCReaZ6mw31wqh7KU=
-go.uber.org/mock v0.3.0/go.mod h1:a6FSlNadKUHUa9IP5Vyt1zh4fC7uAwxMutEAscFbkZc=
+go.uber.org/mock v0.4.0/go.mod h1:a6FSlNadKUHUa9IP5Vyt1zh4fC7uAwxMutEAscFbkZc=
-go4.org/netipx v0.0.0-20230303233057-f1b76eb4bb35 h1:nJAwRlGWZZDOD+6wni9KVUNHMpHko/OnRwsrCYeAzPo=
+go4.org/netipx v0.0.0-20231129151722-fdeea329fbba h1:0b9z3AuHCjxk0x/opv64kcgZLBseWJUpBw5I82+2U4M=
-go4.org/netipx v0.0.0-20230303233057-f1b76eb4bb35/go.mod h1:TQvodOM+hJTioNQJilmLXu08JNb8i+ccq418+KWu1/Y=
+go4.org/netipx v0.0.0-20231129151722-fdeea329fbba/go.mod h1:PLyyIXexvUFg3Owu6p/WfdlivPbZJsZdgWZlrGope/Y=
-golang.org/x/arch v0.0.0-20210923205945-b76863e36670/go.mod h1:5om86z9Hs0C8fWVUuoMHwpExlXzs5Tkyp9hOrfG7pp8=
+golang.org/x/arch v0.11.0 h1:KXV8WWKCXm6tRpLirl2szsO5j/oOODwZf4hATmGVNs4=
-golang.org/x/arch v0.7.0 h1:pskyeJh/3AmoQ8CPE95vxHLqp1G1GfGNXTmcl9NEKTc=
+golang.org/x/arch v0.11.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
-golang.org/x/arch v0.7.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
+golang.org/x/crypto v0.28.0 h1:GBDwsMXVQi34v5CCYUm2jkJvu4cbtru2U4TN2PSyQnw=
-golang.org/x/crypto v0.0.0-20210711020723-a769d52b0f97/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/crypto v0.28.0/go.mod h1:rmgy+3RHxRZMyY0jjAJShp2zgEdOqj2AO7U0pYmeQ7U=
-golang.org/x/crypto v0.20.0 h1:jmAMJJZXr5KiCw05dfYK9QnqaqKLYXijU23lsEdcQqg=
+golang.org/x/exp v0.0.0-20240719175910-8a7402abbf56 h1:2dVuKD2vS7b0QIHQbpyTISPd0LeHDbnYEryqj5Q1ug8=
-golang.org/x/crypto v0.20.0/go.mod h1:Xwo95rrVNIoSMx9wa1JroENMToLWn3RNVrTBpLHgZPQ=
+golang.org/x/exp v0.0.0-20240719175910-8a7402abbf56/go.mod h1:M4RDyNAINzryxdtnbRXRL/OHtkFuWGRjvuhBJpk2IlY=
-golang.org/x/exp v0.0.0-20230725093048-515e97ebf090 h1:Di6/M8l0O2lCLc6VVRWhgCiApHV8MnQurBnFSHsQtNY=
+golang.org/x/mod v0.19.0 h1:fEdghXQSo20giMthA7cd28ZC+jts4amQ3YMXiP5oMQ8=
-golang.org/x/exp v0.0.0-20230725093048-515e97ebf090/go.mod h1:FXUEEKJgO7OQYeo8N01OfiKP8RXMtf6e8aTskBGqWdc=
+golang.org/x/mod v0.19.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
-golang.org/x/mod v0.13.0 h1:I/DsJXRlw/8l/0c24sM9yb0T4z9liZTduXvdAWYiysY=
+golang.org/x/net v0.30.0 h1:AcW1SDZMkb8IpzCdQUaIq2sP4sZ4zw+55h6ynffypl4=
-golang.org/x/mod v0.13.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/net v0.30.0/go.mod h1:2wGyMJ5iFasEhkwi13ChkO/t1ECNC4X4eBKkVFyYFlU=
-golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
+golang.org/x/sync v0.8.0 h1:3NFvSEYkUoMifnESzZl15y791HH1qU2xm6eCJU5ZPXQ=
-golang.org/x/net v0.21.0 h1:AQyQV4dYCvJ7vGmJyKki9+PBdyvhkSd8EIx/qb0AYv4=
+golang.org/x/sync v0.8.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
-golang.org/x/net v0.21.0/go.mod h1:bIjVDfnllIU7BJ2DNgfnXvpSvtn8VRwhlsaeUTyUS44=
-golang.org/x/sync v0.6.0 h1:5BMeUDZ7vkXGfEr1x9B4bRcTH4lpkTkpdh0T/J+qjbQ=
-golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201204225414-ed752295db88/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20210806184541-e5e7981a1069/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20211025201205-69cdffdb9359/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.26.0 h1:KHjCJyddX0LoSTb3J+vWpupP9p0oznkqVk/IfjymZbo=
-golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.26.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/sys v0.16.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/text v0.19.0 h1:kTxAhCbGbxhK0IwgSKiMO5awPoDQ0RpfiVYBfK860YM=
-golang.org/x/sys v0.17.0 h1:25cE3gD+tdBA7lp7QfhuV+rJiE9YXTcS3VG1SqssI/Y=
+golang.org/x/text v0.19.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
-golang.org/x/sys v0.17.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
-golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
-golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/tools v0.23.0 h1:SGsXPZ+2l4JsgaCKkx+FQ9YZ5XEtA1GZYuoDjenLjvg=
-golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/tools v0.23.0/go.mod h1:pnu6ufv6vQkll6szChhK3C3L/ruaIv5eBeztNG8wtsI=
-golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20241015192408-796eee8c2d53 h1:X58yt85/IXCx0Y3ZwN6sEIKZzQtDEYaBWrDvErdXrRE=
-golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20241015192408-796eee8c2d53/go.mod h1:GX3210XPVPUjJbTUbvwI8f2IpZDMZuPJWDzDuebbviI=
-golang.org/x/time v0.3.0 h1:rg5rLMjNzMS1RkNLzCG38eapWhnYLFYXDXj2gOlr8j4=
+google.golang.org/grpc v1.67.1 h1:zWnc1Vrcno+lHZCOofnIMvycFcc0QRGIzm9dhnDX68E=
-golang.org/x/time v0.3.0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
+google.golang.org/grpc v1.67.1/go.mod h1:1gLDyUQU7CTLJI90u3nXZ9ekeghjeM7pTDZlqFNg2AA=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+google.golang.org/protobuf v1.35.1 h1:m3LfL6/Ca+fqnjnlqQXNpFPABW1UD7mjh8KO2mKFytA=
-golang.org/x/tools v0.14.0 h1:jvNa2pY0M4r62jkRQ6RwEZZyPcymeL9XZMLBbV7U2nc=
+google.golang.org/protobuf v1.35.1/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
-golang.org/x/tools v0.14.0/go.mod h1:uYBEerGOWcJyEORxN+Ek8+TT266gXkNlHdJBwexUsBg=
-golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20240221002015-b0ce06bbee7c h1:NUsgEN92SQQqzfA+YtqYNqYmB3DMMYLlIwUZAQFVFbo=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20240221002015-b0ce06bbee7c/go.mod h1:H4O17MA/PE9BsGx3w+a+W2VOLLD1Qf7oJneAoU6WktY=
-google.golang.org/grpc v1.62.0 h1:HQKZ/fa1bXkX1oFOvSjmZEUL8wLSaZTjCcLAlmZRtdk=
-google.golang.org/grpc v1.62.0/go.mod h1:IWTG0VlJLCh1SkC58F7np9ka9mx/WNkjl4PGJaiq+QE=
-google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw=
-google.golang.org/protobuf v1.26.0/go.mod h1:9q0QmTI4eRPtz6boOQmLYwt+qCgq0jsYwAQnmE0givc=
-google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=
-google.golang.org/protobuf v1.32.0 h1:pPC6BG5ex8PDFnkbrGU3EixyhKcQ2aDuBS36lqK/C7I=
-google.golang.org/protobuf v1.32.0/go.mod h1:c6P6GXX6sHbq/GpV6MGZEdwhWPcYBgnhAHhKbcUYpos=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20200227125254-8fa46927fb4f h1:BLraFXnmrev5lT+xlilqcH8XK9/i0At2xKjWk4p6zsU=
-gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
+gopkg.in/check.v1 v1.0.0-20200227125254-8fa46927fb4f/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
-gopkg.in/errgo.v2 v2.1.0/go.mod h1:hNsd1EY+bozCKY1Ytp96fpM3vjJbqLJn88ws8XvfDNI=
-gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/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.5.5 h1:7MDMtUZhV065SilG62E0MquljeArQZNfJnjd9i9gx3E=
+gorm.io/driver/sqlite v1.5.6 h1:fO/X46qn5NUEEOZtnjJRWRzZMe8nqJiQ9E+0hi+hKQE=
-gorm.io/driver/sqlite v1.5.5/go.mod h1:6NgQ7sQWAIFsPrJJl1lSNSu2TABh0ZZ/zm5fosATavE=
+gorm.io/driver/sqlite v1.5.6/go.mod h1:U+J8craQU6Fzkcvu8oLeAQmi50TkwPEhHDEjQZXDah4=
-gorm.io/gorm v1.25.7 h1:VsD6acwRjz2zFxGO50gPO6AkNs7KKnvfzUjHQhZDz/A=
+gorm.io/gorm v1.25.12 h1:I0u8i2hWQItBq1WfE0o2+WuL9+8L21K9e2HHSTE/0f8=
-gorm.io/gorm v1.25.7/go.mod h1:hbnx/Oo0ChWMn1BIhpy1oYozzpM15i4YPuHDmfYtwg8=
+gorm.io/gorm v1.25.12/go.mod h1:xh7N7RHfYlNc5EmcI/El95gXusucDrQnHXe0+CgWcLQ=
 gvisor.dev/gvisor v0.0.0-20231020174304-b8a429915ff1 h1:qDCwdCWECGnwQSQC01Dpnp09fRHxJs9PbktotUqG+hs=
 gvisor.dev/gvisor v0.0.0-20231020174304-b8a429915ff1/go.mod h1:8hmigyCdYtw5xJGfQDJzSH5Ju8XEIDBnpyi8+O6GRt8=
-lukechampine.com/blake3 v1.2.1 h1:YuqqRuaqsGV71BV/nm9xlI0MKUv4QC54jQnBChWbGnI=
+lukechampine.com/blake3 v1.3.0 h1:sJ3XhFINmHSrYCgl958hscfIa3bw8x4DqMP3u1YvoYE=
-lukechampine.com/blake3 v1.2.1/go.mod h1:0OFRp7fBtAylGVCO40o87sbupkyIGgbpv1+M1k1LM6k=
+lukechampine.com/blake3 v1.3.0/go.mod h1:0OFRp7fBtAylGVCO40o87sbupkyIGgbpv1+M1k1LM6k=
 nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
-rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=

backend/logger/logger.go

@@ -3,35 +3,33 @@ package logger
 import (
 	"fmt"
 	"os"
+	"s-ui/config"
 	"time"
 
 	"github.com/op/go-logging"
 )
 
-var logger *logging.Logger
+var (
-var logBuffer []struct {
+	logger    *logging.Logger
+	logBuffer []struct {
 		time  string
 		level logging.Level
 		log   string
-}
+	}
-
+)
-func init() {
-	InitLogger(logging.INFO)
-}
 
 func InitLogger(level logging.Level) {
 	newLogger := logging.MustGetLogger("s-ui")
 	var err error
 	var backend logging.Backend
 	var format logging.Formatter
-	ppid := os.Getppid()
 
 	backend, err = logging.NewSyslogBackend("")
 	if err != nil {
-		println(err)
+		println("Unable to use syslog: " + err.Error())
 		backend = logging.NewLogBackend(os.Stderr, "", 0)
 	}
-	if ppid > 0 && err != nil {
+	if config.IsSystemd() && err != nil {
 		format = logging.MustStringFormatter(`%{time:2006/01/02 15:04:05} %{level} - %{message}`)
 	} else {
 		format = logging.MustStringFormatter(`%{level} - %{message}`)

backend/middleware/domainValidator.go

@@ -1,6 +1,7 @@
 package middleware
 
 import (
+	"net"
 	"net/http"
 	"strings"
 
@@ -9,7 +10,10 @@ import (
 
 func DomainValidator(domain string) gin.HandlerFunc {
 	return func(c *gin.Context) {
-		host := strings.Split(c.Request.Host, ":")[0]
+		host := c.Request.Host
+		if colonIndex := strings.LastIndex(host, ":"); colonIndex != -1 {
+			host, _, _ = net.SplitHostPort(c.Request.Host)
+		}
 
 		if host != domain {
 			c.AbortWithStatus(http.StatusForbidden)

backend/service/client.go

@@ -5,7 +5,6 @@ import (
 	"s-ui/database"
 	"s-ui/database/model"
 	"s-ui/logger"
-	"strings"
 	"time"
 
 	"gorm.io/gorm"
@@ -14,18 +13,14 @@ import (
 type ClientService struct {
 }
 
-func (s *ClientService) GetAll() (string, error) {
+func (s *ClientService) GetAll() ([]model.Client, error) {
 	db := database.GetDB()
 	clients := []model.Client{}
 	err := db.Model(model.Client{}).Scan(&clients).Error
 	if err != nil {
-		return "", err
+		return nil, err
 	}
-	data, err := json.Marshal(clients)
+	return clients, nil
-	if err != nil {
-		return "", err
-	}
-	return string(data), nil
 }
 
 func (s *ClientService) Save(tx *gorm.DB, changes []model.Changes) error {
@@ -62,18 +57,20 @@ func (s *ClientService) DepleteClients() ([]string, []string, error) {
 		return nil, nil, err
 	}
 
+	dt := time.Now().Unix()
 	var users, inbounds []string
 	for _, client := range clients {
 		logger.Debug("Client ", client.Name, " is going to be disabled")
 		users = append(users, client.Name)
-		userInbounds := strings.Split(client.Inbounds, ",")
+		var userInbounds []string
+		json.Unmarshal(client.Inbounds, &userInbounds)
 		inbounds = append(inbounds, userInbounds...)
 		changes = append(changes, model.Changes{
-			DateTime: time.Now().Unix(),
+			DateTime: dt,
 			Actor:    "DepleteJob",
 			Key:      "clients",
 			Action:   "disable",
-			Obj:      json.RawMessage(client.Name),
+			Obj:      json.RawMessage("\"" + client.Name + "\""),
 		})
 	}
 
@@ -87,6 +84,7 @@ func (s *ClientService) DepleteClients() ([]string, []string, error) {
 		if err != nil {
 			return nil, nil, err
 		}
+		LastUpdate = dt
 	}
 
 	return users, inbounds, nil

backend/service/config.go

@@ -6,14 +6,20 @@ import (
 	"s-ui/config"
 	"s-ui/database"
 	"s-ui/database/model"
+	"s-ui/logger"
 	"s-ui/singbox"
+	"strconv"
 	"time"
 )
 
 var ApiAddr string
+var LastUpdate int64
+var IsSystemd bool
 
 type ConfigService struct {
 	ClientService
+	TlsService
+	InDataService
 	singbox.Controller
 	SettingService
 }
@@ -33,6 +39,7 @@ func NewConfigService() *ConfigService {
 }
 
 func (s *ConfigService) InitConfig() error {
+	IsSystemd = config.IsSystemd()
 	configPath := config.GetBinFolderPath()
 	data, err := os.ReadFile(configPath + "/config.json")
 	if err != nil {
@@ -51,27 +58,50 @@ func (s *ConfigService) InitConfig() error {
 			return err
 		}
 	}
-	return s.RefreshApiAddr(&data)
+	var singboxConfig SingBoxConfig
+	err = json.Unmarshal(data, &singboxConfig)
+	if err != nil {
+		return err
+	}
+
+	return s.RefreshApiAddr(&singboxConfig)
 }
 
-func (s *ConfigService) GetConfig() (*[]byte, error) {
+func (s *ConfigService) GetConfig() (*SingBoxConfig, error) {
 	configPath := config.GetBinFolderPath()
 	data, err := os.ReadFile(configPath + "/config.json")
 	if err != nil {
 		return nil, err
 	}
-	return &data, nil
+	singboxConfig := SingBoxConfig{}
+	err = json.Unmarshal(data, &singboxConfig)
+	if err != nil {
+		return nil, err
+	}
+	return &singboxConfig, nil
 }
 
 func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string) error {
 	var err error
-	var clientChanges, settingChanges, configChanges []model.Changes
+	var clientChanges, tlsChanges, inChanges, settingChanges, configChanges []model.Changes
 	if _, ok := changes["clients"]; ok {
 		err = json.Unmarshal([]byte(changes["clients"]), &clientChanges)
 		if err != nil {
 			return err
 		}
 	}
+	if _, ok := changes["tls"]; ok {
+		err = json.Unmarshal([]byte(changes["tls"]), &tlsChanges)
+		if err != nil {
+			return err
+		}
+	}
+	if _, ok := changes["inData"]; ok {
+		err = json.Unmarshal([]byte(changes["inData"]), &inChanges)
+		if err != nil {
+			return err
+		}
+	}
 	if _, ok := changes["settings"]; ok {
 		err = json.Unmarshal([]byte(changes["settings"]), &settingChanges)
 		if err != nil {
@@ -101,6 +131,18 @@ func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string)
 			return err
 		}
 	}
+	if len(tlsChanges) > 0 {
+		err = s.TlsService.Save(tx, tlsChanges)
+		if err != nil {
+			return err
+		}
+	}
+	if len(inChanges) > 0 {
+		err = s.InDataService.Save(tx, inChanges)
+		if err != nil {
+			return err
+		}
+	}
 	if len(settingChanges) > 0 {
 		err = s.SettingService.Save(tx, settingChanges)
 		if err != nil {
@@ -112,11 +154,7 @@ func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string)
 		if err != nil {
 			return err
 		}
-		newConfig := SingBoxConfig{}
+		newConfig := *singboxConfig
-		err = json.Unmarshal(*singboxConfig, &newConfig)
-		if err != nil {
-			return err
-		}
 		for _, change := range configChanges {
 			rawObject := change.Obj
 			switch change.Key {
@@ -146,18 +184,15 @@ func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string)
 			case "outbounds":
 				if change.Action == "edit" {
 					newConfig.Outbounds[change.Index] = rawObject
+				} else if change.Action == "del" {
+					newConfig.Outbounds = append(newConfig.Outbounds[:change.Index], newConfig.Outbounds[change.Index+1:]...)
 				} else {
 					newConfig.Outbounds = append(newConfig.Outbounds, rawObject)
 				}
 			}
 		}
 
-		// Save to config.json
+		err = s.Save(&newConfig)
-		data, err := json.MarshalIndent(newConfig, "", "  ")
-		if err != nil {
-			return err
-		}
-		err = s.Save(&data)
 		if err != nil {
 			return err
 		}
@@ -165,7 +200,11 @@ func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string)
 
 	// Log changes
 	dt := time.Now().Unix()
-	allChanges := append(append(clientChanges, settingChanges...), configChanges...)
+	allChanges := append(clientChanges, settingChanges...)
+	allChanges = append(allChanges, configChanges...)
+	allChanges = append(allChanges, tlsChanges...)
+	allChanges = append(allChanges, inChanges...)
+	if len(allChanges) > 0 {
 		for index := range allChanges {
 			allChanges[index].DateTime = dt
 			allChanges[index].Actor = loginUser
@@ -174,21 +213,32 @@ func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string)
 		if err != nil {
 			return err
 		}
+	}
+
+	LastUpdate = dt
 
 	return nil
 }
 
-func (s *ConfigService) CheckChnages(lu string) (bool, error) {
+func (s *ConfigService) CheckChanges(lu string) (bool, error) {
 	if lu == "" {
 		return true, nil
 	}
+	if LastUpdate == 0 {
 		db := database.GetDB()
 		var count int64
 		err := db.Model(model.Changes{}).Where("date_time > " + lu).Count(&count).Error
+		if err == nil {
+			LastUpdate = time.Now().Unix()
+		}
 		return count > 0, err
+	} else {
+		intLu, err := strconv.ParseInt(lu, 10, 64)
+		return LastUpdate > intLu, err
+	}
 }
 
-func (s *ConfigService) Save(data *[]byte) error {
+func (s *ConfigService) Save(singboxConfig *SingBoxConfig) error {
 	configPath := config.GetBinFolderPath()
 	_, err := os.Stat(configPath + "/config.json")
 	if os.IsNotExist(err) {
@@ -200,35 +250,36 @@ func (s *ConfigService) Save(data *[]byte) error {
 		return err
 	}
 
-	err = os.WriteFile(configPath+"/config.json", *data, 0764)
+	data, err := json.MarshalIndent(singboxConfig, "", "  ")
 	if err != nil {
 		return err
 	}
 
-	s.RefreshApiAddr(data)
+	err = os.WriteFile(configPath+"/config.json", data, 0764)
+	if err != nil {
+		return err
+	}
+
+	s.RefreshApiAddr(singboxConfig)
 	s.Controller.Restart()
 
 	return nil
 }
 
-func (s *ConfigService) RefreshApiAddr(data *[]byte) error {
+func (s *ConfigService) RefreshApiAddr(singboxConfig *SingBoxConfig) error {
 	Env_API := config.GetEnvApi()
 	if len(Env_API) > 0 {
 		ApiAddr = Env_API
 	} else {
 		var err error
-		if data == nil {
+		if singboxConfig == nil {
-			data, err = s.GetConfig()
+			singboxConfig, err = s.GetConfig()
 			if err != nil {
 				return err
 			}
-		}
 
-		singboxConfig := SingBoxConfig{}
-		err = json.Unmarshal(*data, &singboxConfig)
-		if err != nil {
-			return err
 		}
+
 		var experimental struct {
 			V2rayApi struct {
 				Listen string      `json:"listen"`
@@ -255,12 +306,7 @@ func (s *ConfigService) DepleteClients() error {
 	if err != nil {
 		return err
 	}
-	newConfig := SingBoxConfig{}
+	for inbound_index, inbound := range singboxConfig.Inbounds {
-	err = json.Unmarshal(*singboxConfig, &newConfig)
-	if err != nil {
-		return err
-	}
-	for inbound_index, inbound := range newConfig.Inbounds {
 		var inboundJson map[string]interface{}
 		json.Unmarshal(inbound, &inboundJson)
 		if s.contains(inbounds, inboundJson["tag"].(string)) {
@@ -299,13 +345,10 @@ func (s *ConfigService) DepleteClients() error {
 		if err != nil {
 			return err
 		}
-		newConfig.Inbounds[inbound_index] = modifiedInbound
+		singboxConfig.Inbounds[inbound_index] = modifiedInbound
 	}
-	modifiedConfig, err := json.MarshalIndent(newConfig, "", "  ")
+
-	if err != nil {
+	err = s.Save(singboxConfig)
-		return err
-	}
-	err = s.Save(&modifiedConfig)
 	if err != nil {
 		return err
 	}
@@ -320,3 +363,21 @@ func (s *ConfigService) contains(slice []string, item string) bool {
 	}
 	return false
 }
+
+func (s *ConfigService) GetChanges(actor string, chngKey string, count string) []model.Changes {
+	c, _ := strconv.Atoi(count)
+	whereString := "`id`>0"
+	if len(actor) > 0 {
+		whereString += " and `actor`='" + actor + "'"
+	}
+	if len(chngKey) > 0 {
+		whereString += " and `key`='" + chngKey + "'"
+	}
+	db := database.GetDB()
+	var chngs []model.Changes
+	err := db.Model(model.Changes{}).Where(whereString).Order("`id` desc").Limit(c).Scan(&chngs).Error
+	if err != nil {
+		logger.Warning(err)
+	}
+	return chngs
+}

backend/service/inData.go

@@ -0,0 +1,46 @@
+package service
+
+import (
+	"encoding/json"
+	"s-ui/database"
+	"s-ui/database/model"
+
+	"gorm.io/gorm"
+)
+
+type InDataService struct {
+}
+
+func (s *InDataService) GetAll() ([]model.InboundData, error) {
+	db := database.GetDB()
+	inData := []model.InboundData{}
+	err := db.Model(model.InboundData{}).Scan(&inData).Error
+	if err != nil {
+		return nil, err
+	}
+
+	return inData, nil
+}
+
+func (s *InDataService) Save(tx *gorm.DB, changes []model.Changes) error {
+	var err error
+	for _, change := range changes {
+		inData := model.InboundData{}
+		err = json.Unmarshal(change.Obj, &inData)
+		if err != nil {
+			return err
+		}
+		switch change.Action {
+		case "new":
+			err = tx.Create(&inData).Error
+		case "del":
+			err = tx.Where("id = ?", change.Index).Delete(model.InboundData{}).Error
+		default:
+			err = tx.Save(inData).Error
+		}
+		if err != nil {
+			return err
+		}
+	}
+	return err
+}

backend/service/server.go

@@ -1,10 +1,13 @@
 package service
 
 import (
+	"bytes"
 	"os"
+	"os/exec"
 	"runtime"
 	"s-ui/config"
 	"s-ui/logger"
+	"strconv"
 	"strings"
 
 	"github.com/shirou/gopsutil/v3/cpu"
@@ -89,12 +92,12 @@ func (s *ServerService) GetNetInfo() map[string]interface{} {
 
 func (s *ServerService) GetSingboxInfo() map[string]interface{} {
 	info := make(map[string]interface{}, 0)
-	if s.SingBoxService.IsRunning() {
+	sysStats, err := s.SingBoxService.GetSysStats()
+	if err == nil {
 		info["running"] = true
-		sysStats, _ := s.SingBoxService.GetSysStats()
 		info["stats"] = sysStats
 	} else {
-		info["running"] = false
+		info["running"] = s.SingBoxService.IsRunning()
 	}
 	return info
 }
@@ -135,3 +138,49 @@ func (s *ServerService) GetSystemInfo() map[string]interface{} {
 
 	return info
 }
+
+func (s *ServerService) GetLogs(service string, count string, level string) []string {
+	c, _ := strconv.Atoi(count)
+
+	if service == "s-ui" {
+		return logger.GetLogs(c, level)
+	}
+	var lines []string
+	var cmdArgs []string
+	if IsSystemd {
+		cmdArgs = []string{"journalctl", "-u", service, "--no-pager", "-n", count, "-p", level}
+	} else {
+		cmdArgs = []string{"tail", "/logs/" + service + ".log", "-n", count}
+	}
+	// Run the command
+	cmd := exec.Command(cmdArgs[0], cmdArgs[1:]...)
+	var out bytes.Buffer
+	cmd.Stdout = &out
+	err := cmd.Run()
+	if err != nil {
+		return []string{"Failed to get logs!", err.Error()}
+	}
+	lines = strings.Split(out.String(), "\n")
+
+	return lines
+}
+
+func (s *ServerService) GenKeypair(keyType string, options string) []string {
+	if len(keyType) == 0 {
+		return []string{"No keypair to generate"}
+	}
+	sbExec := s.GetBinaryPath()
+	cmdArgs := []string{"generate", keyType + "-keypair"}
+	if keyType == "tls" || keyType == "ech" {
+		cmdArgs = append(cmdArgs, options)
+	}
+	// Run the command
+	cmd := exec.Command(sbExec, cmdArgs...)
+	var out bytes.Buffer
+	cmd.Stdout = &out
+	err := cmd.Run()
+	if err != nil {
+		return []string{"Failed to generate keypair"}
+	}
+	return strings.Split(out.String(), "\n")
+}

backend/service/setting.go

@@ -18,12 +18,13 @@ var defaultValueMap = map[string]string{
 	"webListen":     "",
 	"webDomain":     "",
 	"webPort":       "2095",
-	"webSecret":     common.Random(32),
+	"secret":        common.Random(32),
 	"webCertFile":   "",
 	"webKeyFile":    "",
 	"webPath":       "/app/",
 	"webURI":        "",
 	"sessionMaxAge": "0",
+	"trafficAge":    "30",
 	"timeLocation":  "Asia/Tehran",
 	"subListen":     "",
 	"subPort":       "2096",
@@ -35,6 +36,7 @@ var defaultValueMap = map[string]string{
 	"subEncode":     "true",
 	"subShowInfo":   "false",
 	"subURI":        "",
+	"subJsonExt":    "",
 }
 
 type SettingService struct {
@@ -64,7 +66,7 @@ func (s *SettingService) GetAllSetting() (*map[string]string, error) {
 	}
 
 	// Due to security principles
-	delete(allSetting, "webSecret")
+	delete(allSetting, "secret")
 
 	return &allSetting, nil
 }
@@ -126,9 +128,9 @@ func (s *SettingService) getBool(key string) (bool, error) {
 	return strconv.ParseBool(str)
 }
 
-func (s *SettingService) setBool(key string, value bool) error {
+// func (s *SettingService) setBool(key string, value bool) error {
-	return s.setString(key, strconv.FormatBool(value))
+// 	return s.setString(key, strconv.FormatBool(value))
-}
+// }
 
 func (s *SettingService) getInt(key string) (int, error) {
 	str, err := s.getString(key)
@@ -190,11 +192,11 @@ func (s *SettingService) SetWebPath(webPath string) error {
 }
 
 func (s *SettingService) GetSecret() ([]byte, error) {
-	secret, err := s.getString("webSecret")
+	secret, err := s.getString("secret")
-	if secret == defaultValueMap["webSecret"] {
+	if secret == defaultValueMap["secret"] {
-		err := s.saveSetting("webSecret", secret)
+		err := s.saveSetting("secret", secret)
 		if err != nil {
-			logger.Warning("save webSecret failed:", err)
+			logger.Warning("save secret failed:", err)
 		}
 	}
 	return []byte(secret), err
@@ -204,6 +206,10 @@ func (s *SettingService) GetSessionMaxAge() (int, error) {
 	return s.getInt("sessionMaxAge")
 }
 
+func (s *SettingService) GetTrafficAge() (int, error) {
+	return s.getInt("trafficAge")
+}
+
 func (s *SettingService) GetTimeLocation() (*time.Location, error) {
 	l, err := s.getString("timeLocation")
 	if err != nil {
@@ -313,10 +319,10 @@ func (s *SettingService) Save(tx *gorm.DB, changes []model.Changes) error {
 		json.Unmarshal(change.Obj, &obj)
 
 		// Secure file existance check
-		if key == "webCertFile" ||
+		if obj != "" && (key == "webCertFile" ||
 			key == "webKeyFile" ||
 			key == "subCertFile" ||
-			key == "subKeyFile" {
+			key == "subKeyFile") {
 			err = s.fileExists(obj)
 			if err != nil {
 				return common.NewError(" -> ", obj, " is not exists")
@@ -342,6 +348,10 @@ func (s *SettingService) Save(tx *gorm.DB, changes []model.Changes) error {
 	return err
 }
 
+func (s *SettingService) GetSubJsonExt() (string, error) {
+	return s.getString("subJsonExt")
+}
+
 func (s *SettingService) fileExists(path string) error {
 	_, err := os.Stat(path)
 	return err

backend/service/sinxbox.go

@@ -26,7 +26,10 @@ func (s *SingBoxService) GetStats() error {
 }
 
 func (s *SingBoxService) GetSysStats() (*map[string]interface{}, error) {
-	s.V2rayAPI.Init(ApiAddr)
+	err := s.V2rayAPI.Init(ApiAddr)
+	if err != nil {
+		return nil, err
+	}
 	defer s.V2rayAPI.Close()
 	resp, err := s.V2rayAPI.GetSysStats()
 	if err != nil {

backend/service/stats.go

@@ -1,7 +1,6 @@
 package service
 
 import (
-	"encoding/json"
 	"s-ui/database"
 	"s-ui/database/model"
 	"time"
@@ -86,12 +85,8 @@ func (s *StatsService) GetStats(resorce string, tag string, limit int) ([]model.
 	return result, nil
 }
 
-func (s *StatsService) GetOnlines() (string, error) {
+func (s *StatsService) GetOnlines() (onlines, error) {
-	onlines, err := json.Marshal(onlineResources)
+	return *onlineResources, nil
-	if err != nil {
-		return "", err
-	}
-	return string(onlines), nil
 }
 func (s *StatsService) DelOldStats(days int) error {
 	oldTime := time.Now().AddDate(0, 0, -(days)).Unix()

backend/service/tls.go

@@ -0,0 +1,46 @@
+package service
+
+import (
+	"encoding/json"
+	"s-ui/database"
+	"s-ui/database/model"
+
+	"gorm.io/gorm"
+)
+
+type TlsService struct {
+}
+
+func (s *TlsService) GetAll() ([]model.Tls, error) {
+	db := database.GetDB()
+	tlsConfig := []model.Tls{}
+	err := db.Model(model.Tls{}).Scan(&tlsConfig).Error
+	if err != nil {
+		return nil, err
+	}
+
+	return tlsConfig, nil
+}
+
+func (s *TlsService) Save(tx *gorm.DB, changes []model.Changes) error {
+	var err error
+	for _, change := range changes {
+		tlsConfig := model.Tls{}
+		err = json.Unmarshal(change.Obj, &tlsConfig)
+		if err != nil {
+			return err
+		}
+		switch change.Action {
+		case "new":
+			err = tx.Create(&tlsConfig).Error
+		case "del":
+			err = tx.Where("id = ?", change.Index).Delete(model.Tls{}).Error
+		default:
+			err = tx.Save(tlsConfig).Error
+		}
+		if err != nil {
+			return err
+		}
+	}
+	return err
+}

backend/singbox/v2rayApi.go

@@ -10,6 +10,7 @@ import (
 
 	statsService "github.com/v2fly/v2ray-core/v5/app/stats/command"
 	"google.golang.org/grpc"
+	"google.golang.org/grpc/credentials/insecure"
 )
 
 type V2rayAPI struct {
@@ -22,7 +23,7 @@ func (v *V2rayAPI) Init(ApiAddr string) (err error) {
 	if len(ApiAddr) == 0 {
 		return common.NewError("The api address is wrong: ", ApiAddr)
 	}
-	v.grpcClient, err = grpc.Dial(ApiAddr, grpc.WithInsecure())
+	v.grpcClient, err = grpc.NewClient(ApiAddr, grpc.WithTransportCredentials(insecure.NewCredentials()))
 	if err != nil {
 		return err
 	}

backend/sub/jsonService.go

@@ -0,0 +1,267 @@
+package sub
+
+import (
+	"encoding/json"
+	"fmt"
+	"s-ui/database"
+	"s-ui/database/model"
+	"s-ui/service"
+	"s-ui/util"
+)
+
+const defaultJson = `
+{
+  "inbounds": [
+    {
+      "type": "tun",
+      "address": [
+				"172.19.0.1/30",
+				"fdfe:dcba:9876::1/126"
+			],
+      "mtu": 9000,
+      "auto_route": true,
+      "strict_route": false,
+      "sniff": true,
+      "endpoint_independent_nat": false,
+      "stack": "system",
+      "platform": {
+        "http_proxy": {
+          "enabled": true,
+          "server": "127.0.0.1",
+          "server_port": 2080
+        }
+      }
+    },
+    {
+      "type": "mixed",
+      "listen": "127.0.0.1",
+      "listen_port": 2080,
+      "sniff": true,
+      "users": []
+    }
+  ]
+}
+`
+
+type JsonService struct {
+	service.SettingService
+	LinkService
+}
+
+func (j *JsonService) GetJson(subId string, format string) (*string, error) {
+	var jsonConfig map[string]interface{}
+
+	client, inDatas, err := j.getData(subId)
+	if err != nil {
+		return nil, err
+	}
+
+	outbounds, outTags, err := j.getOutbounds(client.Config, inDatas)
+	if err != nil {
+		return nil, err
+	}
+
+	links := j.LinkService.GetLinks(&client.Links, "external", "")
+	for index, link := range links {
+		json, tag, err := util.GetOutbound(link, index)
+		if err == nil && len(tag) > 0 {
+			*outbounds = append(*outbounds, *json)
+			*outTags = append(*outTags, tag)
+		}
+	}
+
+	j.addDefaultOutbounds(outbounds, outTags)
+
+	err = json.Unmarshal([]byte(defaultJson), &jsonConfig)
+	if err != nil {
+		return nil, err
+	}
+
+	jsonConfig["outbounds"] = outbounds
+
+	// Add other objects from settings
+	j.addOthers(&jsonConfig)
+
+	result, _ := json.MarshalIndent(jsonConfig, "", "  ")
+	resultStr := string(result)
+	return &resultStr, nil
+}
+
+func (j *JsonService) getData(subId string) (*model.Client, *[]model.InboundData, error) {
+	db := database.GetDB()
+	client := &model.Client{}
+	err := db.Model(model.Client{}).Where("enable = true and name = ?", subId).First(client).Error
+	if err != nil {
+		return nil, nil, err
+	}
+	var inbounds []string
+	err = json.Unmarshal(client.Inbounds, &inbounds)
+	if err != nil {
+		return nil, nil, err
+	}
+	inDatas := &[]model.InboundData{}
+	err = db.Model(model.InboundData{}).Where("tag in ?", inbounds).Find(&inDatas).Error
+	if err != nil {
+		return nil, nil, err
+	}
+	return client, inDatas, nil
+}
+
+func (j *JsonService) getOutbounds(clientConfig json.RawMessage, inDatas *[]model.InboundData) (*[]map[string]interface{}, *[]string, error) {
+	var outbounds []map[string]interface{}
+	var configs map[string]interface{}
+	var outTags []string
+
+	err := json.Unmarshal(clientConfig, &configs)
+	if err != nil {
+		return nil, nil, err
+	}
+	for _, inData := range *inDatas {
+		if len(inData.OutJson) < 5 {
+			continue
+		}
+		var outbound map[string]interface{}
+		err = json.Unmarshal(inData.OutJson, &outbound)
+		if err != nil {
+			return nil, nil, err
+		}
+		protocol, _ := outbound["type"].(string)
+		config, _ := configs[protocol].(map[string]interface{})
+		for key, value := range config {
+			if key != "alterId" && key != "name" && key != "username" {
+				outbound[key] = value
+			}
+		}
+
+		var addrs []map[string]interface{}
+		err = json.Unmarshal(inData.Addrs, &addrs)
+		if err != nil {
+			return nil, nil, err
+		}
+		tag := outbound["tag"].(string)
+		if len(addrs) == 0 {
+			outTags = append(outTags, tag)
+			outbounds = append(outbounds, outbound)
+		} else {
+			for index, addr := range addrs {
+				// Copy original config
+				newOut := make(map[string]interface{}, len(outbound))
+				for key, value := range outbound {
+					newOut[key] = value
+				}
+				// Change and push copied config
+				newOut["server"], _ = addr["server"].(string)
+				port, _ := addr["server_port"].(float64)
+				newOut["server_port"] = int(port)
+
+				// Override TLS
+				newTls, overrideTls := addr["tls"].(bool)
+				if overrideTls {
+					tlsIf := map[string]interface{}{}
+					if newTls {
+						tlsIf["enabled"] = true
+						newSNI, overrideSNI := addr["server_name"].(string)
+						if overrideSNI {
+							tlsIf["server_name"] = newSNI
+						}
+						newInsecure, overrideInsecure := addr["insecure"].(bool)
+						if overrideInsecure {
+							tlsIf["insecure"] = newInsecure
+						}
+					}
+					newOut["tls"] = tlsIf
+				}
+				remark, _ := addr["remark"].(string)
+				newTag := fmt.Sprintf("%d.%s%s", index+1, tag, remark)
+				outTags = append(outTags, newTag)
+				newOut["tag"] = newTag
+				outbounds = append(outbounds, newOut)
+			}
+		}
+	}
+	return &outbounds, &outTags, nil
+}
+
+func (j *JsonService) addDefaultOutbounds(outbounds *[]map[string]interface{}, outTags *[]string) {
+	outbound := []map[string]interface{}{
+		{
+			"outbounds": append([]string{"auto", "direct"}, *outTags...),
+			"tag":       "proxy",
+			"type":      "selector",
+		},
+		{
+			"tag":       "auto",
+			"type":      "urltest",
+			"outbounds": outTags,
+			"url":       "http://www.gstatic.com/generate_204",
+			"interval":  "10m",
+			"tolerance": 50,
+		},
+		{
+			"type": "direct",
+			"tag":  "direct",
+		},
+		{
+			"type": "dns",
+			"tag":  "dns-out",
+		},
+		{
+			"type": "block",
+			"tag":  "block",
+		},
+	}
+	*outbounds = append(outbound, *outbounds...)
+}
+
+func (j *JsonService) addOthers(jsonConfig *map[string]interface{}) error {
+	rules := []interface{}{
+		map[string]interface{}{
+			"clash_mode": "Direct",
+			"outbound":   "direct",
+		},
+		map[string]interface{}{
+			"clash_mode": "Global",
+			"outbound":   "proxy",
+		},
+	}
+	route := map[string]interface{}{
+		"auto_detect_interface": true,
+		"final":                 "proxy",
+		"rules":                 rules,
+	}
+
+	othersStr, err := j.SettingService.GetSubJsonExt()
+	if err != nil {
+		return err
+	}
+	if len(othersStr) == 0 {
+		(*jsonConfig)["route"] = route
+		return nil
+	}
+	var othersJson map[string]interface{}
+	err = json.Unmarshal([]byte(othersStr), &othersJson)
+	if err != nil {
+		return err
+	}
+	if _, ok := othersJson["log"]; ok {
+		(*jsonConfig)["log"] = othersJson["log"]
+	}
+	if _, ok := othersJson["dns"]; ok {
+		(*jsonConfig)["dns"] = othersJson["dns"]
+	}
+	if _, ok := othersJson["inbounds"]; ok {
+		(*jsonConfig)["inbounds"] = othersJson["inbounds"]
+	}
+	if _, ok := othersJson["experimental"]; ok {
+		(*jsonConfig)["experimental"] = othersJson["experimental"]
+	}
+	if _, ok := othersJson["rule_set"]; ok {
+		route["rule_set"] = othersJson["rule_set"]
+	}
+	if settingRules, ok := othersJson["rules"].([]interface{}); ok {
+		route["rules"] = append(rules, settingRules...)
+	}
+	(*jsonConfig)["route"] = route
+
+	return nil
+}

backend/sub/linkService.go

@@ -0,0 +1,103 @@
+package sub
+
+import (
+	"crypto/tls"
+	"encoding/json"
+	"io"
+	"net/http"
+	"s-ui/logger"
+	"s-ui/util"
+	"strings"
+)
+
+type Link struct {
+	Type   string `json:"type"`
+	Remark string `json:"remark"`
+	Uri    string `json:"uri"`
+}
+
+type LinkService struct {
+}
+
+func (s *LinkService) GetLinks(linkJson *json.RawMessage, types string, clientInfo string) []string {
+	links := []Link{}
+	var result []string
+	err := json.Unmarshal(*linkJson, &links)
+	if err != nil {
+		return nil
+	}
+	for _, link := range links {
+		switch link.Type {
+		case "external":
+			result = append(result, link.Uri)
+		case "sub":
+			result = append(result, s.getExternalSub(link.Uri)...)
+		case "local":
+			if types == "all" {
+				result = append(result, s.addClientInfo(link.Uri, clientInfo))
+			}
+		}
+	}
+	return result
+}
+
+func (s *LinkService) addClientInfo(uri string, clientInfo string) string {
+	if len(clientInfo) == 0 {
+		return uri
+	}
+	protocol := strings.Split(uri, "://")
+	if len(protocol) < 2 {
+		return uri
+	}
+	switch protocol[0] {
+	case "vmess":
+		var vmessJson map[string]interface{}
+		config, err := util.B64StrToByte(protocol[1])
+		if err != nil {
+			logger.Warning("sub: Error decoding vmess content:", err)
+			return uri
+		}
+		err = json.Unmarshal(config, &vmessJson)
+		if err != nil {
+			logger.Warning("sub: Error decoding vmess content:", err)
+			return uri
+		}
+		vmessJson["ps"] = vmessJson["ps"].(string) + clientInfo
+		result, err := json.MarshalIndent(vmessJson, "", "  ")
+		if err != nil {
+			logger.Warning("sub: Error decoding vmess + clientInfo content:", err)
+			return uri
+		}
+		return "vmess://" + util.ByteToB64Str(result)
+	default:
+		return uri + clientInfo
+	}
+}
+
+func (s *LinkService) getExternalSub(url string) []string {
+	tr := &http.Transport{
+		TLSClientConfig: &tls.Config{InsecureSkipVerify: true},
+	}
+
+	client := &http.Client{Transport: tr}
+
+	// Make the HTTP request
+	response, err := client.Get(url)
+	if err != nil {
+		logger.Warning("sub: Error making HTTP request:", err)
+		return nil
+	}
+	defer response.Body.Close()
+
+	// Read the response body
+	body, err := io.ReadAll(response.Body)
+	if err != nil {
+		logger.Warning("sub: Error reading response body:", err)
+		return nil
+	}
+
+	// Convert if the content is Base64 encoded
+	links := util.StrOrBase64Encoded(string(body))
+	return strings.Split(links, "\n")
+
+}

backend/sub/subHandler.go

@@ -10,6 +10,7 @@ import (
 type SubHandler struct {
 	service.SettingService
 	SubService
+	JsonService
 }
 
 func NewSubHandler(g *gin.RouterGroup) {
@@ -23,6 +24,16 @@ func (s *SubHandler) initRouter(g *gin.RouterGroup) {
 
 func (s *SubHandler) subs(c *gin.Context) {
 	subId := c.Param("subid")
+	format, isFormat := c.GetQuery("format")
+	if isFormat {
+		result, err := s.JsonService.GetJson(subId, format)
+		if err != nil || result == nil {
+			logger.Error(err)
+			c.String(400, "Error!")
+		} else {
+			c.String(200, *result)
+		}
+	} else {
 		result, headers, err := s.SubService.GetSubs(subId)
 		if err != nil || result == nil {
 			logger.Error(err)
@@ -36,4 +47,5 @@ func (s *SubHandler) subs(c *gin.Context) {
 
 			c.String(200, *result)
 		}
+	}
 }

backend/sub/subService.go

@@ -1,15 +1,10 @@
 package sub
 
 import (
-	"crypto/tls"
 	"encoding/base64"
-	"encoding/json"
 	"fmt"
-	"io"
-	"net/http"
 	"s-ui/database"
 	"s-ui/database/model"
-	"s-ui/logger"
 	"s-ui/service"
 	"strings"
 	"time"
@@ -17,12 +12,7 @@ import (
 
 type SubService struct {
 	service.SettingService
-}
+	LinkService
-
-type Link struct {
-	Type   string `json:"type"`
-	Remark string `json:"remark"`
-	Uri    string `json:"uri"`
 }
 
 func (s *SubService) GetSubs(subId string) (*string, []string, error) {
@@ -35,29 +25,14 @@ func (s *SubService) GetSubs(subId string) (*string, []string, error) {
 		return nil, nil, err
 	}
 
-	links := []Link{}
-	err = json.Unmarshal([]byte(client.Links), &links)
-	if err != nil {
-		return nil, nil, err
-	}
-
 	clientInfo := ""
 	subShowInfo, _ := s.SettingService.GetSubShowInfo()
 	if subShowInfo {
 		clientInfo = s.getClientInfo(client)
 	}
 
-	var result string
+	linksArray := s.LinkService.GetLinks(&client.Links, "all", clientInfo)
-	for _, link := range links {
+	result := strings.Join(linksArray, "\n")
-		switch link.Type {
-		case "external":
-			result += fmt.Sprintln(link.Uri)
-		case "sub":
-			result += s.getExternalSub(link.Uri)
-		case "local":
-			result += fmt.Sprintln(s.addClientInfo(link.Uri, clientInfo))
-		}
-	}
 
 	var headers []string
 	updateInterval, _ := s.SettingService.GetSubUpdates()
@@ -90,80 +65,6 @@ func (s *SubService) getClientInfo(c *model.Client) string {
 	}
 }
 
-func (s *SubService) addClientInfo(uri string, clientInfo string) string {
-	protocol := strings.Split(uri, "://")
-	if len(protocol) < 2 {
-		return uri
-	}
-	switch protocol[0] {
-	case "vmess":
-		var vmessJson map[string]interface{}
-		config, err := base64.StdEncoding.DecodeString(protocol[1])
-		if err != nil {
-			logger.Warning("sub: Error decoding vmess content:", err)
-			return uri
-		}
-		err = json.Unmarshal(config, &vmessJson)
-		if err != nil {
-			logger.Warning("sub: Error decoding vmess content:", err)
-			return uri
-		}
-		vmessJson["ps"] = vmessJson["ps"].(string) + clientInfo
-		result, err := json.MarshalIndent(vmessJson, "", "  ")
-		if err != nil {
-			logger.Warning("sub: Error decoding vmess + clientInfo content:", err)
-			return uri
-		}
-		return "vmess://" + base64.StdEncoding.EncodeToString(result)
-	default:
-		return uri + clientInfo
-	}
-}
-
-func (s *SubService) getExternalSub(url string) string {
-	tr := &http.Transport{
-		TLSClientConfig: &tls.Config{InsecureSkipVerify: true},
-	}
-
-	client := &http.Client{Transport: tr}
-
-	// Make the HTTP request
-	response, err := client.Get(url)
-	if err != nil {
-		logger.Warning("sub: Error making HTTP request:", err)
-		return ""
-	}
-	defer response.Body.Close()
-
-	// Read the response body
-	body, err := io.ReadAll(response.Body)
-	if err != nil {
-		logger.Warning("sub: Error reading response body:", err)
-		return ""
-	}
-
-	// Check if the content is Base64 encoded
-	isBase64 := s.isBase64Encoded(string(body))
-	if isBase64 {
-		// Decode Base64 content
-		decodedText, err := base64.StdEncoding.DecodeString(string(body))
-		if err != nil {
-			logger.Warning("sub: Error decoding Base64 content:", err)
-			return ""
-		}
-
-		return string(decodedText)
-	} else {
-		return string(body)
-	}
-}
-
-// Function to check if a string is Base64 encoded
-func (s *SubService) isBase64Encoded(str string) bool {
-	_, err := base64.StdEncoding.DecodeString(str)
-	return err == nil
-}
-
 func (s *SubService) formatTraffic(trafficBytes int64) string {
 	if trafficBytes < 1024 {
 		return fmt.Sprintf("%.2fB", float64(trafficBytes)/float64(1))

backend/util/base64.go

@@ -0,0 +1,20 @@
+package util
+
+import "encoding/base64"
+
+// Function to return decoded bytes if a string is Base64 encoded
+func StrOrBase64Encoded(str string) string {
+	decoded, err := base64.StdEncoding.DecodeString(str)
+	if err == nil {
+		return string(decoded)
+	}
+	return str
+}
+
+func B64StrToByte(str string) ([]byte, error) {
+	return base64.StdEncoding.DecodeString(str)
+}
+
+func ByteToB64Str(b []byte) string {
+	return base64.StdEncoding.EncodeToString(b)
+}

backend/util/common/random.go

@@ -1,13 +1,26 @@
 package common
 
-import "math/rand"
+import (
+	"math/rand"
+	"time"
+)
 
-var allSeq [62]rune
+var (
+	allSeq []rune
+	rnd    = rand.New(rand.NewSource(time.Now().UnixNano()))
+)
+
+func init() {
+	chars := "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+	for _, char := range chars {
+		allSeq = append(allSeq, char)
+	}
+}
 
 func Random(n int) string {
 	runes := make([]rune, n)
 	for i := 0; i < n; i++ {
-		runes[i] = allSeq[rand.Intn(len(allSeq))]
+		runes[i] = allSeq[rnd.Intn(len(allSeq))]
 	}
 	return string(runes)
 }

backend/util/linkToJson.go

@@ -0,0 +1,473 @@
+package util
+
+import (
+	"encoding/json"
+	"fmt"
+	"net"
+	"net/url"
+	"s-ui/util/common"
+	"strconv"
+	"strings"
+)
+
+func GetOutbound(uri string, i int) (*map[string]interface{}, string, error) {
+	u, err := url.Parse(uri)
+	if err == nil {
+		switch u.Scheme {
+		case "vmess":
+			return vmess(u.Host, i)
+		case "vless":
+			return vless(u, i)
+		case "trojan":
+			return trojan(u, i)
+		case "hy", "hysteria":
+			return hy(u, i)
+		case "hy2", "hysteria2":
+			return hy2(u, i)
+		case "tuic":
+			return tuic(u, i)
+		case "ss", "shadowsocks":
+			return ss(u, i)
+		}
+	}
+	return nil, "", common.NewError("Unsupported link format")
+}
+
+func vmess(data string, i int) (*map[string]interface{}, string, error) {
+	dataByte, err := B64StrToByte(data)
+	if err != nil {
+		return nil, "", err
+	}
+	var dataJson map[string]interface{}
+	err = json.Unmarshal(dataByte, &dataJson)
+	if err != nil {
+		return nil, "", err
+	}
+	transport := map[string]interface{}{}
+	tp_net, _ := dataJson["net"].(string)
+	tp_type, _ := dataJson["type"].(string)
+	tp_host, _ := dataJson["host"].(string)
+	tp_path, _ := dataJson["path"].(string)
+	switch strings.ToLower(tp_net) {
+	case "tcp", "":
+		if tp_type == "http" {
+			transport["type"] = tp_type
+			if len(tp_host) > 0 {
+				transport["host"] = strings.Split(tp_host, ",")
+			}
+			transport["path"] = tp_path
+		}
+	case "http", "h2":
+		transport["type"] = "http"
+		if len(tp_host) > 0 {
+			transport["host"] = strings.Split(tp_host, ",")
+		}
+		transport["path"] = tp_path
+	case "ws":
+		transport["type"] = tp_net
+		transport["path"] = tp_path
+		transport["early_data_header_name"] = "Sec-WebSocket-Protocol"
+		if len(tp_host) > 0 {
+			transport["headers"] = map[string]interface{}{
+				"Host": tp_host,
+			}
+		}
+	case "quic":
+		transport["type"] = tp_net
+	case "grpc":
+		transport["type"] = tp_net
+		transport["service_name"] = tp_path
+	case "httpupgrade":
+		transport["type"] = tp_net
+		transport["path"] = tp_path
+		transport["host"] = tp_host
+	default:
+		return nil, "", common.NewError("Invalid vmess")
+	}
+	tls := map[string]interface{}{}
+	vmess_tls, _ := dataJson["tls"].(string)
+	if vmess_tls == "tls" {
+		tls["enabled"] = true
+		tls_sni, _ := dataJson["sni"].(string)
+		tls_alpn, _ := dataJson["alpn"].(string)
+		_, tls_insecure := dataJson["allowInsecure"]
+		tls_fp, _ := dataJson["fp"].(string)
+		if len(tls_sni) > 0 {
+			tls["server_name"] = tls_sni
+		}
+		if len(tls_alpn) > 0 {
+			tls["alpn"] = strings.Split(tls_alpn, ",")
+		}
+		if tls_insecure {
+			tls["insecure"] = true
+		}
+		if len(tls_fp) > 0 {
+			tls["utls"] = map[string]interface{}{
+				"enabled":     true,
+				"fingerprint": tls_fp,
+			}
+		}
+	}
+	tag, _ := dataJson["ps"].(string)
+	if i > 0 {
+		tag = fmt.Sprintf("%d.%s", i, tag)
+	}
+	alter_id, ok := dataJson["aid"].(int)
+	if !ok {
+		alter_id = 0
+	}
+	vmess := map[string]interface{}{
+		"type":        "vmess",
+		"tag":         tag,
+		"server":      dataJson["add"],
+		"server_port": dataJson["port"],
+		"uuid":        dataJson["id"],
+		"security":    "auto",
+		"alter_id":    alter_id,
+		"tls":         tls,
+		"transport":   transport,
+	}
+	return &vmess, tag, err
+}
+
+func vless(u *url.URL, i int) (*map[string]interface{}, string, error) {
+	query, _ := url.ParseQuery(u.RawQuery)
+	security := query.Get("security")
+	host, portStr, _ := net.SplitHostPort(u.Host)
+	port := 80
+	if len(portStr) > 0 {
+		port, _ = strconv.Atoi(portStr)
+	} else {
+		if security == "tls" || security == "reality" {
+			port = 443
+		}
+	}
+	tp_type := query.Get("type")
+	tag := u.Fragment
+	if i > 0 {
+		tag = fmt.Sprintf("%d.%s", i, u.Fragment)
+	}
+	vless := map[string]interface{}{
+		"type":        "vless",
+		"tag":         tag,
+		"server":      host,
+		"server_port": port,
+		"uuid":        u.User.Username(),
+		"flow":        query.Get("flow"),
+		"tls":         getTls(security, &query),
+		"transport":   getTransport(tp_type, &query),
+	}
+	return &vless, tag, nil
+}
+
+func trojan(u *url.URL, i int) (*map[string]interface{}, string, error) {
+	query, _ := url.ParseQuery(u.RawQuery)
+	security := query.Get("security")
+	host, portStr, _ := net.SplitHostPort(u.Host)
+	port := 80
+	if len(portStr) > 0 {
+		port, _ = strconv.Atoi(portStr)
+	} else {
+		if security == "tls" || security == "reality" {
+			port = 443
+		}
+	}
+	tp_type := query.Get("type")
+	tag := u.Fragment
+	if i > 0 {
+		tag = fmt.Sprintf("%d.%s", i, u.Fragment)
+	}
+	trojan := map[string]interface{}{
+		"type":        "trojan",
+		"tag":         tag,
+		"server":      host,
+		"server_port": port,
+		"password":    u.User.Username(),
+		"tls":         getTls(security, &query),
+		"transport":   getTransport(tp_type, &query),
+	}
+	return &trojan, tag, nil
+}
+
+func hy(u *url.URL, i int) (*map[string]interface{}, string, error) {
+	query, _ := url.ParseQuery(u.RawQuery)
+	host, portStr, _ := net.SplitHostPort(u.Host)
+	port := 443
+	if len(portStr) > 0 {
+		port, _ = strconv.Atoi(portStr)
+	}
+
+	tls := map[string]interface{}{
+		"enabled":     true,
+		"server_name": query.Get("peer"),
+	}
+	alpn := query.Get("alpn")
+	insecure := query.Get("insecure")
+	if len(alpn) > 0 {
+		tls["alpn"] = strings.Split(alpn, ",")
+	}
+	if insecure == "1" || insecure == "true" {
+		tls["insecure"] = true
+	}
+
+	tag := u.Fragment
+	if i > 0 {
+		tag = fmt.Sprintf("%d.%s", i, u.Fragment)
+	}
+	hy := map[string]interface{}{
+		"type":        "hysteria",
+		"tag":         tag,
+		"server":      host,
+		"server_port": port,
+		"obfs":        query.Get("obfsParam"),
+		"auth_str":    query.Get("auth"),
+		"tls":         tls,
+	}
+	down, _ := strconv.Atoi(query.Get("downmbps"))
+	up, _ := strconv.Atoi(query.Get("upmbps"))
+	recv_window_conn, _ := strconv.Atoi(query.Get("recv_window_conn"))
+	recv_window, _ := strconv.Atoi(query.Get("recv_window"))
+	if down > 0 {
+		hy["down_mbps"] = down
+	}
+	if up > 0 {
+		hy["up_mbps"] = up
+	}
+	if recv_window_conn > 0 {
+		hy["recv_window_conn"] = recv_window_conn
+	}
+	if recv_window > 0 {
+		hy["recv_window"] = recv_window
+	}
+	return &hy, tag, nil
+}
+
+func hy2(u *url.URL, i int) (*map[string]interface{}, string, error) {
+	query, _ := url.ParseQuery(u.RawQuery)
+	host, portStr, _ := net.SplitHostPort(u.Host)
+	port := 443
+	if len(portStr) > 0 {
+		port, _ = strconv.Atoi(portStr)
+	}
+
+	tls := map[string]interface{}{
+		"enabled":     true,
+		"server_name": query.Get("sni"),
+	}
+	alpn := query.Get("alpn")
+	insecure := query.Get("insecure")
+	if len(alpn) > 0 {
+		tls["alpn"] = strings.Split(alpn, ",")
+	}
+	if insecure == "1" || insecure == "true" {
+		tls["insecure"] = true
+	}
+
+	tag := u.Fragment
+	if i > 0 {
+		tag = fmt.Sprintf("%d.%s", i, u.Fragment)
+	}
+	hy2 := map[string]interface{}{
+		"type":        "hysteria2",
+		"tag":         tag,
+		"server":      host,
+		"server_port": port,
+		"password":    u.User.Username(),
+		"tls":         tls,
+	}
+	down, _ := strconv.Atoi(query.Get("downmbps"))
+	up, _ := strconv.Atoi(query.Get("upmbps"))
+	obfs := query.Get("obfs")
+	if down > 0 {
+		hy2["down_mbps"] = down
+	}
+	if up > 0 {
+		hy2["up_mbps"] = up
+	}
+	if obfs == "salamander" {
+		hy2["obfs"] = map[string]interface{}{
+			"type":     "salamander",
+			"password": query.Get("obfs-password"),
+		}
+	}
+	return &hy2, tag, nil
+}
+
+func tuic(u *url.URL, i int) (*map[string]interface{}, string, error) {
+	query, _ := url.ParseQuery(u.RawQuery)
+	host, portStr, _ := net.SplitHostPort(u.Host)
+	port := 443
+	if len(portStr) > 0 {
+		port, _ = strconv.Atoi(portStr)
+	}
+
+	tls := map[string]interface{}{
+		"enabled":     true,
+		"server_name": query.Get("sni"),
+	}
+	alpn := query.Get("alpn")
+	insecure := query.Get("allow_insecure")
+	disable_sni := query.Get("disable_sni")
+	if len(alpn) > 0 {
+		tls["alpn"] = strings.Split(alpn, ",")
+	}
+	if insecure == "1" || insecure == "true" {
+		tls["insecure"] = true
+	}
+	if disable_sni == "1" || disable_sni == "true" {
+		tls["disable_sni"] = true
+	}
+
+	tag := u.Fragment
+	if i > 0 {
+		tag = fmt.Sprintf("%d.%s", i, u.Fragment)
+	}
+	password, _ := u.User.Password()
+	tuic := map[string]interface{}{
+		"type":               "tuic",
+		"tag":                tag,
+		"server":             host,
+		"server_port":        port,
+		"uuid":               u.User.Username(),
+		"password":           password,
+		"congestion_control": query.Get("congestion_control"),
+		"udp_relay_mode":     query.Get("udp_relay_mode"),
+		"tls":                tls,
+	}
+	return &tuic, tag, nil
+}
+
+func ss(u *url.URL, i int) (*map[string]interface{}, string, error) {
+	query, _ := url.ParseQuery(u.RawQuery)
+	host, portStr, _ := net.SplitHostPort(u.Host)
+	port := 443
+	if len(portStr) > 0 {
+		port, _ = strconv.Atoi(portStr)
+	}
+	method := u.User.Username()
+	password, ok := u.User.Password()
+	if !ok {
+		decrypted := StrOrBase64Encoded(method)
+		decrypted_arr := strings.Split(decrypted, ":")
+		if len(decrypted_arr) > 1 {
+			method = decrypted_arr[0]
+			password = strings.Join(decrypted_arr[1:], ":")
+		} else {
+			return nil, "", common.NewError("Unsupported shadowsocks")
+		}
+	}
+
+	tag := u.Fragment
+	if i > 0 {
+		tag = fmt.Sprintf("%d.%s", i, u.Fragment)
+	}
+	ss := map[string]interface{}{
+		"type":        "shadowsocks",
+		"tag":         tag,
+		"server":      host,
+		"server_port": port,
+		"method":      method,
+		"password":    password,
+	}
+
+	v2ray_type := query.Get("type")
+	if len(v2ray_type) > 0 {
+		pl_arr := []string{}
+		host_header := query.Get("host")
+		if query.Get("security") == "tls" {
+			pl_arr = append(pl_arr, "tls")
+		}
+		if v2ray_type == "quic" {
+			pl_arr = append(pl_arr, "mode=quic")
+		}
+		if len(host_header) > 0 {
+			pl_arr = append(pl_arr, "host="+host_header)
+		}
+		ss["plugin"] = "v2ray-plugin"
+		ss["plugin_opts"] = strings.Join(pl_arr, ";")
+	}
+	plugin := query.Get("plugin")
+	if len(plugin) > 0 {
+		pl_arr := strings.Split(plugin, ";")
+		if len(pl_arr) > 0 {
+			ss["plugin"] = pl_arr[0]
+			ss["plugin_opts"] = strings.Join(pl_arr[1:], ";")
+		}
+	}
+	return &ss, tag, nil
+}
+
+func getTransport(tp_type string, q *url.Values) *map[string]interface{} {
+	transport := map[string]interface{}{}
+	tp_host := q.Get("host")
+	tp_path := q.Get("path")
+	switch strings.ToLower(tp_type) {
+	case "tcp", "":
+		if q.Get("headerType") == "http" {
+			transport["type"] = "http"
+			if len(tp_host) > 0 {
+				transport["host"] = strings.Split(tp_host, ",")
+			}
+			transport["path"] = tp_path
+		}
+	case "http", "h2":
+		transport["type"] = "http"
+		if len(tp_host) > 0 {
+			transport["host"] = strings.Split(tp_host, ",")
+		}
+		transport["path"] = tp_path
+	case "ws":
+		transport["type"] = "ws"
+		transport["path"] = tp_path
+		if len(tp_host) > 0 {
+			transport["headers"] = map[string]interface{}{
+				"Host": tp_host,
+			}
+		}
+	case "quic":
+		transport["type"] = "quic"
+	case "grpc":
+		transport["type"] = "grpc"
+		transport["service_name"] = q.Get("serviceName")
+	case "httpupgrade":
+		transport["type"] = "httpupgrade"
+		transport["path"] = tp_path
+		transport["host"] = tp_host
+	}
+	return &transport
+}
+
+func getTls(security string, q *url.Values) *map[string]interface{} {
+	tls := map[string]interface{}{}
+	tls_fp := q.Get("fp")
+	tls_sni := q.Get("sni")
+	tls_insecure := q.Get("allowInsecure")
+	tls_alpn := q.Get("alpn")
+	switch security {
+	case "tls":
+		tls["enabled"] = true
+	case "reality":
+		tls["enabled"] = true
+		tls["reality"] = map[string]interface{}{
+			"enabled":    true,
+			"public_key": q.Get("pbk"),
+			"short_id":   q.Get("sid"),
+		}
+	}
+	if len(tls_sni) > 0 {
+		tls["server_name"] = tls_sni
+	}
+	if len(tls_alpn) > 0 {
+		tls["alpn"] = strings.Split(tls_alpn, ",")
+	}
+	if tls_insecure == "1" || tls_insecure == "true" {
+		tls["insecure"] = true
+	}
+	if len(tls_fp) > 0 {
+		tls["utls"] = map[string]interface{}{
+			"enabled":     true,
+			"fingerprint": tls_fp,
+		}
+	}
+	return &tls
+}

backend/web/web.go

@@ -18,9 +18,9 @@ import (
 	"strconv"
 	"strings"
 
-	sessions "github.com/Calidity/gin-sessions"
-	"github.com/Calidity/gin-sessions/cookie"
 	"github.com/gin-contrib/gzip"
+	"github.com/gin-contrib/sessions"
+	"github.com/gin-contrib/sessions/cookie"
 	"github.com/gin-gonic/gin"
 )
 

core/Dockerfile

@@ -0,0 +1,28 @@
+FROM --platform=$BUILDPLATFORM golang:1.23-alpine AS singbox-builder
+LABEL maintainer="Alireza <alireza7@gmail.com>"
+WORKDIR /app
+ARG TARGETOS TARGETARCH
+ARG SINGBOX_VER=v1.10.1
+ARG SINGBOX_TAGS="with_quic,with_grpc,with_wireguard,with_ech,with_utls,with_reality_server,with_acme,with_v2ray_api,with_clash_api,with_gvisor"
+ARG GOPROXY=""
+ENV GOPROXY ${GOPROXY}
+ENV CGO_ENABLED=0
+ENV GOOS=$TARGETOS
+ENV GOARCH=$TARGETARCH
+RUN apk --no-cache --update add build-base gcc wget unzip git
+RUN set -ex \
+    && git clone --depth 1 --branch $SINGBOX_VER https://github.com/SagerNet/sing-box.git \
+    && cd sing-box \
+    && go build -v -trimpath -tags \
+        $SINGBOX_TAGS \
+        -ldflags "-X \"github.com/sagernet/sing-box/constant.Version=$SINGBOX_VER\" -s -w -buildid=" \
+        ./cmd/sing-box
+
+FROM --platform=$TARGETPLATFORM alpine
+LABEL maintainer="Alireza <alireza7@gmail.com>"
+ENV TZ=Asia/Tehran
+WORKDIR /app
+RUN apk add  --no-cache --update ca-certificates tzdata bash
+COPY --from=singbox-builder /app/sing-box/sing-box .
+COPY runSingbox.sh .
+ENTRYPOINT [ "./runSingbox.sh" ]

core/runSingbox.sh

@@ -20,7 +20,17 @@ terminateSingbox()
   fi
 }
 
+reloadSingbox()
+{
+  if kill -0 $tokill > /dev/null 2>&1; then
+    kill -HUP $tokill
+  else
+    runSingbox
+  fi
+}
+
 trap terminateSingbox SIGINT SIGTERM SIGKILL
+trap reloadSingbox SIGHUP
 
 runSingbox
 
@@ -37,9 +47,16 @@ do
                 terminateSingbox
                 ;;
             "restart")
-                terminateSingbox
+                reloadSingbox
-                runSingbox
                 ;;
         esac
     fi
+
+    # Check if sin-box crashed
+    if ! kill -0 $tokill > /dev/null 2>&1; then
+        if [ "$signal" != "stop" ]; then
+            echo "Sing-Box with PID $tokill crashed. Breaking the loop..."
+            exit 1
+        fi
+    fi
 done

docker-compose.yml

@@ -0,0 +1,82 @@
+---
+services:
+  s-ui:
+    image: alireza7/s-ui
+    container_name: s-ui
+    hostname: "S-UI docker"
+    volumes:
+      - "singbox:/app/bin"
+      - "./db:/app/db"
+      - "./cert:/app/cert"
+      - "logs:/logs"
+    environment:
+      SINGBOX_API: "sing-box:1080"
+      SUI_DB_FOLDER: "db"
+    tty: true
+    restart: unless-stopped
+    ports:
+      - "2095:2095"
+      - "2096:2096"
+    networks:
+      - s-ui
+    links:
+      - syslog
+    logging:
+      driver: syslog
+      options:
+        tag: "s-ui"
+        syslog-address: "udp://127.0.0.1:1514"
+    entrypoint: "./entrypoint.sh"
+    depends_on:
+      - syslog
+
+  sing-box:
+    image: alireza7/s-ui-singbox
+    container_name: sing-box
+    volumes:
+      - "singbox:/app/"
+      - "./cert:/cert"
+    networks:
+      - s-ui
+    ports:
+      - "443:443"
+      - "1443:1443"
+      - "2443:2443"
+      - "3443:3443"
+    restart: unless-stopped
+    links:
+      - syslog
+    logging:
+      driver: syslog
+      options:
+        tag: "sing-box"
+        syslog-address: "udp://127.0.0.1:1514"
+    depends_on:
+      - s-ui
+      - syslog
+
+  syslog:
+    image: rsyslog/syslog_appliance_alpine
+    container_name: syslog
+    volumes:
+      - "logs:/logs"
+    networks:
+      - s-ui
+    ports:
+      - "127.0.0.1:1514:1514/udp"
+    restart: unless-stopped
+    environment:
+      - RSYSLOG_CONF_GLOBAL_CONF=template(name="RemoteLogs" type="string" string="/logs/%programname%.log")
+      - RSYSLOG_CONF_INPUT_UDP="input(type=\"imudp\" port=\"1514\" ruleset=\"remote\")"
+      - RSYSLOG_CONF_RULESET_REMOTE="ruleset(name=\"remote\") { action(type=\"omfile\" dynaFile=\"RemoteLogs\") }"
+    command: >
+      sh -c 'touch /config/container_config'
+
+networks:
+  s-ui:
+    driver: bridge
+
+volumes:
+  logs:
+  singbox:
+  

entrypoint.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+./sui migrate
+./sui

frontend/package.json

@@ -1,42 +1,42 @@
 {
   "name": "frontend",
-  "version": "0.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@mdi/font": "7.0.96",
+    "@mdi/font": "7.4.47",
-    "axios": "^1.6.5",
+    "axios": "^1.7.4",
-    "chart.js": "^4.4.1",
+    "chart.js": "^4.4.3",
     "clipboard": "^2.0.11",
-    "core-js": "^3.29.0",
+    "core-js": "^3.37.1",
+    "moment": "^2.30.1",
+    "notivue": "^2.4.4",
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.1",
-    "roboto-fontface": "*",
+    "roboto-fontface": "^0.10.0",
-    "vue": "^3.2.0",
+    "vue": "^3.4.31",
-    "vue-chartjs": "^5.3.0",
+    "vue-chartjs": "^5.3.1",
-    "vue-i18n": "^9.8.0",
+    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.0.0",
+    "vue-router": "^4.4.0",
     "vue3-persian-datetime-picker": "^1.2.2",
-    "vuetify": "^3.0.0"
+    "vuetify": "^3.6.10"
   },
   "devDependencies": {
-    "@babel/types": "^7.21.4",
+    "@babel/types": "^7.24.7",
-    "@types/node": "^18.15.0",
+    "@types/node": "^20.14.9",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-typescript": "^11.0.0",
+    "eslint-plugin-vue": "^9.26.0",
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.3.0",
     "material-design-icons-iconfont": "^6.7.0",
-    "sass": "^1.60.0",
+    "sass": "1.77.6",
-    "typescript": "^5.0.0",
+    "typescript": "^5.5.2",
-    "unplugin-fonts": "^1.0.3",
+    "unplugin-fonts": "^1.1.1",
-    "vite": "^4.2.0",
+    "vite": "^5.4.6",
-    "vite-plugin-vuetify": "^1.0.0",
+    "vite-plugin-vuetify": "^2.0.3",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^2.0.22"
   }
 }

frontend/src/components/Addr.vue

@@ -0,0 +1,114 @@
+<template>
+  <v-row>
+    <v-col cols="12" sm="6" md="4">
+      <v-text-field
+      :label="$t('out.addr')"
+      hide-details
+      required
+      v-model="addr.server">
+      </v-text-field>
+    </v-col>
+    <v-col cols="12" sm="6" md="4">
+      <v-text-field
+      :label="$t('out.port')"
+      hide-details
+      type="number"
+      required
+      v-model.number="addr.server_port"></v-text-field>
+    </v-col>
+    <v-col cols="12" sm="6" md="4" v-if="optionRemark">
+      <v-text-field
+      :label="$t('in.remark')"
+      hide-details
+      v-model="addr.remark">
+      </v-text-field>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col cols="12" sm="6" md="4" v-if="optionTLS">
+      <v-switch
+      :label="$t('tls.enable')"
+      color="primary"
+      hide-details
+      @update:model-value="updateTls($event)"
+      v-model="addr.tls" />
+    </v-col>
+    <v-col cols="12" sm="6" md="4" v-if="optionSNI">
+      <v-text-field
+      label="SNI"
+      hide-details
+      v-model="addr.server_name">
+      </v-text-field>
+    </v-col>
+    <v-col cols="12" sm="6" md="4" v-if="optionInsecure">
+      <v-switch
+      :label="$t('tls.insecure')"
+      hide-details
+      color="primary"
+      v-model="addr.insecure" />
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-spacer></v-spacer>
+    <v-col cols="auto" align="end" justify="center">
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('in.mdOption') }}</v-btn>
+        </template>
+        <v-card>
+          <v-list>
+            <v-list-item>
+              <v-switch v-model="optionRemark" color="primary" :label="$t('in.remark')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item v-if="hasTls">
+              <v-switch v-model="optionTLS" color="primary" :label="$t('objects.tls')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item v-if="addr.tls">
+              <v-switch v-model="optionSNI" color="primary" label="SNI" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item v-if="addr.tls">
+              <v-switch v-model="optionInsecure" color="primary" :label="$t('tls.insecure')" hide-details></v-switch>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+export default {
+  props: ['addr', 'hasTls'],
+  data() {
+    return {
+      menu: false
+    }
+  },
+  computed: {
+    optionTLS: {
+      get(): boolean { return this.$props.addr.tls != undefined },
+      set(v:boolean) { this.$props.addr.tls = v ? true : undefined; this.updateTls(v) }
+    },
+    optionSNI: {
+      get(): boolean { return this.$props.addr.server_name != undefined },
+      set(v:boolean) { this.$props.addr.server_name = v ? '' : undefined }
+    },
+    optionRemark: {
+      get(): boolean { return this.$props.addr.remark != undefined },
+      set(v:boolean) { this.$props.addr.remark = v ? '' : undefined }
+    },
+    optionInsecure: {
+      get(): boolean { return this.$props.addr.insecure != undefined },
+      set(v:boolean) { this.$props.addr.insecure = v ? false : undefined }
+    }
+  },
+  methods: {
+    updateTls(v:boolean) {
+      if (!v) {
+        delete this.$props.addr.insecure
+        delete this.$props.addr.server_name
+      }
+    }
+  }
+}
+</script>

frontend/src/components/DateTime.vue

@@ -10,7 +10,7 @@
   <DatePicker
     v-model="Input"
     @input="Input=$event"
-    :locale="$i18n.locale"
+    :locale="locale"
     element="expiry"
     compact-time
     type="datetime">
@@ -42,6 +42,9 @@
 <script lang="ts">
 import DatePicker from 'vue3-persian-datetime-picker'
 import { i18n } from '@/locales'
+import 'moment/locale/vi'
+import 'moment/locale/zh-cn'
+import 'moment/locale/zh-tw'
 
 export default {
   props: ['expiry'],
@@ -54,10 +57,21 @@ export default {
   },
   components: { DatePicker },
   computed: {
+    locale() {
+      const l = i18n.global.locale.value
+      switch (l) {
+        case "zhHans":
+          return "zh-cn"
+        case "zhHant":
+          return "zh-tw"
+        default:
+          return l
+      }
+    },
     dateFormatted() {
       if (this.expDate == 0) return i18n.global.t('unlimited')
       const date = new Date(this.expDate*1000)
-      return date.toLocaleString(i18n.global.locale.value)
+      return date.toLocaleString(this.locale)
     },
     expDate() {
       return parseInt(this.expiry?? 0)
@@ -99,18 +113,18 @@ export default {
 <style>
 .vpd-addon-list,
 .vpd-addon-list-item {
-  background-color: rgb(var(--v-theme-background));
+  background-color: rgb(var(--v-theme-background)) !important;
-  border-color: rgb(var(--v-theme-background));
+  border-color: rgb(var(--v-theme-background)) !important;
 }
 .vpd-content {
-  background-color: rgb(var(--v-theme-background));
+  background-color: rgb(var(--v-theme-background)) !important;
 }
 .vpd-addon-list-item.vpd-selected,
 .vpd-addon-list-item:hover {
-  background-color: rgb(var(--v-theme-primary));
+  background-color: rgb(var(--v-theme-primary)) !important;
 }
 .vpd-close-addon {
-  color: rgb(var(--v-theme-on-surface));
+  color: rgb(var(--v-theme-on-surface)) !important;
   background-color: transparent;
 }
 .vpd-controls {

frontend/src/components/Dial.vue

@@ -1,15 +1,17 @@
 <template>
-  <v-card subtitle="Dial" style="background-color: inherit;">
+  <v-card :subtitle="$t('objects.dial')" style="background-color: inherit;">
     <v-row>
       <v-col cols="12" sm="6" md="4" v-if="optionDetour">
-        <v-text-field
+        <v-select
-        label="Forward to Outbound tag"
           hide-details
-        v-model="dial.detour"></v-text-field>
+          :label="$t('dial.detourText')"
+          :items="outTags"
+          v-model="dial.detour">
+        </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4" v-if="optionBind">
         <v-text-field
-        label="Bind to Network Interface"
+        :label="$t('dial.bindIf')"
         hide-details
         v-model="dial.bind_interface"></v-text-field>
       </v-col>
@@ -17,13 +19,13 @@
     <v-row>
       <v-col cols="12" sm="6" md="4" v-if="optionIPV4">
         <v-text-field
-        label="Bind to IPv4"
+        :label="$t('dial.bindIp4')"
         hide-details
         v-model="dial.inet4_bind_address"></v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4" v-if="optionIPV6">
         <v-text-field
-        label="Bind to IPv6"
+        :label="$t('dial.bindIp6')"
         hide-details
         v-model="dial.inet6_bind_address"></v-text-field>
       </v-col>
@@ -38,7 +40,7 @@
         v-model.number="routingMark"></v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4" v-if="optionRA">
-        <v-switch v-model="dial.reuse_addr" color="primary" label="Reuse listener address" hide-details></v-switch>
+        <v-switch v-model="dial.reuse_addr" color="primary" :label="$t('dial.reuseAddr')" hide-details></v-switch>
       </v-col>
     </v-row>
     <v-row v-if="optionTCP">
@@ -55,11 +57,11 @@
       </v-col>
       <v-col cols="12" sm="6" md="4" v-if="optionCT">
         <v-text-field
-        label="Connection Timeout"
+        :label="$t('dial.connTimeout')"
         hide-details
         type="number"
         min="1"
-        suffix="s"
+        :suffix="$t('date.s')"
         v-model.number="connectTimeout"></v-text-field>
       </v-col>
     </v-row>
@@ -67,22 +69,19 @@
       <v-col cols="12" sm="6" md="4">
         <v-select
             hide-details
-            clearable
+            :label="$t('listen.domainStrategy')"
-            @click:clear="delete dial.domain_strategy"
-            width="100"
-            label="Domain to IP Strategy"
             :items="['prefer_ipv4','prefer_ipv6','ipv4_only','ipv6_only']"
             v-model="dial.domain_strategy">
           </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Fallback Timeout"
+        :label="$t('dial.fbTimeout')"
         hide-details
         type="number"
         min="50"
         step="50"
-        suffix="ms"
+        :suffix="$t('date.ms')"
         v-model.number="fallbackDelay"></v-text-field>
       </v-col>
     </v-row>
@@ -90,39 +89,39 @@
       <v-spacer></v-spacer>
       <v-menu v-model="menu" :close-on-content-click="false" location="start">
         <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" hide-details>Dial Options</v-btn>
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('dial.options') }}</v-btn>
         </template>
         <v-card>
           <v-list>
             <v-list-item>
-              <v-switch v-model="optionDetour" color="primary" label="Detour" hide-details></v-switch>
+              <v-switch v-model="optionDetour" color="primary" :label="$t('listen.detour')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionBind" color="primary" label="Bind Interface" hide-details></v-switch>
+              <v-switch v-model="optionBind" color="primary" :label="$t('dial.bindIf')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionIPV4" color="primary" label="Bind to IPv4" hide-details></v-switch>
+              <v-switch v-model="optionIPV4" color="primary" :label="$t('dial.bindIp4')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionIPV6" color="primary" label="Bind to IPv6" hide-details></v-switch>
+              <v-switch v-model="optionIPV6" color="primary" :label="$t('dial.bindIp6')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
               <v-switch v-model="optionRM" color="primary" label="Routing Mark" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionRA" color="primary" label="Reuse Address" hide-details></v-switch>
+              <v-switch v-model="optionRA" color="primary" :label="$t('dial.reuseAddr')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionTCP" color="primary" label="TCP Options" hide-details></v-switch>
+              <v-switch v-model="optionTCP" color="primary" :label="$t('listen.tcpOptions')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionUDP" color="primary" label="UDP Options" hide-details></v-switch>
+              <v-switch v-model="optionUDP" color="primary" :label="$t('listen.udpOptions')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionCT" color="primary" label="Connection Timeout" hide-details></v-switch>
+              <v-switch v-model="optionCT" color="primary" :label="$t('dial.connTimeout')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionDS" color="primary" label="Domain Strategy" hide-details></v-switch>
+              <v-switch v-model="optionDS" color="primary" :label="$t('listen.domainStrategy')" hide-details></v-switch>
             </v-list-item>
           </v-list>
         </v-card>
@@ -133,7 +132,7 @@
 
 <script lang="ts">
 export default {
-  props: ['dial'],
+  props: ['dial', 'outTags'],
   data() {
     return {
       menu: false
@@ -154,7 +153,7 @@ export default {
     },
     optionDetour: {
       get(): boolean { return this.$props.dial.detour != undefined },
-      set(v:boolean) { v ? this.$props.dial.detour = '' : delete this.$props.dial.detour }
+      set(v:boolean) { v ? this.$props.dial.detour = this.outTags[0]?? '' : delete this.$props.dial.detour }
     },
     optionBind: {
       get(): boolean { return this.$props.dial.bind_interface != undefined },

frontend/src/components/Headers.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-card>
+    <v-card-subtitle>
+      {{ $t('objects.headers') }}
+      <v-icon @click="add_header" icon="mdi-plus"></v-icon>
+    </v-card-subtitle>
+    <v-row v-for="(header, index) in hdrs">
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+          :label="$t('objects.key')"
+          hide-details
+          @input="update_key(index,$event.target.value)"
+          v-model="header.name">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+          :label="$t('objects.value')"
+          hide-details
+          @input="update_value(index,$event.target.value)"
+          append-icon="mdi-delete"
+          @click:append="del_header(index)"
+          v-model="header.value">
+        </v-text-field>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+type Header = {
+  name: string
+  value: string
+}
+export default {
+  props: ['data'],
+  data() {
+    return {}
+  },
+  methods: {
+    add_header() {
+      this.hdrs = [...this.hdrs, {name: "Host", value: ""}]
+    },
+    del_header(i:number) {
+      let h = this.hdrs
+      h.splice(i,1)
+      this.hdrs = h
+    },
+    update_key(i:number,k:string) {
+      let h = this.hdrs
+      h[i].name = k
+      this.hdrs = h
+    },
+    update_value(i:number,v:string) {
+      let h = this.hdrs
+      h[i].value = v
+      this.hdrs = h
+    },
+  },
+  computed: {
+    hdrs: {
+      get() :Header[] {
+        let headers: Header[] = []
+        const h = this.$props.data.headers
+        if (h) {
+          Object.keys(h).forEach(key => {
+            if (Array.isArray(h[key])){
+              h[key].forEach((v:string) => headers.push({ name: key, value: v }))
+            } else {
+              headers.push({ name: key, value: h[key] })
+            }
+          })
+        }
+        return headers
+      },
+      set(v:Header[]) {
+        if (v.length>0) {
+          let headers:any = {}
+          v.forEach((h:Header) => {
+            if (headers[h.name]) {
+              if (Array.isArray(headers[h.name])) {
+                headers[h.name].push(h.value)
+              } else {
+                headers[h.name] = [headers[h.name], h.value]
+              }
+            } else {
+              headers[h.name] = h.value
+            }
+          })
+          this.$props.data.headers = headers
+        } else {
+          this.$props.data.headers = undefined
+        }
+      }
+    }
+  }
+}
+</script>

frontend/src/components/InMulitiplex.vue

@@ -1,75 +0,0 @@
-<template>
-  <v-card :subtitle="$t('in.multiplex')">
-    <v-row>
-      <v-col cols="12" sm="6" md="4">
-        <v-switch color="primary" label="Enable Multiplex" v-model="muxEnable" hide-details></v-switch>
-      </v-col>
-      <v-col cols="12" sm="6" md="4" v-if="mux.enabled">
-        <v-switch color="primary" label="Reject Non-Padded" v-model="mux.padding" hide-details></v-switch>
-      </v-col>
-      <v-col cols="12" sm="6" md="4" v-if="mux.enabled">
-        <v-switch color="primary" label="Enable Brutal" v-model="burtalEnable" hide-details></v-switch>
-      </v-col>
-    </v-row>
-    <v-row v-if="mux.brutal?.enabled">
-      <v-col cols="12" sm="6" md="4">
-        <v-text-field
-        label="Uplink Bandwidth"
-        hide-details
-        type="number"
-        suffix="Mbps"
-        v-model.number="up_mbps">
-        </v-text-field>
-      </v-col>
-      <v-col cols="12" sm="6" md="4">
-        <v-text-field
-        label="Downlink Bandwidth"
-        hide-details
-        type="number"
-        suffix="Mbps"
-        min="0"
-        v-model.number="down_mbps">
-        </v-text-field>
-      </v-col>
-    </v-row>
-  </v-card>
-</template>
-
-<script lang="ts">
-import { iMultiplex } from '@/types/inMultiplex'
-export default {
-  props: ['inbound'],
-  data() {
-    return {}
-  },
-  computed: {
-    mux(): iMultiplex {
-      return <iMultiplex> this.$props.inbound.multiplex
-    },
-    muxEnable: {
-      get(): boolean { return this.$props.inbound.multiplex ? this.mux.enabled : false },
-      set(newValue:boolean) { this.$props.inbound.multiplex = newValue ? { enabled: newValue } : {} }
-    },
-    burtalEnable: {
-      get(): boolean { return this.mux.brutal ? this.mux.brutal.enabled : false },
-      set(newValue:boolean) { this.mux.brutal = { enabled: newValue, up_mbps: 100, down_mbps: 100 } }
-    },
-    down_mbps: {
-      get() { return this.mux.brutal && this.mux.brutal.down_mbps ? this.mux.brutal.down_mbps : 0 },
-      set(newValue:any) { 
-        if (this.mux.brutal){
-          this.mux.brutal.down_mbps = newValue.length != 0 ? newValue : 0
-        }
-      }
-    },
-    up_mbps: {
-      get() { return this.mux.brutal && this.mux.brutal.up_mbps ? this.mux.brutal.up_mbps : 0 },
-      set(newValue:any) {
-        if (this.mux.brutal){
-          this.mux.brutal.up_mbps = newValue.length != 0 ? newValue : 0
-        }
-      }
-    },
-  }
-}
-</script>

frontend/src/components/Listen.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card subtitle="Listen">
+  <v-card :subtitle="$t('objects.listen')">
-    <v-row>
+    <v-row v-if="inbound.type != 'tun'">
       <v-col cols="12" sm="6" md="4">
         <v-text-field
         :label="$t('in.addr')"
@@ -20,27 +20,29 @@
     </v-row>
     <v-row>
       <v-col cols="12" sm="6" md="4" v-if="optionDetour">
-        <v-text-field
+        <v-select
-        label="Forward to Inbound tag"
+        :label="$t('listen.detourText')"
         hide-details
-        v-model="inbound.detour"></v-text-field>
+        :items="inTags"
+        v-model="inbound.detour">
+        </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4">
-        <v-switch v-model="inbound.sniff" color="primary" :label="$t('in.sniffing')" hide-details></v-switch>
+        <v-switch v-model="inbound.sniff" color="primary" :label="$t('listen.sniffing')" hide-details></v-switch>
       </v-col>
     </v-row>
     <v-row v-if="inbound.sniff">
       <v-col cols="12" sm="6" md="4">
-        <v-switch v-model="inbound.sniff_override_destination" color="primary" label="Override Sniffed Domain" hide-details></v-switch>
+        <v-switch v-model="inbound.sniff_override_destination" color="primary" :label="$t('listen.sniffingOverride')" hide-details></v-switch>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Sniffing Timeout"
+        :label="$t('listen.sniffingTimeout')"
         hide-details
         type="number"
         min="50"
         step="50"
-        suffix="ms"
+        :suffix="$t('date.ms')"
         v-model.number="sniffTimeout"></v-text-field>
       </v-col>
     </v-row>
@@ -62,7 +64,7 @@
         hide-details
         type="number"
         min="1"
-        suffix="Min"
+        :suffix="$t('date.m')"
         v-model.number="udpTimeout"></v-text-field>
       </v-col>
     </v-row>
@@ -70,32 +72,31 @@
       <v-col cols="12" sm="6" md="4">
         <v-select
             hide-details
-            width="100"
+            :label="$t('listen.domainStrategy')"
-            label="Domain to IP Strategy"
             :items="['prefer_ipv4','prefer_ipv6','ipv4_only','ipv6_only']"
             v-model="inbound.domain_strategy">
           </v-select>
       </v-col>
     </v-row>
-    <v-card-actions class="pt-0">
+    <v-card-actions class="pt-0" v-if="inbound.type != 'tun'">
       <v-spacer></v-spacer>
       <v-menu v-model="menu" :close-on-content-click="false" location="start">
         <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" hide-details>Listen Options</v-btn>
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('listen.options') }}</v-btn>
         </template>
         <v-card>
           <v-list>
             <v-list-item>
-              <v-switch v-model="optionTCP" color="primary" label="TCP Options" hide-details></v-switch>
+              <v-switch v-model="optionDetour" color="primary" :label="$t('listen.detour')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionUDP" color="primary" label="UDP Options" hide-details></v-switch>
+              <v-switch v-model="optionTCP" color="primary" :label="$t('listen.tcpOptions')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionDetour" color="primary" label="Detour" hide-details></v-switch>
+              <v-switch v-model="optionUDP" color="primary" :label="$t('listen.udpOptions')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-              <v-switch v-model="optionDS" color="primary" label="Domain Strategy" hide-details></v-switch>
+              <v-switch v-model="optionDS" color="primary" :label="$t('listen.domainStrategy')" hide-details></v-switch>
             </v-list-item>
           </v-list>
         </v-card>
@@ -106,7 +107,7 @@
 
 <script lang="ts">
 export default {
-  props: ['inbound'],
+  props: ['inbound', 'inTags'],
   data() {
     return {
       menu: false
@@ -138,12 +139,12 @@ export default {
       },
       set(v:boolean) {
         this.$props.inbound.udp_fragment = v ? false : undefined
-        this.$props.inbound.udp_timeout = v ? false : undefined 
+        this.$props.inbound.udp_timeout = v ? '5m' : undefined 
       }
     },
     optionDetour: {
       get(): boolean { return this.$props.inbound.detour != undefined },
-      set(v:boolean) { this.$props.inbound.detour = v ? '' : undefined }
+      set(v:boolean) { this.$props.inbound.detour = v ? this.inTags[0]?? '' : undefined }
     },
     optionDS: {
       get(): boolean { return this.$props.inbound.domain_strategy != undefined },

frontend/src/components/Main.vue

@@ -1,5 +1,11 @@
 <template>
-  <v-container class="fill-height">
+  <LogVue
+  v-model="logModal.visible"
+  :visible="logModal.visible"
+  :logType="logModal.logType"
+  @close="closeLogs"
+  />
+  <v-container class="fill-height" :loading="loading">
     <v-responsive :class="reloadItems.length>0 ? 'fill-height text-center' : 'align-center'" >
       <v-row class="d-flex align-center justify-center">
         <v-col cols="auto">
@@ -10,7 +16,7 @@
         <v-col cols="auto">
           <v-dialog v-model="menu" :close-on-content-click="false" transition="scale-transition" max-width="800">
             <template v-slot:activator="{ props }">
-              <v-btn v-bind="props" variant="tonal">{{ $t('main.tiles') }} <v-icon icon="mdi-star-plus" /></v-btn>
+              <v-btn v-bind="props" hide-details variant="tonal">{{ $t('main.tiles') }} <v-icon icon="mdi-star-plus" /></v-btn>
             </template>
             <v-card rounded="xl">
               <v-card-title>
@@ -45,7 +51,7 @@
       </v-row>
       <v-row>
         <v-col cols="12" sm="6" md="3" v-for="i in reloadItems" :key="i">
-          <v-card class="rounded-lg" variant="outlined" height="200px"
+          <v-card class="rounded-lg" variant="outlined" height="210px"
                   :title="menuItems.flatMap(cat => cat.value).find(m => m.value == i)?.title">
             <v-card-text style="padding: 0 16px;" align="center" justify="center">
               <Gauge :tilesData="tilesData" :type="i" v-if="i.charAt(0) == 'g'" />
@@ -80,13 +86,19 @@
                   </v-col>
                   <v-col cols="3">S-UI</v-col>
                   <v-col cols="9">
-                    <v-chip density="compact" color="primary" variant="flat">
+                    <v-chip density="compact" color="blue">
                       <v-tooltip activator="parent" location="top">
                         {{ $t('main.info.threads') }}: {{ tilesData.sys?.appThreads }}<br />
                         {{ $t('main.info.memory') }}: {{ HumanReadable.sizeFormat(tilesData.sys?.appMem) }}
                       </v-tooltip>
                       v{{ tilesData.sys?.appVersion }}
                     </v-chip>
+                    <v-chip density="compact" color="transparent" style="cursor: pointer;" @click="openLogs('s-ui')">
+                      <v-tooltip activator="parent" location="top">
+                        {{ $t('basic.log.title') + " - S-UI" }}
+                      </v-tooltip>
+                      <v-icon icon="mdi-list-box-outline" color="blue" />
+                    </v-chip>
                   </v-col>
                   <v-col cols="3">{{ $t('main.info.uptime') }}</v-col>
                   <v-col cols="9">{{ HumanReadable.formatSecond(tilesData.uptime) }}</v-col>
@@ -98,6 +110,18 @@
                   <v-col cols="8">
                     <v-chip density="compact" color="success" variant="flat" v-if="tilesData.sbd?.running">{{ $t('yes') }}</v-chip> 
                     <v-chip density="compact" color="error" variant="flat" v-else>{{ $t('no') }}</v-chip>
+                    <v-chip density="compact" color="transparent" style="cursor: pointer;" @click="openLogs('sing-box')">
+                      <v-tooltip activator="parent" location="top">
+                        {{ $t('basic.log.title') + " - Sing-Box" }}
+                      </v-tooltip>
+                      <v-icon icon="mdi-list-box-outline" :color="tilesData.sbd?.running ? 'success': 'error'" />
+                    </v-chip>
+                    <v-chip density="compact" color="transparent" v-if="tilesData.sbd?.running && !loading" style="cursor: pointer;" @click="restartSingbox()">
+                      <v-tooltip activator="parent" location="top">
+                        {{ $t('actions.restartSb') }}
+                      </v-tooltip>
+                      <v-icon icon="mdi-restart" color="warning" />
+                    </v-chip>
                   </v-col>
                   <v-col cols="4">{{ $t('main.info.memory') }}</v-col>
                   <v-col cols="8">
@@ -148,7 +172,9 @@ import Gauge from '@/components/tiles/Gauge.vue'
 import History from '@/components/tiles/History.vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { i18n } from '@/locales'
+import LogVue from '@/layouts/modals/Logs.vue'
 
+const loading = ref(false)
 const menu = ref(false)
 const menuItems = [
   { title: i18n.global.t('main.gauges'), value: [
@@ -215,4 +241,25 @@ onMounted(() => {
 onBeforeUnmount(() => {
   stopTimer()
 })
+
+const logModal = ref({
+  visible: false,
+  logType: "s-ui"
+})
+
+const openLogs = (logType: string) => {
+  logModal.value.logType = logType
+  logModal.value.visible = true
+}
+
+const closeLogs = () => {
+  logModal.value.logType = "s-ui"
+  logModal.value.visible = false
+}
+
+const restartSingbox = async () => {
+  loading.value = true
+  await HttpUtils.post('api/restartSb',{})
+  loading.value = false
+}
 </script>

frontend/src/components/Multiplex.vue

@@ -0,0 +1,129 @@
+<template>
+  <v-card :subtitle="$t('objects.multiplex')">
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch color="primary" :label="$t('mux.enable')" v-model="muxEnable" hide-details></v-switch>
+      </v-col>
+      <template v-if="mux.enabled">
+        <template v-if="direction=='out'">
+          <v-col cols="12" sm="6" md="4">
+            <v-select
+              hide-details
+              :items="[ 'smux', 'yamux', 'h2mux']"
+              :label="$t('protocol')"
+              clearable
+              @click:clear="mux.protocol=undefined"
+              v-model="mux.protocol">
+            </v-select>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-text-field
+            :label="$t('mux.maxConn')"
+            hide-details
+            type="number"
+            min=0
+            v-model.number="max_connections">
+            </v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-text-field
+            :label="$t('mux.minStr')"
+            hide-details
+            type="number"
+            min=0
+            v-model.number="min_streams">
+            </v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-text-field
+            :label="$t('mux.maxStr')"
+            hide-details
+            type="number"
+            :min="min_streams"
+            v-model.number="max_streams">
+            </v-text-field>
+          </v-col>
+        </template>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" :label="$t('mux.padding')" v-model="mux.padding" hide-details></v-switch>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" :label="$t('mux.enableBrutal')" v-model="burtalEnable" hide-details></v-switch>
+        </v-col>
+      </template>
+    </v-row>
+    <v-row v-if="mux.brutal?.enabled">
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+        :label="$t('stats.upload')"
+        hide-details
+        type="number"
+        :suffix="$t('stats.Mbps')"
+        v-model.number="up_mbps">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+        :label="$t('stats.download')"
+        hide-details
+        type="number"
+        :suffix="$t('stats.Mbps')"
+        min="0"
+        v-model.number="down_mbps">
+        </v-text-field>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { oMultiplex } from '@/types/multiplex'
+export default {
+  props: ['data', 'direction'],
+  data() {
+    return {}
+  },
+  computed: {
+    mux(): oMultiplex {
+      if (!Object.hasOwn(this.$props.data,"multiplex")) this.$props.data.multiplex = {}
+      return <oMultiplex> this.$props.data.multiplex
+    },
+    muxEnable: {
+      get(): boolean { return this.mux ? this.mux.enabled : false },
+      set(newValue:boolean) { this.$props.data.multiplex = newValue ? { enabled: newValue } : {} }
+    },
+    max_connections: {
+      get(): number { return this.mux.max_connections ? this.mux.max_connections : 0 },
+      set(newValue:number) { this.mux.max_connections = newValue > 0 ? newValue : undefined }
+    },
+    min_streams: {
+      get(): number { return this.mux.min_streams ? this.mux.min_streams : 0 },
+      set(newValue:number) { this.mux.min_streams = newValue > 0 ? newValue : undefined }
+    },
+    max_streams: {
+      get(): number { return this.mux.max_streams ? this.mux.max_streams : 0 },
+      set(newValue:number) { this.mux.max_streams = newValue > 0 ? newValue : undefined }
+    },
+    burtalEnable: {
+      get(): boolean { return this.mux.brutal ? this.mux.brutal.enabled : false },
+      set(newValue:boolean) { this.mux.brutal = newValue ? { enabled: newValue, up_mbps: 100, down_mbps: 100 } : undefined }
+    },
+    down_mbps: {
+      get() { return this.mux.brutal && this.mux.brutal.down_mbps ? this.mux.brutal.down_mbps : 0 },
+      set(newValue:any) { 
+        if (this.mux.brutal){
+          this.mux.brutal.down_mbps = newValue.length != 0 ? newValue : 0
+        }
+      }
+    },
+    up_mbps: {
+      get() { return this.mux.brutal && this.mux.brutal.up_mbps ? this.mux.brutal.up_mbps : 0 },
+      set(newValue:any) {
+        if (this.mux.brutal){
+          this.mux.brutal.up_mbps = newValue.length != 0 ? newValue : 0
+        }
+      }
+    },
+  }
+}
+</script>

frontend/src/components/Network.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 export default {
-  props: ['inbound'],
+  props: ['data'],
   data() {
     return {
       networks: [
@@ -21,8 +21,8 @@ export default {
   },
   computed: {
     Network: {
-      get():string { return this.$props.inbound.network?? '' },
+      get():string { return this.$props.data.network?? '' },
-      set(v:string) { this.$props.inbound.network = v != '' ? v : undefined }
+      set(v:string) { this.$props.data.network = v != '' ? v : undefined }
     }
   }
 }

frontend/src/components/OutJson.vue

@@ -0,0 +1,123 @@
+<template>
+  <v-card :subtitle="type">
+    <v-row>
+      <v-col cols="12" sm="6" md="4" v-if="type == inTypes.SOCKS">
+        <v-select
+          hide-details
+          :items="['4','4a','5']"
+          :label="$t('version')"
+          v-model="inData.outJson.version">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="needNetwork">
+        <Network :data="inData.outJson" />
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="needUot">
+        <UoT :data="inData.outJson" />
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="type == inTypes.HTTP">
+        <v-text-field
+        :label="$t('transport.path')"
+        hide-details
+        v-model="inData.outJson.path">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="type == inTypes.VMess || type == inTypes.VLESS">
+        <v-select
+          hide-details
+          :label="$t('types.vless.udpEnc')"
+          :items="['none','packetaddr','xudp']"
+          v-model="packet_encoding">
+        </v-select>
+      </v-col>
+      <template v-if="type == inTypes.VMess">
+        <v-col cols="12" sm="6" md="4">
+          <v-select
+            hide-details
+            :label="$t('types.vmess.security')"
+            :items="vmessSecurities"
+            v-model="inData.outJson.security">
+          </v-select>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch v-model="inData.outJson.global_padding" color="primary" :label="$t('types.vmess.globalPadding')" hide-details></v-switch>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch v-model="inData.outJson.authenticated_length" color="primary" :label="$t('types.vmess.authLen')" hide-details></v-switch>
+        </v-col>
+      </template>
+      <v-col cols="12" sm="6" md="4" v-if="type == inTypes.Hysteria">
+        <v-text-field
+        label="Recv window"
+        hide-details
+        type="number"
+        min="0"
+        v-model.number="inData.outJson.recv_window">
+        </v-text-field>
+      </v-col>
+      <template v-if="type == inTypes.TUIC">
+        <v-col cols="12" sm="6" md="4">
+          <v-select
+            hide-details
+            label="UDP Relay Mode"
+            :items="['native', 'quic']"
+            clearable
+            @click:clear="delete inData.outJson.udp_relay_mode"
+            v-model="inData.outJson.udp_relay_mode">
+          </v-select>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" label="UDP Over Stream" v-model="inData.outJson.udp_over_stream" hide-details></v-switch>
+        </v-col>
+      </template>
+    </v-row>
+    <Headers :data="inData.outJson" v-if="type == inTypes.HTTP" />
+  </v-card>
+</template>
+
+<script lang="ts">
+import { InTypes } from '@/types/inbounds'
+import Network from './Network.vue'
+import UoT from './UoT.vue'
+import Headers from './Headers.vue'
+
+export default {
+  props: ['inData', 'type'],
+  data() {
+    return {
+      inTypes: InTypes,
+      vmessSecurities: [
+        "auto",
+        "none",
+        "zero",
+        "aes-128-gcm",
+        "aes-128-ctr",
+        "chacha20-poly1305",
+      ],
+      haveNetwork: [
+        InTypes.SOCKS,
+        InTypes.Shadowsocks,
+        InTypes.VMess,
+        InTypes.Trojan,
+        InTypes.Hysteria,
+        InTypes.VLESS,
+        InTypes.TUIC,
+        InTypes.Hysteria2,
+      ],
+      havUoT: [
+        InTypes.SOCKS,
+        InTypes.Shadowsocks,
+      ],
+    }
+  },
+  computed: {
+    needNetwork():boolean { return this.haveNetwork.includes(this.$props.type) },
+    needUot():boolean { return this.havUoT.includes(this.$props.type) },
+    packet_encoding: {
+      get() { return this.$props.inData.outJson.packet_encoding != undefined ? this.$props.inData.outJson.packet_encoding : 'none'; },
+      set(v:string) { this.$props.inData.outJson.packet_encoding = v != "none" ? v : undefined }
+    },
+  },
+  components: { Network, UoT, Headers }
+}
+</script>

frontend/src/components/Rule.vue

@@ -0,0 +1,382 @@
+<template>
+  <v-card style="background-color: inherit;">
+    <v-row>
+      <v-col cols="12" v-if="optionInbound">
+        <v-combobox
+          v-model="rule.inbound"
+          :items="inTags"
+          :label="$t('pages.inbounds')"
+          multiple
+          chips
+          hide-details
+        ></v-combobox>
+      </v-col>
+      <v-col cols="12" v-if="optionClient">
+        <v-combobox
+          v-model="rule.auth_user"
+          :items="clients"
+          :label="$t('pages.clients')"
+          multiple
+          chips
+          hide-details
+        ></v-combobox>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="optionIPver">
+        <v-select
+          hide-details
+          :label="$t('rule.ipVer')"
+          :items="[4,6]"
+          v-model.number="rule.ip_version">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="optionProtocol">
+        <v-combobox
+          v-model="rule.protocol"
+          :items="['http','tls', 'quic', 'stun', 'dns']"
+          :label="$t('protocol')"
+          multiple
+          chips
+          hide-details
+        ></v-combobox>
+      </v-col>
+    </v-row>
+    <v-row v-if="optionDomain">
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :items="domainKeys"
+          @update:model-value="updateDomainOption($event)"
+          v-model="domainOption">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.domain != undefined">
+        <v-text-field
+        :label="$t('rule.domain') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="domain"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.domain_suffix != undefined">
+        <v-text-field
+        :label="$t('rule.domainSufix') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="domain_suffix"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.domain_keyword != undefined">
+        <v-text-field
+        :label="$t('rule.domainKw') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="domain_keyword"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.domain_regex != undefined">
+        <v-text-field
+        :label="$t('rule.domainRgx') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="domain_regex"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.ip_cidr != undefined">
+        <v-text-field
+        :label="$t('rule.ip') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="ip_cidr"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.ip_is_private != undefined">
+        <v-switch v-model="rule.ip_is_private" color="primary" :label="$t('rule.privateIp')" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <v-row v-if="optionPort">
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :items="portKeys"
+          @update:model-value="updatePortOption($event)"
+          v-model="portOption">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.port != undefined">
+        <v-text-field
+        :label="$t('rule.port') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="port"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.port_range != undefined">
+        <v-text-field
+        :label="$t('rule.portRange') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="port_range"></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row v-if="optionSrcIP">
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :items="srcIPKeys"
+          @update:model-value="updateSrcIPOption($event)"
+          v-model="srcIPOption">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.source_ip_cidr != undefined">
+        <v-text-field
+        :label="$t('rule.srcCidr') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="source_ip_cidr"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.source_ip_is_private != undefined">
+        <v-switch v-model="rule.source_ip_is_private" color="primary" :label="$t('rule.srcPrivateIp')" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <v-row v-if="optionSrcPort">
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :items="srcPortKeys"
+          @update:model-value="updateSrcPortOption($event)"
+          v-model="srcPortOption">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.source_port != undefined">
+        <v-text-field
+        :label="$t('rule.srcPort') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="source_port"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="rule.source_port_range != undefined">
+        <v-text-field
+        :label="$t('rule.srcPortRange') + ' ' + $t('commaSeparated')"
+        hide-details
+        v-model="source_port_range"></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row v-if="optionRuleSet">
+      <v-col cols="12" sm="6">
+        <v-combobox
+          v-model="rule.rule_set"
+          :items="rsTags"
+          :label="$t('rule.ruleset')"
+          multiple
+          chips
+          hide-details
+        ></v-combobox>
+      </v-col>
+      <v-col cols="12" sm="6">
+        <v-switch v-model="rule.rule_set_ipcidr_match_source" color="primary" :label="$t('rule.rulesetMatchSrc')" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('rule.options') }}</v-btn>
+        </template>
+        <v-card>
+          <v-list>
+            <v-list-item>
+              <v-switch v-model="optionInbound" color="primary" :label="$t('pages.inbounds')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionClient" color="primary" :label="$t('pages.clients')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionIPver" color="primary" :label="$t('rule.ipVer')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionProtocol" color="primary" :label="$t('protocol')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionDomain" color="primary" :label="$t('rule.domainRules')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionPort" color="primary" :label="$t('in.port')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionSrcIP" color="primary" :label="$t('rule.srcIpRules')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionSrcPort" color="primary" :label="$t('rule.srcPortRules')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionRuleSet" color="primary" :label="$t('rule.ruleset')" hide-details></v-switch>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+export default {
+  props: ['rule', 'clients', 'inTags', 'rsTags', 'deleteable'],
+  data() {
+    return {
+      menu: false,
+      domainKeys: ['domain', 'domain_suffix', 'domain_keyword', 'domain_regex', 'ip_cidr', 'ip_is_private'],
+      portKeys: ['port', 'port_range'],
+      srcIPKeys: ['source_ip_cidr', 'source_ip_is_private'],
+      srcPortKeys: ['source_port', 'source_port_range'],
+      domainOption: 'domain',
+      portOption: 'port',
+      srcIPOption: 'source_ip_cidr',
+      srcPortOption: 'source_port',
+    }
+  },
+  methods: {
+    updateDomainOption(option:string) {
+      this.domainKeys.forEach(k => delete this.$props.rule[k])
+      this.$props.rule[option] = option == 'ip_is_private' ? false : []
+    },
+    updatePortOption(option:string) {
+      this.portKeys.forEach(k => delete this.$props.rule[k])
+      this.$props.rule[option] = []
+    },
+    updateSrcIPOption(option:string) {
+      this.srcIPKeys.forEach(k => delete this.$props.rule[k])
+      this.$props.rule[option] = option == 'source_ip_is_private' ? false : []
+    },
+    updateSrcPortOption(option:string) {
+      this.srcPortKeys.forEach(k => delete this.$props.rule[k])
+      this.$props.rule[option] = []
+    },
+  },
+  computed: {
+    optionInbound: {
+      get() { return this.$props.rule.inbound != undefined },
+      set(v:boolean) { this.$props.rule.inbound = v ? [] : undefined }
+    },
+    optionClient: {
+      get() { return this.$props.rule.auth_user != undefined },
+      set(v:boolean) { this.$props.rule.auth_user = v ? [] : undefined }
+    },
+    optionIPver: {
+      get() { return this.$props.rule.ip_version != undefined },
+      set(v:boolean) { this.$props.rule.ip_version = v ? 4 : undefined }
+    },
+    optionProtocol: {
+      get() { return this.$props.rule.protocol != undefined },
+      set(v:boolean) { this.$props.rule.protocol = v ? ['http'] : undefined }
+    },
+    optionDomain: {
+      get() { return Object.keys(this.$props.rule).some(r => this.domainKeys.includes(r)) },
+      set(v:boolean) { 
+        if (v) {
+          this.$props.rule.domain = []
+        } else {
+          this.domainKeys.forEach(k => delete this.$props.rule[k])
+        }
+        this.domainOption = 'domain'
+      }
+    },
+    optionPort: {
+      get() { return Object.keys(this.$props.rule).some(r => this.portKeys.includes(r)) },
+      set(v:boolean) { 
+        if (v) {
+          this.$props.rule.port = []
+        } else {
+          this.portKeys.forEach(k => delete this.$props.rule[k])
+        }
+        this.portOption = 'port'
+      }
+    },
+    optionSrcIP: {
+      get() { return Object.keys(this.$props.rule).some(r => this.srcIPKeys.includes(r)) },
+      set(v:boolean) { 
+        if (v) {
+          this.$props.rule.source_ip_cidr = []
+        } else {
+          this.srcIPKeys.forEach(k => delete this.$props.rule[k])
+        }
+        this.srcIPOption = 'source_ip_cidr'
+      }
+    },
+    optionSrcPort: {
+      get() { return Object.keys(this.$props.rule).some(r => this.srcPortKeys.includes(r)) },
+      set(v:boolean) { 
+        if (v) {
+          this.$props.rule.source_port = []
+        } else {
+          this.srcPortKeys.forEach(k => delete this.$props.rule[k])
+        }
+        this.srcPortOption = 'source_port'
+      }
+    },
+    optionRuleSet: {
+      get() { return this.$props.rule.rule_set != undefined },
+      set(v:boolean) { 
+        if (v) {
+          this.$props.rule.rule_set = []
+          this.$props.rule.rule_set_ipcidr_match_source = false
+        } else {
+          delete this.$props.rule.rule_set
+          delete this.$props.rule.rule_set_ipcidr_match_source
+        }
+      }
+    },
+    domain: {
+      get() { return this.$props.rule.domain?.join(',') },
+      set(v:string) { this.$props.rule.domain = v.length>0 ? v.split(',') : [] }
+    },
+    domain_suffix: {
+      get() { return this.$props.rule.domain_suffix?.join(',') },
+      set(v:string) { this.$props.rule.domain_suffix = v.length>0 ? v.split(',') : [] }
+    },
+    domain_keyword: {
+      get() { return this.$props.rule.domain_keyword?.join(',') },
+      set(v:string) { this.$props.rule.domain_keyword = v.length>0 ? v.split(',') : [] }
+    },
+    domain_regex: {
+      get() { return this.$props.rule.domain_regex?.join(',') },
+      set(v:string) { this.$props.rule.domain_regex = v.length>0 ? v.split(',') : [] }
+    },
+    ip_cidr: {
+      get() { return this.$props.rule.ip_cidr?.join(',') },
+      set(v:string) { this.$props.rule.ip_cidr = v.length>0 ? v.split(',') : [] }
+    },
+    port: {
+      get() { return this.$props.rule.port?.join(',') },
+      set(v:string) {
+        if(!v.endsWith(',')) {
+          this.$props.rule.port = v.length > 0 ? v.split(',').map(str => parseInt(str, 10)) : []
+        }
+      }
+    },
+    port_range: {
+      get() { return this.$props.rule.port_range?.join(',') },
+      set(v:string) { this.$props.rule.port_range = v.length>0 ? v.split(',') : [] }
+    },
+    source_ip_cidr: {
+      get() { return this.$props.rule.source_ip_cidr?.join(',') },
+      set(v:string) { this.$props.rule.source_ip_cidr = v.length>0 ? v.split(',') : [] }
+    },
+    source_port: {
+      get() { return this.$props.rule.source_port?.join(',') },
+      set(v:string) {
+        if(!v.endsWith(',')) {
+          this.$props.rule.source_port = v.length > 0 ? v.split(',').map(str => parseInt(str, 10)) : []
+        }
+      }
+    },
+    source_port_range: {
+      get() { return this.$props.rule.source_port_range?.join(',') },
+      set(v:string) { this.$props.rule.source_port_range = v.length>0 ? v.split(',') : [] }
+    },
+  },
+  mounted() {
+    const ruleKeys = Object.keys(this.$props.rule)
+    if (this.optionDomain) {
+      const enabledOption = this.domainKeys.filter(k => ruleKeys.includes(k))
+      this.domainOption = enabledOption.length>0 ? enabledOption[0] : 'domain'
+    }
+    if (this.optionPort) {
+      const enabledOption = this.portKeys.filter(k => ruleKeys.includes(k))
+      this.portOption = enabledOption.length>0 ? enabledOption[0] : 'port'
+    }
+    if (this.optionSrcIP) {
+      const enabledOption = this.srcIPKeys.filter(k => ruleKeys.includes(k))
+      this.srcIPOption = enabledOption.length>0 ? enabledOption[0] : 'source_ip_cidr'
+    }
+    if (this.optionSrcPort) {
+      const enabledOption = this.srcPortKeys.filter(k => ruleKeys.includes(k))
+      this.srcPortOption = enabledOption.length>0 ? enabledOption[0] : 'source_port'
+    }
+  }
+}
+</script>

frontend/src/components/SubJsonExt.vue

@@ -0,0 +1,452 @@
+<template>
+  <v-card>
+    <v-row>
+      <v-col cols="12" sm="6" md="3">
+        <v-select
+          v-model="ruleToDirect"
+          :items="geoList"
+          :label="$t('setting.toDirect')"
+          multiple
+          chips
+          hide-details
+        ></v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="3">
+        <v-select
+          v-model="ruleToBlock"
+          :items="geoList"
+          :label="$t('setting.toBlock')"
+          multiple
+          chips
+          hide-details
+        ></v-select>
+      </v-col>
+    </v-row>
+    <v-row  v-if="enableLog">
+      <v-col cols="12" sm="6" md="3" lg="2">
+        <v-select
+          hide-details
+          :label="$t('basic.log.level')"
+          :items="levels"
+          v-model="subJsonExt.log.level">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="3" lg="2">
+        <v-switch v-model="subJsonExt.log.timestamp" color="primary" :label="$t('setting.timestamp')" hide-details />
+      </v-col>
+    </v-row>
+    <v-row v-if="enableDns">
+      <v-col cols="12" sm="6" md="3" lg="2">
+        <v-text-field
+          v-model="proxyDns"
+          hide-details
+          :label="$t('setting.globalDns')"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="3" lg="2">
+        <v-text-field
+          v-model="directDns"
+          hide-details
+          clearable
+          :label="$t('setting.directDns')"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="3" v-if="directDns.length>0">
+        <v-select
+          v-model="dnsToDirect"
+          :items="geositeList"
+          :label="$t('setting.toDirectDns')"
+          multiple
+          chips
+          hide-details
+        ></v-select>
+      </v-col>
+    </v-row>
+    <template v-if="enableInb">
+      <v-row>
+        <v-col cols="12" sm="6" md="3">
+          <v-combobox
+            v-model="inbounds[0].address"
+            :items="defaultInb[0].address"
+            chips
+            multiple
+            hide-details
+            :label="$t('in.addr')"
+          ></v-combobox>
+        </v-col>
+        <v-col cols="12" sm="6" md="3" lg="2">
+          <v-text-field
+            type="number"
+            v-model.number="inbounds[0].mtu"
+            hide-details
+            label="MTU"
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12" sm="6" md="3">
+          <v-combobox
+            v-model="inbounds[0].exclude_package"
+            :items="['ir.mci.ecareapp','com.myirancell']"
+            chips
+            multiple
+            hide-details
+            :label="$t('setting.excludePkg')"
+          ></v-combobox>
+        </v-col>
+        <v-col cols="12" sm="6" md="3" lg="2">
+          <v-switch
+            v-model="platformProxy"
+            hide-details
+            color="primary"
+            label="Platform HTTP proxy"
+          ></v-switch>
+        </v-col>
+      </v-row>
+    </template>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('setting.jsonSubOptions') }}</v-btn>
+        </template>
+        <v-card>
+          <v-list>
+            <v-list-item>
+              <v-switch v-model="enableLog" color="primary" :label="$t('basic.log.title')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="enableDns" color="primary" label="DNS" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="enableInb" color="primary" :label="$t('objects.inbound')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="enableExp" color="primary" label="Experimental" hide-details></v-switch>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+export default {
+  props: ['settings'],
+  data() {
+    return {
+      menu: false,
+      subJsonExt: <any>{},
+      levels: ["trace", "debug", "info", "warn", "error", "fatal", "panic"],
+      defaultLog: {
+        "level": "info",
+        "timestamp": true
+      },
+      defaultInb: [
+        {
+          "type": "tun",
+          "address": [
+            "172.19.0.1/30",
+            "fdfe:dcba:9876::1/126"
+          ],
+          "mtu": 9000,
+          "auto_route": true,
+          "strict_route": false,
+          "sniff": true,
+          "endpoint_independent_nat": false,
+          "stack": "system",
+          "exclude_package": [],
+          "platform": {
+            "http_proxy": {
+              "enabled": true,
+              "server": "127.0.0.1",
+              "server_port": 2080
+            }
+          }
+        },
+        {
+          "type": "mixed",
+          "listen": "127.0.0.1",
+          "listen_port": 2080,
+          "sniff": true,
+          "users": []
+        }
+      ],
+      defaultExp: {
+        "clash_api": {
+          "external_controller": "127.0.0.1:9090",
+          "external_ui": "ui",
+          "secret": "",
+          "external_ui_download_url": "https://mirror.ghproxy.com/https://github.com/MetaCubeX/Yacd-meta/archive/gh-pages.zip",
+          "external_ui_download_detour": "direct",
+          "default_mode": "rule"
+        },
+        "cache_file": {
+          "enabled": true,
+          "store_fakeip": false
+        }
+      },
+      defaultDns: {
+        "servers": [
+          {
+            "address": "tcp://8.8.8.8",
+            "detour": "proxy",
+            "address_resolver": "local-dns",
+            "tag": "proxy-dns"
+          },
+          {
+            "tag": "local-dns",
+            "address": "local",
+            "detour": "direct"
+          },
+          {
+            "address": "rcode://success",
+            "tag": "block"
+          }
+        ],
+        "rules": [
+          {
+            "clash_mode": "Global",
+            "source_ip_cidr": [
+              "172.19.0.0/30"
+            ],
+            "server": "proxy-dns"
+          },
+          {
+            "source_ip_cidr": [
+              "172.19.0.0/30"
+            ],
+            "server": "proxy-dns"
+          }
+        ],
+        "final": "local-dns",
+        "strategy": "prefer_ipv4"
+      },
+      geositeList: [
+        { title: "Private", value: "geosite-private" },
+        { title: "Ads", value: "geosite-ads" },
+        { title: "🇮🇷 Iran", value: "geosite-ir" },
+        { title: "🇨🇳 China", value: "geosite-cn" },
+        { title: "🇻🇳 Vietnam", value: "geosite-vn" },
+      ],
+      geoList: [
+        { title: "Site-Private", value: "geoip-private" },
+        { title: "IP-Private", value: "geosite-private" },
+        { title: "Site-Ads", value: "geosite-ads" },
+        { title: "🇮🇷 Site-Iran", value: "geosite-ir" },
+        { title: "🇮🇷 IP-Iran", value: "geoip-ir" },
+        { title: "🇨🇳 Site-China", value: "geosite-cn" },
+        { title: "🇨🇳 IP-China", value: "geoip-cn" },
+        { title: "🇻🇳 Site-Vietnam", value: "geosite-vn" },
+        { title: "🇻🇳 IP-Vietnam", value: "geoip-vn" },
+      ],
+      geo: [
+        {
+          tag: "geosite-ads",
+          type: "remote",
+          format: "binary",
+          url: "https://testingcf.jsdelivr.net/gh/MetaCubeX/meta-rules-dat@sing/geo/geosite/category-ads-all.srs",
+          download_detour: "direct"
+        },
+        {
+          tag: "geosite-private",
+          type: "remote",
+          format: "binary",
+          url: "https://testingcf.jsdelivr.net/gh/MetaCubeX/meta-rules-dat@sing/geo/geosite/private.srs",
+          download_detour: "direct"
+        },
+        {
+          tag: "geosite-ir",
+          type: "remote",
+          format: "binary",
+          url: "https://testingcf.jsdelivr.net/gh/MetaCubeX/meta-rules-dat@sing/geo/geosite/category-ir.srs",
+          download_detour: "direct"
+        },
+        {
+          tag: "geosite-cn",
+          type: "remote",
+          format: "binary",
+          url: "https://testingcf.jsdelivr.net/gh/MetaCubeX/meta-rules-dat@sing/geo/geosite/cn.srs",
+          download_detour: "direct"
+        },
+        {
+          tag: "geosite-vn",
+          type: "remote",
+          format: "binary",
+          url: "https://github.com/Thaomtam/Geosite-vn/raw/rule-set/Geosite-vn.srs",
+          download_detour: "direct"
+        },
+        {
+          tag: "geoip-private",
+          type: "remote",
+          format: "binary",
+          url: "https://testingcf.jsdelivr.net/gh/MetaCubeX/meta-rules-dat@sing/geo/geoip/private.srs",
+          download_detour: "direct"
+        },
+        {
+          tag: "geoip-ir",
+          type: "remote",
+          format: "binary",
+          url: "https://testingcf.jsdelivr.net/gh/MetaCubeX/meta-rules-dat@sing/geo/geoip/ir.srs",
+          download_detour: "direct"
+        },
+        {
+          tag: "geoip-cn",
+          type: "remote",
+          format: "binary",
+          url: "https://testingcf.jsdelivr.net/gh/MetaCubeX/meta-rules-dat@sing/geo/geoip/cn.srs",
+          download_detour: "direct"
+        },
+        {
+          tag: "geoip-vn",
+          type: "remote",
+          format: "binary",
+          url: "https://testingcf.jsdelivr.net/gh/MetaCubeX/meta-rules-dat@sing/geo/geoip/vn.srs",
+          download_detour: "direct"
+        }
+      ],
+    }
+  },
+  computed: {
+    enableLog: {
+      get() :boolean { return this.subJsonExt?.log != undefined },
+      set(v:boolean) { v ? this.subJsonExt.log = this.defaultLog : delete this.subJsonExt.log }
+    },
+    enableDns: {
+      get() :boolean { return this.subJsonExt?.dns != undefined },
+      set(v:boolean) {
+        if (v) {
+          this.subJsonExt.dns = this.defaultDns
+          if (this.rules == undefined) this.subJsonExt.rules = []
+          this.subJsonExt.rules.unshift({ protocol: "dns", outbound: "dns-out" })
+        } else {
+          delete this.subJsonExt.dns
+          const ruleDnsIndex = this.subJsonExt?.rules?.findIndex((r:any) => r.protocol == "dns" && r.outbound == "dns-out")
+          if (ruleDnsIndex >= 0) this.subJsonExt.rules.splice(ruleDnsIndex,1)
+          if (this.rules.length == 0) delete this.subJsonExt.rules
+        }
+      }
+    },
+    enableInb: {
+      get() :boolean { return this.subJsonExt?.inbounds != undefined },
+      set(v:boolean) { v ? this.subJsonExt.inbounds = this.defaultInb.slice() : delete this.subJsonExt.inbounds }
+    },
+    enableExp: {
+      get() :boolean { return this.subJsonExt?.experimental != undefined },
+      set(v:boolean) { v ? this.subJsonExt.experimental = this.defaultExp : delete this.subJsonExt.experimental }
+    },
+    dns():any { return this.subJsonExt?.dns?? undefined },
+    proxyDns: {
+      get() :string { return this.dns?.servers[0]?.address?? "" },
+      set(v:string) { this.dns.servers[0].address = v.length>0 ? v : "8.8.8.8" }
+    },
+    directDns: {
+      get() :string { return this.dns?.servers?.findLast((d:any) => d.tag == "direct-dns")?.address?? "" },
+      set(v:string) {
+        const sIndex = this.dns.servers.findIndex((d:any) => d.tag == "direct-dns")
+        if (v?.length>0) {
+          if (sIndex === -1) {
+            this.dns.servers.push({ tag: "direct-dns", address: v, detour: "direct" })
+            this.dns.rules.push({ clash_mode: "Direct", server: "direct-dns" })
+          } else {
+            this.dns.servers[sIndex].address = v
+          }
+        } else {
+          this.dns.servers.splice(sIndex,1)
+          this.dns.rules = this.dns.rules.filter((r:any) => r.server != "direct-dns")
+        }
+      },
+    },
+    dnsToDirect: {
+      get() :string[] {
+        const ruleIndex = this.dns?.rules?.findIndex((r:any) => r.server == "direct-dns" && Object.hasOwn(r,'rule_set'))
+        return ruleIndex >= 0 ? this.dns.rules[ruleIndex].rule_set : []
+      },
+      set(v:string[]) {
+        const ruleIndex = this.dns?.rules?.findIndex((r:any) => r.server == "direct-dns" && Object.hasOwn(r,'rule_set'))
+        if (v.length>0) {
+          if (ruleIndex >= 0){
+            this.dns.rules[ruleIndex].rule_set = v
+          } else {
+            this.dns.rules.push({ rule_set: v, server: "direct-dns" })
+          }
+        } else {
+          if (ruleIndex != -1) this.dns.rules.splice(ruleIndex,1)
+        }
+        this.updateRuleSets()
+      }
+    },
+    inbounds():any[] { return this.subJsonExt?.inbounds?? undefined },
+    platformProxy: {
+      get() :boolean { return this.inbounds[0]?.platform != undefined },
+      set(v:boolean) { this.subJsonExt.inbounds[0].platform = v ? this.defaultInb[0].platform : undefined }
+    },
+    rules():any { return this.subJsonExt?.rules?? undefined },
+    ruleToDirect: {
+      get() :string[] {
+        const ruleIndex = this.rules?.findIndex((r:any) => r.outbound == "direct" && Object.hasOwn(r,'rule_set'))
+        return ruleIndex >= 0 ? this.rules[ruleIndex].rule_set : []
+      },
+      set(v:string[]) {
+        const ruleIndex = this.rules?.findIndex((r:any) => r.outbound == "direct" && Object.hasOwn(r,'rule_set'))
+        if (v.length>0) {
+          if (ruleIndex >= 0){
+            this.rules[ruleIndex].rule_set = v
+          } else {
+            if (this.rules == undefined) this.subJsonExt.rules = []
+            this.rules.push({ rule_set: v, outbound: "direct" })
+          }
+        } else {
+          if (ruleIndex != -1) this.rules.splice(ruleIndex,1)
+        }
+        this.updateRuleSets()
+      }
+    },
+    ruleToBlock: {
+      get() :string[] {
+        const ruleIndex = this.rules?.findIndex((r:any) => r.outbound == "block" && Object.hasOwn(r,'rule_set'))
+        return ruleIndex >= 0 ? this.rules[ruleIndex].rule_set : []
+      },
+      set(v:string[]) {
+        const ruleIndex = this.rules?.findIndex((r:any) => r.outbound == "block" && Object.hasOwn(r,'rule_set'))
+        if (v.length>0) {
+          if (ruleIndex >= 0){
+            this.rules[ruleIndex].rule_set = v
+          } else {
+            if (this.rules == undefined) this.subJsonExt.rules = []
+            this.rules.push({ rule_set: v, outbound: "block" })
+          }
+        } else {
+          if (ruleIndex != -1) this.rules.splice(ruleIndex,1)
+        }
+        this.updateRuleSets()
+      }
+    }
+  },
+  methods: {
+    updateRuleSets(){
+      let tags = <string[]>[]
+      if (this.dns?.rules?.length>0) this.dns.rules.forEach((r:any) => { if (r.rule_set) tags.push(...r.rule_set) })
+      if (this.rules?.length>0) this.rules.forEach((r:any) => { if (r.rule_set) tags.push(...r.rule_set) })
+      if (tags.length>0){
+        this.subJsonExt.rule_set = this.geo.filter((g:any) => tags.includes(g.tag))
+      } else {
+        delete this.subJsonExt.rule_set
+      }
+      if (this.rules.length == 0) delete this.subJsonExt.rules
+    }
+  },
+  mounted(){
+    this.subJsonExt = this.$props.settings?.subJsonExt?.length>0 ? JSON.parse(this.$props.settings.subJsonExt) : <any>{}
+  },
+  watch:{
+    subJsonExt:{
+      handler(v) {
+        this.$props.settings.subJsonExt = Object.keys(v).length>0 ? JSON.stringify(v, null, 2) : ""
+      },
+      deep: true
+    },
+  }
+}
+</script>

frontend/src/components/Transport.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card :subtitle="$t('in.transport')">
+    <v-card :subtitle="$t('objects.transport')">
     <v-row>
       <v-col cols="12" sm="6" md="4">
         <v-switch color="primary" :label="$t('transport.enable')" v-model="tpEnable" hide-details></v-switch>
@@ -7,7 +7,6 @@
       <v-col cols="12" sm="6" md="4" v-if="tpEnable">
         <v-select
           hide-details
-          width="100"
           :label="$t('type')"
           :items="Object.keys(trspTypes).map((key,index) => ({title: key, value: Object.values(trspTypes)[index]}))"
           v-model="transportType">
@@ -28,7 +27,7 @@ import WebSocket from './transports/WebSocket.vue'
 import GRPC from './transports/gRPC.vue'
 import HttpUpgrade from './transports/HttpUpgrade.vue'
 export default {
-  props: ['inbound'],
+  props: ['data'],
   data() {
     return {
       trspTypes: TrspTypes
@@ -36,15 +35,15 @@ export default {
   },
   computed: {
     Transport() {
-      return <Transport>this.$props.inbound.transport
+      return <Transport>this.$props.data.transport
     },
     tpEnable: {
-      get() { return Object.hasOwn(this.$props.inbound.transport, 'type') },
+      get() { return Object.hasOwn(this.$props.data.transport, 'type') },
-      set(newValue: boolean) { this.$props.inbound.transport = newValue ? { type: 'http' } : {} }
+      set(newValue: boolean) { this.$props.data.transport = newValue ? { type: 'http' } : {} }
     },
     transportType: {
       get() { return this.Transport.type },
-      set(newValue: string) { this.$props.inbound.transport = { type: newValue } }
+      set(newValue: string) { this.$props.data.transport = { type: newValue } }
     }
   },
   components: { Http, WebSocket, GRPC, HttpUpgrade }

frontend/src/components/UoT.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-select
+    hide-details
+    label="UDP over TCP"
+    :items="versions"
+    v-model="udp_over_tcp">
+  </v-select>
+</template>
+
+<script lang="ts">
+export default {
+  props: ['data'],
+  data() {
+    return {
+      versions: [
+        { title: this.$t('disable'), value: 0 },
+        { title: "1", value: 1 },
+        { title: "2", value: 2 },
+      ],
+    }
+  },
+  computed: {
+    udp_over_tcp: {
+      get():number { return this.$props.data.udp_over_tcp?.version?? 0 },
+      set(v:number) { this.$props.data.udp_over_tcp = v > 0 ? { enabled: true, version: v } : undefined }
+    }
+  }
+}
+</script>

frontend/src/components/Users.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card subtitle="Clients">
+  <v-card :subtitle="$t('pages.clients')">
     <v-row>
       <v-col cols="12" sm="6" md="4">
         <v-switch 
@@ -16,7 +16,7 @@
 <script lang="ts">
 
 export default {
-  props: ['inbound', 'id'],
+  props: ['inbound'],
   data() {
     return {
       hasUser: false,

frontend/src/components/WgPeer.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-row>
+    <v-col cols="12" sm="6" md="4">
+      <v-text-field
+      :label="$t('out.addr')"
+      hide-details
+      v-model="data.server">
+      </v-text-field>
+    </v-col>
+    <v-col cols="12" sm="6" md="4">
+      <v-text-field
+      :label="$t('out.port')"
+      type="number"
+      min="0"
+      hide-details
+      v-model="data.server_port">
+      </v-text-field>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col cols="12" sm="6">
+      <v-text-field v-model="data.public_key" :label="$t('types.wg.pubKey')" hide-details></v-text-field>
+    </v-col>
+    <v-col cols="12" sm="6">
+      <v-text-field v-model="data.pre_shared_key" :label="$t('types.wg.psk')" hide-details></v-text-field>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col cols="12" sm="6">
+      <v-text-field v-model="allowed_ips" :label="$t('types.wg.allowedIp') + ' ' + $t('commaSeparated')" hide-details></v-text-field>
+    </v-col>
+    <v-col cols="12" sm="6">
+      <v-text-field v-model="reserved" :label="'Reserved ' + $t('commaSeparated')" hide-details></v-text-field>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+export default {
+  props: ['data'],
+  data() {
+    return {}
+  },
+  computed: {
+    allowed_ips: {
+      get() { return this.$props.data.allowed_ips?.join(',') },
+      set(v:string) { this.$props.data.allowed_ips = v.length > 0 ? v.split(',') : undefined }
+    },
+    reserved: {
+      get() { return this.$props.data.reserved?.join(',') },
+      set(v:string) {
+        if(!v.endsWith(',')) {
+          this.$props.data.reserved = v.length > 0 ? v.split(',').map(str => parseInt(str, 10)) : undefined
+        }
+      }
+    },
+  }
+}
+</script>

frontend/src/components/message.vue

@@ -1,18 +1,38 @@
 <template>
-    <v-snackbar
+  <Notivue v-slot="item">
-    v-model="sb.showMsg"
+    <NotivueSwipe :item="item">
-    location="top"
+      <Notification
-    :color="snackbar.color"
+        :item="item"
-    :timeout="snackbar.timeout">
+        :theme="theme"
-      {{ snackbar.message }}
+        :dir="direction"
-    </v-snackbar>
+        :icons="outlinedIcons"
+        :hideClose="true"
+        @click="item.clear"
+      />
+    </NotivueSwipe>
+  </Notivue>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { Notivue, Notification, NotivueSwipe, outlinedIcons, pastelTheme, darkTheme } from 'notivue'
-import Message from '@/store/modules/message'
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
+import vuetify from '@/plugins/vuetify';
 
-const sb = Message()
+const Theme = useTheme()
 
-const snackbar = ref(sb.snackbar)
+const theme = computed(() =>{
+  return Theme.global.name.value == "light" ? pastelTheme : darkTheme
+})
+
+const direction = computed(() => {
+  return vuetify.locale.isRtl ? 'rtl' : 'ltr'
+})
 </script>
+
+<style>
+:root {
+  --nv-z: 10020;
+}
+
+</style>

frontend/src/components/protocols/Direct.vue

@@ -1,23 +1,23 @@
 <template>
   <v-card subtitle="Direct">
     <v-row>
-      <v-col cols="12" sm="6" md="4">
+      <v-col cols="12" sm="6" md="4" v-if="direction == 'in'">
-        <Network :inbound="inbound" />
+        <Network :data="data" />
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Override Address"
+        :label="$t('types.direct.overrideAddr')"
         hide-details
-        v-model="inbound.override_address">
+        v-model="data.override_address">
         </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Override Port"
+        :label="$t('types.direct.overridePort')"
         type="number"
         min="0"
         hide-details
-        v-model="override_port">
+        v-model.number="override_port">
         </v-text-field>
       </v-col>
     </v-row>
@@ -28,14 +28,14 @@
 import Network from '@/components/Network.vue'
 
 export default {
-    props: ['inbound'],
+  props: ['direction','data'],
   data() {
     return {}
   },
   computed: {
     override_port: {
-            get() { return this.$props.inbound.override_port ? this.$props.inbound.override_port : ''; },
+        get() { return this.$props.data.override_port ? this.$props.data.override_port : ''; },
-            set(newValue: any) { this.$props.inbound.override_port = newValue.length == 0 || newValue == 0 ? undefined : parseInt(newValue); }
+        set(newValue: any) { this.$props.data.override_port = newValue.length == 0 || newValue == 0 ? undefined : parseInt(newValue); }
     },
   },
   components: { Network }

frontend/src/components/protocols/Http.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-card subtitle="HTTP">
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+        :label="$t('types.un')"
+        hide-details
+        v-model="username">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+        :label="$t('types.pw')"
+        hide-details
+        v-model="password">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+        :label="$t('transport.path')"
+        hide-details
+        v-model="data.path">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <Headers :data="data" />
+  </v-card>
+</template>
+
+<script lang="ts">
+import Headers from '@/components/Headers.vue';
+
+export default {
+  props: ['data'],
+  data() {
+    return {}
+  },
+  computed: {
+    username: {
+      get(): string { return this.data.username?.length > 0 ? this.data.username : '' },
+      set(v:string) { this.data.username = v.length > 0 ? v : undefined },
+    },
+    password: {
+      get(): string { return this.data.password?.length > 0 ? this.data.password : '' },
+      set(v:string) { this.data.password = v.length > 0 ? v : undefined },
+    },
+  },
+  components: { Headers }
+}
+</script>

frontend/src/components/protocols/Hysteria.vue

@@ -3,19 +3,19 @@
     <v-row>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Uplink Limit"
+        :label="$t('stats.upload')"
         hide-details
         type="number"
-        suffix="Mbps"
+        :suffix="$t('stats.Mbps')"
         v-model.number="up_mbps">
         </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Downlink Limit"
+        :label="$t('stats.download')"
         hide-details
         type="number"
-        suffix="Mbps"
+        :suffix="$t('stats.Mbps')"
         min="0"
         v-model.number="down_mbps">
         </v-text-field>
@@ -24,40 +24,136 @@
     <v-row>
       <v-col cols="12" sm="6" md="4">
        <v-text-field
-        label="obfs Password"
+       :label="$t('types.hy.obfs')"
         hide-details
-        v-model="inbound.obfs">
+        v-model="data.obfs">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="direction=='out'">
+        <v-text-field
+        :label="$t('types.hy.auth')"
+        hide-details
+        v-model="data.auth_str">
         </v-text-field>
       </v-col>
     </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4" v-if="direction=='out'">
+        <Network :data="data" />
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch v-model="data.disable_mtu_discovery" color="primary" label="Disable MTU discovery" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4" v-if="data.recv_window_conn != undefined">
+        <v-text-field
+        label="Recv window conn"
+        hide-details
+        type="number"
+        min="0"
+        v-model.number="data.recv_window_conn">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.recv_window != undefined">
+        <v-text-field
+        label="Recv window"
+        hide-details
+        type="number"
+        min="0"
+        v-model.number="data.recv_window">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.recv_window_client != undefined">
+        <v-text-field
+        label="Recv window client"
+        hide-details
+        type="number"
+        min="0"
+        v-model.number="data.recv_window_client">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.max_conn_client != undefined">
+        <v-text-field
+        label="Max conn client"
+        hide-details
+        type="number"
+        min="0"
+        v-model.number="data.max_conn_client">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.hy.hyOptions') }}</v-btn>
+        </template>
+        <v-card>
+          <v-list>
+            <v-list-item>
+              <v-switch v-model="optionRsvConn" color="primary" label="Recv window conn" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item v-if="direction=='out'">
+              <v-switch v-model="optionRsvWin" color="primary" label="Recv window" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item v-if="direction=='in'">
+              <v-switch v-model="optionRsvClnt" color="primary" label="Recv window client" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item v-if="direction=='in'">
+              <v-switch v-model="optionMaxConn" color="primary" label="Max conn client" hide-details></v-switch>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </v-card-actions>
   </v-card>
 </template>
 
 <script lang="ts">
+import Network from '@/components/Network.vue'
 
 export default {
-  props: ['inbound'],
+  props: ['direction','data'],
   data() {
     return {
+      menu: false,
     }
   },
   computed: {
+    optionRsvConn: {
+      get(): boolean { return this.$props.data.recv_window_conn != undefined },
+      set(v:boolean) { this.$props.data.recv_window_conn = v ? 15728640 : undefined }
+    },
+    optionRsvWin: {
+      get(): boolean { return this.$props.data.recv_window != undefined },
+      set(v:boolean) { this.$props.data.recv_window = v ? 67108864 : undefined }
+    },
+    optionRsvClnt: {
+      get(): boolean { return this.$props.data.recv_window_client != undefined },
+      set(v:boolean) { this.$props.data.recv_window_client = v ? 67108864 : undefined }
+    },
+    optionMaxConn: {
+      get(): boolean { return this.$props.data.max_conn_client != undefined },
+      set(v:boolean) { this.$props.data.max_conn_client = v ? 1024 : undefined }
+    },
     down_mbps: {
-      get() { return this.$props.inbound.down_mbps ? this.$props.inbound.down_mbps : 0 },
+      get() { return this.$props.data.down_mbps ? this.$props.data.down_mbps : 0 },
       set(newValue:any) {
         if (newValue.length != 0 ){
-          this.$props.inbound.down_mbps = newValue
+          this.$props.data.down_mbps = newValue
-          this.$props.inbound.down = "" + newValue + " Mbps"
+          this.$props.data.down = "" + newValue + " Mbps"
         } else {
-          this.$props.inbound.down_mbps = 0
+          this.$props.data.down_mbps = 0
-          this.$props.inbound.down = "0 Mbps"
+          this.$props.data.down = "0 Mbps"
         }
       }
     },
     up_mbps: {
-      get() { return this.$props.inbound.up_mbps ? this.$props.inbound.up_mbps : 0 },
+      get() { return this.$props.data.up_mbps ? this.$props.data.up_mbps : 0 },
-      set(newValue:number) { this.$props.inbound.up_mbps = newValue > 0 ? newValue : 0 }
+      set(newValue:number) { this.$props.data.up_mbps = newValue > 0 ? newValue : 0 }
     },
   },
+  components: { Network }
 }
 </script>

frontend/src/components/protocols/Hysteria2.vue

@@ -1,43 +1,57 @@
 <template>
   <v-card subtitle="Hysteria2">
-    <v-row>
+    <v-row v-if="direction == 'in'">
-      <v-col cols="12" sm="6" md="4">
+      <v-col cols="12" sm="6" md="4" v-if="data.masquerade != undefined">
         <v-text-field
-        label="Masquerade"
+        label="HTTP3 server on auth fail"
         hide-details
-        v-model="hysteria2.masquerade"></v-text-field>
+        v-model="data.masquerade">
+        </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4">
-        <v-switch v-model="hysteria2.ignore_client_bandwidth" color="primary" label="Ignore Client Bandwidth" hide-details></v-switch>
+        <v-switch v-model="data.ignore_client_bandwidth" color="primary" :label="$t('types.hy.ignoreBw')" hide-details></v-switch>
       </v-col>
     </v-row>
-    <v-row v-if="!hysteria2.ignore_client_bandwidth">
+    <v-row v-else>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Uplink Limit"
+        :label="$t('types.pw')"
+        hide-details
+        v-model="data.password">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <Network :data="data" />
+      </v-col>
+    </v-row>
+    <v-row v-if="!data.ignore_client_bandwidth">
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+        :label="$t('stats.upload')"
         hide-details
         type="number"
-        suffix="Mbps"
+        :suffix="$t('stats.Mbps')"
+        min="0"
         v-model.number="up_mbps">
         </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Downlink Limit"
+        :label="$t('stats.download')"
         hide-details
         type="number"
-        suffix="Mbps"
+        :suffix="$t('stats.Mbps')"
         min="0"
         v-model.number="down_mbps">
         </v-text-field>
       </v-col>
     </v-row>
-    <v-row v-if="hysteria2.obfs">
+    <v-row v-if="data.obfs != undefined">
       <v-col cols="12" sm="6" md="4">
        <v-text-field
-        label="obfs Password"
+        :label="$t('types.hy.obfs')"
         hide-details
-        v-model="hysteria2.obfs.password">
+        v-model="data.obfs.password">
         </v-text-field>
       </v-col>
     </v-row>
@@ -45,12 +59,15 @@
       <v-spacer></v-spacer>
       <v-menu v-model="menu" :close-on-content-click="false" location="start">
         <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" hide-details>Options</v-btn>
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.hy.hy2Options') }}</v-btn>
         </template>
         <v-card>
           <v-list>
             <v-list-item>
-              <v-switch v-model="optionObfs" color="primary" label="Obfs" hide-details></v-switch>
+              <v-switch v-model="optionObfs" color="primary" :label="$t('types.hy.obfs')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionMasq" color="primary" label="Masquerade" hide-details></v-switch>
             </v-list-item>
           </v-list>
         </v-card>
@@ -60,32 +77,33 @@
 </template>
 
 <script lang="ts">
-import { Hysteria2, createInbound } from '@/types/inbounds'
+import Network from '@/components/Network.vue'
 
 export default {
-  props: ['inbound'],
+  props: ['direction', 'data'],
   data() {
     return {
       menu: false,
-      hysteria2: <Hysteria2> createInbound("hysteria2",{ "tag": "" }),
     }
   },
   computed: {
     down_mbps: {
-      get() { return this.hysteria2.down_mbps ? this.hysteria2.down_mbps : 0 },
+      get() { return this.$props.data.down_mbps?? 0 },
-      set(newValue:any) { this.hysteria2.down_mbps = newValue.length == 0 ?  undefined : this.hysteria2.down_mbps }
+      set(newValue:number) { this.$props.data.down_mbps = newValue>0 ? newValue : undefined }
     },
     up_mbps: {
-      get() { return this.hysteria2.up_mbps ? this.hysteria2.up_mbps : 0 },
+      get() { return this.$props.data.up_mbps?? 0 },
-      set(newValue:any) { this.hysteria2.up_mbps = newValue.length == 0 ?  undefined : this.hysteria2.up_mbps }
+      set(newValue:number) { this.$props.data.up_mbps = newValue>0 ? newValue : undefined }
     },
     optionObfs: {
-      get(): boolean { return this.hysteria2.obfs != undefined },
+      get(): boolean { return this.$props.data.obfs != undefined },
-      set(v:boolean) { this.$props.inbound.obfs = v ? { type: "salamander", password: ""} : undefined }
+      set(v:boolean) { this.$props.data.obfs = v ? { type: "salamander", password: "" } : undefined }
+    },
+    optionMasq: {
+      get(): boolean { return this.$props.data.masquerade != undefined },
+      set(v:boolean) { this.$props.data.masquerade = v ? "" : undefined }
     }
   },
-  mounted() {
+  components: { Network }
-    this.hysteria2 = <Hysteria2> this.$props.inbound
-  }
 }
 </script>

frontend/src/components/protocols/Naive.vue

@@ -2,7 +2,7 @@
   <v-card subtitle="Naive">
     <v-row>
       <v-col cols="12" sm="6" md="4">
-        <Network :inbound="inbound" />
+        <Network :data="inbound" />
       </v-col>
     </v-row>
   </v-card>

frontend/src/components/protocols/OutShadowTls.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-card subtitle="ShadowTls">
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :items="[1,2,3]"
+          :label="$t('version')"
+          v-model="version">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.version > 1">
+        <v-text-field
+        :label="$t('types.pw')"
+        hide-details
+        v-model="data.password">
+        </v-text-field>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: ['data'],
+  data() {
+    return {}
+  },
+  computed: {
+    version: {
+      get() { return this.$props.data.version ?? 3 },
+      set(v: number) {
+        this.$props.data.version = v
+        if (v==1) {
+          delete this.$props.data.password
+        } else if (this.$props.data.password === undefined ) {
+          this.$props.data.password = ""
+        }
+      }
+    },
+  }
+}
+</script>

frontend/src/components/protocols/Selector.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-card subtitle="Selector">
+    <v-row>
+      <v-col cols="12" sm="6">
+        <v-combobox
+          v-model="data.outbounds"
+          :items="tags"
+          :label="$t('pages.outbounds')"
+          multiple
+          @update:model-value="updateDefault"
+          chips
+          hide-details
+        ></v-combobox>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-combobox
+          v-model="data.default"
+          :items="data.outbounds"
+          :label="$t('types.lb.defaultOut')"
+          clearable
+          hide-details
+        ></v-combobox>
+      </v-col>
+      <v-col cols="12" sm="6">
+        <v-switch v-model="data.interrupt_exist_connections" color="primary" :label="$t('types.lb.interruptConn')" hide-details></v-switch>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: ['data','tags'],
+  data() {
+    return {}
+  },
+  methods: {
+    updateDefault() {
+      if (!this.$props.data.outbounds?.includes(this.$props.data.default)) {
+        delete this.$props.data.default
+      }
+    }
+  },
+}
+</script>

frontend/src/components/protocols/ShadowTls.vue

@@ -5,41 +5,41 @@
         <v-select
           hide-details
           :items="[1,2,3]"
-          label="Version"
+          :label="$t('version')"
           v-model="version">
         </v-select>
       </v-col>
-      <v-col cols="12" sm="6" md="4" v-if="inbound.password != undefined">
+      <v-col cols="12" sm="6" md="4" v-if="data.password != undefined">
         <v-text-field
-        label="Password"
+        :label="$t('types.pw')"
         hide-details
-        v-model="inbound.password">
+        v-model="data.password">
         </v-text-field>
       </v-col>
     </v-row>
     <v-row>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Handshake Server"
+        :label="$t('types.shdwTls.hs')"
         hide-details
         v-model="Inbound.handshake.server">
         </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Server Port"
+        :label="$t('out.port')"
         type="number"
         min="0"
         hide-details
-        v-model="server_port">
+        v-model.number="server_port">
         </v-text-field>
       </v-col>
     </v-row>
-    <Dial :dial="Inbound.handshake" />
+    <Dial :dial="Inbound.handshake" :outTags="outTags" />
     <v-row v-if="Inbound.handshake_for_server_name != undefined">
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Add Hanshake Server"
+        :label="$t('types.shdwTls.addHS')"
         hide-details
         append-icon="mdi-plus"
         @click:append="addHandshakeServer()"
@@ -67,22 +67,22 @@
       <v-row>
         <v-col cols="12" sm="6" md="4">
           <v-text-field
-          label="Handshake Server"
+          :label="$t('types.shdwTls.hs')"
           hide-details
           v-model="value.server">
           </v-text-field>
         </v-col>
         <v-col cols="12" sm="6" md="4">
           <v-text-field
-          label="Server Port"
+          :label="$t('out.port')"
           type="number"
           min="0"
           hide-details
-          v-model="value.server_port">
+          v-model.number="value.server_port">
           </v-text-field>
         </v-col>
       </v-row>
-      <Dial :dial="value" />
+      <Dial :dial="value" :outTags="outTags" />
     </v-card>
   </v-card>
 </template>
@@ -92,7 +92,7 @@ import { ShadowTLS } from '@/types/inbounds'
 import Dial from '../Dial.vue'
 
 export default {
-    props: ['inbound'],
+  props: ['data', 'outTags'],
   data() {
     return {
       handshake_server: ''
@@ -100,7 +100,7 @@ export default {
   },
   methods: {
     addHandshakeServer() {
-        this.inbound.handshake_for_server_name[this.handshake_server] = {}
+      this.data.handshake_for_server_name[this.handshake_server] = {}
       // Clear the input field after adding the server
       this.handshake_server = ''
     }
@@ -114,22 +114,22 @@ export default {
       set(newValue: any) {
         switch (newValue) {
         case 1:
-                        this.Inbound.password = undefined
+          delete this.Inbound.password
-                        this.Inbound.users = undefined
+          delete this.Inbound.users
-                        this.Inbound.handshake_for_server_name = undefined
+          delete this.Inbound.handshake_for_server_name
           break;
         case 2:
           if (!this.Inbound.password) {
             this.Inbound.password = ""
           }
-                        this.Inbound.users = undefined
+          delete this.Inbound.users
           if (!this.Inbound.handshake_for_server_name) {
             this.Inbound.handshake_for_server_name = {}
           }
           break;
         case 3:
-                        this.Inbound.password = undefined
+          delete this.Inbound.password
-                        if (Object.hasOwn(this.Inbound, 'users')) {
+          if (!Object.hasOwn(this.Inbound, 'users')) {
             this.Inbound.users = []
           }
           if (!this.Inbound.handshake_for_server_name) {
@@ -141,7 +141,7 @@ export default {
       }
     },
     Inbound(): ShadowTLS {
-            return <ShadowTLS>this.$props.inbound;
+      return <ShadowTLS>this.$props.data;
     },
     server_port: {
       get() { return this.Inbound.handshake.server_port ? this.Inbound.handshake.server_port : 443; },

frontend/src/components/protocols/Shadowsocks.vue

@@ -4,16 +4,28 @@
       <v-col cols="12" sm="6" md="4">
         <v-select
           hide-details
-          label="Method"
+          :label="$t('in.ssMethod')"
           :items="ssMethods"
-          v-model="inbound.method">
+          @update:model-value="changeMethod($event)"
+          v-model="data.method">
         </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4">
-        <v-text-field v-model="inbound.password" label="Password" hide-details></v-text-field>
+        <Network :data="data" />
       </v-col>
-      <v-col cols="12" sm="6" md="4">
+      <v-col cols="12" sm="6" md="4" v-if="direction == 'out'">
-        <Network :inbound="inbound" />
+        <UoT :data="data" />
+      </v-col>
+    </v-row>
+    <v-row v-if="data.method.startsWith('2022')">
+      <v-col cols="12" sm="8">
+        <v-text-field
+          v-model="data.password"
+          :label="$t('types.pw')"
+          hide-details
+          append-inner-icon="mdi-refresh"
+          @click:append-inner="changeMethod(data.method)">
+        </v-text-field>
       </v-col>
     </v-row>
   </v-card>
@@ -21,9 +33,11 @@
 
 <script lang="ts">
 import Network from '@/components/Network.vue'
+import UoT from '@/components/UoT.vue';
+import RandomUtil from '@/plugins/randomUtil';
 
 export default {
-    props: ['inbound'],
+  props: ['direction','data'],
   data() {
     return {
       ssMethods: [
@@ -39,6 +53,15 @@ export default {
       ]
     }
   },
-    components: { Network }
+  methods: {
+    changeMethod(ssMethod :string) {
+      if (ssMethod.startsWith('2022')) {
+        this.$props.data.password = ssMethod == "2022-blake3-aes-128-gcm" ? RandomUtil.randomShadowsocksPassword(16) : RandomUtil.randomShadowsocksPassword(32)
+      } else {
+        this.$props.data.password = ''
+      }
+    }
+  },
+  components: { Network, UoT }
 }
 </script>

frontend/src/components/protocols/Socks.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-card subtitle="SOCKS">
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+        :label="$t('types.un')"
+        hide-details
+        v-model="username">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+        :label="$t('types.pw')"
+        hide-details
+        v-model="password">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :items="['4','4a','5']"
+          :label="$t('version')"
+          v-model="data.version">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <Network :data="data" />
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <UoT :data="data" />
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Network from '@/components/Network.vue'
+import UoT from '@/components/UoT.vue';
+
+export default {
+  props: ['data'],
+  data() {
+    return {}
+  },
+  computed: {
+    username: {
+      get(): string { return this.data.username?.length > 0 ? this.data.username : '' },
+      set(v:string) { this.data.username = v.length > 0 ? v : undefined },
+    },
+    password: {
+      get(): string { return this.data.password?.length > 0 ? this.data.password : '' },
+      set(v:string) { this.data.password = v.length > 0 ? v : undefined },
+    },
+  },
+  components: { Network, UoT }
+}
+</script>

frontend/src/components/protocols/Ssh.vue

@@ -0,0 +1,151 @@
+<template>
+  <v-card subtitle="SSH">
+    <template v-if="optionKey">
+        <v-row>
+          <v-col cols="auto">
+            <v-btn-toggle v-model="usePath"
+            class="rounded-xl"
+            density="compact"
+            variant="outlined"
+            shaped
+            mandatory>
+              <v-btn
+                @click="data.private_key=undefined; data.private_key_path=''"
+              >{{ $t('tls.usePath') }}</v-btn>
+              <v-btn
+                @click="data.private_key_path=undefined; data.private_key=''"
+              >{{ $t('tls.useText') }}</v-btn>
+            </v-btn-toggle>
+          </v-col>
+        </v-row>
+        <v-row v-if="usePath == 0">
+          <v-col cols="12" sm="6">
+            <v-text-field
+              :label="$t('tls.keyPath')"
+              hide-details
+              v-model="data.private_key_path">
+            </v-text-field>
+          </v-col>
+        </v-row>
+        <v-row v-else>
+          <v-col cols="12" sm="6">
+            <v-textarea
+              :label="$t('tls.key')"
+              hide-details
+              v-model="data.private_key">
+            </v-textarea>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12" sm="6">
+            <v-text-field
+              :label="$t('types.ssh.passphrase')"
+              hide-details
+              v-model="data.private_key_passphrase">
+            </v-text-field>
+          </v-col>
+        </v-row>
+      </template>
+      <template v-else>
+        <v-row>
+          <v-col cols="12" sm="6" md="4">
+            <v-text-field v-model="data.user" :label="$t('types.un')" hide-details></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-text-field v-model="data.password" :label="$t('types.pw')" hide-details></v-text-field>
+          </v-col>
+        </v-row>
+      </template>
+    <v-row v-if="optionHostKey">
+      <v-col cols="12" sm="6">
+        <v-textarea
+          :label="$t('types.ssh.hostKey')"
+          hide-details
+          v-model="host_key">
+        </v-textarea>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4" v-if="data.host_key_algorithms != undefined">
+        <v-text-field v-model="algorithms" :label="$t('types.ssh.algorithm') + ' ' + $t('commaSeparated')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.client_version != undefined">
+        <v-text-field v-model="data.client_version" :label="$t('types.ssh.clientVer')" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+          <template v-slot:activator="{ props }">
+            <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.ssh.options') }}</v-btn>
+          </template>
+          <v-card>
+            <v-list>
+              <v-list-item>
+                <v-switch v-model="optionKey" color="primary" label="SSH Key" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionHostKey" color="primary" :label="$t('types.ssh.hostKey')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionAlgorithms" color="primary" :label="$t('types.ssh.algorithm')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionVer" color="primary" :label="$t('types.ssh.clientVer')" hide-details></v-switch>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: ['data'],
+  data() {
+    return {
+      menu: false,
+      usePath: 0,
+    }
+  },
+  computed: {
+    optionKey: {
+      get(): boolean { return this.data.private_key != undefined || this.data.private_key_path != undefined },
+      set(v:boolean) {
+        this.usePath = 0
+        if (v) {
+          this.$props.data.private_key_path = ""
+          delete this.$props.data.user
+          delete this.$props.data.password
+        } else {
+          delete this.$props.data.private_key_path
+          delete this.$props.data.private_key
+          delete this.$props.data.private_key_passphrase
+        }
+      }
+    },
+    optionHostKey: {
+      get(): boolean { return this.data.host_key != undefined },
+      set(v:boolean) { this.data.host_key = v ? '' : undefined }
+    },
+    optionAlgorithms: {
+      get(): boolean { return this.data.host_key_algorithms != undefined },
+      set(v:boolean) { this.data.host_key_algorithms = v ? [] : undefined }
+    },
+    optionVer: {
+      get(): boolean { return this.data.client_version != undefined },
+      set(v:boolean) { this.data.client_version = v ? 'SSH-2.0-OpenSSH_7.4p1' : undefined }
+    },
+    host_key: {
+      get(): string { return this.$props.data.host_key ? this.$props.data.host_key.join('\n') : '' },
+      set(v:string) { this.$props.data.host_key = v.split('\n') }
+    },
+    algorithms: {
+      get() { return this.$props.data.host_key_algorithms ? this.$props.data.host_key_algorithms.join(',') : '' },
+      set(v:string) { this.$props.data.host_key_algorithms = v.length > 0 ? v.split(',') : undefined }
+    },
+  },
+}
+</script>

frontend/src/components/protocols/TProxy.vue

@@ -2,7 +2,7 @@
   <v-card subtitle="TProxy">
     <v-row>
       <v-col cols="12" sm="6" md="4">
-        <Network :inbound="inbound" />
+        <Network :data="inbound" />
       </v-col>
     </v-row>
   </v-card>

frontend/src/components/protocols/Tor.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-card subtitle="Tor">
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field v-model="data.executable_path" :label="$t('types.tor.execPath')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field v-model="data.data_directory" :label="$t('types.tor.dataDir')" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field v-model="extra_args" :label="$t('types.tor.extArgs') + ' ' + $t('commaSeparated')" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: ['data'],
+  data() {
+    return {}
+  },
+  computed: {
+    extra_args: {
+      get() { return this.$props.data.extra_args?.join(',') },
+      set(v:string) { this.$props.data.extra_args = v.length > 0 ? v.split(',') : undefined }
+    },
+  },
+}
+</script>

frontend/src/components/protocols/Trojan.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-card subtitle="Trojan">
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field v-model="data.password" :label="$t('types.pw')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <Network :data="data" />
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Network from '@/components/Network.vue'
+
+export default {
+  props: ['data'],
+  data() {
+    return {}
+  },
+  components: { Network }
+}
+</script>

frontend/src/components/protocols/Tuic.vue

@@ -1,35 +1,59 @@
 <template>
   <v-card subtitle="TUIC">
-    <v-row>
+    <v-row v-if="direction == 'out'">
+      <v-col cols="12" sm="6">
+        <v-text-field v-model="data.uuid" label="UUID" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field v-model="data.password" :label="$t('types.pw')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <Network :data="data" />
+      </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-select
           hide-details
-          label="Congestion Control"
+          label="UDP Relay Mode"
-          :items="congestion_controls"
+          :items="['native', 'quic']"
-          v-model="inbound.congestion_control">
+          clearable
+          @click:clear="delete data.udp_relay_mode"
+          v-model="data.udp_relay_mode">
         </v-select>
       </v-col>
       <v-col cols="12" sm="6" md="4">
-        <v-switch color="primary" label="Zero-RTT Handshake" v-model="inbound.zero_rtt_handshake" hide-details></v-switch>
+        <v-switch color="primary" label="UDP Over Stream" v-model="data.udp_over_stream" hide-details></v-switch>
       </v-col>
     </v-row>
     <v-row>
       <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :label="$t('types.tuic.congControl')"
+          :items="congestion_controls"
+          v-model="data.congestion_control">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch color="primary" label="Zero-RTT Handshake" v-model="data.zero_rtt_handshake" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4" v-if="direction == 'in'">
         <v-text-field
-        label="Authentication Timeout"
+        :label="$t('types.tuic.authTimeout')"
         hide-details
         type="number"
-        suffix="s"
+        :suffix="$t('date.s')"
         min="1"
         v-model.number="auth_timeout">
         </v-text-field>
       </v-col>
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        label="Heartbeat"
+        :label="$t('types.tuic.hb')"
         hide-details
         type="number"
-        suffix="s"
+        :suffix="$t('date.s')"
         min="1"
         v-model.number="heartbeat">
         </v-text-field>
@@ -39,9 +63,10 @@
 </template>
 
 <script lang="ts">
-import { TUIC } from '@/types/inbounds'
+import Network from '@/components/Network.vue'
+
 export default {
-  props: ['inbound'],
+  props: ['direction', 'data'],
   data() {
     return {
       congestion_controls: [
@@ -50,17 +75,15 @@ export default {
     }
   },
   computed: {
-    Inbound(): TUIC {
-      return <TUIC> this.$props.inbound
-    },
     auth_timeout: {
-      get() { return this.Inbound.auth_timeout ? parseInt(this.Inbound.auth_timeout.replace('s','')) : '' },
+      get() { return this.$props.data.auth_timeout ? parseInt(this.$props.data.auth_timeout.replace('s','')) : '' },
-      set(newValue:number) { this.$props.inbound.auth_timeout = newValue ? newValue + 's' : '' }
+      set(newValue:number) { this.$props.data.auth_timeout = newValue ? newValue + 's' : '' }
     },
     heartbeat: {
-      get() { return this.Inbound.heartbeat ? parseInt(this.Inbound.heartbeat.replace('s','')) : '' },
+      get() { return this.$props.data.heartbeat ? parseInt(this.$props.data.heartbeat.replace('s','')) : '' },
-      set(newValue:number) { this.$props.inbound.heartbeat = newValue ? newValue + 's' : '' }
+      set(newValue:number) { this.$props.data.heartbeat = newValue ? newValue + 's' : '' }
-    }
     }
+  },
+  components: { Network }
 }
 </script>

frontend/src/components/protocols/Tun.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-card subtitle="Tun">
+    <v-row>
+      <v-col cols="12" sm="8">
+        <v-text-field v-model="addrs" :label="$t('types.tun.addr') + ' ' + $t('commaSeparated')" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field v-model="data.interface_name" :label="$t('types.tun.ifName')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field type="number" v-model.number="data.mtu" label="MTU" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+          type="number"
+          v-model.number="udpTimeout"
+          label="UDP timeout"
+          min="1"
+          :suffix="$t('date.m')"
+          hide-details>
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          v-model="data.stack"
+          label="Stack"
+          :items="['system','gvisor','mixed']"
+          hide-details
+        ></v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch v-model="data.endpoint_independent_nat" color="primary" label="Independent NAT" hide-details></v-switch>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: ['data'],
+  data() {
+    return {
+      menu: false
+    }
+  },
+  computed: {
+    addrs: {
+      get() { return this.$props.data.address?.join(',') },
+      set(v:string) { this.$props.data.address = v.length > 0 ? v.split(',') : undefined }
+    },
+    udpTimeout: {
+      get() { return this.$props.data.udp_timeout ? parseInt(this.$props.data.udp_timeout.replace('m','')) : 5 },
+      set(v:number) { this.$props.data.udp_timeout = v > 0 ? v + 'm' : '5m' }
+    }
+  },
+}
+</script>

frontend/src/components/protocols/UrlTest.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-card subtitle="URL Test">
+    <v-row>
+      <v-col cols="12" sm="6">
+        <v-combobox
+          v-model="data.outbounds"
+          :items="tags"
+          :label="$t('pages.outbounds')"
+          multiple
+          chips
+          hide-details
+        ></v-combobox>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" v-if="optionUrl">
+        <v-text-field v-model="data.url" :label="$t('types.lb.testUrl')" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4" v-if="optionInterval">
+        <v-text-field
+        :label="$t('types.lb.interval')"
+        hide-details
+        type="number"
+        min="3"
+        :suffix="$t('date.s')"
+        v-model.number="interval"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="optionTolerance">
+        <v-text-field
+        :label="$t('types.lb.tolerance')"
+        hide-details
+        type="number"
+        min="0"
+        :suffix="$t('date.ms')"
+        v-model.number="tolerance"></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="optionIdle">
+        <v-text-field
+        :label="$t('transport.idleTimeout')"
+        hide-details
+        type="number"
+        min="0"
+        :suffix="$t('date.m')"
+        v-model.number="idle_timeout"></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6">
+        <v-switch v-model="data.interrupt_exist_connections" color="primary" :label="$t('types.lb.interruptConn')" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+          <template v-slot:activator="{ props }">
+            <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.lb.urlTestOptions') }}</v-btn>
+          </template>
+          <v-card>
+            <v-list>
+              <v-list-item>
+                <v-switch v-model="optionUrl" color="primary" :label="$t('types.lb.testUrl')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionInterval" color="primary" :label="$t('types.lb.interval')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionTolerance" color="primary" :label="$t('types.lb.tolerance')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionIdle" color="primary" :label="$t('transport.idleTimeout')" hide-details></v-switch>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+export default {
+  props: ['data', 'tags'],
+  data() {
+    return {
+      menu: false,
+    }
+  },
+  computed: {
+    optionUrl: {
+      get(): boolean { return this.$props.data.url != undefined },
+      set(v:boolean) { this.$props.data.url = v ? 'https://www.gstatic.com/generate_204' : undefined }
+    },
+    optionInterval: {
+      get(): boolean { return this.$props.data.interval != undefined },
+      set(v:boolean) { this.$props.data.interval = v ? '3s' : undefined }
+    },
+    optionTolerance: {
+      get(): boolean { return this.$props.data.tolerance != undefined },
+      set(v:boolean) { this.$props.data.tolerance = v ? 50 : undefined }
+    },
+    optionIdle: {
+      get(): boolean { return this.$props.data.idle_timeout != undefined },
+      set(v:boolean) { this.$props.data.idle_timeout = v ? '30m' : undefined }
+    },
+    interval: {
+      get() { return this.$props.data.interval ? parseInt(this.$props.data.interval.replace('s','')) : 3 },
+      set(v:number) { this.$props.data.interval = v > 0 ? v + 's' : '3s' }
+    },
+    tolerance: {
+      get() { return this.$props.data.tolerance ? parseInt(this.$props.data.tolerance) : 0 },
+      set(v:number) { this.$props.data.tolerance = v > 0 ? v : 0 }
+    },
+    idle_timeout: {
+      get() { return this.$props.data.idle_timeout ? parseInt(this.$props.data.idle_timeout.replace('m','')) : 30 },
+      set(v:number) { this.$props.data.idle_timeout = v > 0 ? v + 'm' : '0m' }
+    }
+  },
+}
+</script>

frontend/src/components/protocols/Vless.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-card subtitle="VLESS">
+    <v-row>
+      <v-col cols="12" sm="6">
+        <v-text-field v-model="data.uuid" label="UUID" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :label="$t('types.vless.flow')"
+          :items="['','xtls-rprx-vision']"
+          v-model="data.flow">
+        </v-select>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :label="$t('types.vless.udpEnc')"
+          :items="['none','packetaddr','xudp']"
+          v-model="packet_encoding">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <Network :data="data" />
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Network from '@/components/Network.vue'
+
+export default {
+  props: ['data'],
+  data() {
+    return {}
+  },
+  computed: {
+    packet_encoding: {
+      get() { return this.$props.data.packet_encoding != undefined ? this.$props.data.packet_encoding : 'none'; },
+      set(newValue:string) { this.$props.data.packet_encoding = newValue != "none" ? newValue : undefined }
+    },
+  },
+  components: { Network }
+}
+</script>

frontend/src/components/protocols/Vmess.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-card subtitle="VMESS">
+    <v-row>
+      <v-col cols="12" sm="6">
+        <v-text-field v-model="data.uuid" label="UUID" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-text-field
+          label="Alter ID"
+          hide-details
+          type="number"
+          min=0
+          v-model.number="data.alter_id">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :label="$t('types.vmess.security')"
+          :items="securities"
+          v-model="data.security">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-select
+          hide-details
+          :label="$t('types.vless.udpEnc')"
+          :items="['none','packetaddr','xudp']"
+          v-model="packet_encoding">
+        </v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <Network :data="data" />
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch v-model="data.global_padding" color="primary" :label="$t('types.vmess.globalPadding')" hide-details></v-switch>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch v-model="data.authenticated_length" color="primary" :label="$t('types.vmess.authLen')" hide-details></v-switch>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Network from '@/components/Network.vue'
+
+export default {
+  props: ['data'],
+  data() {
+    return {
+      securities: [
+        "auto",
+        "none",
+        "zero",
+        "aes-128-gcm",
+        "aes-128-ctr",
+        "chacha20-poly1305",
+      ]
+    }
+  },
+  computed: {
+    packet_encoding: {
+      get() { return this.$props.data.packet_encoding != undefined ? this.$props.data.packet_encoding : 'none'; },
+      set(newValue:string) { this.$props.data.packet_encoding = newValue != "none" ? newValue : undefined }
+    },
+  },
+  components: { Network }
+}
+</script>

frontend/src/components/protocols/Wireguard.vue

@@ -0,0 +1,163 @@
+<template>
+  <v-card subtitle="Wireguard">
+    <v-row>
+      <v-col cols="12" sm="8">
+        <v-text-field v-model="data.private_key" :label="$t('types.wg.privKey')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="8">
+        <v-text-field v-model="data.peer_public_key" :label="$t('types.wg.pubKey')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="8" v-if="data.pre_shared_key != undefined">
+        <v-text-field v-model="data.pre_shared_key" :label="$t('types.wg.psk')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="8">
+        <v-text-field v-model="local_ips" :label="$t('types.wg.localIp') + ' ' + $t('commaSeparated')" hide-details></v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4" v-if="data.reserved != undefined">
+        <v-text-field v-model="reserved" :label="'Reserved ' + $t('commaSeparated')" hide-details></v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.workers != undefined">
+        <v-text-field
+        :label="$t('types.wg.worker')"
+          hide-details
+          type="number"
+          min=1
+          v-model.number="data.workers">
+        </v-text-field>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.mtu != undefined">
+        <v-text-field
+          label="MTU"
+          hide-details
+          type="number"
+          min=0
+          v-model.number="data.mtu">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <Network :data="data" />
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.interface_name != undefined">
+        <v-text-field
+          :label="$t('types.wg.ifName')"
+          hide-details
+          v-model.number="data.interface_name">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch v-model="data.system_interface" color="primary" :label="$t('types.wg.sysIf')" hide-details></v-switch>
+      </v-col>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch v-model="data.gso" color="primary" :label="$t('types.wg.gso')" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+        <template v-slot:activator="{ props }">
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.wg.options') }}</v-btn>
+        </template>
+        <v-card>
+          <v-list>
+            <v-list-item>
+              <v-switch v-model="optionPsk" color="primary" :label="$t('types.wg.psk')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionRsrv" color="primary" label="Reserved" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionWorker" color="primary" :label="$t('types.wg.worker')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionMtu" color="primary" label="MTU" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionInterface" color="primary" :label="$t('types.wg.ifName')" hide-details></v-switch>
+            </v-list-item>
+            <v-list-item>
+              <v-switch v-model="optionPeers" color="primary" :label="$t('types.wg.multiPeer')" hide-details></v-switch>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </v-card-actions>
+  </v-card>
+  <v-card v-if="data.peers != undefined">
+    <v-card-subtitle>
+      {{ $t('types.wg.peers') }} <v-icon @click="addPeer" icon="mdi-plus" />
+    </v-card-subtitle>
+    <template v-for="(p, index) in data.peers">
+      <v-card style="margin-top: 1rem;">
+        <v-card-subtitle>
+          {{ $t('types.wg.peer') + ' ' + (index+1) }} <v-icon icon="mdi-delete" @click="data.peers.splice(index,1)" />
+        </v-card-subtitle>
+        <Peer :data="p" />
+      </v-card>
+    </template>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Network from '@/components/Network.vue'
+import Peer from '@/components/WgPeer.vue'
+import { WgPeer } from '@/types/outbounds'
+
+export default {
+  props: ['data'],
+  data() {
+    return {
+      menu: false,
+    }
+  },
+  methods: {
+    addPeer() { 
+      this.$props.data.peers.push({server: '', port: ''})
+    }
+  },
+  computed: {
+    optionPsk: {
+      get(): boolean { return this.$props.data.pre_shared_key != undefined },
+      set(v:boolean) { this.$props.data.pre_shared_key = v ? "" : undefined }
+    },
+    optionRsrv: {
+      get(): boolean { return this.$props.data.reserved != undefined },
+      set(v:boolean) { this.$props.data.reserved = v ? [0,0,0] : undefined }
+    },
+    optionWorker: {
+      get(): boolean { return this.$props.data.workers != undefined },
+      set(v:boolean) { this.$props.data.workers = v ? 2 : undefined }
+    },
+    optionMtu: {
+      get(): boolean { return this.$props.data.mtu != undefined },
+      set(v:boolean) { this.$props.data.mtu = v ? 1408 : undefined }
+    },
+    optionInterface: {
+      get(): boolean { return this.$props.data.interface_name != undefined },
+      set(v:boolean) { this.$props.data.interface_name = v ? "" : undefined }
+    },
+    optionPeers: {
+      get(): boolean { return this.$props.data.peers != undefined },
+      set(v:boolean) { this.$props.data.peers = v ? <WgPeer[]>[] : undefined }
+    },
+    local_ips: {
+      get() { return this.$props.data.local_address?.join(',') },
+      set(v:string) { this.$props.data.local_address = v.length > 0 ? v.split(',') : undefined }
+    },
+    reserved: {
+      get() { return this.$props.data.reserved?.join(',') },
+      set(v:string) { 
+        if(!v.endsWith(',')) {
+          this.$props.data.reserved = v.length > 0 ? v.split(',').map(str => parseInt(str, 10)) : []
+        }
+      }
+    },
+  },
+  components: { Network, Peer }
+}
+</script>

frontend/src/components/tiles/Gauge.vue

@@ -49,8 +49,7 @@ const gaugeColor = computed(() => {
           background: `rgb(var(--v-theme-${gaugeColor}))`
           }">
       </div>
-      <span class="gauge__cover" dir="ltr" v-html="data.text">
+      <div class="gauge__cover"><span dir="ltr" v-html="data.text"></span></div>
-      </span>
     </div>
   </div>
 </template>

frontend/src/components/tls/Acme.vue

@@ -0,0 +1,252 @@
+<template>
+  <v-card subtitle="ACME" style="background-color: inherit;">
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch color="primary" :label="$t('enable')" v-model="enabled" hide-details></v-switch>
+      </v-col>
+      <v-col cols="12" md="8" v-if="enabled">
+        <v-text-field
+          :label="$t('rule.domain') + ' ' + $t('commaSeparated')"
+          hide-details
+          v-model="domains">
+        </v-text-field>
+      </v-col>
+    </v-row>
+    <template v-if="enabled">
+      <v-row>
+        <v-col cols="12" sm="6" md="4" v-if="optionDir">
+          <v-text-field
+            :label="$t('tls.acme.dataDir')"
+            hide-details
+            v-model="acme.data_directory">
+          </v-text-field>
+        </v-col>
+        <v-col cols="12" sm="6" md="4" v-if="optionDefault">
+          <v-combobox
+            v-model="acme.default_server_name"
+            :items="acme.domain"
+            :label="$t('tls.acme.defaultDomain')"
+            hide-details
+          ></v-combobox>
+        </v-col>
+        <v-col cols="12" sm="6" md="4" v-if="optionEmail">
+          <v-text-field
+            :label="$t('email')"
+            hide-details
+            v-model="acme.email">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row v-if="optionChallenge">
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" :label="$t('tls.acme.httpChallenge')" v-model="acme.disable_http_challenge" hide-details></v-switch>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" :label="$t('tls.acme.tlsChallenge')" v-model="acme.disable_tls_alpn_challenge" hide-details></v-switch>
+        </v-col>
+      </v-row>
+      <v-row v-if="optionPorts">
+        <v-col cols="12" sm="6" md="4">
+          <v-text-field
+          :label="$t('tls.acme.altHport')"
+          hide-details
+          type="number"
+          min=1
+          max="65532"
+          v-model.number="acme.alternative_http_port">
+          </v-text-field>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-text-field
+          :label="$t('tls.acme.altTport')"
+          hide-details
+          type="number"
+          min=1
+          max="65532"
+          v-model.number="acme.alternative_tls_port">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row v-if="optionProvider">
+        <v-col cols="12" sm="6" md="4">
+          <v-select
+            v-model="caProvider"
+            :items="providerList"
+            :label="$t('tls.acme.caProvider')"
+            hide-details
+          ></v-select>
+        </v-col>
+        <v-col cols="12" md="8" v-if="caProvider == ''">
+          <v-text-field
+            :label="$t('tls.acme.customCa')"
+            hide-details
+            v-model="acme.provider">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row v-if="acme.external_account != undefined">
+        <v-col cols="12" sm="6" md="4">
+          <v-text-field
+          label="Key ID"
+          hide-details
+          v-model="acme.external_account.key_id">
+          </v-text-field>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-text-field
+          label="MAC Key"
+          hide-details
+          v-model="acme.external_account.mac_key">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row v-if="acme.dns01_challenge != undefined">
+        <v-col cols="12" sm="6" md="4">
+          <v-select
+          :label="$t('tls.acme.dns01Provider')"
+          hide-details
+          :items="dnsProviders.map(d => d.provider)"
+          @update:model-value="acme.dns01_challenge = { provider: $event }"
+          v-model="acme.dns01_challenge.provider">
+          </v-select>
+        </v-col>
+        <v-col cols="12" sm="6" md="4"
+        v-for="item in dnsProviders.filter(d => d.provider == acme.dns01_challenge?.provider)[0]?.params"
+        :key="item">
+          <v-text-field
+          :label="item"
+          hide-details
+          v-model="acme.dns01_challenge[item]">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-menu v-model="menu" :close-on-content-click="false" location="start">
+          <template v-slot:activator="{ props }">
+            <v-btn v-bind="props" hide-details variant="tonal">{{ $t('tls.acme.options') }}</v-btn>
+          </template>
+          <v-card>
+            <v-list>
+              <v-list-item>
+                <v-switch v-model="optionDir" color="primary" :label="$t('tls.acme.dataDir')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionDefault" color="primary" :label="$t('tls.acme.defaultDomain')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionEmail" color="primary" :label="$t('email')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionChallenge" color="primary" :label="$t('tls.acme.disableChallenges')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionPorts" color="primary" :label="$t('tls.acme.altPorts')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionProvider" color="primary" :label="$t('tls.acme.caProvider')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionExt" color="primary" :label="$t('tls.acme.extAcc')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionDns01" color="primary" :label="$t('tls.acme.dns01')" hide-details></v-switch>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+      </v-card-actions>
+    </template>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { acme } from '@/types/inTls'
+
+export default {
+  props: ['tls'],
+  data() {
+    return {
+      menu: false,
+      providerList: [
+        { title: "Let's Encrypt", value: "letsencrypt" },
+        { title: "ZeroSSL", value: "zerossl" },
+        { title: "Custom", value: "" }
+      ],
+      dnsProviders: [
+        { provider: "cloudflare", params: [ "api_token" ] },
+        { provider: "alidns", params: [ "access_key_id","access_key_secret","region_id" ] }
+      ]
+    }
+  },
+  computed: {
+    acme() {
+      return <acme>this.$props.tls.acme
+    },
+    enabled: {
+      get() { return this.acme != undefined },
+      set(v: boolean) { this.$props.tls.acme = v ? { domain: [] } : undefined }
+    },
+    domains: {
+      get() { return this.acme?.domain ? this.acme.domain.join(',') : "" },
+      set(v: string) {
+        if(!v.endsWith(',')) {
+          this.acme.domain = v.length > 0 ? v.split(',') : []
+        }
+      }
+    },
+    caProvider: {
+      get() { return this.acme?.provider && ['letsencrypt','zerossl'].includes(this.acme.provider) ? this.acme?.provider : '' },
+      set(v: string) { this.acme.provider = ['letsencrypt','zerossl'].includes(v) ? v : 'https://' }
+    },
+    optionDir: {
+      get(): boolean { return this.acme?.data_directory != undefined },
+      set(v:boolean) { this.acme.data_directory = v ? '' : undefined }
+    },
+    optionDefault: {
+      get(): boolean { return this.acme?.default_server_name != undefined },
+      set(v:boolean) { this.acme.default_server_name = v ? this.domains.length>0 ? this.domains[0] : '' : undefined }
+    },
+    optionEmail: {
+      get(): boolean { return this.acme?.email != undefined },
+      set(v:boolean) { this.acme.email = v ? '' : undefined }
+    },
+    optionChallenge: {
+      get(): boolean { return this.acme?.disable_http_challenge != undefined || this.acme?.disable_tls_alpn_challenge != undefined },
+      set(v:boolean) { 
+        if (v) {
+          this.acme.disable_http_challenge = false
+          this.acme.disable_tls_alpn_challenge = false
+        } else {
+          delete this.acme.disable_http_challenge
+          delete this.acme.disable_tls_alpn_challenge
+        }
+      }
+    },
+    optionPorts: {
+      get(): boolean { return this.acme?.alternative_http_port != undefined || this.acme?.alternative_tls_port != undefined },
+      set(v:boolean) { 
+        if (v) {
+          this.acme.alternative_http_port = 80
+          this.acme.alternative_tls_port = 443
+        } else {
+          delete this.acme.alternative_http_port
+          delete this.acme.alternative_tls_port
+        }
+      }
+    },
+    optionProvider: {
+      get(): boolean { return this.acme?.provider != undefined },
+      set(v:boolean) { this.acme.provider = v ? 'letsencrypt' : undefined }
+    },
+    optionExt: {
+      get(): boolean { return this.acme?.external_account != undefined },
+      set(v:boolean) { this.acme.external_account = v ? { key_id: '', mac_key: '' } : undefined }
+    },
+    optionDns01: {
+      get(): boolean { return this.acme?.dns01_challenge != undefined },
+      set(v:boolean) { this.acme.dns01_challenge = v ? { provider: 'cloudflare' } : undefined }
+    },
+  }
+}
+</script>

frontend/src/components/tls/Ech.vue

@@ -0,0 +1,160 @@
+<template>
+  <v-card subtitle="ECH" style="background-color: inherit;">
+    <v-row>
+      <v-col cols="12" sm="6" md="4">
+        <v-switch color="primary" :label="$t('enable')" v-model="enabled" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <template v-if="enabled">
+      <v-row>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" label="Post-Quantum Schemes" v-model="ech.pq_signature_schemes_enabled" hide-details></v-switch>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" label="Disable Adaptive Size" v-model="ech.dynamic_record_sizing_disabled" hide-details></v-switch>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="auto">
+          <v-btn-toggle v-model="useEchPath"
+          class="rounded-xl"
+          density="compact"
+          variant="outlined"
+          shaped
+          mandatory>
+            <v-btn
+              @click="delete ech.key"
+            >{{ $t('tls.usePath') }}</v-btn>
+            <v-btn
+              @click="delete ech.key_path"
+            >{{ $t('tls.useText') }}</v-btn>
+          </v-btn-toggle>
+        </v-col>
+        <v-spacer></v-spacer>
+        <v-col cols="auto">
+          <v-btn
+            variant="tonal"
+            density="compact"
+            icon="mdi-key-star"
+            @click="genECH"
+            :loading="loading">
+            <v-icon />
+            <v-tooltip activator="parent" location="top">
+              {{ $t('actions.generate') }}
+            </v-tooltip>
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row v-if="useEchPath == 0">
+        <v-col cols="12">
+          <v-text-field
+            :label="$t('tls.keyPath')"
+            hide-details
+            v-model="ech.key_path">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-row v-else>
+        <v-col cols="12">
+          <v-textarea
+            :label="$t('tls.key')"
+            hide-details
+            v-model="echKeyText">
+          </v-textarea>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12">
+          <v-textarea
+            :label="$t('tls.cert')"
+            hide-details
+            v-model="echConfigText">
+          </v-textarea>
+        </v-col>
+      </v-row>
+    </template>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { i18n } from '@/locales'
+import HttpUtils from '@/plugins/httputil'
+import { ech } from '@/types/inTls'
+import { push } from 'notivue'
+
+export default {
+  props: ['iTls','oTls'],
+  data() {
+    return {
+      useEchPath: this.$props.iTls?.ech?.key? 1:0,
+      loading: false,
+    }
+  },
+  methods: {
+    async genECH(){
+      this.loading = true
+      const msg = await HttpUtils.get('api/keypairs', { k: "ech", o: this.iTls.server_name?? "''" })
+      this.loading = false
+      if (msg.success && this.iTls.ech && this.oTls.ech) {
+        this.iTls.ech.key_path=undefined
+        this.useEchPath = 1
+        if (msg.obj.length>0){
+          let config = <string[]>[]
+          let key = <string[]>[]
+          let isConfig = false
+          let isKey = false
+
+          msg.obj.forEach((line:string) => {
+            if (line === "-----BEGIN ECH CONFIGS-----") {
+              isConfig = true
+              isKey = false
+              config.push(line)
+            } else if (line === "-----END ECH CONFIGS-----") {
+              isConfig = false
+              config.push(line)
+            } else if (line === "-----BEGIN ECH KEYS-----") {
+              isKey = true
+              isConfig = false
+              key.push(line)
+            } else if (line === "-----END ECH KEYS-----") {
+              isKey = false
+              key.push(line)
+            } else if (isConfig) {
+              config.push(line)
+            } else if (isKey) {
+              key.push(line)
+            }
+          })
+          this.iTls.ech.key = key?? undefined
+          this.oTls.ech.config = config?? undefined
+
+        } else {
+          push.error({
+            message: i18n.global.t('error') + ": " + msg.obj
+          })
+        }
+      }
+    },
+  },
+  computed: {
+    ech() {
+      return <ech>this.$props.iTls.ech
+    },
+    enabled: {
+      get() { return this.ech?.enabled?? false },
+      set(v: boolean) { 
+        this.$props.iTls.ech = v ? { enabled: true } : undefined
+        this.$props.oTls.ech = v ? {} : undefined
+      }
+    },
+    echKeyText: {
+      get(): string { return this.ech?.key ? this.ech.key.join('\n') : '' },
+      set(newValue:string) { this.ech.key = newValue.split('\n') }
+    },
+    echConfigText: {
+      get(): string { return this.oTls.ech?.config ? this.oTls.ech.config.join('\n') : '' },
+      set(newValue:string) { this.oTls.ech.config = newValue.split('\n') }
+    },
+  }
+}
+</script>

frontend/src/components/tls/InTLS.vue

@@ -1,11 +1,20 @@
 <template>
-  <v-card :subtitle="$t('in.tls')">
+  <v-card :subtitle="$t('objects.tls')">
-    <v-row v-if="tlsOptional">
+    <v-row>
-      <v-col cols="auto">
+      <v-col cols="12" sm="6" md="4" v-if="tlsOptional">
         <v-switch color="primary" :label="$t('tls.enable')" v-model="tlsEnable" hide-details></v-switch>
       </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="tls.enabled">
+        <v-select
+          hide-details
+          :label="$t('template')"
+          :items="tlsItems"
+          @update:model-value="changeTlsItem($event)"
+          v-model="tlsId">
+        </v-select>
+      </v-col>
     </v-row>
-    <template v-if="tls.enabled">
+    <template v-if="tls.enabled && tlsId == 0">
       <v-row>
         <v-col cols="auto">
           <v-btn-toggle v-model="usePath"
@@ -77,7 +86,7 @@
         <v-col cols="12" sm="6" md="4" v-if="tls.min_version">
           <v-select
             hide-details
-            label="Minimum Version"
+            :label="$t('tls.minVer')"
             :items="tlsVersions"
             v-model="tls.min_version">
           </v-select>
@@ -85,7 +94,7 @@
         <v-col cols="12" sm="6" md="4" v-if="tls.max_version">
           <v-select
             hide-details
-            label="Maximum Version"
+            :label="$t('tls.maxVer')"
             :items="tlsVersions"
             v-model="tls.max_version">
           </v-select>
@@ -95,7 +104,7 @@
         <v-col cols="12" md="8" v-if="tls.cipher_suites != undefined">
           <v-select
             hide-details
-            label="Cipher Suites"
+            :label="$t('tls.cs')"
             multiple
             :items="cipher_suites"
             v-model="tls.cipher_suites">
@@ -103,11 +112,11 @@
         </v-col>
       </v-row>
     </template>
-    <v-card-actions>
+    <v-card-actions v-if="tls.enabled && tlsId == 0">
       <v-spacer></v-spacer>
       <v-menu v-model="menu" :close-on-content-click="false" location="start" v-if="tls.enabled">
         <template v-slot:activator="{ props }">
-            <v-btn v-bind="props" hide-details>TLS Options</v-btn>
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('tls.options') }}</v-btn>
         </template>
         <v-card>
           <v-list>
@@ -118,13 +127,13 @@
               <v-switch v-model="optionALPN" color="primary" label="ALPN" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-                <v-switch v-model="optionMinV" color="primary" label="Min Version" hide-details></v-switch>
+              <v-switch v-model="optionMinV" color="primary" :label="$t('tls.minVer')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-                <v-switch v-model="optionMaxV" color="primary" label="Max Version" hide-details></v-switch>
+              <v-switch v-model="optionMaxV" color="primary" :label="$t('tls.maxVer')" hide-details></v-switch>
             </v-list-item>
             <v-list-item>
-                <v-switch v-model="optionCS" color="primary" label="Cipher Suites" hide-details></v-switch>
+              <v-switch v-model="optionCS" color="primary" :label="$t('tls.cs')" hide-details></v-switch>
             </v-list-item>
           </v-list>
         </v-card>
@@ -134,13 +143,14 @@
 </template>
 
 <script lang="ts">
+import { i18n } from '@/locales'
 import { iTls, defaultInTls } from '@/types/inTls'
 export default {
-  props: ['inbound'],
+  props: ['inbound', 'tlsConfigs', 'tls_id'],
   data() {
     return {
       menu: false,
-      usePath: 0,
+      usePath: this.$props.inbound.tls.key == undefined ? 0 : 1,
       defaults: defaultInTls,
       alpn: [
         { title: "H3", value: 'h3' },
@@ -149,7 +159,6 @@ export default {
       ],
       tlsVersions: [ '1.0', '1.1', '1.2', '1.3' ],
       cipher_suites: [
-        { title: "Automatic", value: "" },
         { title: "RSA-AES128-CBC-SHA", value: "TLS_RSA_WITH_AES_128_CBC_SHA" },
         { title: "RSA-AES256-CBC-SHA", value: "TLS_RSA_WITH_AES_256_CBC_SHA" },
         { title: "RSA-AES128-GCM-SHA256", value: "TLS_RSA_WITH_AES_128_GCM_SHA256" },
@@ -174,9 +183,19 @@ export default {
     tls(): iTls {
       return <iTls> this.$props.inbound.tls
     },
+    tlsItems(): any[] {
+      return [ { title: i18n.global.t('none'), value: 0 }, ...this.$props.tlsConfigs?.map((t:any) => { return { title: t.name, value: t.id } } )]
+    },
+    tlsId: {
+      get() { return this.tls_id.value?? 0 },
+      set(newValue: boolean) { this.$props.tls_id.value = newValue }
+    },
     tlsEnable: {
-      get() { return Object.hasOwn(this.$props.inbound.tls, 'enabled') ? this.tls.enabled : false },
+      get() { return this.tls.enabled?? false },
-      set(newValue: boolean) { this.$props.inbound.tls = newValue ? { enabled: true } : {} }
+      set(newValue: boolean) {
+        this.$props.inbound.tls = newValue ? { enabled: true } : {}
+        this.$props.tls_id.value = 0
+      }
     },
     tlsOptional(): boolean {
       return !['hysteria','hysteria2','tuic','naive'].includes(this.$props.inbound.type)
@@ -191,23 +210,33 @@ export default {
     },
     optionSNI: {
       get(): boolean { return this.tls.server_name != undefined },
-      set(v:boolean) { this.$props.inbound.tls.server_name = v ? '' : undefined }
+      set(v:boolean) { this.tls.server_name = v ? '' : undefined }
     },
     optionALPN: {
       get(): boolean { return this.tls.alpn != undefined },
-      set(v:boolean) { this.$props.inbound.tls.alpn = v ? defaultInTls.alpn : undefined }
+      set(v:boolean) { this.tls.alpn = v ? defaultInTls.alpn : undefined }
     },
     optionMinV: {
       get(): boolean { return this.tls.min_version != undefined },
-      set(v:boolean) { this.$props.inbound.tls.min_version = v ? defaultInTls.min_version : undefined }
+      set(v:boolean) { this.tls.min_version = v ? defaultInTls.min_version : undefined }
     },
     optionMaxV: {
       get(): boolean { return this.tls.max_version != undefined },
-      set(v:boolean) { this.$props.inbound.tls.max_version = v ? defaultInTls.max_version : undefined }
+      set(v:boolean) { this.tls.max_version = v ? defaultInTls.max_version : undefined }
     },
     optionCS: {
       get(): boolean { return this.tls.cipher_suites != undefined },
-      set(v:boolean) { this.$props.inbound.tls.cipher_suites = v ? defaultInTls.cipher_suites : undefined }
+      set(v:boolean) { this.tls.cipher_suites = v ? defaultInTls.cipher_suites : undefined }
+    }
+  },
+  methods: {
+    changeTlsItem(id: number){
+       if (id>0) {
+        const tlsConfig = this.$props.tlsConfigs?.findLast((t:any) => t.id == id)
+        if (tlsConfig) this.$props.inbound.tls = tlsConfig.server
+       } else {
+        this.$props.inbound.tls = { enabled: this.tls.enabled }
+       }
     }
   }
 }

frontend/src/components/tls/OutTLS.vue

@@ -0,0 +1,341 @@
+<template>
+  <v-card :subtitle="$t('objects.tls')">
+    <v-row v-if="tlsOptional">
+      <v-col cols="12" sm="6" md="4">
+        <v-switch color="primary" :label="$t('tls.enable')" v-model="tlsEnable" hide-details></v-switch>
+      </v-col>
+    </v-row>
+    <template v-if="tls.enabled">
+      <v-row>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" :label="$t('tls.disableSni')" v-model="disable_sni" hide-details></v-switch>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch color="primary" :label="$t('tls.insecure')" v-model="insecure" hide-details></v-switch>
+        </v-col>
+      </v-row>
+      <template v-if="optionCert">
+        <v-row>
+          <v-col cols="auto">
+            <v-btn-toggle v-model="usePath"
+            class="rounded-xl"
+            density="compact"
+            variant="outlined"
+            shaped
+            mandatory>
+              <v-btn
+                @click="tls.certificate=undefined; tls.certificate_path=''"
+              >{{ $t('tls.usePath') }}</v-btn>
+              <v-btn
+                @click="tls.certificate_path=undefined; tls.certificate=''"
+              >{{ $t('tls.useText') }}</v-btn>
+            </v-btn-toggle>
+          </v-col>
+        </v-row>
+        <v-row v-if="usePath == 0">
+          <v-col cols="12" sm="6">
+            <v-text-field
+              :label="$t('tls.certPath')"
+              hide-details
+              v-model="tls.certificate_path">
+            </v-text-field>
+          </v-col>
+        </v-row>
+        <v-row v-else>
+          <v-col cols="12" sm="6">
+            <v-textarea
+              :label="$t('tls.cert')"
+              hide-details
+              v-model="tls.certificate">
+            </v-textarea>
+          </v-col>
+        </v-row>
+      </template>
+      <v-row>
+        <v-col cols="12" sm="6" md="4" v-if="tls.server_name != undefined">
+          <v-text-field
+            label="SNI"
+            hide-details
+            v-model="tls.server_name">
+          </v-text-field>
+        </v-col>
+        <v-col cols="12" sm="6" md="4" v-if="tls.alpn">
+          <v-select
+            hide-details
+            label="ALPN"
+            multiple
+            :items="alpn"
+            v-model="tls.alpn">
+          </v-select>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12" sm="6" md="4" v-if="tls.min_version">
+          <v-select
+            hide-details
+            :label="$t('tls.minVer')"
+            :items="tlsVersions"
+            v-model="tls.min_version">
+          </v-select>
+        </v-col>
+        <v-col cols="12" sm="6" md="4" v-if="tls.max_version">
+          <v-select
+            hide-details
+            :label="$t('tls.maxVer')"
+            :items="tlsVersions"
+            v-model="tls.max_version">
+          </v-select>
+        </v-col>
+      </v-row>
+      <v-row v-if="tls.cipher_suites != undefined">
+        <v-col cols="12" md="8">
+          <v-select
+            hide-details
+            :label="$t('tls.cs')"
+            multiple
+            :items="cipher_suites"
+            v-model="tls.cipher_suites">
+          </v-select>
+        </v-col>
+      </v-row>
+      <v-row v-if="tls.utls != undefined">
+        <v-col cols="12" md="6">
+          <v-select
+            hide-details
+            label="Fingerprint"
+            :items="fingerprints"
+            v-model="tls.utls.fingerprint">
+          </v-select>
+        </v-col>
+      </v-row>
+      <v-row v-if="tls.reality != undefined">
+        <v-col cols="12" md="6">
+          <v-text-field
+          :label="$t('tls.pubKey')"
+            hide-details
+            v-model="tls.reality.public_key">
+          </v-text-field>
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            label="Short ID"
+            hide-details
+            v-model="tls.reality.short_id">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <template v-if="tls.ech != undefined">
+        <v-row>
+          <v-col class="v-card-subtitle">ECH</v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12" sm="6" md="4">
+            <v-switch color="primary" label="Post-Quantum Schemes" v-model="tls.ech.pq_signature_schemes_enabled" hide-details></v-switch>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-switch color="primary" label="Disable Adaptive Size" v-model="tls.ech.dynamic_record_sizing_disabled" hide-details></v-switch>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="auto">
+            <v-btn-toggle v-model="useEchPath"
+            class="rounded-xl"
+            density="compact"
+            variant="outlined"
+            shaped
+            mandatory>
+              <v-btn
+                @click="delete tls.ech?.config"
+              >{{ $t('tls.usePath') }}</v-btn>
+              <v-btn
+                @click="delete tls.ech?.config_path"
+              >{{ $t('tls.useText') }}</v-btn>
+            </v-btn-toggle>
+          </v-col>
+        </v-row>
+        <v-row v-if="useEchPath == 0">
+          <v-col cols="12" sm="6">
+            <v-text-field
+              :label="$t('tls.certPath')"
+              hide-details
+              v-model="tls.ech.config_path">
+            </v-text-field>
+          </v-col>
+        </v-row>
+        <v-row v-else>
+          <v-col cols="12" sm="6">
+            <v-textarea
+              :label="$t('tls.cert')"
+              hide-details
+              v-model="echConfigText">
+            </v-textarea>
+          </v-col>
+        </v-row>
+      </template>
+    </template>
+    <v-card-actions v-if="tls.enabled">
+      <v-spacer></v-spacer>
+      <v-menu v-model="menu" :close-on-content-click="false" location="start">
+          <template v-slot:activator="{ props }">
+            <v-btn v-bind="props" hide-details variant="tonal">{{ $t('tls.options') }}</v-btn>
+          </template>
+          <v-card>
+            <v-list>
+              <v-list-item>
+                <v-switch v-model="optionCert" color="primary" :label="$t('tls.cert')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionSNI" color="primary" label="SNI" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionALPN" color="primary" label="ALPN" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionMinV" color="primary" :label="$t('tls.minVer')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionMaxV" color="primary" :label="$t('tls.maxVer')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionCS" color="primary" :label="$t('tls.cs')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionFP" color="primary" label="UTLS" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionReality" color="primary" label="Reality" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionEch" color="primary" label="ECH" hide-details></v-switch>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { oTls, defaultOutTls } from '@/types/outTls'
+export default {
+  props: ['outbound'],
+  data() {
+    return {
+      menu: false,
+      usePath: this.$props.outbound?.tls?.certificate? 1:0,
+      useEchPath: this.$props.outbound?.tls.ech?.config? 1:0,
+      defaults: defaultOutTls,
+      alpn: [
+        { title: "H3", value: 'h3' },
+        { title: "H2", value: 'h2' },
+        { title: "Http/1.1", value: 'http/1.1' },
+      ],
+      tlsVersions: [ '1.0', '1.1', '1.2', '1.3' ],
+      cipher_suites: [
+        { title: "RSA-AES128-CBC-SHA", value: "TLS_RSA_WITH_AES_128_CBC_SHA" },
+        { title: "RSA-AES256-CBC-SHA", value: "TLS_RSA_WITH_AES_256_CBC_SHA" },
+        { title: "RSA-AES128-GCM-SHA256", value: "TLS_RSA_WITH_AES_128_GCM_SHA256" },
+        { title: "RSA-AES256-GCM-SHA384", value: "TLS_RSA_WITH_AES_256_GCM_SHA384" },
+        { title: "AES128-GCM-SHA256", value: "TLS_AES_128_GCM_SHA256" },
+        { title: "AES256-GCM-SHA384", value: "TLS_AES_256_GCM_SHA384" },
+        { title: "CHACHA20-POLY1305-SHA256", value: "TLS_CHACHA20_POLY1305_SHA256" },
+        { title: "ECDHE-ECDSA-AES128-CBC-SHA", value: "TLS_ECDHE_ECDSA_WITH_AES_128_CBC_SHA" },
+        { title: "ECDHE-ECDSA-AES256-CBC-SHA", value: "TLS_ECDHE_ECDSA_WITH_AES_256_CBC_SHA" },
+        { title: "ECDHE-RSA-AES128-CBC-SHA", value: "TLS_ECDHE_RSA_WITH_AES_128_CBC_SHA" },
+        { title: "ECDHE-RSA-AES256-CBC-SHA", value: "TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA" },
+        { title: "ECDHE-ECDSA-AES128-GCM-SHA256", value: "TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256" },
+        { title: "ECDHE-ECDSA-AES256-GCM-SHA384", value: "TLS_ECDHE_ECDSA_WITH_AES_256_GCM_SHA384" },
+        { title: "ECDHE-RSA-AES128-GCM-SHA256", value: "TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256" },
+        { title: "ECDHE-RSA-AES256-GCM-SHA384", value: "TLS_ECDHE_RSA_WITH_AES_256_GCM_SHA384" },
+        { title: "ECDHE-ECDSA-CHACHA20-POLY1305-SHA256", value: "TLS_ECDHE_ECDSA_WITH_CHACHA20_POLY1305_SHA256" },
+        { title: "ECDHE-RSA-CHACHA20-POLY1305-SHA256", value: "TLS_ECDHE_RSA_WITH_CHACHA20_POLY1305_SHA256" }
+      ],
+      fingerprints: [
+        { title: "Chrome", value: "chrome" },
+        { title: "Chrome PSK", value: "chrome_psk" },
+        { title: "Chrome PSK Shuffle", value: "chrome_psk_shuffle" },
+        { title: "Chrome Padding PSK Shuffle", value: "chrome_padding_psk_shuffle" },
+        { title: "Chrome Post-Quantum", value: "chrome_pq" },
+        { title: "Chrome Post-Quantum PSK", value: "chrome_pq_psk" },
+        { title: "Firefox", value: "firefox" },
+        { title: "Microsoft Edge", value: "edge" },
+        { title: "Apple Safari", value: "safari" },
+        { title: "360", value: "360" },
+        { title: "QQ", value: "qq" },
+        { title: "Apple IOS", value: "ios" },
+        { title: "Android", value: "android" },
+        { title: "Random", value: "random" },
+        { title: "Randomized", value: "randomized" },
+      ]
+    }
+  },
+  computed: {
+    tls(): oTls {
+      return <oTls> this.$props.outbound.tls
+    },
+    tlsEnable: {
+      get() { return Object.hasOwn(this.tls, 'enabled') ? this.tls.enabled : false },
+      set(newValue: boolean) { this.$props.outbound.tls = newValue ? { enabled: true } : {} }
+    },
+    disable_sni: {
+      get() { return this.tls.disable_sni ?? false },
+      set(newValue: boolean) { this.$props.outbound.tls.disable_sni = newValue ? true : undefined }
+    },
+    insecure: {
+      get() { return this.tls.insecure ?? false },
+      set(newValue: boolean) { this.$props.outbound.tls.insecure = newValue ? true : undefined }
+    },
+    tlsOptional(): boolean {
+      return !['hysteria','hysteria2','tuic','shadowtls'].includes(this.$props.outbound.type)
+    },
+    echConfigText: {
+      get(): string { return this.tls.ech?.config ? this.tls.ech.config.join('\n') : '' },
+      set(newValue:string) { if (this.tls.ech) this.tls.ech.config = newValue.split('\n') }
+    },
+    optionCert: {
+      get(): boolean { return this.tls.certificate != undefined || this.tls.certificate_path != undefined },
+      set(v:boolean) {
+        this.usePath = 0
+        if (v) {
+          this.$props.outbound.tls.certificate_path = ""
+        } else {
+          delete this.$props.outbound.tls.certificate_path
+          delete this.$props.outbound.tls.certificate
+        }
+      }
+    },
+    optionSNI: {
+      get(): boolean { return this.tls.server_name != undefined },
+      set(v:boolean) { this.$props.outbound.tls.server_name = v ? '' : undefined }
+    },
+    optionALPN: {
+      get(): boolean { return this.tls.alpn != undefined },
+      set(v:boolean) { this.$props.outbound.tls.alpn = v ? defaultOutTls.alpn : undefined }
+    },
+    optionMinV: {
+      get(): boolean { return this.tls.min_version != undefined },
+      set(v:boolean) { this.$props.outbound.tls.min_version = v ? defaultOutTls.min_version : undefined }
+    },
+    optionMaxV: {
+      get(): boolean { return this.tls.max_version != undefined },
+      set(v:boolean) { this.$props.outbound.tls.max_version = v ? defaultOutTls.max_version : undefined }
+    },
+    optionCS: {
+      get(): boolean { return this.tls.cipher_suites != undefined },
+      set(v:boolean) { this.$props.outbound.tls.cipher_suites = v ? defaultOutTls.cipher_suites : undefined }
+    },
+    optionFP: {
+      get(): boolean { return this.tls.utls != undefined },
+      set(v:boolean) { this.$props.outbound.tls.utls = v ? defaultOutTls.utls : undefined }
+    },
+    optionReality: {
+      get(): boolean { return this.tls.reality != undefined },
+      set(v:boolean) { this.$props.outbound.tls.reality = v ? defaultOutTls.reality : undefined }
+    },
+    optionEch: {
+      get(): boolean { return this.tls.ech != undefined },
+      set(v:boolean) { this.$props.outbound.tls.ech = v ? defaultOutTls.ech : undefined }
+    }
+  }
+}
+</script>

frontend/src/components/transports/Http.vue

@@ -15,17 +15,20 @@
       </v-text-field>
     </v-col>
     <v-col cols="12" sm="6" md="4">
-      <v-text-field
+      <v-select
-      label="Method"
+      :label="$t('transport.httpMethod')"
       hide-details
+      clearable
+      @click:clear="delete transport.method"
+      :items="methodList"
       v-model="transport.method">
-      </v-text-field>
+      </v-select>
     </v-col>
   </v-row>
   <v-row>
     <v-col cols="12" sm="6" md="4">
       <v-text-field
-      label="Idle Timeout"
+      :label="$t('transport.idleTimeout')"
       hide-details
       type="number"
       suffix="s"
@@ -35,7 +38,7 @@
     </v-col>
     <v-col cols="12" sm="6" md="4">
       <v-text-field
-      label="Ping Timeout"
+      :label="$t('transport.pingTimeout')"
       hide-details
       type="number"
       suffix="s"
@@ -44,14 +47,17 @@
       </v-text-field>
     </v-col>
   </v-row>
+  <Headers :data="transport" />
 </template>
 
 <script lang="ts">
 import { HTTP } from '../../types/transport'
+import Headers from '../Headers.vue'
 export default {
   props: ['transport'],
   data() {
     return {
+      methodList: ['POST', 'GET', 'PUT', 'PATCH', 'DELETE']
     }
   },
   computed: {
@@ -70,6 +76,7 @@ export default {
       get() { return this.Http.ping_timeout ? parseInt(this.Http.ping_timeout.replace('s','')) : '' },
       set(newValue:number) { this.$props.transport.ping_timeout = newValue ? newValue + 's' : '' }
     }
-  }
+  },
+  components: { Headers }
 }
 </script>

frontend/src/components/transports/HttpUpgrade.vue

@@ -15,14 +15,17 @@
       </v-text-field>
     </v-col>
   </v-row>
+  <Headers :data="transport" />
 </template>
 
 <script lang="ts">
+import Headers from '../Headers.vue';
 export default {
   props: ['transport'],
   data() {
     return {
     }
-  }
+  },
+  components: { Headers }
 }
 </script>

frontend/src/components/transports/WebSocket.vue

@@ -33,10 +33,12 @@
       </v-text-field>
     </v-col>
   </v-row>
+  <Headers :data="transport" />
 </template>
 
 <script lang="ts">
 import { WebSocket } from '../../types/transport'
+import Headers from '../Headers.vue'
 export default {
   props: ['transport'],
   data() {
@@ -61,6 +63,7 @@ export default {
   mounted() {
     this.WS.early_data_header_name ??= 'Sec-WebSocket-Protocol'
     this.WS.path ??= '/'
-  }
+  },
+  components: { Headers }
 }
 </script>

frontend/src/components/transports/gRPC.vue

@@ -2,7 +2,7 @@
   <v-row>
     <v-col cols="12" sm="6" md="4">
       <v-text-field
-      label="Service Name"
+      :label="$t('transport.grpcServiceName')"
       hide-details
       v-model="transport.service_name">
       </v-text-field>
@@ -11,7 +11,7 @@
       <v-switch
         color="primary"
         v-model="transport.permit_without_stream"
-        label="Permit Without Stream"
+        :label="$t('transport.grpcPws')"
         hide-details>
       </v-switch>
     </v-col>
@@ -19,7 +19,7 @@
   <v-row>
     <v-col cols="12" sm="6" md="4">
       <v-text-field
-      label="Idle Timeout"
+      :label="$t('transport.idleTimeout')"
       hide-details
       type="number"
       suffix="s"
@@ -29,7 +29,7 @@
     </v-col>
     <v-col cols="12" sm="6" md="4">
       <v-text-field
-      label="Ping Timeout"
+      :label="$t('transport.pingTimeout')"
       hide-details
       type="number"
       suffix="s"

frontend/src/layouts/default/AppBar.vue

@@ -2,20 +2,22 @@
   <v-app-bar :elevation="5">
     <v-icon v-if="isMobile" icon="mdi-menu" @click="$emit('toggleDrawer')" />
     <span v-else style="width: 24px"></span>
-    <v-app-bar-title :text="$t(<string>$router.currentRoute.value.name)" class="align-center text-center " />
+    <v-app-bar-title :text="$t(<string>route.name)" class="align-center text-center " />
     <v-btn prepend-icon="mdi-content-save" v-if="stateChange" :text="$t('actions.save')" @click="saveChanges"></v-btn>
     <v-icon icon="mdi-theme-light-dark" @click="toggleTheme()" style="margin: 0 10px;"></v-icon>
   </v-app-bar>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref,watch } from "vue"
+import { computed, ref } from "vue"
 import { useTheme } from "vuetify"
 import { FindDiff } from "@/plugins/utils"
 import Data from "@/store/modules/data"
+import { useRoute } from "vue-router";
 
 defineProps(['isMobile'])
 
+const route = useRoute();
 const theme = useTheme()
 const darkMode = ref(localStorage.getItem('theme') == "dark")
 
@@ -32,11 +34,11 @@ const saveChanges = () => {
 }
 
 const oldData = computed((): any => {
-  return {config: store.oldData.config, clients: store.oldData.clients}
+  return {config: store.oldData.config, clients: store.oldData.clients, tls: store.oldData.tlsConfigs, inData: store.oldData.inData}
 })
 
 const newData = computed((): any => {
-  return {config: store.config, clients: store.clients}
+  return {config: store.config, clients: store.clients, tls: store.tlsConfigs, inData: store.inData}
 })
 
 const stateChange = computed((): any => {

frontend/src/layouts/default/Default.vue

@@ -30,5 +30,6 @@ const isMobile = computed( ():boolean =>{
 .v-card-subtitle {
   text-align: center;
   border-bottom: 1px solid gray;
+  min-height: 20px;
 }
 </style>

frontend/src/layouts/default/Drawer.vue

@@ -54,6 +54,7 @@ const menu = [
   { title: 'pages.clients', icon: 'mdi-account-multiple',  path: '/clients' },
   { title: 'pages.outbounds', icon: 'mdi-cloud-upload',  path: '/outbounds' },
   { title: 'pages.rules', icon: 'mdi-routes',  path: '/rules' },
+  { title: 'pages.tls', icon: 'mdi-certificate',  path: '/tls' },
   { title: 'pages.basics', icon: 'mdi-application-cog',  path: '/basics' },
   { title: 'pages.admins', icon: 'mdi-account-tie',  path: '/admins' },
   { title: 'pages.settings', icon: 'mdi-cog',  path: '/settings' },

frontend/src/layouts/modals/Admin.vue

@@ -87,7 +87,8 @@ export default {
     },
   },
   watch: {
-      visible(newValue) { if (newValue) {
+    visible(newValue) {
+      if (newValue) {
         this.resetData()
       }
     },

frontend/src/layouts/modals/Changes.vue

@@ -0,0 +1,145 @@
+<template>
+  <v-dialog transition="dialog-bottom-transition" width="90%" max-width="800" :loading="loading">
+    <v-card class="rounded-lg">
+      <v-card-title>
+        <v-row>
+          <v-col>{{ $t('admin.changes') }}</v-col>
+          <v-spacer></v-spacer>
+          <v-col cols="auto"><v-icon icon="mdi-close-box" @click="$emit('close')" /></v-col>
+        </v-row>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" sm="4" md="3">
+            <v-select
+            hide-details
+            :label="$t('admin.actor')"
+            :items="['', 'DepleteJob', ...admins]"
+            v-model="user"
+            @update:model-value="loadData">
+            </v-select>
+          </v-col>
+          <v-col cols="12" sm="4" md="3">
+            <v-select
+            hide-details
+            :label="$t('admin.key')"
+            :items="['', 'inbounds', 'outbounds', 'clients', 'route', 'tls', 'experimental']"
+            v-model="key"
+            @update:model-value="loadData">
+            </v-select>
+          </v-col>
+          <v-col cols="6" sm="4" md="3">
+            <v-select
+            hide-details
+            :label="$t('count')"
+            :items="[10,20,30,50,100]"
+            v-model.number="chngCount"
+            @update:model-value="loadData">
+            </v-select>
+          </v-col>
+          <v-col cols="auto" align="center" justify="center">
+            <v-btn
+              icon="mdi-refresh"
+              variant="tonal"
+              :loading="loading"
+              @click="loadData">
+              <v-icon />
+            </v-btn>
+          </v-col>
+        </v-row>
+        <v-data-table
+          :headers="changesHeaders"
+          :items="changes"
+          item-value="id"
+          density="compact"
+          show-expand
+          items-per-page="10"
+        >
+          <template v-slot:item.dateTime="{ value }">
+            <v-chip variant="text" dir="ltr" density="compact">
+              {{ dateFormatted(value) }}
+            </v-chip>
+          </template>
+          <template v-slot:item.action="{ value }">
+            <v-chip density="compact">
+              {{ $t('actions.' + value) }}
+            </v-chip>
+          </template>
+          <template v-slot:expanded-row="{ columns, item }">
+            <tr>
+              <td :colspan="columns.length">
+                <v-card dir="ltr" v-if="item.index>0">Index: {{ item.index }}</v-card>
+                <v-card style="background-color: background" dir="ltr"><pre>{{ item.obj }}</pre></v-card>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { i18n } from '@/locales'
+import HttpUtils from '@/plugins/httputil'
+
+export default {
+  props: ['admins', 'actor', 'visible'],
+  data() {
+    return {
+      loading: false,
+      changes: <any[]>[],
+      user: '',
+      key: '',
+      chngCount: 10,
+      expanded: [],
+      changesHeaders: [
+        { title: 'ID', key: 'id' },
+        { title: i18n.global.t('admin.date') + '-' + i18n.global.t('admin.time'), key: 'dateTime' },
+        { title: i18n.global.t('admin.actor'), key: 'Actor' },
+        { title: i18n.global.t('admin.key'), key: 'key' },
+        { title: i18n.global.t('admin.action'), key: 'action' },
+      ],
+    }
+  },
+  methods: {
+    async loadData() {
+      this.loading = true
+      const data = await HttpUtils.get('api/changes',{ a: this.user, k: this.key, c: this.chngCount })
+      if (data.success) {
+        this.changes = data.obj?? []
+        this.loading = false
+      }
+    },
+    dateFormatted(dt: number): string {
+      const date = new Date(dt*1000)
+      return date.toLocaleString(this.locale)
+    },
+  },
+  computed: {
+    locale() {
+      const l = i18n.global.locale.value
+      switch (l) {
+        case "zhHans":
+          return "zh-cn"
+        case "zhHant":
+          return "zh-tw"
+        default:
+          return l
+      }
+    },
+  },
+  watch: {
+    visible(newValue) {
+      this.changes = []
+      this.user = this.$props.actor
+      this.key = ''
+      this.chngCount = 10
+      if (newValue) {
+        this.loadData()
+      }
+    },
+  },
+}
+</script>

frontend/src/layouts/modals/Client.vue

@@ -5,7 +5,7 @@
         {{ $t('actions.' + title) + " " + $t('objects.client') }}
       </v-card-title>
       <v-divider></v-divider>
-      <v-card-text style="padding: 0 16px;">
+      <v-card-text style="padding: 0 16px; overflow-y: scroll;">
         <v-container style="padding: 0;">
           <v-tabs
             v-model="tab"
@@ -21,11 +21,17 @@
                 <v-col cols="12" sm="6" md="4">
                   <v-switch color="primary" v-model="client.enable" :label="$t('enable')" hide-details></v-switch>
                 </v-col>
+                <v-col cols="12" sm="6" md="4">
+                  <v-combobox v-model="client.group" :items="groups" :label="$t('client.group')" hide-details></v-combobox>
+                </v-col>
               </v-row>
               <v-row>
                 <v-col cols="12" sm="6" md="4">
                   <v-text-field v-model="client.name" :label="$t('client.name')" hide-details></v-text-field>
                 </v-col>
+                <v-col cols="12" sm="6" md="4">
+                  <v-text-field v-model="client.desc" :label="$t('client.desc')" hide-details></v-text-field>
+                </v-col>
               </v-row>
               <v-row>
                 <v-col cols="12" sm="6" md="4">
@@ -35,6 +41,33 @@
                   <DatePick :expiry="expDate" @submit="setDate" />
                 </v-col>
               </v-row>
+              <v-row v-if="index != -1">
+                <v-col cols="12" sm="6" md="4" class="d-flex flex-column">
+                  <div class="d-flex justify-space-between align-center">
+                    <div>
+                      {{ $t('stats.usage') }}: {{ total }}<sup dir="ltr" v-if="percent>0">({{ percent }}%)</sup>
+                    </div>
+                    <v-btn density="compact" variant="text" icon="mdi-restore" @click="client.up=0;client.down=0">
+                      <v-tooltip activator="parent" location="top">
+                        {{ $t('reset') }}
+                      </v-tooltip>
+                      <v-icon />
+                    </v-btn>
+                  </div>
+                  <v-progress-linear
+                    v-model="percent"
+                    :color="percentColor"
+                    v-if="client.volume>0"
+                    bottom
+                  >
+                  </v-progress-linear>
+                </v-col>
+                <v-col cols="12" sm="6" md="4">
+                  <v-icon icon="mdi-upload" color="orange" /><span class="text-orange">{{ up }}</span>
+                  / 
+                  <v-icon icon="mdi-download" color="success" /><span class="text-success">{{ down }}</span>
+                </v-col>
+              </v-row>
               <v-row>
                 <v-col>
                   <v-combobox
@@ -139,6 +172,7 @@
         <v-btn
           color="blue-darken-1"
           variant="tonal"
+          :loading="loading"
           @click="saveChanges"
         >
           {{ $t('actions.save') }}
@@ -152,14 +186,16 @@
 import { Link } from '@/plugins/link'
 import { createClient, randomConfigs, updateConfigs } from '@/types/clients'
 import DatePick from '@/components/DateTime.vue'
+import { HumanReadable } from '@/plugins/utils'
 
 export default {
-  props: ['visible', 'data', 'index', 'inboundTags', 'stats'],
+  props: ['visible', 'data', 'index', 'inboundTags', 'groups', 'stats'],
   emits: ['close', 'save'],
   data() {
     return {
       client: createClient(),
       title: "add",
+      loading: false,
       clientStats: false,
       tab: "t1",
       clientConfig: <any>[],
@@ -174,7 +210,7 @@ export default {
         const newData = JSON.parse(this.$props.data)
         this.client = createClient(newData)
         this.title = "edit"
-        this.clientConfig = JSON.parse(this.client.config)
+        this.clientConfig = this.client.config
       }
       else {
         this.client = createClient()
@@ -182,10 +218,9 @@ export default {
         this.clientConfig = randomConfigs('client')
       }
       this.clientStats = this.$props.stats
-      const allLinks = <Link[]>JSON.parse(this.client.links)
+      this.links = this.client.links.filter(l => l.type == 'local')
-      this.links = allLinks.filter(l => l.type == 'local')
+      this.extLinks = this.client.links.filter(l => l.type == 'external')
-      this.extLinks = allLinks.filter(l => l.type == 'external')
+      this.subLinks = this.client.links.filter(l => l.type == 'sub')
-      this.subLinks = allLinks.filter(l => l.type == 'sub')
       this.tab = "t1"
     },
     closeModal() {
@@ -193,12 +228,14 @@ export default {
       this.$emit('close')
     },
     saveChanges() {
-      this.client.config = updateConfigs(JSON.stringify(this.clientConfig), this.client.name)
+      this.loading = true
-      this.client.links = JSON.stringify([
+      this.client.config = updateConfigs(this.clientConfig, this.client.name)
+      this.client.links = [
                         ...this.links,
                         ...this.extLinks.filter(l => l.uri != ''),
-                            ...this.subLinks.filter(l => l.uri != '')])
+                        ...this.subLinks.filter(l => l.uri != '')]
       this.$emit('save', this.client, this.clientStats)
+      this.loading = false
     },
     setDate(newDate:number){
       this.client.expiry = newDate
@@ -206,8 +243,8 @@ export default {
   },
   computed: {
     clientInbounds: {
-      get() { return this.client.inbounds == "" ? [] : this.client.inbounds.split(',') },
+      get() { return this.client.inbounds.length>0 ? this.client.inbounds.filter(i => this.inboundTags.includes(i)) : [] },
-      set(newValue:string[]) { this.client.inbounds = newValue.length == 0 ?  "" : newValue.join(',') }
+      set(newValue:string[]) { this.client.inbounds = newValue.length == 0 ?  [] : newValue }
     },
     expDate: {
       get() { return this.client.expiry},
@@ -216,10 +253,16 @@ export default {
     Volume: {
       get() { return this.client.volume == 0 ? 0 : (this.client.volume / (1024 ** 3)) },
       set(v:number) { this.client.volume = v > 0 ? v*(1024 ** 3) : 0 }
-    }
+    },
+    up() :string { return HumanReadable.sizeFormat(this.client.up) },
+    down() :string { return HumanReadable.sizeFormat(this.client.down) },
+    total() :string { return HumanReadable.sizeFormat(this.client.down + this.client.up) },
+    percent() :number { return this.client.volume>0 ? Math.round((this.client.up + this.client.down) *100 / this.client.volume) : 0 },
+    percentColor() :string { return (this.client.up+this.client.down) >= this.client.volume ? 'error' : this.percent>90 ? 'warning' : 'success' },
   },
   watch: {
-      visible(newValue) { if (newValue) {
+    visible(newValue) {
+      if (newValue) {
         this.updateData()
       }
     },

frontend/src/layouts/modals/ClientBulk.vue

@@ -0,0 +1,199 @@
+<template>
+  <v-dialog transition="dialog-bottom-transition" width="800">
+    <v-card class="rounded-lg">
+      <v-card-title>
+        {{ $t('bulk.add') }}
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text style="padding: 0 16px; overflow-y: scroll;">
+        <v-container style="padding: 0;">
+          <v-row>
+            <v-col cols="12" sm="6" md="4">
+              <v-text-field v-model.number="count" type="number" min="1" max="100" :label="$t('count')" hide-details></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" sm="8">
+              <v-combobox
+                chips
+                multiple
+                v-model="bulkData.name"
+                :items="patterns"
+                :label="$t('client.name')"
+                hide-details>
+              </v-combobox>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" sm="8">
+              <v-combobox
+                chips
+                multiple
+                v-model="bulkData.desc"
+                :items="patterns"
+                :label="$t('client.desc')"
+                hide-details>
+              </v-combobox>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" sm="6" md="4">
+              <v-combobox v-model="bulkData.group" :items="groups" :label="$t('client.group')" hide-details></v-combobox>
+            </v-col>
+            <v-col cols="12" sm="6" md="4">
+              <v-text-field v-model.number="bulkData.Volume" type="number" min="0" :label="$t('stats.volume')" suffix="GiB" hide-details></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6" md="4">
+              <DatePick :expiry="bulkData.expiry" @submit="setDate" />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-combobox
+                v-model="bulkData.clientInbounds"
+                :items="inboundTags"
+                :label="$t('client.inboundTags')"
+                multiple
+                chips
+                hide-details
+              ></v-combobox>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="auto">
+              <v-switch v-model="bulkData.clientStats" color="primary" :label="$t('stats.enable')" hide-details></v-switch>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="blue-darken-1"
+          variant="outlined"
+          @click="closeModal"
+        >
+          {{ $t('actions.close') }}
+        </v-btn>
+        <v-btn
+          color="blue-darken-1"
+          variant="tonal"
+          :loading="loading"
+          @click="saveChanges"
+        >
+          {{ $t('actions.save') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import DatePick from '@/components/DateTime.vue'
+import { push } from 'notivue'
+import RandomUtil from '@/plugins/randomUtil'
+import { Client, createClient, randomConfigs } from '@/types/clients'
+import { i18n } from '@/locales';
+
+export default {
+  props: ['visible', 'inboundTags', 'groups'],
+  emits: ['close', 'save'],
+  data() {
+    return {
+      count: 1,
+      clients: <Client[]>[],
+      bulkData: {
+        name: <any[]>[],
+        desc: <any[]>[],
+        group: '',
+        clientInbounds: [],
+        expiry: 0,
+        Volume: 0,
+        clientStats: false,
+      },
+      patterns: [
+        { title: i18n.global.t("bulk.random"), value: "random" },
+        { title: i18n.global.t("bulk.order"), value: "order" },
+      ],
+      loading: false,
+    }
+  },
+  methods: {
+    resetData() {
+      this.count = 1,
+      this.clients = [],
+      this.bulkData = {
+        name: [this.patterns[1], "-", this.patterns[0]],
+        desc: [],
+        group: '',
+        clientInbounds: [],
+        expiry: 0,
+        Volume: 0,
+        clientStats: false,
+      }
+    },
+    closeModal() {
+      this.$emit('close')
+    },
+    saveChanges() {
+      if (this.bulkData.name.findIndex(n => typeof(n) == 'object') == -1) {
+        push.error(i18n.global.t('error.dplData'))
+        return
+      }
+      this.loading = true
+      for(let i=0;i<this.count;i++){
+        const name = this.genByPattern(this.bulkData.name, i)
+        this.clients.push(createClient({
+          enable: true,
+          name: name,
+          config: randomConfigs(name),
+          inbounds: this.bulkData.clientInbounds,
+          links: [],
+          volume: this.bulkData.Volume*(1024 ** 3),
+          expiry: this.bulkData.expiry,
+          up: 0,
+          down: 0,
+          desc: this.genByPattern(this.bulkData.desc, i),
+          group: this.bulkData.group
+        }))
+      }
+      this.$emit('save', this.clients, this.bulkData.clientInbounds, this.bulkData.clientStats)
+      this.resetData() // reset to default
+      this.loading = false
+    },
+    genByPattern(pattern: any[], order :number){
+      if (pattern.length == 0) return RandomUtil.randomSeq(8)
+      let result = ''
+      pattern.forEach(p => {
+        switch(typeof p){
+          case 'object':
+            switch(p.value){
+              case "random":
+                result += RandomUtil.randomSeq(8)
+                break
+              case "order":
+                result += order+1
+            }
+            break
+          default:
+            result += p
+        }
+      })
+      return result
+    },
+    setDate(v:number){
+      this.bulkData.expiry = v
+    }
+  },
+  computed: {},
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        this.resetData()
+      }
+    },
+  },
+  components: { DatePick },
+}
+
+</script>

frontend/src/layouts/modals/Inbound.vue

@@ -5,12 +5,12 @@
         {{ $t('actions.' + title) + " " + $t('objects.inbound') }}
       </v-card-title>
       <v-divider></v-divider>
-      <v-card-text>
+      <v-card-text style="padding: 0 16px; overflow-y: scroll;">
+        <v-container style="padding: 0;">
           <v-row>
             <v-col cols="12" sm="6" md="4">
               <v-select
               hide-details
-            width="100"
               :label="$t('type')"
               :items="Object.keys(inTypes).map((key,index) => ({title: key, value: Object.values(inTypes)[index]}))"
               v-model="inbound.type"
@@ -18,23 +18,53 @@
               </v-select>
             </v-col>
             <v-col cols="12" sm="6" md="4">
-            <v-text-field v-model="inbound.tag" :label="$t('in.tag')" hide-details></v-text-field>
+              <v-text-field v-model="inbound.tag" :label="$t('objects.tag')" hide-details></v-text-field>
             </v-col>
           </v-row>
-        <Listen :inbound="inbound" />
+          <v-tabs
-        <Direct v-if="inbound.type == inTypes.Direct" :inbound="inbound" />
+            v-if="HasInData.includes(inbound.type)"
-        <Shadowsocks v-if="inbound.type == inTypes.Shadowsocks" :inbound="inbound" />
+            v-model="side"
-        <Hysteria v-if="inbound.type == inTypes.Hysteria" :inbound="inbound" />
+            density="compact"
-        <Hysteria2 v-if="inbound.type == inTypes.Hysteria2" :inbound="inbound" />
+            fixed-tabs
+            align-tabs="center"
+          >
+            <v-tab value="s">{{ $t('in.sSide') }}</v-tab>
+            <v-tab value="c">{{ $t('in.cSide') }}</v-tab>
+          </v-tabs>
+          <v-window v-model="side" style="margin-top: 10px;">
+            <v-window-item value="s">
+              <Listen :inbound="inbound" :inTags="inTags" />
+              <Direct v-if="inbound.type == inTypes.Direct" direction="in" :data="inbound" />
+              <Shadowsocks v-if="inbound.type == inTypes.Shadowsocks" direction="in" :data="inbound" />
+              <Hysteria v-if="inbound.type == inTypes.Hysteria" direction="in" :data="inbound" />
+              <Hysteria2 v-if="inbound.type == inTypes.Hysteria2" direction="in" :data="inbound" />
               <Naive v-if="inbound.type == inTypes.Naive" :inbound="inbound" />
-        <ShadowTls v-if="inbound.type == inTypes.ShadowTLS" :inbound="inbound" />
+              <ShadowTls v-if="inbound.type == inTypes.ShadowTLS" direction="in" :data="inbound" :outTags="outTags" />
-        <Tuic v-if="inbound.type == inTypes.TUIC" :inbound="inbound" />
+              <Tuic v-if="inbound.type == inTypes.TUIC" direction="in" :data="inbound" />
+              <Tun v-if="inbound.type == inTypes.Tun" :data="inbound" />
               <TProxy v-if="inbound.type == inTypes.TProxy" :inbound="inbound" />
-        <Transport v-if="Object.hasOwn(inbound,'transport')" :inbound="inbound" />
+              <Transport v-if="Object.hasOwn(inbound,'transport')" :data="inbound" />
-        <Users v-if="HasOptionalUser.includes(inbound.type)" :inbound="inbound" :id="id" />
+              <Users v-if="HasOptionalUser.includes(inbound.type)" :inbound="inbound" />
-        <InTls v-if="Object.hasOwn(inbound,'tls')"  :inbound="inbound" />
+              <InTls v-if="Object.hasOwn(inbound,'tls')"  :inbound="inbound" :tlsConfigs="tlsConfigs" :tls_id="tls_id" />
-        <InMulitiplex v-if="Object.hasOwn(inbound,'multiplex')"  :inbound="inbound" />
+              <Multiplex v-if="Object.hasOwn(inbound,'multiplex')" direction="in" :data="inbound" />
               <v-switch v-model="inboundStats" color="primary" :label="$t('stats.enable')" hide-details></v-switch>
+            </v-window-item>
+            <v-window-item value="c">
+              <OutJsonVue :inData="inData" :type="inbound.type" />
+              <Multiplex v-if="Object.hasOwn(inbound,'multiplex')" direction="out" :data="inData.outJson" />
+              <v-card>
+                <v-card-subtitle>{{ $t('in.multiDomain') }}
+                  <v-icon @click="add_addr" icon="mdi-plus"></v-icon>
+                </v-card-subtitle>
+                <template v-for="addr,index in inData.addrs">
+                  {{ $t('in.addr') }} #{{ (index+1) }} <v-icon icon="mdi-delete" @click="inData.addrs.splice(index,1)" />
+                  <v-divider></v-divider>
+                  <AddrVue :addr="addr" :hasTls="Object.hasOwn(inbound,'tls')" />
+                </template>
+              </v-card>
+            </v-window-item>
+          </v-window>
+        </v-container>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
@@ -48,6 +78,7 @@
         <v-btn
           color="blue-darken-1"
           variant="text"
+          :loading="loading"
           @click="saveChanges"
         >
           {{ $t('actions.save') }}
@@ -57,9 +88,11 @@
   </v-dialog>
 </template>
 
-
 <script lang="ts">
 import { InTypes, createInbound } from '@/types/inbounds'
+import { Addr, InData } from '@/plugins/inData'
+import RandomUtil from '@/plugins/randomUtil'
+
 import Listen from '@/components/Listen.vue'
 import Direct from '@/components/protocols/Direct.vue'
 import Users from '@/components/Users.vue'
@@ -69,47 +102,98 @@ import Hysteria2 from '@/components/protocols/Hysteria2.vue'
 import Naive from '@/components/protocols/Naive.vue'
 import ShadowTls from '@/components/protocols/ShadowTls.vue'
 import Tuic from '@/components/protocols/Tuic.vue'
-import InTls from '@/components/InTLS.vue'
+import Tun from '@/components/protocols/Tun.vue'
+import InTls from '@/components/tls/InTLS.vue'
 import TProxy from '@/components/protocols/TProxy.vue'
-import RandomUtil from '@/plugins/randomUtil'
+import Multiplex from '@/components/Multiplex.vue'
-import InMulitiplex from '@/components/InMulitiplex.vue'
 import Transport from '@/components/Transport.vue'
+import AddrVue from '@/components/Addr.vue'
+import OutJsonVue from '@/components/OutJson.vue'
 export default {
-    props: ['visible', 'data', 'id', 'stats'],
+  props: ['visible', 'data', 'cData', 'index', 'stats', 'inTags', 'outTags', 'tlsConfigs'],
   emits: ['close', 'save'],
   data() {
     return {
       inbound: createInbound("direct",{ "tag": "" }),
+      inData: <InData>{},
       title: "add",
+      loading: false,
+      side: "s",
       inTypes: InTypes,
       inboundStats: false,
+      tls_id: { value: 0 },
       HasOptionalUser: [InTypes.Mixed,InTypes.SOCKS,InTypes.HTTP,InTypes.Shadowsocks],
+      HasInData: [
+        InTypes.SOCKS,
+        InTypes.HTTP,
+        InTypes.Shadowsocks,
+        InTypes.VMess,
+        InTypes.ShadowTLS,
+        InTypes.Trojan,
+        InTypes.Hysteria,
+        InTypes.VLESS,
+        InTypes.TUIC,
+        InTypes.Hysteria2,
+        InTypes.Naive,
+      ]
     }
   },
   methods: {
     updateData() {
-        if (this.$props.id != -1) {
+      if (this.$props.index != -1) {
         const newData = JSON.parse(this.$props.data)
         this.inbound = createInbound(newData.type, newData)
+        this.tls_id.value = this.$props.tlsConfigs?.findLast((t:any) => t.inbounds?.includes(this.inbound.tag))?.id?? 0
+        if (this.HasInData.includes(this.inbound.type)){
+          this.inData = this.$props.cData?.length> 0 ? <InData>JSON.parse(this.$props.cData) : <InData>{id: 0, tag: this.inbound.tag, addrs: [], outJson: {}}
+        } else {
+          this.inData = <InData>{id: -1}
+        }
         this.title = "edit"
       }
       else {
         const port = RandomUtil.randomIntRange(10000, 60000)
-            this.inbound = createInbound("mixed",{ tag: "in-"+port ,listen: "::", listen_port: port })
+        this.inbound = createInbound("direct",{ tag: "direct-"+port ,listen: "::", listen_port: port })
+        this.tls_id.value = 0
+        if (this.HasInData.includes(this.inbound.type)){
+          this.inData = <InData>{id: 0, tag: this.inbound.tag, addrs: [], outJson: {}}
+        } else {
+          this.inData = <InData>{id: -1}
+        }
         this.title = "add"
       }
       this.inboundStats = this.$props.stats
+      this.side = "s"
     },
     changeType() {
-        const prevConfig = { tag: this.inbound.tag ,listen: this.inbound.listen, listen_port: this.inbound.listen_port }
+      if (!this.inbound.listen_port) this.inbound.listen_port = RandomUtil.randomIntRange(10000, 60000)
-        this.inbound = createInbound(this.inbound.type, prevConfig)
+      // Tag change only in add inbound
+      const tag = this.$props.index != -1 ? this.inbound.tag : this.inbound.type + "-" + this.inbound.listen_port
+      // Use previous data
+      const prevConfig = { tag: tag ,listen: this.inbound.listen?? "::", listen_port: this.inbound.listen_port }
+      this.inbound = createInbound(this.inbound.type, this.inbound.type != this.inTypes.Tun ? prevConfig : { tag: tag })
+      if (this.HasInData.includes(this.inbound.type)){
+        if (this.inData.id == -1) this.inData.id = 0
+        this.inData.addrs = []
+        this.inData.outJson = {}
+        this.inData.tag = tag
+      } else {
+        this.inData = <InData>{id: -1}
+      }
+      this.tls_id.value = 0
+      this.side = "s"
+    },
+    add_addr() {
+      this.inData.addrs.push(<Addr>{ server: location.hostname, server_port: this.inbound.listen_port })
     },
     closeModal() {
       this.updateData() // reset
       this.$emit('close')
     },
     saveChanges() {
-        this.$emit('save', this.inbound, this.inboundStats)
+      this.loading = true
+      this.$emit('save', this.inbound, this.inboundStats, this.tls_id.value, this.inData)
+      this.loading = false
     },
   },
   watch: {
@@ -119,13 +203,10 @@ export default {
       }
     },
   },
-    components: { Listen, InTls, Hysteria2, Naive, Direct, Shadowsocks, Users, Hysteria, ShadowTls, TProxy, InMulitiplex, Tuic, Transport }
+  components: {
+    Listen, InTls, Hysteria2, Naive, Direct, Shadowsocks,
+    Users, Hysteria, ShadowTls, TProxy, Multiplex, Tuic, Tun, Transport,
+    AddrVue, OutJsonVue
+  }
 }
 </script>
-
-<style>
-.v-card-subtitle {
-  text-align: center;
-  border-bottom: 1px solid gray;
-}
-</style>

frontend/src/layouts/modals/Logs.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-dialog transition="dialog-bottom-transition" width="90%" max-width="1200" :loading="loading">
+    <v-card class="rounded-lg">
+      <v-card-title>
+        <v-row>
+          <v-col>{{ $t('basic.log.title') + " - " + (logType == 's-ui'? "S-UI" : "Sing-Box") }}</v-col>
+          <v-spacer></v-spacer>
+          <v-col cols="auto">
+            <v-icon icon="mdi-close" @click="$emit('close')" />
+          </v-col>
+        </v-row>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <v-row>
+          <v-col cols="12" sm="6" md="4">
+            <v-select
+            hide-details
+            :label="$t('basic.log.level')"
+            :items="logLevels"
+            v-model="logLevel"
+            @update:model-value="loadData">
+            </v-select>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-select
+            hide-details
+            :label="$t('count')"
+            :items="[10,20,30,50,100]"
+            v-model.number="logCount"
+            @update:model-value="loadData">
+            </v-select>
+          </v-col>
+          <v-col cols="auto" align="center" justify="center">
+            <v-btn
+              icon="mdi-refresh"
+              variant="tonal"
+              :loading="loading"
+              @click="loadData">
+              <v-icon  />
+            </v-btn>
+          </v-col>
+        </v-row>
+        <v-card style="background-color: background" dir="ltr" v-html="lines.join('<br />')"></v-card>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import HttpUtils from '@/plugins/httputil';
+
+export default {
+  props: ['logType', 'visible'],
+  data() {
+    return {
+      loading: false,
+      lines: [],
+      logLevel: 'info',
+      logLevels: [
+        { title: 'DEBUG', value: 'debug' },
+        { title: 'INFO', value: 'info' },
+        { title: 'WARNING', value: 'warning' },
+        { title: 'ERROR', value: 'err' },
+      ],
+      logCount: 10,
+    }
+  },
+  methods: {
+    async loadData() {
+      this.loading = true
+      const data = await HttpUtils.get('api/logs',{ s: this.$props.logType, c: this.logCount, l: this.logLevel })
+      if (data.success) {
+        this.lines = data.obj?? []
+        this.loading = false
+      }
+    }
+  },
+  watch: {
+    visible(newValue) {
+      this.lines = []
+      this.logLevel = 'info'
+      this.logCount = 10
+      if (newValue) {
+        this.loadData()
+      }
+    },
+  },
+}
+</script>

frontend/src/layouts/modals/Outbound.vue

@@ -0,0 +1,204 @@
+<template>
+  <v-dialog transition="dialog-bottom-transition" width="800">
+    <v-card class="rounded-lg">
+      <v-card-title>
+        {{ $t('actions.' + title) + " " + $t('objects.outbound') }}
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text style="padding: 0 16px; overflow-y: scroll;">
+        <v-container style="padding: 0;">
+          <v-tabs
+            v-model="tab"
+            align-tabs="center"
+          >
+            <v-tab value="t1">{{ $t('client.basics') }}</v-tab>
+            <v-tab value="t2">{{ $t('client.external') }}</v-tab>
+          </v-tabs>
+          <v-window v-model="tab">
+            <v-window-item value="t1">
+              <v-row>
+                <v-col cols="12" sm="6" md="4">
+                  <v-select
+                  hide-details
+                  :label="$t('type')"
+                  :items="Object.keys(outTypes).map((key,index) => ({title: key, value: Object.values(outTypes)[index]}))"
+                  v-model="outbound.type"
+                  @update:modelValue="changeType">
+                  </v-select>
+                </v-col>
+                <v-col cols="12" sm="6" md="4">
+                  <v-text-field v-model="outbound.tag" :label="$t('objects.tag')" hide-details></v-text-field>
+                </v-col>
+              </v-row>
+              <v-row v-if="!NoServer.includes(outbound.type)">
+                <v-col cols="12" sm="6" md="4">
+                  <v-text-field
+                  :label="$t('out.addr')"
+                  hide-details
+                  v-model="outbound.server">
+                  </v-text-field>
+                </v-col>
+                <v-col cols="12" sm="6" md="4">
+                  <v-text-field
+                  :label="$t('out.port')"
+                  type="number"
+                  min="0"
+                  hide-details
+                  v-model.number="outbound.server_port">
+                  </v-text-field>
+                </v-col>
+              </v-row>
+              <Direct v-if="outbound.type == outTypes.Direct" direction="out" :data="outbound" />
+              <Socks v-if="outbound.type == outTypes.SOCKS" :data="outbound" />
+              <Http v-if="outbound.type == outTypes.HTTP" :data="outbound" />
+              <Shadowsocks v-if="outbound.type == outTypes.Shadowsocks" direction="out" :data="outbound" />
+              <Vmess v-if="outbound.type == outTypes.VMess" :data="outbound" />
+              <Trojan v-if="outbound.type == outTypes.Trojan" :data="outbound" />
+              <Wireguard v-if="outbound.type == outTypes.Wireguard" :data="outbound" />
+              <Hysteria v-if="outbound.type == outTypes.Hysteria" direction="out" :data="outbound" />
+              <ShadowTls v-if="outbound.type == outTypes.ShadowTLS" :data="outbound" />
+              <Vless v-if="outbound.type == outTypes.VLESS" :data="outbound" />
+              <Tuic v-if="outbound.type == outTypes.TUIC" direction="out" :data="outbound" />
+              <Hysteria2 v-if="outbound.type == outTypes.Hysteria2" direction="out" :data="outbound" />
+              <Tor v-if="outbound.type == outTypes.Tor" :data="outbound" />
+              <Ssh v-if="outbound.type == outTypes.SSH" :data="outbound" />
+              <Selector v-if="outbound.type == outTypes.Selector" :data="outbound" :tags="tags" />
+              <UrlTest v-if="outbound.type == outTypes.URLTest" :data="outbound" :tags="tags" />
+
+              <Transport v-if="Object.hasOwn(outbound,'transport')" :data="outbound" />
+              <OutTLS v-if="Object.hasOwn(outbound,'tls')" :outbound="outbound" />
+              <Multiplex v-if="Object.hasOwn(outbound,'multiplex')" direction="out" :data="outbound" />
+              <Dial v-if="!NoDial.includes(outbound.type)" :dial="outbound" :outTags="tags" />
+              <v-switch v-model="outboundStats" color="primary" :label="$t('stats.enable')" hide-details></v-switch>
+            </v-window-item>
+            <v-window-item value="t2">
+              <v-row>
+                <v-col cols="12">
+                  <v-text-field v-model="link" :label="$t('client.external')" hide-details />
+                </v-col>
+                <v-col cols="12" align="center">
+                  <v-btn hide-details variant="tonal" :loading="loading" @click="linkConvert">{{ $t('submit') }}</v-btn>
+                </v-col>
+              </v-row>
+            </v-window-item>
+          </v-window>
+        </v-container>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="closeModal"
+        >
+          {{ $t('actions.close') }}
+        </v-btn>
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          :loading="loading"
+          @click="saveChanges"
+        >
+          {{ $t('actions.save') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { OutTypes, createOutbound } from '@/types/outbounds'
+import RandomUtil from '@/plugins/randomUtil'
+import Dial from '@/components/Dial.vue'
+import Multiplex from '@/components/Multiplex.vue'
+import Transport from '@/components/Transport.vue'
+import OutTLS from '@/components/tls/OutTLS.vue'
+import Direct from '@/components/protocols/Direct.vue'
+import Socks from '@/components/protocols/Socks.vue'
+import Http from '@/components/protocols/Http.vue'
+import Shadowsocks from '@/components/protocols/Shadowsocks.vue'
+import Vmess from '@/components/protocols/Vmess.vue'
+import Trojan from '@/components/protocols/Trojan.vue'
+import Wireguard from '@/components/protocols/Wireguard.vue'
+import Hysteria from '@/components/protocols/Hysteria.vue'
+import ShadowTls from '@/components/protocols/OutShadowTls.vue'
+import Vless from '@/components/protocols/Vless.vue'
+import Tuic from '@/components/protocols/Tuic.vue'
+import Hysteria2 from '@/components/protocols/Hysteria2.vue'
+import Tor from '@/components/protocols/Tor.vue'
+import Ssh from '@/components/protocols/Ssh.vue'
+import Selector from '@/components/protocols/Selector.vue'
+import UrlTest from '@/components/protocols/UrlTest.vue'
+import HttpUtils from '@/plugins/httputil'
+export default {
+  props: ['visible', 'data', 'id', 'stats', 'tags'],
+  emits: ['close', 'save'],
+  data() {
+    return {
+      outbound: createOutbound("direct",{ "tag": "" }),
+      title: "add",
+      tab: "t1",
+      link: "",
+      loading: false,
+      outTypes: OutTypes,
+      outboundStats: false,
+      NoDial: [OutTypes.Block, OutTypes.DNS, OutTypes.Selector, OutTypes.URLTest],
+      NoServer: [OutTypes.Direct, OutTypes.Block, OutTypes.DNS, OutTypes.Selector, OutTypes.URLTest, OutTypes.Tor],
+    }
+  },
+  methods: {
+    updateData() {
+      if (this.$props.id != -1) {
+        const newData = JSON.parse(this.$props.data)
+        this.outbound = createOutbound(newData.type, newData)
+        this.title = "edit"
+      }
+      else {
+        this.outbound = createOutbound("direct",{ tag: "direct-" + RandomUtil.randomSeq(3) })
+        this.title = "add"
+      }
+      this.tab = "t1"
+      this.outboundStats = this.$props.stats
+    },
+    changeType() {
+      // Tag change only in add outbound
+      const tag = this.$props.id != -1 ? this.outbound.tag : this.outbound.type + "-" + RandomUtil.randomSeq(3)
+      // Use previous data
+      const prevConfig = { tag: tag ,listen: this.outbound.listen, listen_port: this.outbound.listen_port }
+      this.outbound = createOutbound(this.outbound.type, prevConfig)
+    },
+    closeModal() {
+      this.updateData() // reset
+      this.$emit('close')
+    },
+    saveChanges() {
+      this.loading = true
+      this.$emit('save', this.outbound, this.outboundStats)
+      this.loading = false
+    },
+    async linkConvert() {
+      if (this.link.length>0){
+        this.loading = true
+        const msg = await HttpUtils.post('api/linkConvert', { link: this.link })
+        this.loading = false
+        if (msg.success) {
+          this.outbound = msg.obj
+          this.tab = "t1"
+          this.link = ""
+        }
+      }
+    }
+  },
+  watch: {
+    visible(newValue) {
+      if (newValue) {
+        this.updateData()
+      }
+    },
+  },
+  components: { Dial, Multiplex, Transport, OutTLS,
+    Direct, Socks, Http, Shadowsocks, Vmess, Trojan,
+    Wireguard, Hysteria, ShadowTls, Vless, Tuic,
+    Hysteria2, Tor, Ssh, Selector, UrlTest }
+}
+</script>