v1.0.0

Bump docker/build-push-action from 5 to 6

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: alireza0

.github/workflows/docker-core.yml

@@ -47,7 +47,7 @@ jobs:
         password: ${{ secrets.GITHUB_TOKEN }}
 
     - name: Build and push
-      uses: docker/build-push-action@v5
+      uses: docker/build-push-action@v6
       with:
         context: core/
         push: true

.github/workflows/docker.yml

@@ -44,7 +44,7 @@ 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

.github/workflows/release.yml

@@ -34,7 +34,7 @@ jobs:
           
       - name: Install dependencies
         run: |
-          sudo apt-get update && sudo apt-get install upx -yq
+          sudo apt-get update
           if [ "${{ matrix.platform }}" == "arm64" ]; then
             sudo apt install gcc-aarch64-linux-gnu
           elif [ "${{ matrix.platform }}" == "armv7" ]; then
@@ -69,22 +69,18 @@ jobs:
           fi
 
           #### Build Sing-Box
-          git clone -b v1.8.13 https://github.com/SagerNet/sing-box
+          export VERSION=v1.9.3
+          git clone -b $VERSION https://github.com/SagerNet/sing-box
           cd sing-box
-          go build -v -gcflags=all="-l -B -C" -mod=mod -trimpath \
-          -ldflags "-s -w -buildid= -extldflags '-static'" -a \
-          -tags='netgo osusergo static_build with_quic with_grpc with_wireguard with_ech with_utls with_reality_server with_acme with_v2ray_api with_clash_api with_gvisor' \
+          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
-          upx --ultra-brute -9 -v --lzma --best --force sing-box
           cd ..
 
           ### Build s-ui
           cd backend
-          go build -v -gcflags=all="-l -B -C" -mod=mod -trimpath \
-          -ldflags "-s -w -buildid= -extldflags '-static'" -a -tags='netgo osusergo static_build sqlite_omit_load_extension' \
-          -o ../sui main.go
+          go build -o ../sui main.go
           cd ..
-          upx --ultra-brute -9 -v --lzma --best --force sui
 
           mkdir s-ui
           cp sui s-ui/

Dockerfile

@@ -3,17 +3,18 @@ WORKDIR /app
 COPY frontend/ ./
 RUN npm install && npm run build
 
-FROM --platform=$BUILDPLATFORM golang:1.22-alpine AS backend-builder
+FROM golang:1.22-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 --platform=$BUILDPLATFORM alpine
+FROM --platform=$TARGETPLATFORM alpine
 LABEL org.opencontainers.image.authors="alireza7@gmail.com"
 ENV TZ=Asia/Tehran
 WORKDIR /app

README.md

@@ -23,7 +23,7 @@
 | 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: |
 
 
@@ -104,6 +104,56 @@ 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 fronend:
+```shell
+cd frontend
+npm run build
+```
+
+### - Backend
+Backend codes are in `backend` folder in the root of repository.
+> Please build fronend 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
@@ -169,4 +219,4 @@ certbot certonly --standalone --register-unsafely-without-email --non-interactiv
 </details>
 
 ## Stargazers over Time
-[![Stargazers over time](https://starchart.cc/alireza0/s-ui.svg?variant=adaptive)](https://starchart.cc/alireza0/s-ui)
+[![Stargazers over time](https://starchart.cc/alireza0/s-ui.svg)](https://starchart.cc/alireza0/s-ui)

backend/api/api.go

@@ -1,9 +1,9 @@
 package api
 
 import (
-	"fmt"
 	"s-ui/logger"
 	"s-ui/service"
+	"s-ui/util"
 	"strconv"
 	"strings"
 
@@ -15,6 +15,8 @@ type APIHandler struct {
 	service.UserService
 	service.ConfigService
 	service.ClientService
+	service.TlsService
+	service.InDataService
 	service.PanelService
 	service.StatsService
 	service.ServerService
@@ -94,6 +96,10 @@ func (a *APIHandler) postHandler(c *gin.Context) {
 	case "restartApp":
 		err = a.PanelService.RestartPanel(3)
 		jsonMsg(c, "restartApp", 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 +157,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) {
-	var data string
+func (a *APIHandler) loadData(c *gin.Context) (interface{}, error) {
+	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 +208,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/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,105 @@
+package cmd
+
+import (
+	"encoding/json"
+	"fmt"
+	"log"
+	"os"
+	"s-ui/config"
+	"s-ui/database"
+	"s-ui/database/model"
+	"strings"
+
+	"gorm.io/gorm"
+)
+
+func migrateDb() {
+	// void running on first install
+	path := config.GetDBPath()
+	_, err := os.Stat(path)
+	if err != nil {
+		return
+	}
+
+	err = database.OpenDB(path)
+	if err != nil {
+		log.Fatal(err)
+	}
+	db := database.GetDB()
+	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/version

@@ -1 +1 @@
-0.0.3
+1.0.0

backend/cronjob/delStatsJob.go

@@ -22,4 +22,5 @@ func (s *DelStatsJob) Run() {
 		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"`
@@ -16,17 +31,17 @@ type User struct {
 }
 
 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"`
-	Inbounds string `json:"inbounds" form:"inbounds"`
-	Links    string `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" from:"desc"`
+	Id       uint            `json:"id" form:"id" gorm:"primaryKey;autoIncrement"`
+	Enable   bool            `json:"enable" form:"enable"`
+	Name     string          `json:"name" form:"name"`
+	Config   json.RawMessage `json:"config" form:"config"`
+	Inbounds json.RawMessage `json:"inbounds" form:"inbounds"`
+	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" from:"desc"`
 }
 
 type Stats struct {

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)
-	if err != nil {
-		return "", err
-	}
-	return string(data), nil
+	return clients, 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,19 @@ 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
 
 type ConfigService struct {
 	ClientService
+	TlsService
+	InDataService
 	singbox.Controller
 	SettingService
 }
@@ -51,27 +56,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 +129,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 +152,7 @@ func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string)
 		if err != nil {
 			return err
 		}
-		newConfig := SingBoxConfig{}
-		err = json.Unmarshal(*singboxConfig, &newConfig)
-		if err != nil {
-			return err
-		}
+		newConfig := *singboxConfig
 		for _, change := range configChanges {
 			rawObject := change.Obj
 			switch change.Key {
@@ -154,12 +190,7 @@ func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string)
 			}
 		}
 
-		// Save to config.json
-		data, err := json.MarshalIndent(newConfig, "", "  ")
-		if err != nil {
-			return err
-		}
-		err = s.Save(&data)
+		err = s.Save(&newConfig)
 		if err != nil {
 			return err
 		}
@@ -167,30 +198,45 @@ func (s *ConfigService) SaveChanges(changes map[string]string, loginUser string)
 
 	// Log changes
 	dt := time.Now().Unix()
-	allChanges := append(append(clientChanges, settingChanges...), configChanges...)
-	for index := range allChanges {
-		allChanges[index].DateTime = dt
-		allChanges[index].Actor = loginUser
-	}
-	err = tx.Model(model.Changes{}).Create(&allChanges).Error
-	if err != nil {
-		return err
+	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
+		}
+		err = tx.Model(model.Changes{}).Create(&allChanges).Error
+		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
 	}
-	db := database.GetDB()
-	var count int64
-	err := db.Model(model.Changes{}).Where("date_time > " + lu).Count(&count).Error
-	return count > 0, err
+	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) {
@@ -202,35 +248,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 {
-			data, err = s.GetConfig()
+		if singboxConfig == nil {
+			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"`
@@ -257,12 +304,7 @@ func (s *ConfigService) DepleteClients() error {
 	if err != nil {
 		return err
 	}
-	newConfig := SingBoxConfig{}
-	err = json.Unmarshal(*singboxConfig, &newConfig)
-	if err != nil {
-		return err
-	}
-	for inbound_index, inbound := range newConfig.Inbounds {
+	for inbound_index, inbound := range singboxConfig.Inbounds {
 		var inboundJson map[string]interface{}
 		json.Unmarshal(inbound, &inboundJson)
 		if s.contains(inbounds, inboundJson["tag"].(string)) {
@@ -301,13 +343,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 {
-		return err
-	}
-	err = s.Save(&modifiedConfig)
+
+	err = s.Save(singboxConfig)
 	if err != nil {
 		return err
 	}
@@ -322,3 +361,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"
@@ -135,3 +138,44 @@ func (s *ServerService) GetSystemInfo() map[string]interface{} {
 
 	return info
 }
+
+func (s *ServerService) GetLogs(service string, count string, level string) []string {
+	c, _ := strconv.Atoi(count)
+	var lines []string
+	if service == "sing-box" {
+		cmdArgs := []string{"journalctl", "-u", service, "--no-pager", "-n", count, "-p", level}
+		// 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 run journalctl command!"}
+		}
+		lines = strings.Split(out.String(), "\n")
+	} else {
+		lines = logger.GetLogs(c, level)
+	}
+
+	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,7 +18,7 @@ var defaultValueMap = map[string]string{
 	"webListen":     "",
 	"webDomain":     "",
 	"webPort":       "2095",
-	"webSecret":     common.Random(32),
+	"secret":        common.Random(32),
 	"webCertFile":   "",
 	"webKeyFile":    "",
 	"webPath":       "/app/",
@@ -36,6 +36,7 @@ var defaultValueMap = map[string]string{
 	"subEncode":     "true",
 	"subShowInfo":   "false",
 	"subURI":        "",
+	"subJsonExt":    "",
 }
 
 type SettingService struct {
@@ -65,7 +66,7 @@ func (s *SettingService) GetAllSetting() (*map[string]string, error) {
 	}
 
 	// Due to security principles
-	delete(allSetting, "webSecret")
+	delete(allSetting, "secret")
 
 	return &allSetting, nil
 }
@@ -127,9 +128,9 @@ func (s *SettingService) getBool(key string) (bool, error) {
 	return strconv.ParseBool(str)
 }
 
-func (s *SettingService) setBool(key string, value bool) error {
-	return s.setString(key, strconv.FormatBool(value))
-}
+// func (s *SettingService) setBool(key string, value bool) error {
+// 	return s.setString(key, strconv.FormatBool(value))
+// }
 
 func (s *SettingService) getInt(key string) (int, error) {
 	str, err := s.getString(key)
@@ -191,11 +192,11 @@ func (s *SettingService) SetWebPath(webPath string) error {
 }
 
 func (s *SettingService) GetSecret() ([]byte, error) {
-	secret, err := s.getString("webSecret")
-	if secret == defaultValueMap["webSecret"] {
-		err := s.saveSetting("webSecret", secret)
+	secret, err := s.getString("secret")
+	if secret == defaultValueMap["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
@@ -318,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")
@@ -347,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/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) {
-	onlines, err := json.Marshal(onlineResources)
-	if err != nil {
-		return "", err
-	}
-	return string(onlines), nil
+func (s *StatsService) GetOnlines() (onlines, error) {
+	return *onlineResources, 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/sub/jsonService.go

@@ -0,0 +1,243 @@
+package sub
+
+import (
+	"encoding/json"
+	"fmt"
+	"s-ui/database"
+	"s-ui/database/model"
+	"s-ui/service"
+	"s-ui/util"
+)
+
+const defaultJson = `
+{
+  "inbounds": [
+    {
+      "type": "tun",
+      "inet4_address": "172.19.0.1/30",
+      "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)
+				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["experimental"]; ok {
+		(*jsonConfig)["experimental"] = othersJson["lexperimentalog"]
+	}
+	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,100 @@
+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 {
+	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,17 +24,28 @@ func (s *SubHandler) initRouter(g *gin.RouterGroup) {
 
 func (s *SubHandler) subs(c *gin.Context) {
 	subId := c.Param("subid")
-	result, headers, err := s.SubService.GetSubs(subId)
-	if err != nil || result == nil {
-		logger.Error(err)
-		c.String(400, "Error!")
+	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)
+			c.String(400, "Error!")
+		} else {
 
-		// Add headers
-		c.Writer.Header().Set("Subscription-Userinfo", headers[0])
-		c.Writer.Header().Set("Profile-Update-Interval", headers[1])
-		c.Writer.Header().Set("Profile-Title", headers[2])
+			// Add headers
+			c.Writer.Header().Set("Subscription-Userinfo", headers[0])
+			c.Writer.Header().Set("Profile-Update-Interval", headers[1])
+			c.Writer.Header().Set("Profile-Title", headers[2])
 
-		c.String(200, *result)
+			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
-}
-
-type Link struct {
-	Type   string `json:"type"`
-	Remark string `json:"remark"`
-	Uri    string `json:"uri"`
+	LinkService
 }
 
 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
-	for _, link := range links {
-		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))
-		}
-	}
+	linksArray := s.LinkService.GetLinks(&client.Links, "all", clientInfo)
+	result := strings.Join(linksArray, "\n")
 
 	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
+}

core/Dockerfile

@@ -2,7 +2,7 @@ FROM --platform=$BUILDPLATFORM golang:1.22-alpine AS singbox-builder
 LABEL maintainer="Alireza <alireza7@gmail.com>"
 WORKDIR /app
 ARG TARGETOS TARGETARCH
-ARG SINGBOX_VER=v1.8.10
+ARG SINGBOX_VER=v1.9.3
 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}
@@ -18,7 +18,7 @@ RUN set -ex \
         -ldflags "-X \"github.com/sagernet/sing-box/constant.Version=$SINGBOX_VER\" -s -w -buildid=" \
         ./cmd/sing-box
 
-FROM --platform=$BUILDPLATFORM alpine
+FROM --platform=$TARGETPLATFORM alpine
 LABEL maintainer="Alireza <alireza7@gmail.com>"
 ENV TZ=Asia/Tehran
 WORKDIR /app

core/runSingbox.sh

@@ -42,4 +42,12 @@ do
                 ;;
         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..."
+            break
+        fi
+    fi
 done

docker-compose.yml

@@ -1,6 +1,4 @@
 ---
-version: "3"
-
 services:
   s-ui:
     image: alireza7/s-ui
@@ -20,7 +18,7 @@ services:
       - "2096:2096"
     networks:
       - s-ui
-    entrypoint: "./sui"
+    entrypoint: "./sui migrate && ./sui"
 
   sing-box:
     image: alireza7/s-ui-singbox

frontend/package.json

@@ -1,43 +1,42 @@
 {
   "name": "frontend",
-  "version": "0.0.0",
+  "version": "1.0.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",
-    "axios": "^1.6.5",
-    "chart.js": "^4.4.1",
+    "@mdi/font": "7.4.47",
+    "axios": "^1.7.2",
+    "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": "*",
-    "vue": "^3.2.0",
-    "vue-chartjs": "^5.3.0",
-    "vue-i18n": "^9.8.0",
-    "vue-router": "^4.0.0",
+    "roboto-fontface": "^0.10.0",
+    "vue": "^3.4.31",
+    "vue-chartjs": "^5.3.1",
+    "vue-i18n": "^9.13.1",
+    "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",
-    "@types/node": "^18.15.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-typescript": "^11.0.0",
-    "eslint": "^8.22.0",
-    "eslint-plugin-vue": "^9.3.0",
+    "@babel/types": "^7.24.7",
+    "@types/node": "^20.14.9",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "eslint-plugin-vue": "^9.26.0",
     "material-design-icons-iconfont": "^6.7.0",
-    "sass": "^1.60.0",
-    "typescript": "^5.0.0",
-    "unplugin-fonts": "^1.0.3",
-    "vite": "^4.5.3",
-    "vite-plugin-vuetify": "^1.0.0",
-    "vue-tsc": "^1.2.0"
+    "sass": "^1.77.6",
+    "typescript": "^5.5.2",
+    "unplugin-fonts": "^1.1.1",
+    "vite": "^5.3.2",
+    "vite-plugin-vuetify": "^2.0.3",
+    "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

@@ -42,6 +42,7 @@
 <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'
 
@@ -58,7 +59,14 @@ export default {
   computed: {
     locale() {
       const l = i18n.global.locale.value
-      return l.replace('zh', 'zh-')
+      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')

frontend/src/components/Dial.vue

@@ -89,7 +89,7 @@
       <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>{{ $t('dial.options') }}</v-btn>
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('dial.options') }}</v-btn>
         </template>
         <v-card>
           <v-list>

frontend/src/components/Listen.vue

@@ -82,7 +82,7 @@
       <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>{{ $t('listen.options') }}</v-btn>
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('listen.options') }}</v-btn>
         </template>
         <v-card>
           <v-list>

frontend/src/components/Main.vue

@@ -1,4 +1,10 @@
 <template>
+  <LogVue
+  v-model="logModal.visible"
+  :visible="logModal.visible"
+  :logType="logModal.logType"
+  @close="closeLogs"
+  />
   <v-container class="fill-height">
     <v-responsive :class="reloadItems.length>0 ? 'fill-height text-center' : 'align-center'" >
       <v-row class="d-flex align-center justify-center">
@@ -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>
@@ -97,7 +109,13 @@
                   <v-col cols="4">{{ $t('main.info.running') }}</v-col>
                   <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="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-col>
                   <v-col cols="4">{{ $t('main.info.memory') }}</v-col>
                   <v-col cols="8">
@@ -148,6 +166,7 @@ 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 menu = ref(false)
 const menuItems = [
@@ -215,4 +234,19 @@ 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
+}
 </script>

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/SubJsonExt.vue

@@ -0,0 +1,368 @@
+<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>
+    <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="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
+      },
+      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
+        }
+      }
+    },
+    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()
+      }
+    },
+    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/Users.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 
 export default {
-  props: ['inbound', 'id'],
+  props: ['inbound'],
   data() {
     return {
       hasUser: false,

frontend/src/components/message.vue

@@ -1,18 +1,38 @@
 <template>
-    <v-snackbar
-    v-model="sb.showMsg"
-    location="top"
-    :color="snackbar.color"
-    :timeout="snackbar.timeout">
-      {{ snackbar.message }}
-    </v-snackbar>
+  <Notivue v-slot="item">
+    <NotivueSwipe :item="item">
+      <Notification
+        :item="item"
+        :theme="theme"
+        :dir="direction"
+        :icons="outlinedIcons"
+        :hideClose="true"
+        @click="item.clear"
+      />
+    </NotivueSwipe>
+  </Notivue>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import Message from '@/store/modules/message'
+import { Notivue, Notification, NotivueSwipe, outlinedIcons, pastelTheme, darkTheme } from 'notivue'
+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

@@ -20,16 +20,6 @@
         v-model.number="override_port">
         </v-text-field>
       </v-col>
-      <v-col cols="12" sm="6" md="4" v-if="direction == 'out'">
-        <v-select
-        :label="$t('types.direct.proxyProtocol')"
-        :items="[1,2]"
-        hide-details
-        clearable
-        @click:clear="delete data.proxy_protocol"
-        v-model.number="data.proxy_protocol">
-        </v-select>
-      </v-col>
     </v-row>
   </v-card>
 </template>

frontend/src/components/protocols/Hysteria.vue

@@ -87,7 +87,7 @@
       <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>{{ $t('types.hy.hyOptions') }}</v-btn>
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.hy.hyOptions') }}</v-btn>
         </template>
         <v-card>
           <v-list>

frontend/src/components/protocols/Hysteria2.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card subtitle="Hysteria2">
     <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="HTTP3 server on auth fail"
         hide-details
@@ -46,7 +46,7 @@
         </v-text-field>
       </v-col>
     </v-row>
-    <v-row v-if="data.obfs">
+    <v-row v-if="data.obfs != undefined">
       <v-col cols="12" sm="6" md="4">
        <v-text-field
         :label="$t('types.hy.obfs')"
@@ -59,13 +59,16 @@
       <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>{{ $t('types.hy.hy2Options') }}</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="$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>
       </v-menu>
@@ -95,6 +98,10 @@ export default {
     optionObfs: {
       get(): boolean { return this.$props.data.obfs != 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 }
     }
   },
   components: { Network }

frontend/src/components/protocols/ShadowTls.vue

@@ -39,7 +39,7 @@
     <v-row v-if="Inbound.handshake_for_server_name != undefined">
       <v-col cols="12" sm="6" md="4">
         <v-text-field
-        :label="$t('types.shdwTls.adHS')"
+        :label="$t('types.shdwTls.addHS')"
         hide-details
         append-icon="mdi-plus"
         @click:append="addHandshakeServer()"

frontend/src/components/protocols/Ssh.vue

@@ -77,7 +77,7 @@
       <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>{{ $t('types.ssh.options') }}</v-btn>
+            <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.ssh.options') }}</v-btn>
           </template>
           <v-card>
             <v-list>

frontend/src/components/protocols/UrlTest.vue

@@ -55,7 +55,7 @@
       <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>{{ $t('types.lb.urlTestOptions') }}</v-btn>
+            <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.lb.urlTestOptions') }}</v-btn>
           </template>
           <v-card>
             <v-list>

frontend/src/components/protocols/Wireguard.vue

@@ -61,7 +61,7 @@
       <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>{{ $t('types.wg.options') }}</v-btn>
+          <v-btn v-bind="props" hide-details variant="tonal">{{ $t('types.wg.options') }}</v-btn>
         </template>
         <v-card>
           <v-list>

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">
-      </span>
+      <div class="gauge__cover"><span dir="ltr" v-html="data.text"></span></div>
     </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('objects.tls')">
-    <v-row v-if="tlsOptional">
-      <v-col cols="auto">
+    <v-row>
+      <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"
@@ -103,44 +112,45 @@
         </v-col>
       </v-row>
     </template>
-    <v-card-actions v-if="tls.enabled">
+    <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>{{ $t('tls.options') }}</v-btn>
-          </template>
-          <v-card>
-            <v-list>
-              <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>
-          </v-card>
-        </v-menu>
+        <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="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>
+        </v-card>
+      </v-menu>
     </v-card-actions>
   </v-card>
 </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' },
@@ -173,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 },
-      set(newValue: boolean) { this.$props.inbound.tls = newValue ? { enabled: true } : {} }
+      get() { return this.tls.enabled?? false },
+      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)
@@ -190,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

@@ -177,7 +177,7 @@
       <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>{{ $t('tls.options') }}</v-btn>
+            <v-btn v-bind="props" hide-details variant="tonal">{{ $t('tls.options') }}</v-btn>
           </template>
           <v-card>
             <v-list>

frontend/src/layouts/default/AppBar.vue

@@ -9,7 +9,7 @@
 </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"
@@ -32,11 +32,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/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/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"
@@ -38,6 +38,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
@@ -156,6 +183,7 @@
 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'],
@@ -179,7 +207,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()
@@ -187,10 +215,9 @@ export default {
         this.clientConfig = randomConfigs('client')
       }
       this.clientStats = this.$props.stats
-      const allLinks = <Link[]>JSON.parse(this.client.links)
-      this.links = allLinks.filter(l => l.type == 'local')
-      this.extLinks = allLinks.filter(l => l.type == 'external')
-      this.subLinks = allLinks.filter(l => l.type == 'sub')
+      this.links = this.client.links.filter(l => l.type == 'local')
+      this.extLinks = this.client.links.filter(l => l.type == 'external')
+      this.subLinks = this.client.links.filter(l => l.type == 'sub')
       this.tab = "t1"
     },
     closeModal() {
@@ -199,11 +226,11 @@ export default {
     },
     saveChanges() {
       this.loading = true
-      this.client.config = updateConfigs(JSON.stringify(this.clientConfig), this.client.name)
-      this.client.links = JSON.stringify([
-                            ...this.links,
-                            ...this.extLinks.filter(l => l.uri != ''),
-                            ...this.subLinks.filter(l => l.uri != '')])
+      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.$emit('save', this.client, this.clientStats)
       this.loading = false
     },
@@ -213,8 +240,8 @@ export default {
   },
   computed: {
     clientInbounds: {
-      get() { return this.client.inbounds == "" ? [] : this.client.inbounds.split(',').filter(i => this.inboundTags.includes(i)) },
-      set(newValue:string[]) { this.client.inbounds = newValue.length == 0 ?  "" : newValue.join(',') }
+      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 }
     },
     expDate: {
       get() { return this.client.expiry},
@@ -223,7 +250,12 @@ 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) {

frontend/src/layouts/modals/Inbound.vue

@@ -5,35 +5,64 @@
         {{ $t('actions.' + title) + " " + $t('objects.inbound') }}
       </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('type')"
-            :items="Object.keys(inTypes).map((key,index) => ({title: key, value: Object.values(inTypes)[index]}))"
-            v-model="inbound.type"
-            @update:modelValue="changeType">
-            </v-select>
-          </v-col>
-          <v-col cols="12" sm="6" md="4">
-            <v-text-field v-model="inbound.tag" :label="$t('objects.tag')" hide-details></v-text-field>
-          </v-col>
-        </v-row>
-        <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" direction="in" :data="inbound" :outTags="outTags" />
-        <Tuic v-if="inbound.type == inTypes.TUIC" direction="in" :data="inbound" />
-        <TProxy v-if="inbound.type == inTypes.TProxy" :inbound="inbound" />
-        <Transport v-if="Object.hasOwn(inbound,'transport')" :data="inbound" />
-        <Users v-if="HasOptionalUser.includes(inbound.type)" :inbound="inbound" :id="id" />
-        <InTls v-if="Object.hasOwn(inbound,'tls')"  :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-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
+              :label="$t('type')"
+              :items="Object.keys(inTypes).map((key,index) => ({title: key, value: Object.values(inTypes)[index]}))"
+              v-model="inbound.type"
+              @update:modelValue="changeType">
+              </v-select>
+            </v-col>
+            <v-col cols="12" sm="6" md="4">
+              <v-text-field v-model="inbound.tag" :label="$t('objects.tag')" hide-details></v-text-field>
+            </v-col>
+          </v-row>
+          <v-tabs
+            v-if="HasInData.includes(inbound.type)"
+            v-model="side"
+            density="compact"
+            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" direction="in" :data="inbound" :outTags="outTags" />
+              <Tuic v-if="inbound.type == inTypes.TUIC" direction="in" :data="inbound" />
+              <TProxy v-if="inbound.type == inTypes.TProxy" :inbound="inbound" />
+              <Transport v-if="Object.hasOwn(inbound,'transport')" :data="inbound" />
+              <Users v-if="HasOptionalUser.includes(inbound.type)" :inbound="inbound" />
+              <InTls v-if="Object.hasOwn(inbound,'tls')"  :inbound="inbound" :tlsConfigs="tlsConfigs" :tls_id="tls_id" />
+              <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" />
+              <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>
@@ -57,9 +86,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,44 +100,83 @@ 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 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 Transport from '@/components/Transport.vue'
+import AddrVue from '@/components/Addr.vue'
+import OutJsonVue from '@/components/OutJson.vue'
 export default {
-  props: ['visible', 'data', 'id', 'stats', 'inTags', 'outTags'],
+  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("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() {
       // Tag change only in add outbound
-      const tag = this.$props.id != -1 ? this.inbound.tag : this.inbound.type + "-" + this.inbound.listen_port
+      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, prevConfig)
+      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.side = "s"
+    },
+    add_addr() {
+      this.inData.addrs.push(<Addr>{ server: location.hostname, server_port: this.inbound.listen_port })
     },
     closeModal() {
       this.updateData() // reset
@@ -114,7 +184,7 @@ export default {
     },
     saveChanges() {
       this.loading = true
-      this.$emit('save', this.inbound, this.inboundStats)
+      this.$emit('save', this.inbound, this.inboundStats, this.tls_id.value, this.inData)
       this.loading = false
     },
   },
@@ -125,6 +195,10 @@ export default {
       }
     },
   },
-  components: { Listen, InTls, Hysteria2, Naive, Direct, Shadowsocks, Users, Hysteria, ShadowTls, TProxy, Multiplex, Tuic, Transport }
+  components: {
+    Listen, InTls, Hysteria2, Naive, Direct, Shadowsocks,
+    Users, Hysteria, ShadowTls, TProxy, Multiplex, Tuic, Transport,
+    AddrVue, OutJsonVue
+  }
 }
 </script>

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

@@ -5,61 +5,84 @@
         {{ $t('actions.' + title) + " " + $t('objects.outbound') }}
       </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('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.addr')"
-            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" />
+      <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>
+              <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>
@@ -89,7 +112,7 @@ 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/OutTLS.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'
@@ -106,6 +129,7 @@ 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'],
@@ -113,6 +137,8 @@ export default {
     return {
       outbound: createOutbound("direct",{ "tag": "" }),
       title: "add",
+      tab: "t1",
+      link: "",
       loading: false,
       outTypes: OutTypes,
       outboundStats: false,
@@ -131,6 +157,7 @@ export default {
         this.outbound = createOutbound("direct",{ tag: "direct-" + RandomUtil.randomSeq(3) })
         this.title = "add"
       }
+      this.tab = "t1"
       this.outboundStats = this.$props.stats
     },
     changeType() {
@@ -149,6 +176,18 @@ export default {
       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) {

frontend/src/layouts/modals/QrCode.vue

@@ -1,27 +1,54 @@
 <template>
   <v-dialog transition="dialog-bottom-transition" width="400">
-    <v-card class="rounded-lg">
+    <v-card class="rounded-lg" id="qrcode-modal">
       <v-card-title>
         <v-row>
           <v-col>QrCode</v-col>
           <v-spacer></v-spacer>
-          <v-col cols="1"><v-icon icon="mdi-close-box" @click="$emit('close')" ></v-icon></v-col>
+          <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 style="text-align: center;" @click="copyToClipboard(clientSub)">
-            <v-chip>{{ $t('setting.sub') }}</v-chip>
-            <QrcodeVue :value="clientSub" :size="300" :margin="1" style="border-radius: 1rem;" />
-          </v-col>
-        </v-row>
-        <v-row v-for="l in clientLinks">
-          <v-col style="text-align: center;" @click="copyToClipboard(l.uri)">
-            <v-chip>{{ l.remark }}</v-chip><br />
-            <QrcodeVue :value="l.uri" :size="300" :margin="1" style="border-radius: 1rem;" />
-          </v-col>
-        </v-row>
+      <v-card-text style="overflow-y: auto; padding: 0">
+        <v-tabs
+          v-model="tab"
+          density="compact"
+          fixed-tabs
+          align-tabs="center"
+        >
+          <v-tab value="sub">{{ $t('setting.sub') }}</v-tab>
+          <v-tab value="link">{{ $t('client.links') }}</v-tab>
+        </v-tabs>
+        <v-window v-model="tab" style="margin-top: 10px;">
+          <v-window-item value="sub">
+            <v-row>
+              <v-col style="text-align: center;">
+                <v-chip>{{ $t('setting.sub') }}</v-chip><br />
+                <QrcodeVue :value="clientSub" :size="size" @click="copyToClipboard(clientSub)" :margin="1" style="border-radius: 1rem;" />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col style="text-align: center;">
+                <v-chip>{{ $t('setting.jsonSub') }}</v-chip><br />
+                <QrcodeVue :value="clientSub + '?format=json'" :size="size" @click="copyToClipboard(clientSub + '?format=json')" :margin="1" style="border-radius: 1rem;" />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col style="text-align: center;">
+                <v-chip>SING-BOX</v-chip><br />
+                <QrcodeVue :value="singbox" :size="size" @click="copyToClipboard(singbox)" :margin="1" style="border-radius: .8rem;" />
+              </v-col>
+            </v-row>
+          </v-window-item>
+          <v-window-item value="link">
+            <v-row v-for="l in clientLinks">
+              <v-col style="text-align: center;">
+                <v-chip>{{ l.remark?? $t('client.' + l.type) }}</v-chip><br />
+                <QrcodeVue :value="l.uri" :size="size" @click="copyToClipboard(l.uri)" :margin="1" style="border-radius: .5rem;" />
+              </v-col>
+            </v-row>
+          </v-window-item>
+        </v-window>
       </v-card-text>
     </v-card>
   </v-dialog>
@@ -31,38 +58,46 @@
 import QrcodeVue from 'qrcode.vue'
 import Data from '@/store/modules/data'
 import Clipboard from 'clipboard'
-import Message from '@/store/modules/message'
 import { i18n } from '@/locales'
+import { push } from 'notivue'
 
 export default {
-  props: ['index'],
+  props: ['index', 'visible'],
   data() {
     return {
-      msg: Message(),
+      tab: "sub",
     }
   },
   methods: {
     copyToClipboard(txt:string) {
+      const hiddenButton = document.createElement('button')
+      hiddenButton.className = 'clipboard-btn'
+      document.body.appendChild(hiddenButton)
+
       const clipboard = new Clipboard('.clipboard-btn', {
-        text: () => txt
+        text: () => txt,
+        container: document.getElementById('qrcode-modal')?? undefined
       });
 
       clipboard.on('success', () => {
         clipboard.destroy()
-        this.msg.showMessage(i18n.global.t('copyToClipboard') + " : " + i18n.global.t('success'),'success',5000)
+        push.success({
+          message: i18n.global.t('success') + ": " + i18n.global.t('copyToClipboard'),
+          duration: 5000,
+        })
       })
 
       clipboard.on('error', () => {
         clipboard.destroy()
-        this.msg.showMessage(i18n.global.t('copyToClipboard') + " : " + i18n.global.t('failed'),'error',5000)
+        push.error({
+          message: i18n.global.t('failed') + ": " + i18n.global.t('copyToClipboard'),
+          duration: 5000,
+        })
       })
 
       // Perform click on hidden button to trigger copy
-      const hiddenButton = document.createElement('button');
-      hiddenButton.className = 'clipboard-btn';
-      document.body.appendChild(hiddenButton);
-      hiddenButton.click();
-      document.body.removeChild(hiddenButton);
+      hiddenButton.click()
+      document.body.removeChild(hiddenButton)
     }
   },
   computed: {
@@ -74,10 +109,26 @@ export default {
     clientSub() {
       return Data().subURI + this.client.name
     },
+    singbox() {
+      const url = Data().subURI + this.client.name + "?format=json"
+      return "sing-box://import-remote-profile?url=" +  encodeURIComponent(url) + "#" + this.client.name
+    },
     clientLinks() {
-      return JSON.parse(this.client.links?? "[]")
+      return this.client.links?? []
+    },
+    size() {
+      if (window.innerWidth > 380) return 300
+      if (window.innerWidth > 330) return 280
+      return 250
     }
   },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.tab = "sub"
+      }
+    },
+  },
   components: { QrcodeVue }
 }
 </script>

frontend/src/layouts/modals/Stats.vue

@@ -3,8 +3,8 @@
     <v-card class="rounded-lg" :loading="loading" color="background">
       <v-card-title>
         <v-row>
-          <v-col>
-            {{ $t('stats.graphTitle') + " - " + $t('objects.' + resource) + " : " + tag }}
+          <v-col cols="auto">
+            {{ $t('stats.graphTitle') }}
           </v-col>
           <v-spacer></v-spacer>
           <v-col cols="auto"><v-icon icon="mdi-close" @click="$emit('close')"></v-icon></v-col>
@@ -12,7 +12,13 @@
       </v-card-title>
       <v-divider></v-divider>
       <v-card-text style="padding: 0 16px;">
-        <v-container id="container">
+        <div style="text-align: center; margin: 5px;">
+          {{ $t('objects.' + resource) + " : " + tag }}
+        </div>
+        <v-radio-group v-model="limit" @change="loadData" density="compact" :loading="loading" inline hide-details>
+          <v-radio v-for="p in periods" :label="p.title" :value="p.value"></v-radio>
+        </v-radio-group>
+        <v-container id="container" style="height:40vh;">
           <v-alert :text="$t('noData')" type="warning" variant="outlined" v-if="alert"></v-alert>
           <Line v-if="loaded" :data="usage" :options="<any>options" />
         </v-container>
@@ -60,13 +66,29 @@ export default {
       loaded: false,
       alert: false,
       intervalId: <any>0,
+      limit: 1,
+      periods: [
+        { value: 1, title: i18n.global.n(1) + i18n.global.t('date.h')},
+        { value: 6, title: i18n.global.n(6) + i18n.global.t('date.h')},
+        { value: 12, title: i18n.global.n(12) + i18n.global.t('date.h')},
+        { value: 24, title: i18n.global.n(1) + i18n.global.t('date.d')},
+        { value: 48, title: i18n.global.n(2) + i18n.global.t('date.d')},
+        { value: 240, title: i18n.global.n(10) + i18n.global.t('date.d')},
+        { value: 480, title: i18n.global.n(20) + i18n.global.t('date.d')},
+        { value: 720, title: i18n.global.n(30) + i18n.global.t('date.d')},
+        { value: 1440, title: i18n.global.n(60) + i18n.global.t('date.d')},
+        { value: 2160, title: i18n.global.n(90) + i18n.global.t('date.d')},
+      ],
       options: {
         responsive: true,
-        maintainAspectRatio: true,
+        maintainAspectRatio: false,
         interaction: {
           intersect: false,
           mode: 'index',
         },
+        elements: {
+          point: { pointStyle: 'crossRot' }
+        },
         plugins: {
           tooltip: {
             callbacks: {
@@ -99,13 +121,13 @@ export default {
     }
   },
   methods: {
-    async loadData(limit: number) {
+    async loadData() {
       this.loading = true
-      const data = await HttpUtils.get('api/stats', { resource: this.resource, tag: this.tag, limit: limit })
+      const data = await HttpUtils.get('api/stats', { resource: this.resource, tag: this.tag, limit: this.limit })
       if (data.success && data.obj) {
         const obj = <any[]>data.obj
         const l = String(i18n.global.locale) == 'fa' ? "fa-IR" : "en-US"
-        const oneStep = limit * 3600 * 1000 / 360 // Each 10 sec
+        const oneStep = this.limit * 3600 * 1000 / 360 // Each 10 sec
         const now = new Date().getTime()
         const steps = <number[]>[]
         for (let i = 360; i >= 0; i--) {
@@ -145,8 +167,10 @@ export default {
           ],
         }
         this.loaded = true
+        this.alert = false
       } else {
         this.alert = true
+        this.loaded = false
       }
       this.loading = false
     },
@@ -163,10 +187,10 @@ export default {
   watch: {
     visible(v) {
       if (v) {
-        const limit = 1
-        this.loadData(limit)
+        this.limit = 1
+        this.loadData()
         this.intervalId = setInterval(() => {
-          this.loadData(limit)
+          this.loadData()
         }, 10000)
       } else {
         this.loaded = false

frontend/src/layouts/modals/Tls.vue

@@ -0,0 +1,551 @@
+<template>
+  <v-dialog transition="dialog-bottom-transition" width="800">
+    <v-card class="rounded-lg">
+      <v-card-title>
+        {{ $t('actions.' + title) + " " + $t('objects.tls') }}
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text style="padding: 0 16px; overflow-y: scroll;">
+        <v-card class="rounded-lg">
+          <v-row>
+            <v-col cols="12" sm="6" md="4">
+              <v-text-field
+                :label="$t('client.name')"
+                hide-details
+                v-model="tls.name">
+              </v-text-field>
+            </v-col>
+            <v-col align="end">
+              <v-btn-toggle v-model="tlsType"
+              class="rounded-xl"
+              density="compact"
+              variant="outlined"
+              @update:model-value="changeTlsType"
+              shaped
+              mandatory>
+                <v-btn>TLS</v-btn>
+                <v-btn>Reality</v-btn>
+              </v-btn-toggle>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col cols="12" sm="6" md="4" v-if="inTls.server_name != undefined">
+              <v-text-field
+                label="SNI"
+                hide-details
+                v-model="inTls.server_name">
+              </v-text-field>
+            </v-col>
+            <template v-if="tlsType == 0">
+              <v-col cols="12" sm="6" md="4" v-if="inTls.min_version">
+                <v-select
+                  hide-details
+                  :label="$t('tls.minVer')"
+                  :items="tlsVersions"
+                  v-model="inTls.min_version">
+                </v-select>
+              </v-col>
+              <v-col cols="12" sm="6" md="4" v-if="inTls.max_version">
+                <v-select
+                  hide-details
+                  :label="$t('tls.maxVer')"
+                  :items="tlsVersions"
+                  v-model="inTls.max_version">
+                </v-select>
+              </v-col>
+              <v-col cols="12" sm="6" md="4" v-if="inTls.alpn">
+                <v-select
+                  hide-details
+                  label="ALPN"
+                  multiple
+                  :items="alpn"
+                  v-model="inTls.alpn">
+                </v-select>
+              </v-col>
+              <v-col cols="12" md="8" v-if="inTls.cipher_suites != undefined">
+                <v-select
+                  hide-details
+                  :label="$t('tls.cs')"
+                  multiple
+                  :items="cipher_suites"
+                  v-model="inTls.cipher_suites">
+                </v-select>
+              </v-col>
+            </template>
+          </v-row>
+          <template v-if="tlsType == 0">
+            <v-row>
+              <v-col>
+                <v-btn-toggle v-model="usePath"
+                class="rounded-xl"
+                density="compact"
+                variant="outlined"
+                shaped
+                mandatory>
+                  <v-btn
+                    @click="inTls.key=undefined; inTls.certificate=undefined"
+                  >{{ $t('tls.usePath') }}</v-btn>
+                  <v-btn
+                    @click="inTls.key_path=undefined; inTls.certificate_path=undefined"
+                  >{{ $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="genSelfSigned"
+                  :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="usePath == 0">
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  :label="$t('tls.certPath')"
+                  hide-details
+                  v-model="inTls.certificate_path">
+                </v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  :label="$t('tls.keyPath')"
+                  hide-details
+                  v-model="inTls.key_path">
+                </v-text-field>
+              </v-col>
+            </v-row>
+            <v-row v-else>
+              <v-col cols="12">
+                <v-textarea
+                  :label="$t('tls.cert')"
+                  hide-details
+                  v-model="certText">
+                </v-textarea>
+              </v-col>
+              <v-col cols="12">
+                <v-textarea
+                  :label="$t('tls.key')"
+                  hide-details
+                  v-model="keyText">
+                </v-textarea>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12" sm="6" md="4">
+                <v-switch color="primary" :label="$t('tls.disableSni')" v-model="disableSni" 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>
+          <template v-if="outTls.reality && inTls.reality">
+            <v-row>
+              <v-col cols="12" sm="6" md="4">
+                <v-text-field
+                :label="$t('types.shdwTls.hs')"
+                hide-details
+                v-model="inTls.reality.handshake.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="server_port">
+                </v-text-field>
+              </v-col>
+              <v-spacer></v-spacer>
+              <v-col cols="auto">
+                <v-btn
+                  variant="tonal"
+                  density="compact"
+                  icon="mdi-key-star"
+                  @click="genRealityKey"
+                  :loading="loading">
+                  <v-icon />
+                  <v-tooltip activator="parent" location="top">
+                    {{ $t('actions.generate') }}
+                  </v-tooltip>
+                </v-btn>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  :label="$t('tls.privKey')"
+                  hide-details
+                  v-model="inTls.reality.private_key">
+                </v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  :label="$t('tls.pubKey')"
+                  hide-details
+                  v-model="outTls.reality.public_key">
+                </v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  label="Short IDs"
+                  hide-details
+                  append-icon="mdi-refresh"
+                  @click:append="randomSID"
+                  v-model="short_id">
+                </v-text-field>
+              </v-col>
+              <v-col cols="12" sm="6" md="4" v-if="optionTime">
+                <v-text-field
+                label="Max Time Diference"
+                type="number"
+                min="1"
+                :suffix="$t('date.m')"
+                hide-details
+                v-model="max_time">
+                </v-text-field>
+              </v-col>
+            </v-row>
+          </template>
+          <v-row v-if="outTls.utls != undefined">
+            <v-col cols="12" sm="6" md="4">
+              <v-select
+                hide-details
+                label="Fingerprint"
+                :items="fingerprints"
+                v-model="outTls.utls.fingerprint">
+              </v-select>
+            </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.options') }}</v-btn>
+              </template>
+              <v-card>
+                <v-list>
+                  <template v-if="tlsType == 0">
+                    <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>
+                  </template>
+                  <template v-else>
+                    <v-list-item>
+                      <v-switch v-model="optionTime" color="primary" label="Max Time Difference" hide-details></v-switch>
+                    </v-list-item>
+                  </template>
+                  <v-list-item>
+                    <v-switch v-model="optionFP" color="primary" label="UTLS" hide-details></v-switch>
+                  </v-list-item>
+                </v-list>
+              </v-card>
+            </v-menu>
+          </v-card-actions>
+        </v-card>
+        <AcmeVue :tls="inTls" />
+        <EchVue :iTls="inTls" :oTls="outTls" />
+      </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 { iTls, defaultInTls } from '@/types/inTls'
+import { oTls, defaultOutTls } from '@/types/outTls'
+import AcmeVue from '@/components/tls/Acme.vue'
+import EchVue from '@/components/tls/Ech.vue'
+import HttpUtils from '@/plugins/httputil'
+import { push } from 'notivue'
+import { i18n } from '@/locales'
+import RandomUtil from '@/plugins/randomUtil'
+export default {
+  props: ['visible', 'data', 'index'],
+  emits: ['close', 'save'],
+  data() {
+    return {
+      tls: { id: -1, name: '', inbounds: [], server: <iTls>{ enabled: true }, client: <oTls>{} },
+      title: "add",
+      loading: false,
+      menu: false,
+      tlsType: 0,
+      usePath: 0,
+      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" },
+      ]
+    }
+  },
+  methods: {
+    updateData() {
+      if (this.$props.index != -1) {
+        const newData = JSON.parse(this.$props.data)
+        this.tls = newData
+        this.tlsType = newData.server?.reality == undefined ? 0 : 1
+        this.usePath = newData.server?.key == undefined ? 0 : 1
+        this.title = "edit"
+      }
+      else {
+        this.tls = { id: 0, name: '', inbounds: [], server: {enabled: true}, client: {} }
+        this.tlsType = 0
+        this.usePath = 0
+        this.title = "add"
+      }
+    },
+    changeTlsType(){
+      if (this.tlsType) {
+        this.tls.server = <iTls>{
+          enabled: true,
+          reality: { enabled: true, handshake: { server_port: 443 }, short_id: RandomUtil.randomShortId() },
+          server_name: "" }
+        this.tls.client = <oTls>{ reality: { public_key: "" } }
+      } else {
+        this.tls.server = <iTls>{ enabled: true }
+        this.tls.client = <oTls>{}
+      }
+    },
+    closeModal() {
+      this.updateData() // reset
+      this.$emit('close')
+    },
+    saveChanges() {
+      this.loading = true
+      this.$emit('save', this.tls)
+      this.loading = false
+    },
+    async genSelfSigned(){
+      this.loading = true
+      const msg = await HttpUtils.get('api/keypairs', { k: "tls", o: this.inTls.server_name?? "''" })
+      this.loading = false
+      if (msg.success) {
+        this.inTls.key_path=undefined
+        this.inTls.certificate_path=undefined
+        this.usePath = 1
+        if (msg.obj.length>0){
+          let privateKey = <string[]>[]
+          let publicKey = <string[]>[]
+          let isPrivateKey = false
+          let isPublicKey = false
+
+          msg.obj.forEach((line:string) => {
+              if (line === "-----BEGIN PRIVATE KEY-----") {
+                  isPrivateKey = true
+                  isPublicKey = false
+                  privateKey.push(line)
+              } else if (line === "-----END PRIVATE KEY-----") {
+                  isPrivateKey = false
+                  privateKey.push(line)
+              } else if (line === "-----BEGIN CERTIFICATE-----") {
+                  isPublicKey = true
+                  isPrivateKey = false
+                  publicKey.push(line)
+              } else if (line === "-----END CERTIFICATE-----") {
+                  isPublicKey = false
+                  publicKey.push(line)
+              } else if (isPrivateKey) {
+                  privateKey.push(line)
+              } else if (isPublicKey) {
+                  publicKey.push(line)
+              }
+          })
+          this.inTls.key = privateKey?? undefined
+          this.inTls.certificate = publicKey?? undefined
+
+        } else {
+          push.error({
+            message: i18n.global.t('error') + ": " + msg.obj
+          })
+        }
+      }
+    },
+    async genRealityKey(){
+      this.loading = true
+      const msg = await HttpUtils.get('api/keypairs', { k: "reality" })
+      this.loading = false
+      if (msg.success) {
+        msg.obj.forEach((line:string) => {
+          if (this.inTls.reality && this.outTls.reality){
+            if (line.startsWith("PrivateKey")){
+              this.inTls.reality.private_key = line.substring(12)
+            }
+            if (line.startsWith("PublicKey")){
+              this.outTls.reality.public_key = line.substring(11)
+            }
+          }
+        })
+      } else {
+        push.error({
+          message: i18n.global.t('error') + ": " + msg.obj
+        })
+      }
+    },
+    randomSID(){
+      this.short_id = RandomUtil.randomShortId().join(',')
+    }
+  },
+  computed: {
+    inTls(): iTls {
+      return <iTls> this.tls.server
+    },
+    outTls(): oTls {
+      return <oTls> this.tls.client
+    },
+    certText: {
+      get(): string { return this.inTls.certificate ? this.inTls.certificate.join('\n') : '' },
+      set(v:string) { this.inTls.certificate = v.split('\n') }
+    },
+    keyText: {
+      get(): string { return this.inTls.key ? this.inTls.key.join('\n') : '' },
+      set(v:string) { this.inTls.key = v.split('\n') }
+    },
+    disableSni: {
+      get() { return this.outTls.disable_sni ?? false },
+      set(v: boolean) { this.outTls.disable_sni = v ? true : undefined }
+    },
+    insecure: {
+      get() { return this.outTls.insecure ?? false },
+      set(v: boolean) { this.outTls.insecure = v ? true : undefined }
+    },
+    server_port: {
+      get() { return this.inTls.reality?.handshake?.server_port ? this.inTls.reality.handshake.server_port : 443 },
+      set(v: any) {
+        if (this.inTls.reality){
+          this.inTls.reality.handshake.server_port = v.length == 0 || v == 0 ? 443 : parseInt(v)
+        }
+      }
+    },
+    short_id: {
+      get() { return this.inTls.reality?.short_id ? this.inTls.reality.short_id.join(',') : undefined },
+      set(v: string) {
+        if (this.inTls.reality){
+          this.inTls.reality.short_id = v.length > 0 ? v.split(',') : []
+        }
+      }
+    },
+    max_time: {
+      get() { return this.inTls?.reality?.max_time_difference ? this.inTls.reality.max_time_difference.replace('m','') : 1 },
+      set(v: number) {
+        if (this.inTls.reality){
+          this.inTls.reality.max_time_difference = v > 0 ? v + 'm' : '1m'
+        }
+      }
+    },
+    optionSNI: {
+      get(): boolean { return this.inTls.server_name != undefined },
+      set(v:boolean) { this.inTls.server_name = v ? '' : undefined }
+    },
+    optionALPN: {
+      get(): boolean { return this.inTls.alpn != undefined },
+      set(v:boolean) { this.inTls.alpn = v ? defaultInTls.alpn : undefined }
+    },
+    optionMinV: {
+      get(): boolean { return this.inTls.min_version != undefined },
+      set(v:boolean) { this.inTls.min_version = v ? defaultInTls.min_version : undefined }
+    },
+    optionMaxV: {
+      get(): boolean { return this.inTls.max_version != undefined },
+      set(v:boolean) { this.inTls.max_version = v ? defaultInTls.max_version : undefined }
+    },
+    optionCS: {
+      get(): boolean { return this.inTls.cipher_suites != undefined },
+      set(v:boolean) { this.inTls.cipher_suites = v ? defaultInTls.cipher_suites : undefined }
+    },
+    optionFP: {
+      get(): boolean { return this.outTls.utls != undefined },
+      set(v:boolean) { this.outTls.utls = v ? defaultOutTls.utls : undefined }
+    },
+    optionEch: {
+      get(): boolean { return this.outTls.ech != undefined },
+      set(v:boolean) { this.outTls.ech = v ? defaultOutTls.ech : undefined }
+    },
+    optionTime: {
+      get(): boolean { return this.inTls?.reality?.max_time_difference != undefined },
+      set(v:boolean) { if (this.inTls.reality) this.inTls.reality.max_time_difference = v ? "1m" : undefined }
+    }
+  },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.updateData()
+      }
+    },
+  },
+  components: { AcmeVue, EchVue }
+}
+</script>

frontend/src/locales/en.ts

@@ -4,6 +4,9 @@ export default {
   failed: "failed",
   enable: "Enable",
   disable: "Disable",
+  none: "None",
+  all: "All",
+  filter: "Filter",
   loading: "Loading...",
   confirm: "Are you sure ?",
   yes: "yes",
@@ -21,9 +24,13 @@ export default {
   invalidLogin: "Invalid Login!",
   online: "Online",
   version: "Version",
+  email: "Email",
   commaSeparated: "(comma separated)",
+  count: "Count",
+  template: "Template",
   error: {
     dplData: "Duplicate Data",
+    core: "Sing-Box Error",
   },
   pages: {
     login: "Login",
@@ -32,6 +39,7 @@ export default {
     outbounds: "Outbounds",
     clients: "Clients",
     rules: "Rules",
+    tls: "TLS Settings",
     basics: "Basics",
     admins: "Admins",
     settings: "Settings",
@@ -83,11 +91,16 @@ export default {
   actions: {
     action: "Action",
     add: "Add",
+    new: "New",
     edit: "Edit",
     del: "Delete",
+    clone: "Clone",
     save: "Save",
     update: "Update",
     submit: "Submit",
+    set: "Set",
+    generate: "Generate",
+    disable: "Disable",
     close: "Close",
     restartApp: "Restart App",
   },
@@ -109,6 +122,10 @@ export default {
     lastLogin: "Last login",
     date: "Date",
     time: "Time",
+    changes: "Changes",
+    actor: "Actor",
+    key: "Key",
+    action: "Action",
   },
   setting: {
     interface: "Interface",
@@ -128,6 +145,14 @@ export default {
     path: "Default Path",
     update: "Automatic Update Time",
     subUri: "Subscription URI",
+    jsonSub: "JSON Subscription",
+    toDirect: "Route to Direct",
+    toBlock: "Route to Block",
+    timestamp: "Timestamp",
+    globalDns: "Global DNS",
+    directDns: "Direct DNS",
+    toDirectDns: "Route to Direct DNS",
+    jsonSubOptions: "Other Options",
   },
   client: {
     name: "Name",
@@ -145,7 +170,6 @@ export default {
     direct: {
       overrideAddr: "Override Address",
       overridePort: "Override Port",
-      proxyProtocol: "Proxy Protocol",
     },
     hy: {
       obfs: "Obfuscated Password",
@@ -213,6 +237,11 @@ export default {
     port: "Port",
     clients: "Enable Clients",
     ssMethod: "Method",
+    sSide: "Server Side",
+    cSide: "Client Side",
+    multiDomain: "Multi Domain",
+    remark: "Remark",
+    mdOption: "Multi Domain Options",
   },
   listen: {
     sniffing: "Sniffing",
@@ -302,6 +331,7 @@ export default {
       final: "Final",
       server: "Server",
       firstServer: "First Server",
+      addrResolver: "Address Resolver",
     },
     routing: {
       title: "Routing",
@@ -326,9 +356,26 @@ export default {
     minVer: "Minimum Version",
     maxVer: "Maximum Version",
     cs: "Cipher suits",
+    privKey: "Private Key",
     pubKey: "Public Key",
     disableSni: "Disable SNI",
     insecure: "Allow Insecure",
+    acme: {
+      options: "ACME Options",
+      dataDir: "Data Directory",
+      defaultDomain: "Default Domain",
+      disableChallenges: "Disable Challenges",
+      httpChallenge: "Disable HTTP Challenge",
+      tlsChallenge: "Disable TLS Challenge",
+      altPorts: "Alternative Ports",
+      altHport: "Alternative HTTP Port",
+      altTport: "Alternative TLS Port",
+      caProvider: "CA Provider",
+      customCa: "Custom CA Provider",
+      extAcc: "External Account",
+      dns01: "DNS01 Challenge",
+      dns01Provider: "DNS01 Challenge Provider",
+    },
   },
   stats: {
     upload: "Upload",

frontend/src/locales/fa.ts

@@ -4,6 +4,9 @@ export default {
   failed: "خطا",
   enable: "فعال",
   disable: "غیرفعال",
+  none: "هیچ",
+  all: "همه",
+  filter: "فیلتر",
   loading: "در حال بارگذاری...",
   confirm: "آیا مطمئن هستید ؟",
   yes: "بله",
@@ -21,9 +24,13 @@ export default {
   invalidLogin: "ورود نامعتبر!",
   online: "آنلاین",
   version: "نسخه",
+  email: "ایمیل",
   commaSeparated: "(جداشده با کاما)",
+  count: "تعداد",
+  template: "الگو",
   error: {
     dplData: "داده تکراری",
+    core: "خطا در سینگ‌باکس",
   },
   pages: {
     login: "ورود",
@@ -32,6 +39,7 @@ export default {
     outbounds: "خروجی‌ها",
     clients: "کاربران",
     rules: "قوانین",
+    tls: "رمزنگاری‌ها",
     basics: "ترازها",
     admins: "ادمین‌ها",
     settings: "پیکربندی",
@@ -82,11 +90,16 @@ export default {
   actions: {
     action: "فرمان",
     add: "ایجاد",
+    new: "جدید",
     edit: "ویرایش",
     del: "حذف",
+    clone: "شبیه‌سازی",
     save: "ذخیره",
     update: "بروزرسانی",
     submit: "ارسال",
+    set: "تنظیم",
+    generate: "تولید",
+    disable: "غیرفعال",
     close: "بستن",
     restartApp: "ریستارت پنل",
   },
@@ -108,6 +121,10 @@ export default {
     lastLogin: "آخرین ورود",
     date: "تاریخ",
     time: "ساعت",
+    changes: "تغییرات",
+    actor: "مجری",
+    key: "کلید",
+    action: "عمل",
   },
   setting: {
     interface: "نما",
@@ -127,6 +144,14 @@ export default {
     path: "مسیر پیشفرض",
     update: "زمان بروزرسانی خودکار",
     subUri: "آدرس نهایی سابسکریپشن",
+    jsonSub: "سابسکریپشن JSON",
+    toDirect: "هدایت مستقیم",
+    toBlock: "بستن مسیر",
+    timestamp: "نمایش زمان",
+    globalDns: "DNS کلی",
+    directDns: "DNS مستقیم",
+    toDirectDns: "هدایت به DNS مستقیم",
+    jsonSubOptions: "گزینه‌های دیگر",
   },
   client: {
     name: "نام",
@@ -144,7 +169,6 @@ export default {
     direct: {
       overrideAddr: "جایگزین آدرس",
       overridePort: "جایگزین پورت",
-      proxyProtocol: "پروتکل پراکسی",
     },
     hy: {
       obfs: "رمز مبهم کننده",
@@ -212,6 +236,11 @@ export default {
     port: "پورت",
     clients: "فعال‌سازی کاربران",
     ssMethod: "روش",
+    sSide: "سمت سرور",
+    cSide: "سمت کاربر",
+    multiDomain: "دامنه چندگانه",
+    remark: "شرح",
+    mdOption: "گزینه‌های دامنه چندگانه",
   },
   listen: {
     sniffing: "شنود آدرس",
@@ -301,6 +330,7 @@ export default {
       final: "سرور نهایی",
       server: "سرور",
       firstServer: "سرور نخست",
+      addrResolver: "حل کننده دامنه",
     },
     routing: {
       title: "مسیریابی",
@@ -325,9 +355,26 @@ export default {
     minVer: "کمینه نسخه",
     maxVer: "بیشینه نسخه",
     cs: "مدل‌های رمزنگاری",
+    privKey: "کلید خصوصی",
     pubKey: "کلید عمومی",
     disableSni: "غیرفعال‌سازی SNI",
     insecure: "تایید ارتباط ناامن",
+    acme: {
+      options: "گزینه‌های ACME",
+      dataDir: "مسیر داده‌ها",
+      defaultDomain: "دامنه پیش‌فرض",
+      disableChallenges: "بستن چالش‌ها",
+      httpChallenge: "بستن چالش HTTP",
+      tlsChallenge: "بستن چالش TLS",
+      altPorts: "پورت‌های جایگزین",
+      altHport: "پورت جایگزین HTTP",
+      altTport: "پورت جایگزین TLS",
+      caProvider: "فراهم کننده گواهی",
+      customCa: "فراهم کننده دیگر",
+      extAcc: "حساب خارجی",
+      dns01: "چالش DNS01",
+      dns01Provider: "فراهم کننده چالش DNS01",
+    },
   },
   stats: {
     upload: "آپلود",

frontend/src/locales/index.ts

@@ -13,8 +13,8 @@ export const i18n = createI18n({
     en: en,
     fa: fa,
     vi: vi,
-    zhcn: zhcn,
-    zhtw: zhtw
+    zhHans: zhcn,
+    zhHant: zhtw
   },
 })
 
@@ -22,6 +22,6 @@ export const languages = [
   { title: 'English', value: 'en' },
   { title: 'فارسی', value: 'fa' },
   { title: 'Tiếng Việt', value: 'vi' },
-  { title: '简体中文', value: 'zhcn' },
-  { title: '繁體中文', value: 'zhtw' },
+  { title: '简体中文', value: 'zhHans' },
+  { title: '繁體中文', value: 'zhHant' },
 ]

frontend/src/locales/vi.ts

@@ -4,6 +4,9 @@ export default {
   failed: "Thất bại",
   enable: "Kích hoạt",
   disable: "Vô hiệu hóa",
+  none: "Không",
+  all: "Tất cả",
+  filter: "Bộ lọc",
   loading: "Đang tải...",
   confirm: "Bạn chắc chắn chứ?",
   yes: "có",
@@ -21,9 +24,13 @@ export default {
   invalidLogin: "Đăng nhập không hợp lệ!",
   online: "Trực tuyến",
   version: "Phiên bản",
+  email: "Email",
   commaSeparated: "(được phân tách bằng dấu phẩy)",
+  count: "Đếm",
+  template: "Mẫu",
   error: {
     dplData: "Dữ liệu trùng lặp",
+    core: "Lỗi Sing-Box",
   },
   pages: {
     login: "Đăng nhập",
@@ -32,6 +39,7 @@ export default {
     outbounds: "Đầu ra",
     clients: "Khách hàng",
     rules: "Quy tắc",
+    tls: "Cài đặt TLS",
     basics: "Cơ bản",
     admins: "Quản trị viên",
     settings: "Cài đặt",
@@ -83,11 +91,16 @@ export default {
   actions: {
     action: "Hành động",
     add: "Thêm",
+    new: "Mới",
     edit: "Chỉnh sửa",
     del: "Xóa",
+    clone: "Nhân bản",
     save: "Lưu",
     update: "Cập nhật",
     submit: "Gửi",
+    set: "Đặt",
+    generate: "Tạo ra",
+    disable: "Vô hiệu hóa",
     close: "Đóng",
     restartApp: "Khởi động lại ứng dụng",
   },
@@ -109,6 +122,10 @@ export default {
     lastLogin: "Lân đăng nhập cuôi",
     date: "Ngày",
     time: "Thời gian",
+    changes: "Thay đổi",
+    actor: "Diễn viên",
+    key: "Khóa",
+    action: "Hành động",
   },
   setting: {
     interface: "Giao diện",
@@ -128,6 +145,14 @@ export default {
     path: "Đường dẫn mặc định",
     update: "Thời gian cập nhật tự động",
     subUri: "URI đăng ký",
+    jsonSub: "Đăng ký JSON",
+    toDirect: "Chuyển hướng tới Trực tiếp",
+    toBlock: "Chuyển hướng tới Chặn",
+    timestamp: "Dấu thời gian",
+    globalDns: "DNS Toàn cầu",
+    directDns: "DNS Trực tiếp",
+    toDirectDns: "Chuyển hướng tới DNS Trực tiếp",
+    jsonSubOptions: "Tùy chọn Khác",
   },
   client: {
     name: "Tên",
@@ -145,7 +170,6 @@ export default {
     direct: {
       overrideAddr: "Ghi đè Địa chỉ",
       overridePort: "Ghi đè Cổng",
-      proxyProtocol: "Giao thức Proxy",
     },
     hy: {
       obfs: "Mật khẩu đã được Ẩn",
@@ -214,6 +238,11 @@ export default {
     sniffing: "Đang Sniffing",
     clients: "Kích hoạt khách hàng",
     ssMethod: "Phương thức",
+    sSide: "Phía Máy chủ",
+    cSide: "Phía Khách hàng",
+    multiDomain: "Nhiều Tên miền",
+    remark: "Ghi chú",
+    mdOption: "Tùy chọn Nhiều Tên miền",
   },
   listen: {
     sniffing: "Đang Sniffing",
@@ -303,6 +332,7 @@ export default {
       final: "Cuối cùng",
       server: "Máy chủ",
       firstServer: "Máy chủ Đầu tiên",
+      addrResolver: "Trình phân giải địa chỉ",
     },
     routing: {
       title: "Định tuyến",
@@ -327,9 +357,26 @@ export default {
     minVer: "Phiên bản Tối thiểu",
     maxVer: "Phiên bản Tối đa",
     cs: "Các bộ mã hóa",
+    privKey: "Khóa riêng",
     pubKey: "Khóa Công khai",
     disableSni: "Tắt SNI",
     insecure: "Cho phép Không an toàn",
+    acme: {
+      options: "Tùy chọn ACME",
+      dataDir: "Thư mục Dữ liệu",
+      defaultDomain: "Tên miền Mặc định",
+      disableChallenges: "Vô hiệu hóa Thách thức",
+      httpChallenge: "Vô hiệu hóa Thách thức HTTP",
+      tlsChallenge: "Vô hiệu hóa Thách thức TLS",
+      altPorts: "Cổng Thay thế",
+      altHport: "Cổng HTTP Thay thế",
+      altTport: "Cổng TLS Thay thế",
+      caProvider: "Nhà cung cấp CA",
+      customCa: "Nhà cung cấp CA Tùy chỉnh",
+      extAcc: "Tài khoản Bên ngoài",
+      dns01: "Thách thức DNS01",
+      dns01Provider: "Nhà cung cấp Thách thức DNS01"
+    },
   },
   stats: {
     upload: "Tải lên",

frontend/src/locales/zhcn.ts

@@ -4,6 +4,9 @@ export default {
   failed: "失败",
   enable: "启用",
   disable: "禁用",
+  none: "无",
+  all: "全部",
+  filter: "过滤器",
   loading: "加载中...",
   confirm: "是否确定？",
   yes: "确认",
@@ -21,9 +24,13 @@ export default {
   invalidLogin: "登录无效！",
   online: "在线",
   version: "版本",
+  email: "电子邮件",
   commaSeparated: "（逗号分隔）",
+  count: "计数",
+  template: "模板",
   error: {
     dplData: "重复数据",
+    core: "Sing-Box 错误",
   },
   pages: {
     login: "登录",
@@ -32,6 +39,7 @@ export default {
     outbounds: "出站管理",
     clients: "用户管理",
     rules: "路由列表",
+    tls: "TLS 设置",
     basics: "基础信息",
     admins: "管理员",
     settings: "设置",
@@ -70,24 +78,29 @@ export default {
     rule: "规则",
     user: "用户",
     tag: "标签",
-    listen: "听",
+    listen: "监听",
     dial: "拨号",
     tls: "TLS",
     multiplex: "多路复用",
     transport: "传输",
     method: "方法",
     headers: "标头",
-    key: "钥匙",
-    value: "价值",
+    key: "键",
+    value: "值",
   },
   actions: {
     action: "操作",
     add: "添加",
+    new: "新建",
     edit: "编辑",
     del: "删除",
+    clone: "克隆",
     save: "保存",
     update: "更新",
     submit: "提交",
+    set: "设置",
+    generate: "生成",
+    disable: "禁用",
     close: "关闭",
     restartApp: "重启面板",
   },
@@ -109,25 +122,37 @@ export default {
     lastLogin: "上次登录",
     date: "日期",
     time: "时间",
+    changes: "更改",
+    actor: "执行者",
+    key: "键",
+    action: "操作",
   },
   setting: {
     interface: "界面",
     sub: "订阅",
     addr: "地址",
     port: "端口",
-    webPath: "基本 URI",
+    webPath: "面板路径",
     domain: "域名",
     sslKey: "SSL 密钥 (Key) 路径",
     sslCert: "SSL 证书 (cert) 路径",
     webUri: "面板 URI",
-    sessionAge: "会话最大连接数",
-    trafficAge: "流量最大年龄",
+    sessionAge: "会话超时时限",
+    trafficAge: "流量过期时限",
     timeLoc: "时区",
-    subEncode: "启用编码",
+    subEncode: "启用 Base64 编码",
     subInfo: "启用用户信息",
     path: "默认路径",
     update: "自动更新时间",
-    subUri: "订阅 URL",
+    subUri: "订阅 URI",
+    jsonSub: "JSON 订阅",
+    toDirect: "路由到直连",
+    toBlock: "路由到阻止",
+    timestamp: "时间戳",
+    globalDns: "全局 DNS",
+    directDns: "直连 DNS",
+    toDirectDns: "路由到直连 DNS",
+    jsonSubOptions: "其他选项",
   },
   client: {
     name: "名称",
@@ -145,7 +170,6 @@ export default {
     direct: {
       overrideAddr: "覆盖地址",
       overridePort: "覆盖端口",
-      proxyProtocol: "代理协议",
     },
     hy: {
       obfs: "混淆密码",
@@ -173,10 +197,10 @@ export default {
     tuic: {
       congControl: "拥塞控制",
       authTimeout: "认证超时",
-      hb: "心跳",
+      hb: "心跳包",
     },
     vless: {
-      flow: "流量",
+      flow: "流控",
       udpEnc: "UDP 数据包编码",
     },
     vmess: {
@@ -214,22 +238,27 @@ export default {
     sniffing: "嗅探",
     clients: "启用客户端",
     ssMethod: "方法",
+    sSide: "服务器端",
+    cSide: "客户端",
+    multiDomain: "多域名",
+    remark: "备注",
+    mdOption: "多域名选项",
   },
   listen: {
     sniffing: "嗅探",
     sniffingTimeout: "嗅探超时",
-    sniffingOverride: "覆盖目的地",
+    sniffingOverride: "覆盖目标地址",
     options: "监听选项",
-    tcpOptions: "TCP选项",
-    udpOptions: "UDP选项",
-    detour: "绕道",
+    tcpOptions: "TCP 选项",
+    udpOptions: "UDP 选项",
+    detour: "转发",
     detourText: "转发到入站",
-    domainStrategy: "域名策略",
+    domainStrategy: "域名解析策略",
   },
   dial: {
     bindIf: "绑定到网络接口",
-    bindIp4: "绑定到IPv4",
-    bindIp6: "绑定到IPv6",
+    bindIp4: "绑定到 IPv4",
+    bindIp6: "绑定到 IPv6",
     reuseAddr: "重用监听地址",
     connTimeout: "连接超时",
     fbTimeout: "回退超时",
@@ -238,22 +267,22 @@ export default {
   },
   transport: {
     enable: "启用传输",
-    host: "主机",
-    hosts: "主机列表",
-    path: "路径",
-    httpMethod: "请求方法",
+    host: "主机域名",
+    hosts: "主机域名列表",
+    path: "HTTP 请求路径",
+    httpMethod: "HTTP 请求方法",
     idleTimeout: "空闲超时",
-    pingTimeout: "Ping超时",
-    grpcServiceName: "服务名称",
-    grpcPws: "允许无流",
+    pingTimeout: "Ping 超时",
+    grpcServiceName: "gRPC 服务名称",
+    grpcPws: "允许无流时保持连接",
   },
   mux: {
     enable: "启用多路复用",
     maxConn: "最大连接数",
     minStr: "最小流数",
     maxStr: "最大流数",
-    padding: "仅填充",
-    enableBrutal: "启用强力模式",
+    padding: "仅允许填充连接",
+    enableBrutal: "启用 TCP Brutal",
   },
   out: {
     addr: "服务器地址",
@@ -264,22 +293,22 @@ export default {
     simple: "简单",
     logical: "逻辑",
     mode: "模式",
-    invert: "反转",
+    invert: "反选结果",
     ipVer: "IP 版本",
     domain: "域名",
     domainSufix: "域名后缀",
     domainKw: "域名关键词",
     domainRgx: "域名正则表达式",
     ip: "IP CIDR",
-    privateIp: "无效 IP 范围",
+    privateIp: "匹配非公开 IP",
     port: "端口",
     portRange: "端口范围",
     srcCidr: "源 IP CIDR",
-    srcPrivateIp: "无效源 IP",
+    srcPrivateIp: "匹配非公开源 IP",
     srcPort: "源端口",
     srcPortRange: "源端口范围",
     ruleset: "规则集",
-    rulesetMatchSrc: "规则集 IP CIDR 匹配源",
+    rulesetMatchSrc: "规则集 IP CIDR 匹配源 IP",
     options: "规则选项",
     domainRules: "域名/IP",
     srcIpRules: "源 IP",
@@ -303,6 +332,7 @@ export default {
       final: "最终",
       server: "服务器",
       firstServer: "首选服务器",
+      addrResolver: "地址解析器",
     },
     routing: {
       title: "路由",
@@ -312,7 +342,7 @@ export default {
       autoBind: "自动绑定网卡",
     },
     exp: {
-      storeFakeIp: "存储虚假 IP",
+      storeFakeIp: "持久化 Fake-IP",
     },
   },
   tls : {
@@ -327,9 +357,26 @@ export default {
     minVer: "最低版本",
     maxVer: "最高版本",
     cs: "密码套件",
+    privKey: "私钥",
     pubKey: "公钥",
-    disableSni: "禁用SNI",
+    disableSni: "禁用 SNI",
     insecure: "允许不安全",
+    acme: {
+      options: "ACME 选项",
+      dataDir: "数据目录",
+      defaultDomain: "默认域名",
+      disableChallenges: "禁用挑战",
+      httpChallenge: "禁用 HTTP 挑战",
+      tlsChallenge: "禁用 TLS 挑战",
+      altPorts: "替代端口",
+      altHport: "替代 HTTP 端口",
+      altTport: "替代 TLS 端口",
+      caProvider: "CA 提供商",
+      customCa: "自定义 CA 提供商",
+      extAcc: "外部账户",
+      dns01: "DNS01 挑战",
+      dns01Provider: "DNS01 挑战提供商"
+    },
   },
   stats: {
     upload: "上传",

frontend/src/locales/zhtw.ts

@@ -5,6 +5,9 @@ export default {
   failed: "失敗",
   enable: "啟用",
   disable: "禁用",
+  none: "無",
+  all: "全部",
+  filter: "過濾器",
   loading: "加載中...",
   confirm: "是否確定？",
   yes: "確認",
@@ -22,9 +25,13 @@ export default {
   invalidLogin: "登錄無效！",
   online: "在線",
   version: "版本",
+  email: "電子郵件",
   commaSeparated: "（逗號分隔）",
+  count: "計數",
+  template: "模板",
   error: {
     dplData: "重複數據",
+    core: "Sing-Box 錯誤",
   },
   pages: {
     login: "登錄",
@@ -33,6 +40,7 @@ export default {
     outbounds: "出站管理",
     clients: "用戶管理",
     rules: "路由列表",
+    tls: "TLS 設置",
     basics: "基礎信息",
     admins: "管理員",
     settings: "設置",
@@ -84,11 +92,16 @@ export default {
   actions: {
     action: "操作",
     add: "添加",
+    new: "新建",
     edit: "編輯",
     del: "刪除",
+    clone: "克隆",
     save: "保存",
     update: "更新",
     submit: "提交",
+    set: "設置",
+    generate: "生成",
+    disable: "禁用",
     close: "關閉",
     restartApp: "重啟面板",
   },
@@ -110,6 +123,10 @@ export default {
     lastLogin: "上次登入",
     date: "日期",
     time: "時間",
+    changes: "更改",
+    actor: "執行者",
+    key: "鍵",
+    action: "操作",
   },
   setting: {
     interface: "界面",
@@ -129,6 +146,14 @@ export default {
     path: "默認路徑",
     update: "自動更新時間",
     subUri: "訂閱 URL",
+    jsonSub: "JSON 訂閱",
+    toDirect: "路由到直連",
+    toBlock: "路由到阻止",
+    timestamp: "時間戳",
+    globalDns: "全局 DNS",
+    directDns: "直連 DNS",
+    toDirectDns: "路由到直連 DNS",
+    jsonSubOptions: "其他選項",
   },
   client: {
     name: "名稱",
@@ -146,7 +171,6 @@ export default {
     direct: {
       overrideAddr: "覆蓋地址",
       overridePort: "覆蓋端口",
-      proxyProtocol: "代理協議",
     },
     hy: {
       obfs: "混淆密碼",
@@ -215,6 +239,11 @@ export default {
     sniffing: "嗅探",
     clients: "啟用客戶端",
     ssMethod: "方法",
+    sSide: "服務器端",
+    cSide: "客戶端",
+    multiDomain: "多域名",
+    remark: "備註",
+    mdOption: "多域名選項",
   },
   listen: {
     sniffing: "嗅探",
@@ -304,6 +333,7 @@ export default {
       final: "最終",
       server: "服務器",
       firstServer: "首選服務器",
+      addrResolver: "地址解析器",
     },
     routing: {
       title: "路由",
@@ -328,9 +358,26 @@ export default {
     minVer: "最低版本",
     maxVer: "最高版本",
     cs: "加密套件",
+    privKey: "私鑰",
     pubKey: "公鑰",
     disableSni: "停用 SNI",
     insecure: "允許不安全連線",
+    acme: {
+      options: "ACME 選項",
+      dataDir: "數據目錄",
+      defaultDomain: "默認域名",
+      disableChallenges: "禁用挑戰",
+      httpChallenge: "禁用 HTTP 挑戰",
+      tlsChallenge: "禁用 TLS 挑戰",
+      altPorts: "替代端口",
+      altHport: "替代 HTTP 端口",
+      altTport: "替代 TLS 端口",
+      caProvider: "CA 提供商",
+      customCa: "自定義 CA 提供商",
+      extAcc: "外部賬戶",
+      dns01: "DNS01 挑戰",
+      dns01Provider: "DNS01 挑戰提供商"
+    },
   },
   stats: {
     upload: "上傳",

frontend/src/main.ts

@@ -23,6 +23,22 @@ import { registerPlugins } from '@/plugins'
 import { i18n } from '@/locales'
 import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker'
 
+// Notivue
+import { createNotivue } from 'notivue'
+import 'notivue/notification.css'
+import 'notivue/animations.css'
+const notivue = createNotivue({
+  position: 'bottom-center',
+  limit: 4,
+  enqueue: false,
+  avoidDuplicates: true,
+  notifications: {
+    global: {
+      duration: 3000
+    }
+  },
+})
+
 const loading = ref(false)
 
 const app = createApp(App)
@@ -34,5 +50,6 @@ app
   .use(router)
   .use(store)
   .use(i18n)
+  .use(notivue)
   .component('DatePicker', Vue3PersianDatetimePicker)
   .mount('#app')

frontend/src/plugins/api.ts

@@ -1,12 +1,29 @@
-import axios from 'axios'
+import axios from 'axios';
 
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
 
 axios.defaults.baseURL = "./"
+const pendingRequests = new Map()
 
 axios.interceptors.request.use(
     (config) => {
+        // Generate a unique key for the request
+        const requestKey = `${config.method}:${config.url}`
+        
+        // Check if there is already a pending request with the same key
+        if (pendingRequests.has(requestKey)) {
+            const cancelSource = pendingRequests.get(requestKey)
+            cancelSource.cancel('Duplicate request cancelled')
+        }
+        
+        // Create a new cancel token for the request
+        const cancelSource = axios.CancelToken.source()
+        config.cancelToken = cancelSource.token
+        
+        // Store the cancel token in the pending requests map
+        pendingRequests.set(requestKey, cancelSource)
+        
         if (config.data instanceof FormData) {
             config.headers['Content-Type'] = 'multipart/form-data'
         }
@@ -15,6 +32,26 @@ axios.interceptors.request.use(
     (error) => Promise.reject(error),
 )
 
+axios.interceptors.response.use(
+    (response) => {
+        // Remove the request from the pending requests map
+        const requestKey = `${response.config.method}:${response.config.url}`
+        pendingRequests.delete(requestKey)
+        return response
+    },
+    (error) => {
+        if (axios.isCancel(error)) {
+            // Handle duplicate request cancellation here if needed
+            console.warn(error.message)
+        } else {
+            // Remove the request from the pending requests map on error
+            const requestKey = `${error.config.method}:${error.config.url}`
+            pendingRequests.delete(requestKey)
+        }
+        return Promise.reject(error)
+    }
+);
+
 const api = axios.create()
 
-export default api
+export default api

frontend/src/plugins/httputil.ts

@@ -1,7 +1,7 @@
 import api from './api'
 import { i18n } from '@/locales'
 import router from '@/router'
-import Message from "@/store/modules/message"
+import { push } from 'notivue'
 
 export interface Msg {
   success: boolean
@@ -10,18 +10,27 @@ export interface Msg {
 }
 
 function _handleMsg(msg: any): void {
-  const sb = Message()
   if (!isMsg(msg)) {
     return
   }
   if(msg.msg){
     if (!msg.success && msg.msg == "Invalid login") {
-      sb.showMessage(i18n.global.t('invalidLogin'),'error', 5000)
+      push.error({
+        title: i18n.global.t('invalidLogin'),
+      })
       logout()
       return
     }
-    const message = msg.success ? i18n.global.t('success') + ": " + i18n.global.t('actions.' + msg.msg) : i18n.global.t('failed') + ": " + msg.msg
-    sb.showMessage(message, msg.success ? 'success' : 'error', 5000)
+    if (msg.success) {
+      push.success({
+        message: i18n.global.t('success') + ": " + i18n.global.t('actions.' + msg.msg),
+      })
+    } else {
+      push.error({
+        title: i18n.global.t('failed'),
+        message: msg.msg
+      })
+    }
   }
 }
 

frontend/src/plugins/inData.ts

@@ -0,0 +1,15 @@
+export interface Addr {
+  server: string
+  server_port: number
+  tls?: boolean
+  insecure?: boolean
+  server_name?: string
+  remark?: string
+}
+
+export interface InData {
+  id: number
+  tag: string
+  addrs: Addr[]
+  outJson: any
+}

frontend/src/plugins/link.ts

@@ -1,5 +1,6 @@
 import { Hysteria, Hysteria2, InTypes, Inbound, Naive, Shadowsocks, TUIC, Trojan, VLESS, VMess } from "@/types/inbounds"
-import { HTTP, WebSocket, QUIC, gRPC, HTTPUpgrade, Transport, TrspTypes } from "@/types/transport";
+import { HTTP, WebSocket, gRPC, HTTPUpgrade, Transport, TrspTypes } from "@/types/transport"
+import RandomUtil from "./randomUtil"
 
 export interface Link {
   type: "local" | "external" | "sub"
@@ -13,50 +14,63 @@ function utf8ToBase64(utf8String: string): string {
 }
 
 export namespace LinkUtil {
-  export function linkGenerator(user: string, inbound: Inbound): string {
-    const addr = location.hostname
+  export function linkGenerator(user: string, inbound: Inbound, tlsClient: any = {}, addrs: any[] = []): string[] {
     switch(inbound.type){
       case InTypes.Shadowsocks:
-        return shadowsocksLink(user,<Shadowsocks>inbound,addr)
+        return shadowsocksLink(user,<Shadowsocks>inbound, addrs)
       case InTypes.Naive:
-        return naiveLink(user,<Naive>inbound,addr)
+        return naiveLink(user,<Naive>inbound, addrs, tlsClient)
       case InTypes.Hysteria:
-        return hysteriaLink(user,<Hysteria>inbound,addr)
+        return hysteriaLink(user,<Hysteria>inbound, addrs, tlsClient)
       case InTypes.Hysteria2:
-        return hysteria2Link(user,<Hysteria2>inbound,addr)
+        return hysteria2Link(user,<Hysteria2>inbound, addrs, tlsClient)
       case InTypes.TUIC:
-        return tuicLink(user,<TUIC>inbound,addr)
+        return tuicLink(user,<TUIC>inbound, addrs, tlsClient)
       case InTypes.VLESS:
-        return vlessLink(user,<VLESS>inbound,addr)
+        return vlessLink(user,<VLESS>inbound, addrs, tlsClient)
       case InTypes.Trojan:
-        return trojanLink(user,<Trojan>inbound,addr)
+        return trojanLink(user,<Trojan>inbound, addrs, tlsClient)
       case InTypes.VMess:
-        return vmessLink(user,<VMess>inbound,addr)
+        return vmessLink(user,<VMess>inbound, addrs, tlsClient)
     }
-    return ''
+    return []
   }
 
-  function shadowsocksLink(user: string, inbound: Shadowsocks, addr: string): string {
+  function shadowsocksLink(user: string, inbound: Shadowsocks, addrs: any[]): string[] {
     const userPass = inbound.users?.find(i => i.name == user)?.password
     const password = [userPass]
     if (inbound.method.startsWith('2022')) password.push(inbound.password)
-
     const params = {
       tfo: inbound.tcp_fast_open? 1 : null,
       network: inbound.network?? null
-    } 
-
-    const uri = new URL(`ss://${utf8ToBase64(inbound.method + ':' + password.join(':'))}@${addr}:${inbound.listen_port}`)
-    for (const [key, value] of Object.entries(params)){
-      if (value) {
-        uri.searchParams.set(key, value.toString())
-      }
     }
-    uri.hash = encodeURIComponent(inbound.tag)
-    return uri.toString()
+
+    let links = <string[]>[]
+    if (addrs.length == 0) {
+      const uri = new URL(`ss://${utf8ToBase64(inbound.method + ':' + password.join(':'))}@${location.hostname}:${inbound.listen_port}`)
+      for (const [key, value] of Object.entries(params)){
+        if (value) {
+          uri.searchParams.set(key, value.toString())
+        }
+      }
+      uri.hash = encodeURIComponent(inbound.tag)
+      links.push(uri.toString())
+    } else {
+      addrs.forEach(a => {
+        const uri = new URL(`ss://${utf8ToBase64(inbound.method + ':' + password.join(':'))}@${a.server}:${a.server_port}`)
+        for (const [key, value] of Object.entries(params)){
+          if (value) {
+            uri.searchParams.set(key, value.toString())
+          }
+        }
+        uri.hash = encodeURIComponent(a.remark ? inbound.tag + a.remark : inbound.tag)
+        links.push(uri.toString())
+      })
+    }
+    return links
   }
 
-  function hysteriaLink(user: string, inbound: Hysteria, addr: string): string {
+  function hysteriaLink(user: string, inbound: Hysteria, addrs: any[], tlsClient: any): string[] {
     const auth = inbound.users.find(i => i.name == user)?.auth_str
     const params = {
       upmbps: inbound.up_mbps?? null,
@@ -65,19 +79,46 @@ export namespace LinkUtil {
       peer: inbound.tls.server_name?? null,
       alpn: inbound.tls.alpn?.join(',')?? null,
       obfsParam: inbound.obfs?? null,
-      fastopen: inbound.tcp_fast_open? 1 : 0
+      fastopen: inbound.tcp_fast_open? 1 : 0,
+      insecure: tlsClient?.insecure ? 1 : null
     }
-    const uri = new URL(`hysteria://${addr}:${inbound.listen_port}`)
-    for (const [key, value] of Object.entries(params)){
-      if (value) {
-        uri.searchParams.set(key, value.toString())
+
+    let links = <string[]>[]
+    if (addrs.length == 0) {
+      const uri = new URL(`hysteria://${location.hostname}:${inbound.listen_port}`)
+      for (const [key, value] of Object.entries(params)){
+        if (value) {
+          uri.searchParams.set(key, value.toString())
+        }
       }
+      uri.hash = encodeURIComponent(inbound.tag)
+      links.push(uri.toString())
+    } else {
+      addrs.forEach(a => {
+        const uri = new URL(`hysteria://${a.server}:${a.server_port}`)
+        for (const [key, value] of Object.entries(params)){
+          if (value) {
+            uri.searchParams.set(key, value.toString())
+          }
+        }
+        if (a.server_name?.length>0) {
+          uri.searchParams.set('peer', a.server_name)
+        } else {
+          inbound.tls.server_name ? uri.searchParams.set('peer', inbound.tls.server_name) : uri.searchParams.delete('peer')
+        }
+        if (a.insecure) {
+          uri.searchParams.set('insecure', '1')
+        } else {
+          tlsClient.insecure ? uri.searchParams.set('insecure', '1') : uri.searchParams.delete('insecure')
+        }
+        uri.hash = encodeURIComponent(a.remark ? inbound.tag + a.remark : inbound.tag)
+        links.push(uri.toString())
+      })
     }
-    uri.hash = encodeURIComponent(inbound.tag)
-    return uri.toString()
+    return links
   }
 
-  function hysteria2Link(user: string, inbound: Hysteria2, addr: string): string {
+  function hysteria2Link(user: string, inbound: Hysteria2, addrs: any[], tlsClient: any): string[] {
     const password = inbound.users.find(i => i.name == user)?.password
     const params = {
       upmbps: inbound.up_mbps?? null,
@@ -86,51 +127,130 @@ export namespace LinkUtil {
       alpn: inbound.tls.alpn?.join(',')?? null,
       obfs: inbound.obfs?.type?? null,
       'obfs-password': inbound.obfs?.password?? null,
-      fastopen: inbound.tcp_fast_open? 1 : 0
+      fastopen: inbound.tcp_fast_open? 1 : 0,
+      insecure: tlsClient?.insecure ? 1 : null
     }
-    const uri = new URL(`hysteria2://${password}@${addr}:${inbound.listen_port}`)
-    for (const [key, value] of Object.entries(params)){
-      if (value) {
-        uri.searchParams.set(key, value.toString())
+
+    let links = <string[]>[]
+    if (addrs.length == 0) {
+      const uri = new URL(`hysteria2://${password}@${location.hostname}:${inbound.listen_port}`)
+      for (const [key, value] of Object.entries(params)){
+        if (value) {
+          uri.searchParams.set(key, value.toString())
+        }
       }
+      uri.hash = encodeURIComponent(inbound.tag)
+      links.push(uri.toString())
+    } else {
+      addrs.forEach(a => {
+        const uri = new URL(`hysteria2://${password}@${a.server}:${a.server_port}`)
+        for (const [key, value] of Object.entries(params)){
+          if (value) {
+            uri.searchParams.set(key, value.toString())
+          }
+        }
+        if (a.server_name?.length>0) {
+          uri.searchParams.set('sni', a.server_name)
+        } else {
+          inbound.tls.server_name ? uri.searchParams.set('sni', inbound.tls.server_name) : uri.searchParams.delete('sni')
+        }
+        if (a.insecure) {
+          uri.searchParams.set('insecure', '1')
+        } else {
+          tlsClient.insecure ? uri.searchParams.set('insecure', '1') : uri.searchParams.delete('insecure')
+        }
+        uri.hash = encodeURIComponent(a.remark ? inbound.tag + a.remark : inbound.tag)
+        links.push(uri.toString())
+      })
     }
-    uri.hash = encodeURIComponent(inbound.tag)
-    return uri.toString()
+    return links
   }
 
-  function naiveLink(user: string, inbound: Naive, addr: string): string {
+  function naiveLink(user: string, inbound: Naive, addrs: any[], tlsClient: any): string[] {
     const password = inbound.users.find(i => i.username == user)?.password
-    const params = {
-      padding: 1,
-      peer: inbound.tls.server_name?? null,
-      alpn: inbound.tls.alpn?.join(',')?? null,
-      tfo: inbound.tcp_fast_open? 1 : 0
-    }
-    const uri = `http2://${utf8ToBase64(user + ":" + password + "@" + addr + ":" + inbound.listen_port)}`
-    const paramsArray = []
-    for (const [key, value] of Object.entries(params)){
-      if (value) {
-        paramsArray.push(`${key}=${encodeURIComponent(value.toString())}`)
+
+    let links = <string[]>[]
+    if (addrs.length == 0) {
+      const params = {
+        padding: 1,
+        peer: inbound.tls.server_name?? null,
+        alpn: inbound.tls.alpn?.join(',')?? null,
+        tfo: inbound.tcp_fast_open? 1 : 0,
+        allowInsecure: tlsClient?.insecure ? 1 : null
       }
+      const uri = `http2://${utf8ToBase64(user + ":" + password + "@" + location.hostname + ":" + inbound.listen_port)}`
+      const paramsArray = []
+      for (const [key, value] of Object.entries(params)){
+        if (value) {
+          paramsArray.push(`${key}=${encodeURIComponent(value.toString())}`)
+        }
+      }
+      links.push(uri.toString() + "?" + paramsArray.join('&') + "#" + inbound.tag)
+    } else {
+      addrs.forEach(a => {
+        const params = {
+          padding: 1,
+          peer: a.server_name?.length>0 ? a.server_name : inbound.tls.server_name?? null,
+          alpn: inbound.tls.alpn?.join(',')?? null,
+          tfo: inbound.tcp_fast_open? 1 : 0,
+          allowInsecure: a.insecure ? 1 : tlsClient?.insecure ? 1 : null
+        }
+        const uri = `http2://${utf8ToBase64(user + ":" + password + "@" + a.server + ":" + a.server_port)}`
+        const paramsArray = []
+        for (const [key, value] of Object.entries(params)){
+          if (value) {
+            paramsArray.push(`${key}=${encodeURIComponent(value.toString())}`)
+          }
+        }
+        links.push(uri.toString() + "?" + paramsArray.join('&') + "#" + encodeURIComponent(a.remark ? inbound.tag + a.remark : inbound.tag))
+      })
     }
-    return uri.toString() + "?" + paramsArray.join('&') + "#" + inbound.tag
+    return links
   }
 
-  function tuicLink(user: string, inbound: TUIC, addr: string): string {
+  function tuicLink(user: string, inbound: TUIC, addrs: any[], tlsClient: any): string[] {
     const u = inbound.users.find(i => i.name == user)
     const params = {
       sni: inbound.tls.server_name?? null,
       alpn: inbound.tls.alpn?.join(',')?? null,
-      congestion_control: inbound.congestion_control?? null
+      congestion_control: inbound.congestion_control?? null,
+      allowInsecure: tlsClient?.insecure ? 1 : null,
+      disable_sni: tlsClient?.disable_sni ? 1 : null
     }
-    const uri = new URL(`tuic://${u?.uuid}:${u?.password}@${addr}:${inbound.listen_port}`)
-    for (const [key, value] of Object.entries(params)){
-      if (value) {
-        uri.searchParams.set(key, value.toString())
+
+    let links = <string[]>[]
+    if (addrs.length == 0) {
+      const uri = new URL(`tuic://${u?.uuid}:${u?.password}@${location.hostname}:${inbound.listen_port}`)
+      for (const [key, value] of Object.entries(params)){
+        if (value) {
+          uri.searchParams.set(key, value.toString())
+        }
       }
+      uri.hash = encodeURIComponent(inbound.tag)
+      links.push(uri.toString())
+    } else {
+      addrs.forEach(a => {
+        const uri = new URL(`tuic://${u?.uuid}:${u?.password}@${a.server}:${a.server_port}`)
+        for (const [key, value] of Object.entries(params)){
+          if (value) {
+            uri.searchParams.set(key, value.toString())
+          }
+        }
+        if (a.server_name?.length>0) {
+          uri.searchParams.set('sni', a.server_name)
+        } else {
+          inbound.tls.server_name ? uri.searchParams.set('sni', inbound.tls.server_name) : uri.searchParams.delete('sni')
+        }
+        if (a.insecure) {
+          uri.searchParams.set('allowInsecure', '1')
+        } else {
+          tlsClient.insecure ? uri.searchParams.set('allowInsecure', '1') : uri.searchParams.delete('allowInsecure')
+        }
+        uri.hash = encodeURIComponent(a.remark ? inbound.tag + a.remark : inbound.tag)
+        links.push(uri.toString())
+      })
     }
-    uri.hash = encodeURIComponent(inbound.tag)
-    return uri.toString()
+    return links
   }
 
   function getTransportParams(t:Transport): any {
@@ -166,7 +286,7 @@ export namespace LinkUtil {
     return params
   }
 
-  function vlessLink(user: string, inbound: VLESS, addr: string): string {
+  function vlessLink(user: string, inbound: VLESS, addrs: any[], tlsClient: any): string[] {
     const u = inbound.users.find(i => i.name == user)
     const transport = <Transport>inbound.transport
 
@@ -174,22 +294,61 @@ export namespace LinkUtil {
 
     const params = {
       type: transport?.type?? 'tcp',
-      security: inbound.tls?.enabled? 'tls' : null,
+      security: inbound.tls?.enabled? inbound.tls?.reality?.enabled ? 'reality' : 'tls' : null,
       alpn: inbound.tls?.alpn?.join(',')?? null,
       sni: inbound.tls?.server_name?? null,
-      flow: inbound.tls?.enabled ? u?.flow?? null : null
+      flow: inbound.tls?.enabled ? u?.flow?? null : null,
+      allowInsecure: tlsClient?.insecure ? 1 : null,
+      fp: tlsClient?.utls?.enabled ? tlsClient.utls.fingerprint : null,
+      pbk: tlsClient?.reality?.public_key?? null,
+      sid: inbound.tls?.reality?.enabled ? (inbound.tls?.reality?.short_id?.length>0 ?  inbound.tls.reality.short_id[RandomUtil.randomInt(inbound.tls.reality.short_id.length)] : null) : null
     }
-    const uri = new URL(`vless://${u?.uuid}@${addr}:${inbound.listen_port}`)
-    for (const [key, value] of Object.entries({...params, ...tParams})){
-      if (value) {
-        uri.searchParams.set(key, value.toString())
+    let links = <string[]>[]
+    if (addrs.length == 0) {
+      const uri = new URL(`vless://${u?.uuid}@${location.hostname}:${inbound.listen_port}`)
+      for (const [key, value] of Object.entries({...params, ...tParams})){
+        if (value) {
+          uri.searchParams.set(key, value.toString())
+        }
       }
+      uri.hash = encodeURIComponent(inbound.tag)
+      links.push(uri.toString())
+    } else {
+      addrs.forEach(a => {
+        const uri = new URL(`vless://${u?.uuid}@${a.server}:${a.server_port}`)
+        for (const [key, value] of Object.entries({...params, ...tParams})){
+          if (value) {
+            uri.searchParams.set(key, value.toString())
+          }
+        }
+        if (a.tls != undefined){
+          if (a.tls) {
+            uri.searchParams.set('security','tls')
+          } else {
+            uri.searchParams.delete('security')
+            uri.searchParams.delete('sni')
+            uri.searchParams.delete('alpn')
+            uri.searchParams.delete('allowInsecure')
+          }
+        }
+        if (a.server_name?.length>0) {
+          uri.searchParams.set('sni', a.server_name)
+        } else {
+          inbound.tls?.server_name ? uri.searchParams.set('sni', inbound.tls.server_name) : uri.searchParams.delete('sni')
+        }
+        if (a.insecure) {
+          uri.searchParams.set('allowInsecure', '1')
+        } else {
+          tlsClient.insecure ? uri.searchParams.set('allowInsecure', '1') : uri.searchParams.delete('allowInsecure')
+        }
+        uri.hash = encodeURIComponent(a.remark ? inbound.tag + a.remark : inbound.tag)
+        links.push(uri.toString())
+      })
     }
-    uri.hash = encodeURIComponent(inbound.tag)
-    return uri.toString()
+    return links
   }
 
-  function trojanLink(user: string, inbound: Trojan, addr: string): string {
+  function trojanLink(user: string, inbound: Trojan, addrs: any[], tlsClient: any): string[] {
     const u = inbound.users.find(i => i.name == user)
     const transport = <Transport>inbound.transport
 
@@ -197,21 +356,61 @@ export namespace LinkUtil {
 
     const params = {
       type: transport?.type?? 'tcp',
-      security: inbound.tls?.enabled? 'tls' : null,
+      security: inbound.tls?.enabled? inbound.tls?.reality?.enabled ? 'reality' : 'tls' : null,
       alpn: inbound.tls?.alpn?.join(',')?? null,
       sni: inbound.tls?.server_name?? null,
+      allowInsecure: tlsClient?.insecure ? 1 : null,
+      fp: tlsClient?.utls?.enabled ? tlsClient.utls.fingerprint : null,
+      pbk: tlsClient?.reality?.public_key?? null,
+      sid: inbound.tls?.reality?.enabled ? (inbound.tls?.reality?.short_id?.length>0 ?  inbound.tls.reality.short_id[RandomUtil.randomInt(inbound.tls.reality.short_id.length)] : null) : null
     }
-    const uri = new URL(`trojan://${u?.password}@${addr}:${inbound.listen_port}`)
-    for (const [key, value] of Object.entries({...params, ...tParams})){
-      if (value) {
-        uri.searchParams.set(key, value.toString())
+
+    let links = <string[]>[]
+    if (addrs.length == 0) {
+      const uri = new URL(`trojan://${u?.password}@${location.hostname}:${inbound.listen_port}`)
+      for (const [key, value] of Object.entries({...params, ...tParams})){
+        if (value) {
+          uri.searchParams.set(key, value.toString())
+        }
       }
+      uri.hash = encodeURIComponent(inbound.tag)
+      links.push(uri.toString())
+    } else {
+      addrs.forEach(a => {
+        const uri = new URL(`trojan://${u?.password}@${a.server}:${a.server_port}`)
+        for (const [key, value] of Object.entries({...params, ...tParams})){
+          if (value) {
+            uri.searchParams.set(key, value.toString())
+          }
+        }
+        if (a.tls != undefined){
+          if (a.tls) {
+            uri.searchParams.set('security','tls')
+          } else {
+            uri.searchParams.delete('security')
+            uri.searchParams.delete('sni')
+            uri.searchParams.delete('alpn')
+            uri.searchParams.delete('allowInsecure')
+          }
+        }
+        if (a.server_name?.length>0) {
+          uri.searchParams.set('sni', a.server_name)
+        } else {
+          inbound.tls?.server_name ? uri.searchParams.set('sni', inbound.tls.server_name) : uri.searchParams.delete('sni')
+        }
+        if (a.insecure) {
+          uri.searchParams.set('allowInsecure', '1')
+        } else {
+          tlsClient.insecure ? uri.searchParams.set('allowInsecure', '1') : uri.searchParams.delete('allowInsecure')
+        }
+        uri.hash = encodeURIComponent(a.remark ? inbound.tag + a.remark : inbound.tag)
+        links.push(uri.toString())
+      })
     }
-    uri.hash = encodeURIComponent(inbound.tag)
-    return uri.toString()
+    return links
   }
 
-  function vmessLink(user: string, inbound: VMess, addr: string): string {
+  function vmessLink(user: string, inbound: VMess, addrs: any[], tlsClient: any): string[] {
     const u = inbound.users.find(i => i.name == user)
     const transport = <Transport>inbound.transport
 
@@ -220,17 +419,46 @@ export namespace LinkUtil {
 
     const params = {
       v: 2,
-      add: addr,
+      add: location.hostname,
       aid: u?.alterId,
-      host:	tParams.host,
+      host:	tParams.host?? undefined,
       id: u?.uuid,
-      net:	transport?.type?? 'tcp',
-      path:	tParams.path,
+      net: transport?.type == undefined || transport?.type == 'http' ? 'tcp' : transport.type,
+      type: transport?.type == 'http' ? 'http' : undefined,
+      path:	tParams.path?? undefined,
       port:	inbound.listen_port,
       ps:	inbound.tag,
-      sni: inbound.tls.server_name?? '',
-      tls: Object.keys(inbound.tls).length>0? 'tls' : 'none'
+      sni: inbound.tls.server_name?? undefined,
+      tls: Object.keys(inbound.tls).length>0? 'tls' : 'none',
+      allowInsecure: tlsClient?.insecure ? 1 : undefined
     }
-    return 'vmess://' + utf8ToBase64(JSON.stringify(params))
+    let links = <string[]>[]
+    if (addrs.length == 0) {
+      links.push('vmess://' + utf8ToBase64(JSON.stringify(params, null, 2)))
+    } else {
+      addrs.forEach(a => {
+        let newParams = {...params}
+        newParams.add = a.server
+        newParams.port = a.server_port
+        if (a.tls != undefined){
+          if (a.tls) {
+            newParams.tls = 'tls'
+          } else {
+            newParams.tls = 'none'
+            delete newParams.sni
+            delete newParams.allowInsecure
+          }
+        }
+        if (a.server_name?.length>0) {
+          newParams.sni = a.server_name
+        }
+        if (a.insecure) {
+          newParams.allowInsecure = 1
+        }
+        newParams.ps = encodeURIComponent(a.remark ? inbound.tag + a.remark : inbound.tag)
+        links.push('vmess://' + utf8ToBase64(JSON.stringify(newParams, null, 2)))
+      })
+    }
+    return links
   }
 }

frontend/src/plugins/outJson.ts

@@ -0,0 +1,104 @@
+import { Hysteria, Hysteria2, Inbound, InTypes, Shadowsocks, Trojan, TUIC, VLESS, VMess, ShadowTLS } from "@/types/inbounds"
+import { iTls } from "@/types/inTls"
+import { oTls } from "@/types/outTls"
+
+export function fillData(out: any, inbound: Inbound, tlsClient: any) {
+  if (Object.hasOwn(inbound, 'tls')) {
+    const inb = <any>inbound
+    addTls(out,inb.tls,tlsClient)
+  } else {
+    delete out.tls
+  }
+  out.type = inbound.type
+  out.tag = inbound.tag
+  out.server = location.hostname
+  out.server_port = inbound.listen_port
+  switch(inbound.type){
+    case InTypes.HTTP || InTypes.SOCKS:
+      return
+    case InTypes.Shadowsocks:
+      shadowsocksOut(out, <Shadowsocks>inbound)
+      return
+    case InTypes.ShadowTLS:
+      shadowTlsOut(out, <ShadowTLS>inbound)
+      return
+    case InTypes.Hysteria:
+      hysteriaOut(out, <Hysteria>inbound)
+      return
+    case InTypes.Hysteria2:
+      hysteria2Out(out, <Hysteria2>inbound)
+      return
+    case InTypes.TUIC:
+      tuicOut(out, <TUIC>inbound)
+      return
+    case InTypes.VLESS:
+      vlessOut(out, <VLESS>inbound)
+      return
+    case InTypes.Trojan:
+      trojanOut(out, <Trojan>inbound)
+      return
+    case InTypes.VMess:
+      vmessOut(out, <VMess>inbound)
+      return
+  }
+  Object.keys(out).forEach(key => delete out[key])
+}
+
+function addTls(out: any, tls: iTls, tlsClient: oTls){
+  out.tls = tlsClient
+  if(tls.enabled) out.tls.enabled = tls.enabled
+  if(tls.server_name) out.tls.server_name = tls.server_name
+  if(tls.alpn) out.tls.alpn = tls.alpn
+  if(tls.min_version) out.tls.min_version = tls.min_version
+  if(tls.max_version) out.tls.max_version = tls.max_version
+  if(tls.cipher_suites) out.tls.cipher_suites = tls.cipher_suites
+}
+
+function shadowsocksOut(out: any, inbound: Shadowsocks) {
+  out.method = inbound.method
+  out.multiplex = inbound.multiplex
+}
+
+function shadowTlsOut(out: any, inbound: ShadowTLS) {
+  if (inbound.version == 3) {
+    out.version = 3
+  } else {
+    Object.keys(out).forEach(key => delete out[key])
+  }
+  out.tls = { enabled: true }
+}
+
+function hysteriaOut(out: any, inbound: Hysteria) {
+  out.up_mbps = inbound.down_mbps
+  out.down_mbps = inbound.up_mbps
+  out.obfs = inbound.obfs
+  out.recv_window_conn = inbound.recv_window_conn
+  out.disable_mtu_discovery = inbound.disable_mtu_discovery
+}
+
+function hysteria2Out(out: any, inbound: Hysteria2) {
+  out.up_mbps = inbound.down_mbps
+  out.down_mbps = inbound.up_mbps
+  out.obfs = inbound.obfs
+}
+
+function tuicOut(out: any, inbound: TUIC) {
+  out.congestion_control = inbound.congestion_control?? "cubic"
+  out.zero_rtt_handshake = inbound.zero_rtt_handshake
+  out.heartbeat = inbound.heartbeat
+}
+
+function vlessOut(out: any, inbound: VLESS) {
+  out.multiplex = inbound.multiplex
+  out.transport = inbound.transport
+}
+
+function trojanOut(out: any, inbound: Trojan) {
+  out.multiplex = inbound.multiplex
+  out.transport = inbound.transport
+}
+
+function vmessOut(out: any, inbound: VMess) {
+  out.multiplex = inbound.multiplex
+  out.transport = inbound.transport
+}

frontend/src/plugins/randomUtil.ts

@@ -35,8 +35,8 @@ const RandomUtil = {
     return btoa(String.fromCharCode(...array))
   },
   randomShortId(): string[] {
-    let shortIds = ['','','','']
-    for (var ii = 0; ii < 4; ii++) {
+    let shortIds = new Array(24).fill('')
+    for (var ii = 0; ii < 24; ii++) {
         for (var jj = 0; jj < this.randomInt(8); jj++){
             let randomNum = this.randomInt(256)
             shortIds[ii] += ('0' + randomNum.toString(16)).slice(-2)

frontend/src/plugins/utils.ts

@@ -37,11 +37,11 @@ export const FindDiff = {
 
     return differences
   },
-  Clients(value1: any[], value2: any[]): any {
+  ArrObj(value1: any[], value2: any[], key: string): any {
     const differences: any[] = []
     value1.forEach((v1,index) => {
-      if(index >= value2.length) differences.push({key: "clients", action: "new", obj: v1})
-      else if(!this.deepCompare(v1,value2[index])) differences.push({key: "clients", action: "edit", obj: v1})
+      if(index >= value2.length) differences.push({key: key, action: "new", obj: v1})
+      else if(!this.deepCompare(v1,value2[index])) differences.push({key: key, action: "edit", obj: v1})
     })
     return differences
   },
@@ -76,8 +76,8 @@ export const FindDiff = {
   
     // Check if both objects are plain objects
     if (typeof obj1 === 'object' && typeof obj2 === 'object' && obj1 !== null && obj2 !== null) {
-      const keys1 = Object.keys(obj1)
-      const keys2 = Object.keys(obj2)
+      const keys1 = Object.keys(obj1).filter(key => obj1[key] !== undefined)
+      const keys2 = Object.keys(obj2).filter(key => obj2[key] !== undefined)
   
       if (keys1.length !== keys2.length) {
         return false

frontend/src/plugins/vuetify.ts

@@ -9,7 +9,7 @@ import '@mdi/font/css/materialdesignicons.css'
 import 'vuetify/styles'
 
 import colors from 'vuetify/util/colors'
-import { fa, en } from 'vuetify/locale'
+import { fa, en, vi, zhHans, zhHant } from 'vuetify/locale'
 
 // Composables
 import { createVuetify } from 'vuetify'
@@ -53,6 +53,6 @@ export default createVuetify({
   locale: {
     locale: localStorage.getItem("locale") ?? 'en',
     fallback: 'en',
-    messages: { en, fa },
+    messages: { en, fa, vi, zhHans, zhHant },
   },
 })

frontend/src/router/index.ts

@@ -39,6 +39,11 @@ const routes = [
         name: 'pages.rules',
         component: () => import('@/views/Rules.vue'),
       },
+      {
+        path: '/tls',
+        name: 'pages.tls',
+        component: () => import('@/views/Tls.vue'),
+      },
       {
         path: '/basics',
         name: 'pages.basics',

frontend/src/store/modules/data.ts

@@ -1,7 +1,8 @@
 import { FindDiff } from '@/plugins/utils'
 import HttpUtils from '@/plugins/httputil'
 import { defineStore } from 'pinia'
-import { onMounted } from 'vue'
+import { push } from 'notivue'
+import { i18n } from '@/locales'
 
 const Data = defineStore('Data', {
   state: () => ({ 
@@ -9,9 +10,11 @@ const Data = defineStore('Data', {
     reloadItems: localStorage.getItem("reloadItems")?.split(',')?? <string[]>[],
     subURI: "",
     onlines: {inbound: <string[]>[], outbound: <string[]>[], user: <string[]>[]},
-    oldData: <{config: any, clients: any[]}>{},
-    config: {},
+    oldData: <{config: any, clients: any[], tlsConfigs: any[], inData: any[]}>{},
+    config: <any>{},
     clients: [],
+    tlsConfigs: [],
+    inData: [],
   }),
   actions: {
     async loadData() {
@@ -20,37 +23,71 @@ const Data = defineStore('Data', {
         this.lastLoad = Math.floor((new Date()).getTime()/1000)
 
         // Set new data
-        const data = JSON.parse(msg.obj)
-        if (data.config) this.config = data.config
-        if (data.clients) this.clients = data.clients
-        if (data.subURI) this.subURI = data.subURI
-        this.onlines = data.onlines
-
-        // To avoid ref copy
-        if (data.config) this.oldData.config = { ...JSON.parse(msg.obj).config }
-        if (data.clients) this.oldData.clients = [ ...JSON.parse(msg.obj).clients ]
+        if (msg.obj.config) this.oldData.config = msg.obj.config
+        if (msg.obj.clients) this.oldData.clients = msg.obj.clients
+        if (msg.obj.tls) this.oldData.tlsConfigs = msg.obj.tls
+        if (msg.obj.inData) this.oldData.inData = msg.obj.inData
+        this.onlines = msg.obj.onlines
+        if (msg.obj.lastLog) {
+          push.error({
+            title: i18n.global.t('error.core'),
+            duration: 5000,
+            message: msg.obj.lastLog
+          })
+        }
+        
+        if (msg.obj.config) {
+          // To avoid ref copy
+          const data = JSON.parse(JSON.stringify(msg.obj))
+          if (data.subURI) this.subURI = data.subURI
+          if (data.config) this.config = data.config
+          if (data.clients) this.clients = data.clients
+          if (data.tls) this.tlsConfigs = data.tls
+          if (data.inData) this.inData = data.inData
+        }
       }
     },
     async pushData() {
       const diff = {
-        config: JSON.stringify(FindDiff.Config(this.config,this.oldData.config)),
-        clients: JSON.stringify(FindDiff.Clients(this.clients,this.oldData.clients)),
+        config: JSON.stringify(FindDiff.Config(this.config,this.oldData.config), null, 2),
+        clients: JSON.stringify(FindDiff.ArrObj(this.clients,this.oldData.clients, "clients"), null, 2),
+        tls: JSON.stringify(FindDiff.ArrObj(this.tlsConfigs,this.oldData.tlsConfigs, "tls"), null, 2),
+        inData: JSON.stringify(FindDiff.ArrObj(this.inData,this.oldData.inData, "inData"), null, 2),
       }
       const msg = await HttpUtils.post('api/save',diff)
       if(msg.success) {
+        this.lastLoad = 0
         this.loadData()
       }
     },
     async delInbound(index: number) {
       const diff = {
         config: JSON.stringify([{key: "inbounds", action: "del", index: index, obj: null}]),
-        clients: JSON.stringify(FindDiff.Clients(this.clients,this.oldData.clients)),
+        clients: JSON.stringify(FindDiff.ArrObj(this.clients,this.oldData.clients, "clients"), null, 2),
+        tls: JSON.stringify(FindDiff.ArrObj(this.tlsConfigs,this.oldData.tlsConfigs, "tls"), null, 2),
+        inData: <string|undefined> undefined,
+      }
+
+      // Validate inData
+      let invalidInData = <any[]>[]
+      this.inData.forEach((d:any) => {
+        const inboundIndex = this.config.inbounds.findIndex((i:any) => i.tag == d.tag)
+        if (inboundIndex == -1) invalidInData.push({key: "inData", action: "del", index: d.id, obj: null})
+      })
+      if (invalidInData.length>0) {
+        diff.inData = JSON.stringify(invalidInData)
       }
       const msg = await HttpUtils.post('api/save',diff)
       if(msg.success) {
         this.loadData()
       }
     },
+    async delInData(id: number) {
+      const diff = {
+        inData: JSON.stringify([{key: "inData", action: "del", index: id, obj: null}])
+      }
+      await HttpUtils.post('api/save',diff)
+    },
     async delOutbound(index: number) {
       const diff = {
         config: JSON.stringify([{key: "outbounds", action: "del", index: index, obj: null}]),
@@ -69,6 +106,15 @@ const Data = defineStore('Data', {
       if(msg.success) {
         this.loadData()
       }
+    },
+    async delTls(id: number) {
+      const diff = {
+        tls:JSON.stringify([{key: "tls", action: "del", index: id, obj: null}]),
+      }
+      const msg = await HttpUtils.post('api/save',diff)
+      if(msg.success) {
+        this.loadData()
+      }
     }
   },
 })

frontend/src/store/modules/message.ts

@@ -1,22 +0,0 @@
-import { defineStore } from 'pinia'
-
-const Message = defineStore('msg', {
-  state: () => ({
-    showMsg: false,
-    snackbar: {
-      message: '',
-      timeout: 5000,
-      color: '',
-    }
-  }),
-  actions: {
-    showMessage(message:string, color='success',timeout=5000) {
-      this.snackbar.message = message
-      this.snackbar.color = color
-      this.snackbar.timeout = timeout
-      this.showMsg = true
-    }
-  },
-})
-
-export default Message

frontend/src/types/clients.ts

@@ -1,12 +1,13 @@
+import { Link } from "@/plugins/link"
 import RandomUtil from "@/plugins/randomUtil"
 
 export interface Client {
   id?: number
 	enable: boolean
 	name: string
-	config: string
-	inbounds: string
-  links: string
+	config: Config
+	inbounds: string[]
+  links: Link[]
 	volume: number
 	expiry: number
   up: number
@@ -17,9 +18,9 @@ export interface Client {
 const defaultClient: Client = {
   enable: true,
   name: "",
-  config: "[]",
-  inbounds: "",
-  links: "[]",
+  config: {},
+  inbounds: [],
+  links: [],
   volume: 0,
   expiry: 0,
   up: 0,
@@ -35,12 +36,11 @@ type Config = {
   }
 }
 
-export function updateConfigs(configs: string, newUserName: string): string {
-  const updatedConfigs: Config = JSON.parse(configs)
+export function updateConfigs(configs: Config, newUserName: string): Config {
 
-  for (const key in updatedConfigs) {
-    if (updatedConfigs.hasOwnProperty(key)) {
-      const config = updatedConfigs[key]
+  for (const key in configs) {
+    if (configs.hasOwnProperty(key)) {
+      const config = configs[key]
       if (config.hasOwnProperty("name")) {
         config.name = newUserName
       } else if (config.hasOwnProperty("username")) {
@@ -49,7 +49,7 @@ export function updateConfigs(configs: string, newUserName: string): string {
     }
   }
 
-  return JSON.stringify(updatedConfigs)
+  return configs
 }
 
 export function randomConfigs(user: string): Config {

frontend/src/types/inTls.ts

@@ -1,3 +1,5 @@
+import { Dial } from "./dial"
+
 export interface iTls {
   enabled?: boolean
   server_name?: string
@@ -9,6 +11,50 @@ export interface iTls {
   certificate_path?: string
   key?: string[]
   key_path?: string
+  acme?: acme
+  ech?: ech
+  reality?: reality
+}
+
+export interface acme {
+  domain: string[]
+  data_directory?: string
+  default_server_name?: string
+  email?: string
+  provider?: string
+  disable_http_challenge?: boolean
+  disable_tls_alpn_challenge?: boolean
+  alternative_http_port?: number
+  alternative_tls_port?: number
+  external_account?: {
+    key_id: string
+    mac_key: string
+  }
+  dns01_challenge?: {
+    provider: string
+    [key: string]: string
+  }
+}
+
+export interface ech {
+  enabled: boolean
+  pq_signature_schemes_enabled?: boolean
+  dynamic_record_sizing_disabled?: boolean
+  key?: string[]
+  key_path?: string
+}
+
+interface realityHanshake extends Dial {
+  server: string
+  server_port: number
+}
+
+export interface reality {
+  enabled: boolean
+  handshake: realityHanshake
+  private_key: string
+  short_id: string[]
+  max_time_difference?: string
 }
 
 export const defaultInTls: iTls = {

frontend/src/types/outbounds.ts

@@ -57,7 +57,6 @@ export interface WgPeer {
 export interface Direct extends OutboundBasics, Dial {
   override_address?: string
   override_port?: number
-  proxy_protocol?: 0 | 1 | 2
 }
 
 export interface Block extends OutboundBasics {}

frontend/src/views/Admins.vue

@@ -6,6 +6,18 @@
     @close="closeEditModal"
     @save="saveEditModal"
   />
+  <ChngModal
+    v-model="changesModal.visible"
+    :visible="changesModal.visible"
+    :admins="users.map((u:any) => u.username)"
+    :actor="changesModal.actor"
+    @close="closeChangesModal"
+  />
+  <v-row>
+    <v-col cols="12" justify="center" align="center">
+      <v-btn color="primary" @click="showChangesModal('')">{{ $t('admin.changes') }}</v-btn>
+    </v-col>
+  </v-row>
   <v-row>
     <v-col cols="12" sm="4" md="3" lg="2" v-for="(item, index) in <any[]>users" :key="item.id">
       <v-card rounded="xl" elevation="5" min-width="200" :title="item.username">
@@ -16,19 +28,19 @@
           <v-row>
             <v-col>{{ $t('admin.date') }}</v-col>
             <v-col dir="ltr">
-              {{ item.lastLogin.split(" ")[0]?? '-' }}
+              {{ item.loginDate }}
             </v-col>
           </v-row>
           <v-row>
             <v-col>{{ $t('admin.time') }}</v-col>
             <v-col dir="ltr">
-              {{ item.lastLogin.split(" ")[1]?? '-' }}
+              {{ item.loginTime }}
             </v-col>
           </v-row>
           <v-row>
             <v-col>IP</v-col>
             <v-col dir="ltr">
-              {{ item.lastLogin.split(" ")[2]?? '-' }}
+              {{ item.ip }}
             </v-col>
           </v-row>
         </v-card-text>
@@ -38,6 +50,10 @@
             <v-icon />
             <v-tooltip activator="parent" location="top" :text="$t('actions.edit')"></v-tooltip>
           </v-btn>
+          <v-btn icon="mdi-list-box-outline" @click="showChangesModal(item.username)">
+            <v-icon />
+            <v-tooltip activator="parent" location="top" :text="$t('admin.changes')"></v-tooltip>
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-col>
@@ -45,13 +61,15 @@
 </template>
 
 <script lang="ts" setup>
-import AdminModal from '@/layouts/modals/Admin.vue';
-import HttpUtils from '@/plugins/httputil';
-import { Ref, ref, inject, onMounted } from 'vue';
+import AdminModal from '@/layouts/modals/Admin.vue'
+import ChngModal from '@/layouts/modals/Changes.vue'
+import { i18n } from '@/locales'
+import HttpUtils from '@/plugins/httputil'
+import { Ref, ref, inject, onMounted } from 'vue'
 
 const loading:Ref = inject('loading')?? ref(false)
 
-const users = ref([])
+const users = ref(<any[]>[])
 
 onMounted(async () => {loadData()})
 
@@ -60,10 +78,27 @@ const loadData = async () => {
   const msg = await HttpUtils.get('api/users')
   loading.value = false
   if (msg.success) {
-    users.value = msg.obj
+    msg.obj.forEach((u:any) => {
+      const lastLogin = u.lastLogin.split(" ")
+      const localLastLogin = lastLogin.length > 2 ? dateFormatted(Date.parse(lastLogin[0] + " " + lastLogin[1])) : "- -"
+      const loginDateTime = localLastLogin.split(" ")
+      users.value.push({
+        id: u.id,
+        username: u.username,
+        loginDate: loginDateTime[0],
+        loginTime: loginDateTime[1],
+        ip: lastLogin[2]?? "-",
+      })
+    })
   }
 }
 
+const dateFormatted = (dt: number): string => {
+  const locale = i18n.global.locale.value.replace('zh', 'zh-')
+  const date = new Date(dt)
+  return date.toLocaleString(locale)
+}
+
 const editModal = ref({
   visible: false,
   user: {},
@@ -75,6 +110,7 @@ const showEditModal = (user: any) => {
 }
 const closeEditModal = () => {
   editModal.value.visible = false
+  editModal.value.user = {}
 }
 const saveEditModal = async (data:any) => {
   loading.value=true
@@ -88,4 +124,17 @@ const saveEditModal = async (data:any) => {
     loading.value=false
   }
 }
+
+const changesModal = ref({
+  visible: false,
+  actor: '',
+})
+const showChangesModal = (actor: string) => {
+  changesModal.value.actor = actor
+  changesModal.value.visible = true
+}
+const closeChangesModal = () => {
+  changesModal.value.visible = false
+  changesModal.value.actor = ''
+}
 </script>

frontend/src/views/Basics.vue

@@ -3,10 +3,10 @@
     <v-expansion-panel :title="$t('basic.log.title')">
       <v-expansion-panel-text>
         <v-row>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-switch v-model="appConfig.log.disabled" color="primary" :label="$t('disable')" hide-details></v-switch>
           </v-col>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-select
               hide-details
               :label="$t('basic.log.level')"
@@ -14,14 +14,14 @@
               v-model="appConfig.log.level">
             </v-select>
           </v-col>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-text-field
               v-model="appConfig.log.output"
               hide-details
               :label="$t('basic.log.output')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-switch v-model="appConfig.log.timestamp" color="primary" :label="$t('basic.log.timestamp')" hide-details></v-switch>
           </v-col>
         </v-row>
@@ -30,7 +30,7 @@
     <v-expansion-panel title="DNS">
       <v-expansion-panel-text>
         <v-row>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-select
               hide-details
               :label="$t('basic.dns.final')"
@@ -38,7 +38,7 @@
               v-model="finalDns">
             </v-select>
           </v-col>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-select
               hide-details
               :label="$t('listen.domainStrategy')"
@@ -48,7 +48,7 @@
               v-model="appConfig.dns.strategy">
             </v-select>
           </v-col>
-          <v-col cols="12" sm="6" md="3" align-self="center">
+          <v-col cols="12" sm="6" md="3" lg="2" align-self="center">
             <v-btn @click="addDnsServer" rounded>
               <v-icon icon="mdi-plus" />{{ $t('basic.dns.server') }}
             </v-btn>
@@ -58,7 +58,7 @@
           {{ $t('basic.dns.server') + ' ' + (index+1) }} <v-icon icon="mdi-delete" @click="appConfig.dns.servers.splice(index,1)" />
           <v-divider></v-divider>
           <v-row>
-            <v-col cols="12" sm="6" md="3">
+            <v-col cols="12" sm="6" md="3" lg="2">
               <v-text-field
                 v-model="s.tag"
                 hide-details
@@ -67,14 +67,23 @@
                 :label="$t('objects.tag')"
               ></v-text-field>
             </v-col>
-            <v-col cols="12" sm="6" md="3">
+            <v-col cols="12" sm="6" md="3" lg="2">
               <v-text-field
                 v-model="s.address"
                 hide-details
                 :label="$t('out.addr')"
               ></v-text-field>
             </v-col>
-            <v-col cols="12" sm="6" md="3">
+            <v-col cols="12" sm="6" md="3" lg="2">
+              <v-text-field
+                v-model="s.address_resolver"
+                hide-details
+                clearable
+                @click:clear="delete s.address_resolver"
+                :label="$t('basic.dns.addrResolver')"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="12" sm="6" md="3" lg="2">
               <v-select
                 hide-details
                 :label="$t('objects.outbound')"
@@ -84,7 +93,7 @@
                 v-model="s.detour">
               </v-select>
             </v-col>
-            <v-col cols="12" sm="6" md="3">
+            <v-col cols="12" sm="6" md="3" lg="2">
               <v-select
                 hide-details
                 :label="$t('listen.domainStrategy')"
@@ -101,17 +110,17 @@
     <v-expansion-panel title="NTP">
       <v-expansion-panel-text>
         <v-row>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-switch v-model="enableNtp" color="primary" :label="$t('enable')" hide-details></v-switch>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.ntp?.enabled">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.ntp?.enabled">
             <v-text-field
               v-model="appConfig.ntp.server"
               hide-details
               :label="$t('out.addr')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.ntp?.enabled">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.ntp?.enabled">
             <v-text-field
               v-model="appConfig.ntp.server_port"
               hide-details
@@ -121,7 +130,7 @@
               :label="$t('out.port')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.ntp?.enabled">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.ntp?.enabled">
             <v-text-field
               v-model="ntpInterval"
               hide-details
@@ -138,7 +147,7 @@
     <v-expansion-panel :title="$t('basic.routing.title')">
       <v-expansion-panel-text>
         <v-row>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-select
               hide-details
               :label="$t('basic.routing.defaultOut')"
@@ -148,7 +157,7 @@
               v-model="appConfig.route.final">
             </v-select>
           </v-col>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-text-field
               v-model="appConfig.route.default_interface"
               hide-details
@@ -157,7 +166,7 @@
               :label="$t('basic.routing.defaultIf')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-text-field
               v-model.number="routeMark"
               hide-details
@@ -166,7 +175,7 @@
               :label="$t('basic.routing.defaultRm')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-switch
               v-model="appConfig.route.auto_detect_interface"
               color="primary"
@@ -182,24 +191,24 @@
         Cache File
         <v-divider></v-divider>
         <v-row>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-switch v-model="enableCacheFile" color="primary" :label="$t('enable')" hide-details></v-switch>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.cache_file">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.cache_file">
             <v-text-field
               v-model="appConfig.experimental.cache_file.path"
               hide-details
               :label="$t('transport.path')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.cache_file">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.cache_file">
             <v-text-field
               v-model="appConfig.experimental.cache_file.cache_id"
               hide-details
               label="Cache ID"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.cache_file">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.cache_file">
             <v-switch v-model="appConfig.experimental.cache_file.store_fakeip"
               color="primary"
               :label="$t('basic.exp.storeFakeIp')"
@@ -209,45 +218,45 @@
         Clash API
         <v-divider></v-divider>
         <v-row>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-switch v-model="enableClashApi" color="primary" :label="$t('enable')" hide-details></v-switch>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.clash_api">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.clash_api">
             <v-text-field
               v-model="appConfig.experimental.clash_api.external_controller"
               hide-details
               label="External Controller"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.clash_api">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.clash_api">
             <v-text-field
               v-model="appConfig.experimental.clash_api.external_ui"
               hide-details
               label="External UI"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.clash_api">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.clash_api">
             <v-text-field
               v-model="appConfig.experimental.clash_api.external_ui_download_url"
               hide-details
               label="UI Download URL"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.clash_api">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.clash_api">
             <v-text-field
               v-model="appConfig.experimental.clash_api.external_ui_download_detour"
               hide-details
               label="UI Download detour"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.clash_api">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.clash_api">
             <v-text-field
               v-model="appConfig.experimental.clash_api.secret"
               hide-details
               label="Secret"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3" v-if="appConfig.experimental.clash_api">
+          <v-col cols="12" sm="6" md="3" lg="2" v-if="appConfig.experimental.clash_api">
             <v-text-field
               v-model="appConfig.experimental.clash_api.default_mode"
               hide-details
@@ -258,14 +267,14 @@
         V2Ray API
         <v-divider></v-divider>
         <v-row>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-text-field
               v-model="appConfig.experimental.v2ray_api.listen"
               hide-details
               :label="$t('objects.listen')"
             ></v-text-field>
           </v-col>
-          <v-col cols="12" sm="6" md="3">
+          <v-col cols="12" sm="6" md="3" lg="2">
             <v-switch v-model="appConfig.experimental.v2ray_api.stats.enabled"
               color="primary"
               :label="$t('stats.enable')"

frontend/src/views/Clients.vue

@@ -23,102 +23,123 @@
     :tag="stats.tag"
     @close="closeStats"
   />
-  <v-row>
-    <v-col cols="12" justify="center" align="center">
+  <v-row justify="center" align="center">
+    <v-col cols="auto">
       <v-btn color="primary" @click="showModal(-1)">{{ $t('actions.add') }}</v-btn>
     </v-col>
+    <v-col cols="auto">
+      <v-select
+      hide-details
+      variant="underlined"
+      density="compact"
+      :label="$t('filter')"
+      :items="filterItems"
+      v-model="filter">
+      </v-select>
+    </v-col>
   </v-row>
   <v-row>
-    <v-col cols="12" sm="4" md="3" lg="2" v-for="(item, index) in clients" :key="item.id">
-      <v-card rounded="xl" elevation="5" min-width="200">
-        <v-card-title>
-          <v-row>
-            <v-col>{{ item.name }}</v-col>
-            <v-spacer></v-spacer>
-            <v-col cols="auto">
-              <v-switch color="primary" v-model="clients[index].enable" hideDetails density="compact" />
-            </v-col>
-          </v-row>
-        </v-card-title>
-        <v-card-subtitle style="margin-top: -20px;">
-          <v-row>
-            <v-col>{{ item.desc }}</v-col>
-          </v-row>
-        </v-card-subtitle>
-        <v-card-text>
-          <v-row>
-            <v-col>{{ $t('pages.inbounds') }}</v-col>
-            <v-col dir="ltr">
-              <v-tooltip activator="parent" dir="ltr" location="bottom" v-if="item.inbounds != ''">
-                <span v-for="i in item.inbounds.split(',')">{{ i }}<br /></span>
-              </v-tooltip>
-              {{ item.inbounds != '' ? item.inbounds.split(',').length : 0 }}
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>{{ $t('stats.volume') }}</v-col>
-            <v-col dir="ltr">
-              {{ item.volume == 0 ? $t('unlimited') : HumanReadable.sizeFormat(item.volume) }}
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>{{ $t('date.expiry') }}</v-col>
-            <v-col dir="ltr">
-              {{ item.expiry == 0 ? $t('unlimited') : HumanReadable.remainedDays(item.expiry)?? $t('date.expired') }}
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>{{ $t('stats.usage') }}</v-col>
-            <v-col dir="ltr">
-              <v-tooltip activator="parent" location="bottom">
-                {{ $t('stats.upload') }}:{{ HumanReadable.sizeFormat(item.up) }}<br />
-                {{ $t('stats.download') }}:{{ HumanReadable.sizeFormat(item.down) }}<br />
-                <template v-if="item.volume>0">
-                  {{ $t('remained') }}: {{ HumanReadable.sizeFormat(item.volume - (item.up + item.down)) }}
+    <template v-for="(item, index) in clients" :key="item.id">
+      <v-col cols="12" sm="4" md="3" lg="2" :style="checkFilter(item)? '' : 'opacity: .2'">
+        <v-card rounded="xl" elevation="5" min-width="200">
+          <v-card-title>
+            <v-row>
+              <v-col>{{ item.name }}</v-col>
+              <v-spacer></v-spacer>
+              <v-col cols="auto">
+                <v-switch color="primary"
+                v-model="clients[index].enable"
+                @update:model-value="buildInboundsUsers(item.inbounds)"
+                hideDetails density="compact" />
+              </v-col>
+            </v-row>
+          </v-card-title>
+          <v-card-subtitle style="margin-top: -20px;">
+            <v-row>
+              <v-col>{{ item.desc }}</v-col>
+            </v-row>
+          </v-card-subtitle>
+          <v-card-text>
+            <v-row>
+              <v-col>{{ $t('pages.inbounds') }}</v-col>
+              <v-col dir="ltr">
+                <v-tooltip activator="parent" dir="ltr" location="bottom" v-if="item.inbounds != ''">
+                  <span v-for="i in item.inbounds">{{ i }}<br /></span>
+                </v-tooltip>
+                {{ item.inbounds.length }}
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>{{ $t('stats.volume') }}</v-col>
+              <v-col dir="ltr">
+                {{ item.volume == 0 ? $t('unlimited') : HumanReadable.sizeFormat(item.volume) }}
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>{{ $t('date.expiry') }}</v-col>
+              <v-col dir="ltr">
+                {{ item.expiry == 0 ? $t('unlimited') : HumanReadable.remainedDays(item.expiry)?? $t('date.expired') }}
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>{{ $t('stats.usage') }}</v-col>
+              <v-col dir="ltr">
+                <v-tooltip activator="parent" location="bottom">
+                  {{ $t('stats.upload') }}:{{ HumanReadable.sizeFormat(item.up) }}<br />
+                  {{ $t('stats.download') }}:{{ HumanReadable.sizeFormat(item.down) }}<br />
+                  <template v-if="item.volume>0">
+                    {{ $t('remained') }}: {{ HumanReadable.sizeFormat(item.volume - (item.up + item.down)) }}
+                  </template>
+                </v-tooltip>
+                {{ HumanReadable.sizeFormat(item.up + item.down) }}
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>{{ $t('online') }}</v-col>
+              <v-col dir="ltr">
+                <template v-if="onlines[index]">
+                  <v-chip density="comfortable" size="small" color="success" variant="flat">{{ $t('online') }}</v-chip>
                 </template>
-              </v-tooltip>
-              {{ HumanReadable.sizeFormat(item.up + item.down) }}
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>{{ $t('online') }}</v-col>
-            <v-col dir="ltr">
-              <template v-if="onlines[index]">
-                <v-chip density="comfortable" size="small" color="success" variant="flat">{{ $t('online') }}</v-chip>
-              </template>
-              <template v-else>-</template>
-            </v-col>
-          </v-row>
-        </v-card-text>
-        <v-divider></v-divider>
-        <v-card-actions style="padding: 0;">
-          <v-btn icon="mdi-account-edit" @click="showModal(index)">
-            <v-icon />
-            <v-tooltip activator="parent" location="top" :text="$t('actions.edit')"></v-tooltip>
-          </v-btn>
-          <v-btn style="margin-inline-start:0;" icon="mdi-account-minus" color="warning" @click="delOverlay[index] = true">
-            <v-icon />
-            <v-tooltip activator="parent" location="top" :text="$t('actions.del')"></v-tooltip>
-          </v-btn>
-          <v-overlay
-            v-model="delOverlay[index]"
-            contained
-            class="align-center justify-center"
-          >
-            <v-card :title="$t('actions.del')" rounded="lg">
-              <v-divider></v-divider>
-              <v-card-text>{{ $t('confirm') }}</v-card-text>
-              <v-card-actions>
-                <v-btn color="error" variant="outlined" @click="delClient(index)">{{ $t('yes') }}</v-btn>
-                <v-btn color="success" variant="outlined" @click="delOverlay[index] = false">{{ $t('no') }}</v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-overlay>
-          <v-btn icon="mdi-qrcode" @click="showQrCode(index)" />
-          <v-btn icon="mdi-chart-line" @click="showStats(item.name)" />
-        </v-card-actions>
-      </v-card>      
-    </v-col>
+                <template v-else>-</template>
+              </v-col>
+            </v-row>
+          </v-card-text>
+          <v-divider></v-divider>
+          <v-card-actions style="padding: 0;">
+            <v-btn icon="mdi-account-edit" @click="showModal(index)">
+              <v-icon />
+              <v-tooltip activator="parent" location="top" :text="$t('actions.edit')"></v-tooltip>
+            </v-btn>
+            <v-btn style="margin-inline-start:0;" icon="mdi-account-minus" color="warning" @click="delOverlay[index] = true">
+              <v-icon />
+              <v-tooltip activator="parent" location="top" :text="$t('actions.del')"></v-tooltip>
+            </v-btn>
+            <v-overlay
+              v-model="delOverlay[index]"
+              contained
+              class="align-center justify-center"
+            >
+              <v-card :title="$t('actions.del')" rounded="lg">
+                <v-divider></v-divider>
+                <v-card-text>{{ $t('confirm') }}</v-card-text>
+                <v-card-actions>
+                  <v-btn color="error" variant="outlined" @click="delClient(index)">{{ $t('yes') }}</v-btn>
+                  <v-btn color="success" variant="outlined" @click="delOverlay[index] = false">{{ $t('no') }}</v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-overlay>
+            <v-btn icon="mdi-qrcode" @click="showQrCode(index)">
+              <v-icon />
+              <v-tooltip activator="parent" location="top" text="QR-Code"></v-tooltip>
+            </v-btn>
+            <v-btn icon="mdi-chart-line" @click="showStats(item.name)" v-if="v2rayStats.users.includes(item.name)">
+              <v-icon />
+              <v-tooltip activator="parent" location="top" :text="$t('stats.graphTitle')"></v-tooltip>
+            </v-btn>
+          </v-card-actions>
+        </v-card>      
+      </v-col>
+    </template>
   </v-row>
 </template>
 <script lang="ts" setup>
@@ -132,8 +153,8 @@ import { Config, V2rayApiStats } from '@/types/config'
 import { InTypes, Inbound,InboundWithUser, ShadowTLS, VLESS } from '@/types/inbounds'
 import { Link, LinkUtil } from '@/plugins/link'
 import { HumanReadable } from '@/plugins/utils'
-import Message from '@/store/modules/message'
 import { i18n } from '@/locales'
+import { push } from 'notivue'
 
 const clients = computed((): any[] => {
   return Data().clients
@@ -160,6 +181,28 @@ const inboundTags = computed((): string[] => {
   return inbounds.value?.filter(i => i.tag != "" && Object.hasOwn(i,'users')).map(i => i.tag)
 })
 
+const filter = ref("")
+
+const filterItems = [
+  { title: i18n.global.t('none'), value: '' },
+  { title: i18n.global.t('disable'), value: 'disable' },
+  { title: i18n.global.t('date.expired'), value: 'expired' },
+  { title: i18n.global.t('online'), value: 'online' },
+]
+
+const checkFilter = (c:any) :boolean => {
+  switch (filter.value) {
+    case "disable":
+      return !c.enable
+    case "expired":
+      return HumanReadable.remainedDays(c.expiry) == null
+    case "online":
+      return Data().onlines?.user?.includes(c.name)
+    default:
+      return true
+  }
+}
+
 const modal = ref({
   visible: false,
   index: -1,
@@ -179,26 +222,22 @@ const closeModal = () => {
   modal.value.visible = false
 }
 const saveModal = (data:any, stats:boolean) => {
-  if (clients.value.findIndex(c => c.name == data.name) != modal.value.index) {
-    const sb = Message()
-    sb.showMessage(i18n.global.t('error.dplData') + ': ' + i18n.global.t('client.name') ,'error', 5000)
+  // Check duplicate name
+  const oldName = modal.value.index != -1 ? clients.value[modal.value.index].name : null
+  if (data.name != oldName && clients.value.findIndex(c => c.name == data.name) != -1) {
+    push.error({
+      message: i18n.global.t('error.dplData') + ": " + i18n.global.t('client.name')
+    })
     return
   }
-  const inboundTags: string[] = data.inbounds.split(',')?? []
-  let oldName:string = ""
   if(modal.value.index == -1) {
     clients.value.push(data)
   } else {
-    const oldData = createClient(clients.value[modal.value.index])
-    oldName = oldData.name
-    oldData.inbounds.split(',').forEach((i:string) => {
-      if (!inboundTags.includes(i)) inboundTags.push(i)
-    })
     clients.value[modal.value.index] = data
   }
 
   // Rebuild affected inbounds
-  buildInboundsUsers(inboundTags)
+  buildInboundsUsers(data.inbounds)
 
   // Rebuild links
   data.links = updateLinks(data)
@@ -226,15 +265,14 @@ const buildInboundsUsers = (inboundTags:string[]) => {
       if (inbound_index != -1){
         const users = <any>[]
         const newInbound = <InboundWithUser>inbounds.value[inbound_index]
-        const inboundClients = clients.value.filter(c => c.enable && c.inbounds.split(',').includes(tag))
+        const inboundClients = clients.value.filter(c => c.enable && c.inbounds.includes(tag))
         inboundClients.forEach(c => {
-          const clientConfig = JSON.parse(c.config)
           // Remove flow in non tls VLESS
           if (newInbound.type == InTypes.VLESS) {
             const vlessInbound = <VLESS>newInbound
-            if (!vlessInbound.tls?.enabled || vlessInbound.transport?.type) delete(clientConfig["vless"].flow)
+            if (!vlessInbound.tls?.enabled || vlessInbound.transport?.type) delete(c.config?.vless?.flow)
           }
-          users.push(clientConfig[newInbound.type])
+          users.push(c.config[newInbound.type])
         })
         newInbound.users = users
 
@@ -254,19 +292,24 @@ const buildInboundsUsers = (inboundTags:string[]) => {
       }
     })
 }
-const updateLinks = (c:Client):string => {
-  const clientInbounds = <Inbound[]>inbounds.value.filter(i => c.inbounds.split(',').includes(i.tag))
+const updateLinks = (c:Client):Link[] => {
+  const clientInbounds = <Inbound[]>inbounds.value.filter(i => c.inbounds.includes(i.tag))
   const newLinks = <Link[]>[]
   clientInbounds.forEach(i =>{
-    const uri = LinkUtil.linkGenerator(c.name,i)
-    if (uri.length>0){
-      newLinks.push(<Link>{ type: 'local', remark: i.tag, uri: uri })
+    const tlsConfig = <any>Data().tlsConfigs?.findLast((t:any) => t.inbounds.includes(i.tag))
+    const cData = <any>Data().inData?.findLast((d:any) => d.tag == i.tag)
+    const addrs = cData ? <any[]>cData.addrs : []
+    const uris = LinkUtil.linkGenerator(c.name,i, tlsConfig?.client?? {}, addrs)
+    if (uris.length>0){
+      uris.forEach(uri => {
+        newLinks.push(<Link>{ type: 'local', remark: i.tag, uri: uri })
+      })
     }
   })
-  let links = c.links && c.links.length>0? <Link[]>JSON.parse(c.links) : <Link[]>[]
+  let links = c.links && c.links.length>0? c.links : <Link[]>[]
   links = [...newLinks, ...links.filter(l => l.type != 'local')]
 
-  return JSON.stringify(links)
+  return links
 }
 const delClient = (clientIndex: number) => {
   const id = clients.value[clientIndex].id
@@ -280,7 +323,7 @@ const delClient = (clientIndex: number) => {
   }
 
   clients.value.splice(clientIndex,1)
-  buildInboundsUsers(oldData.inbounds.split(','))
+  buildInboundsUsers(oldData.inbounds)
   if (id>0) Data().delClient(id)
   delOverlay.value[clientIndex] = false
 }

frontend/src/views/Inbounds.vue

@@ -2,11 +2,13 @@
   <InboundVue 
     v-model="modal.visible"
     :visible="modal.visible"
-    :id="modal.id"
+    :index="modal.index"
     :stats="modal.stats"
     :data="modal.data"
+    :cData="modal.cData"
     :inTags="inTags"
     :outTags="outTags"
+    :tlsConfigs="tlsConfigs"
     @close="closeModal"
     @save="saveModal"
   />
@@ -92,7 +94,10 @@
               </v-card-actions>
             </v-card>
           </v-overlay>
-          <v-btn icon="mdi-chart-line" @click="showStats(item.tag)" />
+          <v-btn icon="mdi-chart-line" @click="showStats(item.tag)" v-if="v2rayStats.inbounds.includes(item.tag)">
+            <v-icon />
+            <v-tooltip activator="parent" location="top" :text="$t('stats.graphTitle')"></v-tooltip>
+          </v-btn>
         </v-card-actions>
       </v-card>      
     </v-col>
@@ -108,8 +113,9 @@ import { computed, ref } from 'vue'
 import { InTypes, Inbound, InboundWithUser, ShadowTLS, VLESS } from '@/types/inbounds'
 import { Client } from '@/types/clients'
 import { Link, LinkUtil } from '@/plugins/link'
-import Message from '@/store/modules/message'
 import { i18n } from '@/locales'
+import { push } from 'notivue'
+import { fillData } from '@/plugins/outJson'
 
 const appConfig = computed((): Config => {
   return <Config> Data().config
@@ -119,6 +125,14 @@ const inbounds = computed((): Inbound[] => {
   return <Inbound[]> appConfig.value.inbounds
 })
 
+const tlsConfigs = computed((): any[] => {
+  return <any[]> Data().tlsConfigs
+})
+
+const inData = computed((): any[] => {
+  return <any[]> Data().inData
+})
+
 const inTags = computed((): string[] => {
   return inbounds.value?.map(i => i.tag)
 })
@@ -141,38 +155,64 @@ const v2rayStats = computed((): V2rayApiStats => {
 
 const modal = ref({
   visible: false,
-  id: -1,
+  index: -1,
   data: "",
+  cData: "",
   stats: false,
 })
 
 let delOverlay = ref(new Array<boolean>)
 
-const showModal = (id: number) => {
-  modal.value.id = id
-  modal.value.data = id == -1 ? '' : JSON.stringify(inbounds.value[id])
-  modal.value.stats = id == -1 ? false : v2rayStats.value.inbounds.includes(inbounds.value[id].tag)
+const showModal = (index: number) => {
+  modal.value.index = index
+  if (index == -1){
+    modal.value.data = ''
+    modal.value.cData = ''
+    modal.value.stats = false
+  } else {
+    modal.value.data = JSON.stringify(inbounds.value[index])
+    modal.value.stats = v2rayStats.value.inbounds.includes(inbounds.value[index].tag)
+    const inDataIndex = inData.value.findIndex(d => d.tag == inbounds.value[index].tag)
+    modal.value.cData = inDataIndex == -1 ? '' : JSON.stringify(inData.value[inDataIndex])
+  }
   modal.value.visible = true
 }
 const closeModal = () => {
   modal.value.visible = false
 }
-const saveModal = (data:Inbound, stats: boolean) => {
-  if (inbounds.value.findIndex(c => c.tag == data.tag) != modal.value.id) {
-    const sb = Message()
-    sb.showMessage(i18n.global.t('error.dplData') + ': ' + i18n.global.t('objects.tag') ,'error', 5000)
+const saveModal = (data:Inbound, stats: boolean, tls_id: number, cData: any) => {
+  // Check duplicate tag
+  const oldTag = modal.value.index != -1 ? inbounds.value[modal.value.index].tag : null
+  if (data.tag != oldTag && inTags.value.includes(data.tag)) {
+    push.error({
+      message: i18n.global.t('error.dplData') + ": " + i18n.global.t('objects.tag')
+    })
     return
   }
+  if (cData.id != -1) {
+    cData.tag = data.tag
+    fillData(cData.outJson, data,tls_id>0 ? tlsConfigs.value.findLast(t => t.id == tls_id).client : {})
+  }
+
   // New or Edit
-  if (modal.value.id == -1) {
+  if (modal.value.index == -1) {
     inbounds.value.push(data)
     if (stats && data.tag.length>0) {
       v2rayStats.value.inbounds.push(data.tag)
     }
+    if (cData.id != -1){
+      inData.value.push(cData)
+    }
   } else {
-    const oldTag = inbounds.value[modal.value.id].tag
+    const oldTag = inbounds.value[modal.value.index].tag
     const sIndex = v2rayStats.value.inbounds.findIndex(i => i == data.tag) // Find if new tag exists
 
+    // Update tls preset
+    const oldTlsConfigIndex = tlsConfigs?.value.findIndex(t => t.inbounds?.includes(oldTag))
+    if (oldTlsConfigIndex != -1){
+      tlsConfigs.value[oldTlsConfigIndex].inbounds = tlsConfigs?.value[oldTlsConfigIndex].inbounds.filter((i:string) => i != oldTag)
+    }
+
     if (oldTag != data.tag) {
       v2rayStats.value.inbounds = v2rayStats.value.inbounds.filter(item => item != oldTag)
       changeClientInboundsTag(oldTag,data.tag)
@@ -186,31 +226,55 @@ const saveModal = (data:Inbound, stats: boolean) => {
       if (sIndex != -1) v2rayStats.value.inbounds.splice(sIndex,1)
     }
 
-    inbounds.value[modal.value.id] = data
+    inbounds.value[modal.value.index] = data
+    const inDataIndex = inData.value.findIndex(indata => indata.tag == oldTag)
+    if (cData.id != -1) {
+      if (inDataIndex == -1){
+        inData.value.push(cData)
+      } else {
+        inData.value[inDataIndex] = cData
+      }
+    } else if (inDataIndex != -1) {
+      Data().delInData(inData.value[inDataIndex].id)
+      inData.value.splice(inDataIndex,1)
+    }
+  }
+  // Update tls preset
+  if (tls_id>0) {
+    tlsConfigs.value.findLast(t => t.id == tls_id).inbounds.push(data.tag)
+    tlsConfigs.value.sort()
+  }
+
+  if (Object.hasOwn(data,'users')) {
+    // Set users
+    data = buildInboundsUsers(data)
+    // Update links
+    updateLinks(data)
   }
-  // Set users
-  data = buildInboundsUsers(data)
-  // Update links
-  if (Object.hasOwn(data,'users')) updateLinks(data)
   modal.value.visible = false
 }
-const updateLinks = (i: InboundWithUser) => {
+const updateLinks = (i: any) => {
   if(i.users && i.users.length>0){
     i.users.forEach((u:any) => {
       const client = clients.value.find(c => u.username? c.name == u.username : c.name == u.name)
       if (client){
-        const clientInbounds = <Inbound[]>inbounds.value.filter(i => client?.inbounds.split(',').includes(i.tag))
+        const clientInbounds = <Inbound[]>inbounds.value.filter(inb => client?.inbounds.includes(inb.tag))
         const newLinks = <Link[]>[]
         clientInbounds.forEach(i =>{
-          const uri = LinkUtil.linkGenerator(client.name,i)
-          if (uri.length>0){
-            newLinks.push(<Link>{ type: 'local', remark: i.tag, uri: uri })
+          const tlsClient = tlsConfigs?.value.findLast((t:any) => t.inbounds.includes(i.tag))?.client?? {}
+          const cData = <any>Data().inData?.findLast((d:any) => d.tag == i.tag)
+          const addrs = cData ? <any[]>cData.addrs : []
+          const uris = LinkUtil.linkGenerator(client.name,i, tlsClient, addrs)
+          if (uris.length>0){
+            uris.forEach(uri => {
+              newLinks.push(<Link>{ type: 'local', remark: i.tag, uri: uri })
+            })
           }
         })
-        let links = client.links && client.links.length>0? <Link[]>JSON.parse(client.links) : <Link[]>[]
+        let links = client.links && client.links.length>0? client.links : <Link[]>[]
         links = [...newLinks, ...links.filter(l => l.type != 'local')]
 
-        client.links = JSON.stringify(links)
+        client.links = links
       }
     })
   }
@@ -220,19 +284,26 @@ const delInbound = (index: number) => {
   inbounds.value.splice(index,1)
   const tag = inb.tag
 
-  if (Object.hasOwn(inb,'users')){
+  if (Object.hasOwn(inb,'users')) {
     const inbU = <InboundWithUser>inb
     if (inbU.users && inbU.users.length>0){
       inbU.users.forEach((u:any) => {
-        const c_index = clients.value.findIndex(c => u.username? u.username == c.name : u.user == c.name)
+        const c_index = clients.value.findIndex(c => u.username? u.username == c.name : u.name == c.name)
         if (c_index != -1) {
-          const clientInbounds = clients.value[c_index].inbounds.split(',').filter((x:string) => x!=tag)
-          clients.value[c_index].inbounds = clientInbounds.join(',')
+          clients.value[c_index].inbounds = clients.value[c_index].inbounds.filter((x:string) => x!=tag)
+          clients.value[c_index].links = clients.value[c_index].links.filter((x:any) => x.remark!=tag)
         }
       })
     }
   }
 
+  // Delete binded tls if exists
+  if (Object.hasOwn(inb,'tls')) {
+    const oldTlsConfigIndex = tlsConfigs?.value.findIndex(t => t.inbounds?.includes(inb.tag))
+    if (oldTlsConfigIndex != -1){
+      tlsConfigs.value[oldTlsConfigIndex].inbounds = tlsConfigs?.value[oldTlsConfigIndex].inbounds.filter((i:string) => i != inb.tag)
+    }
+  }
 
   // Delete stats if exists and will be orphaned
   const tagCounts = inbounds.value.filter(i => i.tag == inb.tag).length
@@ -245,17 +316,16 @@ const delInbound = (index: number) => {
   }
   delOverlay.value[index] = false
 }
-const buildInboundsUsers = (inbound:InboundWithUser):Inbound => {
+const buildInboundsUsers = (inbound:any):Inbound => {
     const users = <any>[]
-    const inboundClients = clients.value.filter(c => c.enable && c.inbounds.split(',').includes(inbound.tag))
+    const inboundClients = clients.value.filter(c => c.enable && c.inbounds.includes(inbound.tag))
     inboundClients.forEach(c => {
-      const clientConfig = JSON.parse(c.config)
       // Remove flow in non tls VLESS
       if (inbound.type == InTypes.VLESS) {
         const vlessInbound = <VLESS>inbound
-        if (!vlessInbound.tls?.enabled || vlessInbound.transport?.type) delete(clientConfig["vless"].flow)
+        if (!vlessInbound.tls?.enabled || vlessInbound.transport?.type) delete(c.config?.vless?.flow)
       }
-      users.push(clientConfig[inbound.type])
+      users.push(c.config[inbound.type])
     })
     inbound.users = users
 
@@ -275,11 +345,10 @@ const buildInboundsUsers = (inbound:InboundWithUser):Inbound => {
 }
 const changeClientInboundsTag = (oldtag: string, newTag:string) => {
   clients.value.forEach((c, c_index) => {
-    const inboundsArray = c.inbounds.split(',')
-    const inbound_index = inboundsArray.findIndex(i => i == oldtag)
+    const inbound_index = c.inbounds.findIndex(i => i == oldtag)
     if (inbound_index != -1) {
-      inboundsArray[inbound_index] = newTag
-      clients.value[c_index].inbounds = inboundsArray.join(',')
+      c.inbounds[inbound_index] = newTag
+      clients.value[c_index].inbounds = c.inbounds
     }
   })
 }

frontend/src/views/Outbounds.vue

@@ -82,7 +82,10 @@
               </v-card-actions>
             </v-card>
           </v-overlay>
-          <v-btn icon="mdi-chart-line" @click="showStats(item.tag)" />
+          <v-btn icon="mdi-chart-line" @click="showStats(item.tag)" v-if="v2rayStats.outbounds.includes(item.tag)">
+            <v-icon />
+            <v-tooltip activator="parent" location="top" :text="$t('stats.graphTitle')"></v-tooltip>
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-col>
@@ -96,8 +99,8 @@ import Stats from '@/layouts/modals/Stats.vue'
 import { Config, V2rayApiStats } from '@/types/config';
 import { Outbound } from '@/types/outbounds';
 import { computed, ref } from 'vue'
-import Message from '@/store/modules/message';
 import { i18n } from '@/locales';
+import { push } from 'notivue';
 
 const appConfig = computed((): Config => {
   return <Config> Data().config
@@ -139,9 +142,12 @@ const closeModal = () => {
   modal.value.visible = false
 }
 const saveModal = (data:Outbound, stats: boolean) => {
-  if (outbounds.value.findIndex(c => c.tag == data.tag) != modal.value.id) {
-    const sb = Message()
-    sb.showMessage(i18n.global.t('error.dplData') + ': ' + i18n.global.t('objects.tag') ,'error', 5000)
+  // Check duplicate tag
+  const oldTag = modal.value.id != -1 ? outbounds.value[modal.value.id].tag : null
+  if (data.tag != oldTag && outboundTags.value.includes(data.tag)) {
+    push.error({
+      message: i18n.global.t('error.dplData') + ": " + i18n.global.t('objects.tag')
+    })
     return
   }
   // New or Edit

frontend/src/views/Rules.vue

@@ -29,7 +29,7 @@
   <v-row>
     <v-col cols="12">{{ $t('rule.ruleset') }}</v-col>
     <v-col cols="12" sm="4" md="3" lg="2" v-for="(item, index) in <any[]>rulesets" :key="item.tag">
-      <v-card rounded="xl" elevation="5" min-width="200" :title="index">
+      <v-card rounded="xl" elevation="5" min-width="200" :title="index+1">
         <v-card-subtitle style="margin-top: -20px;">
           <v-row>
             <v-col>{{ $t('ruleset.' + item.type) }}</v-col>
@@ -86,7 +86,7 @@
   <v-row>
     <v-col cols="12">{{ $t('pages.rules') }}</v-col>
     <v-col cols="12" sm="4" md="3" lg="2" v-for="(item, index) in <any[]>rules">
-      <v-card rounded="xl" elevation="5" min-width="200" :title="index">
+      <v-card rounded="xl" elevation="5" min-width="200" :title="index+1">
         <v-card-subtitle style="margin-top: -20px;">
           <v-row>
             <v-col>{{ item.type != undefined ? $t('rule.logical') + ' (' + item.mode + ')' : $t('rule.simple') }}</v-col>

frontend/src/views/Settings.vue

@@ -8,7 +8,8 @@
   >
     <v-tab value="t1">{{ $t('setting.interface') }}</v-tab>
     <v-tab value="t2">{{ $t('setting.sub') }}</v-tab>
-    <v-tab value="t3">Language</v-tab>
+    <v-tab value="t3">{{ $t('setting.jsonSub') }}</v-tab>
+    <v-tab value="t4">Language</v-tab>
   </v-tabs>
   <v-card-text>
     <v-row align="center" justify="center" style="margin-bottom: 10px;">
@@ -30,7 +31,7 @@
             <v-text-field v-model="settings.webListen" :label="$t('setting.addr')" hide-details></v-text-field>
           </v-col>
           <v-col cols="12" sm="6" md="4">
-            <v-text-field v-model="webPort" :label="$t('setting.port')" hide-details></v-text-field>
+            <v-text-field v-model.number="webPort" min="1" type="number" :label="$t('setting.port')" hide-details></v-text-field>
           </v-col>
           <v-col cols="12" sm="6" md="4">
             <v-text-field v-model="settings.webPath" :label="$t('setting.webPath')" hide-details></v-text-field>
@@ -51,8 +52,9 @@
             <v-text-field
               type="number"
               v-model.number="sessionMaxAge"
+              min="0"
               :label="$t('setting.sessionAge')"
-              :suffix="$t('date.h')"
+              :suffix="$t('date.m')"
               hide-details
               ></v-text-field>
           </v-col>
@@ -60,6 +62,7 @@
             <v-text-field
               type="number"
               v-model.number="trafficAge"
+              min="0"
               :label="$t('setting.trafficAge')"
               :suffix="$t('date.d')"
               hide-details
@@ -87,7 +90,7 @@
           <v-col cols="12" sm="6" md="4">
             <v-text-field
               type="number"
-              v-model="subPort"
+              v-model.number="subPort"
               min="1"
               :label="$t('setting.port')"
               hide-details></v-text-field>
@@ -114,6 +117,7 @@
             <v-text-field
               type="number"
               v-model.number="subUpdates"
+              min="0"
               :label="$t('setting.update')"
               hide-details
               ></v-text-field>
@@ -125,6 +129,10 @@
       </v-window-item>
 
       <v-window-item value="t3">
+        <SubJsonExtVue :settings="settings" />
+      </v-window-item>
+
+      <v-window-item value="t4">
         <v-row>
           <v-col cols="12" sm="6" md="4">
             <v-select
@@ -143,11 +151,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useLocale } from "vuetify"
+import { useLocale } from 'vuetify'
 import { languages } from '@/locales'
-import { Ref, computed, inject, onMounted, ref } from "vue"
-import HttpUtils from "@/plugins/httputil"
-import { FindDiff } from "@/plugins/utils"
+import { Ref, computed, inject, onMounted, ref } from 'vue'
+import HttpUtils from '@/plugins/httputil'
+import { FindDiff } from '@/plugins/utils'
+import SubJsonExtVue from '@/components/SubJsonExt.vue'
 const locale = useLocale()
 const tab = ref("t1")
 const loading:Ref = inject('loading')?? ref(false)
@@ -174,6 +183,7 @@ const settings = ref({
 	subEncode: "true",
 	subShowInfo: "false",
 	subURI: "",
+  subJsonExt: "",
 })
 
 onMounted(async () => {loadData()})
@@ -248,28 +258,28 @@ const subShowInfo = computed({
 })
 
 const webPort = computed({
-  get: () => { return parseInt(settings.value.webPort) },
-  set: (v:number) => { settings.value.webPort = v.toString() }
+  get: () => { return settings.value.webPort.length>0 ? parseInt(settings.value.webPort) : 2095 },
+  set: (v:number) => { settings.value.webPort = v>0 ? v.toString() : "2095" }
 })
 
 const sessionMaxAge = computed({
-  get: () => { return parseInt(settings.value.sessionMaxAge) },
-  set: (v:number) => { settings.value.sessionMaxAge = v.toString() }
+  get: () => { return settings.value.sessionMaxAge.length>0 ? parseInt(settings.value.sessionMaxAge) : 0 },
+  set: (v:number) => { settings.value.sessionMaxAge = v>0 ? v.toString() : "0" }
 })
 
 const trafficAge = computed({
-  get: () => { return parseInt(settings.value.trafficAge) },
-  set: (v:number) => { settings.value.trafficAge = v.toString() }
+  get: () => { return settings.value.trafficAge.length>0 ? parseInt(settings.value.trafficAge) : 0 },
+  set: (v:number) => { settings.value.trafficAge = v>0 ? v.toString() : "0" }
 })
 
 const subPort = computed({
-  get: () => { return parseInt(settings.value.subPort) },
-  set: (v:number) => { settings.value.subPort = v.toString() }
+  get: () => { return settings.value.subPort.length>0 ? parseInt(settings.value.subPort) : 2096 },
+  set: (v:number) => { settings.value.subPort = v>0 ? v.toString() : "2096" }
 })
 
 const subUpdates = computed({
-  get: () => { return parseInt(settings.value.subUpdates) },
-  set: (v:number) => { settings.value.subUpdates = v.toString() }
+  get: () => { return settings.value.subUpdates.length>0 ? parseInt(settings.value.subUpdates) : 12 },
+  set: (v:number) => { settings.value.subUpdates = v>0 ? v.toString() : "12" }
 })
 
 const stateChange = computed(() => {

frontend/src/views/Tls.vue

@@ -0,0 +1,177 @@
+<template>
+    <TlsVue 
+    v-model="modal.visible"
+    :visible="modal.visible"
+    :index="modal.index"
+    :data="modal.data"
+    @close="closeModal"
+    @save="saveModal"
+  />
+  <v-row>
+    <v-col cols="12" justify="center" align="center">
+      <v-btn color="primary" @click="showModal(-1)">{{ $t('actions.add') }}</v-btn>
+    </v-col>
+  </v-row>
+  <v-row>
+    <v-col cols="12" sm="4" md="3" lg="2" v-for="(item, index) in <any[]>tlsConfigs" :key="item.id">
+      <v-card rounded="xl" elevation="5" min-width="200" :title="(item.id? item.id + '. ' : '*') + item.name">
+        <v-card-subtitle style="margin-top: -20px;">
+          {{ item.server?.server_name?.length>0 ? item.server.server_name : "-" }}
+        </v-card-subtitle>
+        <v-card-text>
+          <v-row>
+            <v-col>{{ $t('pages.inbounds') }}</v-col>
+            <v-col dir="ltr">
+              <v-tooltip activator="parent" dir="ltr" location="bottom" v-if="item.inbounds?.length>0">
+                <span v-for="i in item.inbounds">{{ i }}<br /></span>
+              </v-tooltip>
+              {{ item.inbounds?.length }}
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>ACME</v-col>
+            <v-col dir="ltr">
+              {{ $t(item.server?.acme == undefined ? 'no' : 'yes') }}
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>ECH</v-col>
+            <v-col dir="ltr">
+              {{ $t(item.server?.ech == undefined ? 'no' : 'yes') }}
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>Reality</v-col>
+            <v-col dir="ltr">
+              {{ $t(item.server?.reality == undefined ? 'no' : 'yes') }}
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions style="padding: 0;">
+          <v-btn icon="mdi-file-edit" @click="showModal(index)">
+            <v-icon />
+            <v-tooltip activator="parent" location="top" :text="$t('actions.edit')"></v-tooltip>
+          </v-btn>
+          <v-btn v-if="item.inbounds?.length == 0" icon="mdi-file-remove" style="margin-inline-start:0;" color="warning" @click="delOverlay[index] = true">
+            <v-icon />
+            <v-tooltip activator="parent" location="top" :text="$t('actions.del')"></v-tooltip>
+          </v-btn>
+          <v-overlay
+            v-model="delOverlay[index]"
+            contained
+            class="align-center justify-center"
+          >
+            <v-card :title="$t('actions.del')" rounded="lg">
+              <v-divider></v-divider>
+              <v-card-text>{{ $t('confirm') }}</v-card-text>
+              <v-card-actions>
+                <v-btn color="error" variant="outlined" @click="delTls(index)">{{ $t('yes') }}</v-btn>
+                <v-btn color="success" variant="outlined" @click="delOverlay[index] = false">{{ $t('no') }}</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-overlay>
+          <v-btn icon="mdi-content-duplicate" @click="clone(index)">
+            <v-icon />
+            <v-tooltip activator="parent" location="top" :text="$t('actions.clone')"></v-tooltip>
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import TlsVue from '@/layouts/modals/Tls.vue'
+import Data from '@/store/modules/data'
+import { computed, ref } from 'vue'
+import { Config } from '@/types/config';
+import { Inbound } from '@/types/inbounds';
+import { Client } from '@/types/clients';
+import { Link, LinkUtil } from '@/plugins/link';
+
+const tlsConfigs = computed((): any[] => {
+  return Data().tlsConfigs
+})
+
+const inbounds = computed((): any[] => {
+  return <any[]>(<Config>Data().config)?.inbounds
+})
+
+const clients = computed((): any[] => {
+  return <Client[]>Data().clients
+})
+
+const modal = ref({
+  visible: false,
+  index: -1,
+  data: "",
+})
+
+const delOverlay = ref(new Array<boolean>(tlsConfigs.value.length).fill(false))
+
+const showModal = (index: number) => {
+  modal.value.index = index
+  modal.value.data = index == -1 ? '{}' : JSON.stringify(tlsConfigs.value[index])
+  modal.value.visible = true
+}
+const clone = (index: number) => {
+  let data = JSON.parse(JSON.stringify(tlsConfigs.value[index]))
+  data.id = 0
+  data.inbounds = []
+  while (tlsConfigs.value.findIndex(t => t.name == data.name) != -1){
+    data.name += "-copy"
+  }
+  saveModal(data)
+}
+const closeModal = () => {
+  modal.value.visible = false
+}
+const saveModal = (data:any) => {
+  // New or Edit
+  if (modal.value.index == -1) {
+    tlsConfigs.value.push(data)
+  } else {
+    tlsConfigs.value[modal.value.index] = data
+    inbounds?.value.filter(i => tlsConfigs.value[modal.value.index].inbounds.includes(i.tag)).forEach(i =>{
+      if (i.tls != undefined) i.tls = data.server
+      updateLinks(i,data.client)
+    })
+  }
+  modal.value.visible = false
+}
+
+const delTls = (index: number) => {
+  if (index < Data().oldData.tlsConfigs.length){
+    Data().delTls(tlsConfigs.value[index].id)
+  }
+  tlsConfigs.value.splice(index,1)
+  delOverlay.value[index] = false
+}
+
+const updateLinks = (i:any,tlsClient:any) => {
+  if(i.users && i.users.length>0){
+    i.users.forEach((u:any) => {
+      const client = clients.value.find(c => u.username? c.name == u.username : c.name == u.name)
+      if (client){
+        const clientInbounds = <Inbound[]>inbounds.value.filter(inb => client?.inbounds.includes(inb.tag))
+        const newLinks = <Link[]>[]
+        clientInbounds.forEach(i =>{
+          const cData = <any>Data().inData?.findLast((d:any) => d.tag == i.tag)
+          const addrs = cData ? <any[]>cData.addrs : []
+          const uris = LinkUtil.linkGenerator(client,i, tlsClient, addrs)
+          if (uris.length>0){
+            uris.forEach(uri => {
+              newLinks.push(<Link>{ type: 'local', remark: i.tag, uri: uri })
+            })
+          }
+        })
+        let links = client.links && client.links.length>0? client.links : <Link[]>[]
+        links = [...newLinks, ...links.filter((l:Link) => l.type != 'local')]
+
+        client.links = links
+      }
+    })
+  }
+}
+</script>

frontend/tsconfig.node.json

@@ -5,5 +5,6 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.mts"],
+  "exclude": []
 }

install.sh

@@ -76,6 +76,9 @@ install_base() {
 }
 
 config_after_install() {
+    echo -e "${yellow}Migration... ${plain}"
+    /usr/local/s-ui/sui migrate
+    
     echo -e "${yellow}Install/update finished! For security it's recommended to modify panel settings ${plain}"
     read -p "Do you want to continue with the modification [y/n]? ": config_confirm
     if [[ "${config_confirm}" == "y" || "${config_confirm}" == "Y" ]]; then