Merge branch 'dev' of tuonian/nginx-ui into master

.gitignore

@@ -34,4 +34,10 @@ server/data/files
 nginx-ui.tar.gz
 
 server/conf/app.local.conf
-server/data/sessions
+server/data/sessions
+
+/data/sessions
+/conf/app.local.conf
+/build/
+
+frontend/.idea

README.md

@@ -14,7 +14,8 @@
 [在线文档](https://portal.tonyandmoney.cn/common/notes/html/pages/list?type=nginx-ui)
 
 ## 快速部署
-
+镜像： **registry.cn-hangzhou.aliyuncs.com/tuon-pub/nginx-with-ui**
+该镜像以**nginx:1.25.1** 为基础打包，自带nginx，网络模式使用主机模式
 - docker-compose
 ```yaml
 
@@ -24,12 +25,13 @@ services:
   nginx-with-ui:
     image: registry.cn-hangzhou.aliyuncs.com/tuon-pub/nginx-with-ui:latest
     restart: always
-    ports:
-      - 8080:8080
-    #    network_mode: host
+ #   ports:
+ #     - 8080:8080
+    network_mode: host
     volumes:
       - ./data:/app/data
       - ./data/conf:/app/conf
+      - ./web:/data               # 映射静态资源地址
 
 ```
 - docker快速启动
@@ -125,6 +127,10 @@ docker run -itd -v ./data/:/app/data -p8080:8080 --name registry.cn-hangzhou.ali
 - 20230710：修复return 语句未渲染的问题
 - 20230719: 修复return语句在代理或者静态站点的情况下依然渲染的问题
 
+### 2023-12-19
+- 对接第三方oauth
+- docker镜像增加ca-certificates curl 软件安装
+
 ## git代理
 git config --global http.proxy http://127.0.0.1:{port}
 
@@ -134,3 +140,20 @@ git config --global https.proxy  http://127.0.0.1:{port}
 git config --global --unset http.proxy
 
 git config --global --unset https.proxy
+
+
+## desktop 桌面版本
+参考文档： https://wails.io/zh-Hans/docs/reference/project-config
+
+### 开发
+```shell
+wails dev
+```
+
+### 打包
+```shell
+## 生产版本
+wails build -webview2=embed
+## 带debug
+wails build -webview2=embed -debug
+```

app.go

@@ -0,0 +1,11 @@
+package main
+
+import (
+	"github.com/astaxie/beego"
+	_ "nginx-ui/server/init"
+)
+
+// 启动一个后台服务
+func main() {
+	beego.Run()
+}

build-server.sh

@@ -1,18 +1,17 @@
-#!/bin/bash
-CURRENT_DIR=$(cd $(dirname $0); pwd)
-
-mkdir -p ./local
-mkdir -p ./local/data/db
-cp -rf ./server/conf ./local
-cp -rf ./server/static ./local
-
-cd ./server
-export GOODS=linux
-export GOARCH=amd64
-go build -o ../local/server
-cd $CURRENT_DIR
-cp -rf ./dist/* ./local/static/web/
-rm -rf ./local/static/web/config.js
-chmod +x ./local/server
-
-tar -czf nginx-ui.tar.gz ./local
+#!/bin/bash
+CURRENT_DIR=$(cd $(dirname $0); pwd)
+
+mkdir -p local/data/db
+mkdir -p local/static/web
+
+cp -rf ./conf ./local
+
+export GOODS=linux
+export GOARCH=amd64
+go build -o local/server  app.go
+
+cp -rf ./frontend/dist/* ./local/static/web/
+rm -rf ./local/static/web/config.js
+chmod +x ./local/server
+
+tar -czf nginx-ui.tar.gz ./local

build.sh

@@ -1,3 +1,5 @@
 #/usr/bin/sh
+dos2unix docker/entrypoint.sh
+chmod +x *.sh
 export DOCKER_BUILDKIT=1
 docker build . -f docker/Dockerfile  -t registry.cn-hangzhou.aliyuncs.com/tuon-pub/nginx-ui:latest

build/windows/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "{{.Info.ProductVersion}}"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "{{.Info.ProductVersion}}",
+			"CompanyName": "{{.Info.CompanyName}}",
+			"FileDescription": "{{.Info.ProductName}}",
+			"LegalCopyright": "{{.Info.Copyright}}",
+			"ProductName": "{{.Info.ProductName}}",
+			"Comments": "{{.Info.Comments}}"
+		}
+	}
+}

build/windows/wails.exe.manifest

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
+    <assemblyIdentity type="win32" name="com.wails.{{.Name}}" version="{{.Info.ProductVersion}}.0" processorArchitecture="*"/>
+    <dependency>
+        <dependentAssembly>
+            <assemblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" language="*"/>
+        </dependentAssembly>
+    </dependency>
+    <asmv3:application>
+        <asmv3:windowsSettings>
+            <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/pm</dpiAware> <!-- fallback for Windows 7 and 8 -->
+            <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">permonitorv2,permonitor</dpiAwareness> <!-- falls back to per-monitor if per-monitor v2 is not supported -->
+        </asmv3:windowsSettings>
+    </asmv3:application>
+</assembly>

conf/app.conf

@@ -0,0 +1,35 @@
+appname = server
+httpport = 8080
+runmode = dev
+copyrequestbody = true
+
+baseApi = /nginx-ui/api
+contextpath = /nginx-ui
+
+datadir = ./data
+dbdir = ./data/db
+nginxPath = /usr/sbin/nginx
+nginxDir = /etc/nginx
+
+admin_password = qwer@1234
+reset_admin_password = true
+
+sessionon = true
+sessionprovider = file
+sessionname = nginx_session
+sessiongcmaxlifetime = 7200
+sessionproviderconfig = "./data/sessions"
+
+thirdsessionenable = false
+thirdsessionname =
+thirdsessioncheckurl =
+
+
+oauth2_client_id = XVlBzgbaiCMRAjWw111
+oauth2_client_secret = XVlBzgbaiCMRAjWw123
+oauth2_authorize_endpoint = https://api.tonyandmoney.cn/oauth/authorize
+oauth2_token_endpoint = https://api.tonyandmoney.cn/oauth/token
+oauth2_redirect_uri = http://127.0.0.1:5173/
+oauth2_scopes = "userinfo"
+oauth2_userinfo = https://api.tonyandmoney.cn/oauth/user
+oauth2_enable = true

desktop/api.go

@@ -0,0 +1,98 @@
+package desktop
+
+import (
+	"context"
+	"encoding/json"
+	"github.com/astaxie/beego/logs"
+	"nginx-ui/server/models"
+	"nginx-ui/server/service"
+)
+
+var ApiSession = Session{}
+
+var userService = service.NewUserService()
+var nginxApi = NewNginxApi()
+
+// Api struct
+type Api struct {
+	ctx context.Context
+}
+
+// NewApi NewApp creates a new App application struct
+func NewApi() *Api {
+	return &Api{}
+}
+
+// Startup is called when the app starts. The context is saved
+// so we can call the runtime methods
+func (a *Api) Startup(ctx context.Context) {
+	ApiSession.ctx = ctx
+	a.ctx = ctx
+	ApiSession.Load()
+	logs.Info("Startup finish")
+}
+
+type ApiResp struct {
+	Data *models.RespData `json:"data"`
+}
+
+// PostApi 做一个统一的适配层
+func (a *Api) PostApi(path string, req string) ApiResp {
+	logs.Info("[POST] path: %s, data: %s", path, req)
+
+	if nginxApi.Match(path) {
+		return nginxApi.PostApi(path, req)
+	}
+	var data *models.RespData
+
+	switch path {
+	case "/user/login":
+		var user *models.User
+		err := json.Unmarshal([]byte(req), user)
+		if err != nil {
+			logs.Error(err, req)
+			data = models.NewErrorResp(err)
+		}
+		data = userService.Login(user)
+		if data.Success() {
+			ApiSession.SetUser(user)
+		}
+		break
+	case "/user/register":
+		data = userService.SignUp([]byte(req))
+		break
+	}
+	return ApiResp{Data: data}
+}
+
+func (a *Api) GetApi(path string, req string) ApiResp {
+	logs.Info("[GET] path: %s, data: %s", path, req)
+	if nginxApi.Match(path) {
+		return nginxApi.GetApi(path, req)
+	}
+	var data *models.RespData
+	switch path {
+	case "/user/info":
+		data = models.SuccessResp(ApiSession.user)
+		break
+	}
+
+	logs.Info("resp:{}", data)
+	return ApiResp{Data: data}
+}
+
+func (a *Api) DeleteApi(path string, req string) ApiResp {
+	logs.Info("[DELETE] path: %s, data: %s", path, req)
+	if nginxApi.Match(path) {
+		return nginxApi.DeleteApi(path, req)
+	}
+	return ApiResp{}
+}
+
+func (a *Api) PutApi(path string, req string) ApiResp {
+	logs.Info("[PUT] path: %s, data: %s", path, req)
+	if nginxApi.Match(path) {
+		return nginxApi.PutApi(path, req)
+	}
+	return ApiResp{}
+}

desktop/handler.go

@@ -0,0 +1,84 @@
+package desktop
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	_ "io/ioutil"
+	"net/http"
+	"net/http/httputil"
+	"nginx-ui/server/config"
+	"strings"
+)
+
+type ApiHandler struct {
+	http.Handler
+	ctx     context.Context
+	api     *Api
+	proxy   *httputil.ReverseProxy
+	handler http.Handler
+}
+
+func rewriteRequestURL(req *http.Request) {
+	logger.Printf("req.URL: %s, method: %s", req.URL, req.Method)
+
+	req.URL.Scheme = "http"
+	req.URL.Host = fmt.Sprintf("localhost:%d", config.Config.Port)
+	path := req.URL.Path
+	path = strings.TrimPrefix(path, "/api")
+	req.URL.Path = path
+	logger.Printf("Loading '%s'", req.URL)
+}
+
+func NewApiHandler(baseHandler http.Handler) *ApiHandler {
+
+	var proxy *httputil.ReverseProxy
+	errSkipProxy := fmt.Errorf("skip proxying")
+	proxy = httputil.NewSingleHostReverseProxy(nil)
+	proxy.ModifyResponse = func(res *http.Response) error {
+		if baseHandler == nil {
+			return nil
+		}
+
+		if res.StatusCode == http.StatusSwitchingProtocols {
+			return nil
+		}
+
+		if res.StatusCode == http.StatusNotFound || res.StatusCode == http.StatusMethodNotAllowed {
+			return errSkipProxy
+		}
+
+		return nil
+	}
+
+	proxy.ErrorHandler = func(rw http.ResponseWriter, r *http.Request, err error) {
+		if baseHandler != nil && errors.Is(err, errSkipProxy) {
+			logger.Printf("'%s' returned not found, using AssetHandler", r.URL)
+			baseHandler.ServeHTTP(rw, r)
+		} else {
+			logger.Printf("Proxy error: %v", err)
+			rw.WriteHeader(http.StatusBadGateway)
+		}
+	}
+
+	return &ApiHandler{
+		api:     NewApi(),
+		proxy:   proxy,
+		handler: baseHandler,
+	}
+}
+
+func (h *ApiHandler) Startup(ctx context.Context) {
+	ApiSession.ctx = ctx
+	h.ctx = ctx
+	h.api.ctx = ctx
+}
+
+// 这也是一种方法，不过感觉比较复杂，需要自己处理请求参数之类的
+func (h *ApiHandler) ServeHTTP(rw http.ResponseWriter, req *http.Request) {
+	h.proxy.Director = func(request *http.Request) {
+		rewriteRequestURL(request)
+		request.Body = req.Body
+	}
+	h.proxy.ServeHTTP(rw, req)
+}

desktop/nginx.go

@@ -0,0 +1,82 @@
+package desktop
+
+import (
+	"context"
+	"github.com/astaxie/beego/logs"
+	"nginx-ui/server/models"
+	"nginx-ui/server/routers"
+	"nginx-ui/server/service"
+	"strings"
+)
+
+var logger = logs.GetLogger("NginxApi")
+
+var nginxService = service.NginxService{}
+
+// NginxApi struct
+type NginxApi struct {
+	ctx context.Context
+}
+
+// NewNginxApi creates a new App application struct
+func NewNginxApi() *NginxApi {
+	return &NginxApi{}
+}
+
+func (a *NginxApi) Match(path string) bool {
+	return strings.HasPrefix(path, "/nginx")
+}
+
+// PostApi 做一个统一的适配层
+func (a *NginxApi) PostApi(path string, req string) ApiResp {
+	logger.Printf("[POST] path: %s, data: %s", path, req)
+	var user = ApiSession.user
+	if path == routers.NginxR {
+		return ApiResp{
+			Data: nginxService.Add(user, []byte(req)),
+		}
+	}
+
+	var data *models.RespData
+
+	if result := ParsePathParam(path, routers.NginxGetR); result.Match {
+		id := result.GetParam("id")
+		data = nginxService.GetNginx(id, user)
+	} else if result := ParsePathParam(path, routers.NginxStatusR); result.Match {
+		//id := result.GetParam("id")
+	}
+	return ApiResp{Data: data}
+}
+
+func (a *NginxApi) GetApi(path string, req string) ApiResp {
+	logger.Printf("[GET] path: %s, data: %s", path, req)
+	var user = ApiSession.user
+	if path == routers.NginxR {
+		return ApiResp{
+			Data: nginxService.ListNginx(user),
+		}
+	}
+	if r := ParsePathParam(path, routers.NginxGetR); r.Match {
+		id := r.GetParam("id")
+		logs.Info("param: ", r, id)
+		return ApiResp{
+			Data: nginxService.GetNginx(id, user),
+		}
+	}
+
+	var data *models.RespData
+
+	logs.Info("resp:{}", data)
+	return ApiResp{Data: data}
+}
+
+func (a *NginxApi) DeleteApi(path string, req string) ApiResp {
+	logger.Printf("[DELETE] path: %s, data: %s", path, req)
+
+	return ApiResp{}
+}
+
+func (a *NginxApi) PutApi(path string, req string) ApiResp {
+	logger.Printf("[PUT] path: %s, data: %s", path, req)
+	return ApiResp{}
+}

desktop/session.go

@@ -0,0 +1,51 @@
+package desktop
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"nginx-ui/server/models"
+	"os"
+)
+
+type Session struct {
+	ctx context.Context
+	//缓存当前的用户信息
+	user *models.User
+}
+
+func (s *Session) SetUser(user *models.User) {
+	s.user = user
+	j, err := json.Marshal(user)
+	if err != nil {
+		fmt.Println("json fail", err)
+		return
+	}
+	err = os.MkdirAll("./data/sessions", 0666)
+	if err != nil {
+		fmt.Printf("mkdir dir fail: %s\n\n", err)
+		return
+	}
+	err = os.WriteFile("./data/sessions/local", j, 0666)
+	if err != nil {
+		fmt.Println("save session fail", err)
+	} else {
+		fmt.Printf("save session ok: %s\n", user.Account)
+	}
+}
+
+func (s *Session) Load() {
+	by, err := os.ReadFile("./data/sessions/local")
+	if err != nil {
+		fmt.Printf("session read fail: %s\n", err)
+		return
+	}
+	var user *models.User
+	err = json.Unmarshal(by, &user)
+	if err != nil {
+		fmt.Printf("session read fail: %s\n", err)
+		return
+	}
+	s.user = user
+	fmt.Printf("session load: %s\n", user.Account)
+}

desktop/utils.go

@@ -0,0 +1,74 @@
+package desktop
+
+import (
+	"encoding/json"
+	"regexp"
+	"strings"
+)
+
+type MatchResult struct {
+	Params  map[string]string `json:"params"`
+	Match   bool              `json:"match"`
+	Origin  string            `json:"origin"`
+	Pattern string            `json:"pattern"`
+}
+
+func (r *MatchResult) String() string {
+	b, err := json.Marshal(r)
+	if err != nil {
+		return ""
+	}
+	return string(b)
+}
+
+func (r *MatchResult) GetParam(key string) string {
+	return r.Params[key]
+}
+
+func ParseKey(pattern string) string {
+	index := strings.Index(pattern, "/:")
+	if index < 0 || index > len(pattern)-2 {
+		return ""
+	}
+	str := pattern[index+1:]
+	end := strings.Index(str, "/")
+	if end == -1 {
+		end = len(str)
+	}
+	key := str[0:end]
+	return key
+}
+
+// ParsePathParam 解析路径中的 :id 字段
+func ParsePathParam(path string, pattern string) *MatchResult {
+
+	var result = &MatchResult{
+		Match:  false,
+		Params: map[string]string{},
+		Origin: path,
+	}
+	var keys []string
+	var reg = pattern
+	for i := 0; true; i++ {
+		key := ParseKey(reg)
+		if len(key) == 0 {
+			break
+		}
+		keys = append(keys, key[1:])
+		reg = strings.ReplaceAll(reg, key, "(.+)?")
+	}
+
+	result.Pattern = reg
+
+	compile := regexp.MustCompile(reg)
+	match := compile.FindStringSubmatch(path)
+	if len(match) < 1 {
+		return result
+	}
+	result.Match = true
+	for i := 1; i < len(match); i++ {
+		k := keys[i-1]
+		result.Params[k] = match[i]
+	}
+	return result
+}

desktop/utils_test.go

@@ -0,0 +1,20 @@
+package desktop
+
+import (
+	"fmt"
+	"testing"
+)
+
+// 解析路径中的 :id 字段
+func TestParseId(t *testing.T) {
+
+	fmt.Println(ParsePathParam("/nginx/10", "/nginx/:id"))
+	fmt.Println(ParsePathParam("/nginx/1/refresh", "/nginx/:id/refresh"))
+	fmt.Println(ParsePathParam("/nginx/134/refresh", "/nginx/:id/refresh"))
+	fmt.Println(ParsePathParam("/nginx/125/http/refresh", "/nginx/:id/http/refresh"))
+	fmt.Println(ParsePathParam("/nginx/125/http/refresh", "/nginx/:id/http"))
+	fmt.Println(ParsePathParam("/nginx/125/admin/http/refresh", "/nginx/:id/:user/http/refresh"))
+
+	fmt.Println(ParsePathParam("/nginx/123/wew/789", "/nginx/:id"))
+
+}

docker-compose-dev.yaml

@@ -8,10 +8,7 @@ services:
     restart: always
     container_name: nginx-with-ui
     ports:
-      - 8081:8080
-      - 9090:9090
-      - 9080:80
-      - 9443:443
+      - 38080:38080
 #    network_mode: host
     volumes:
       - ./docker/data:/app/data

docker/Dockerfile

@@ -1,29 +1,31 @@
 FROM golang:1.20 AS builder
 WORKDIR /app
-COPY server .
+COPY . .
 ARG GOODS=linux
 ARG GOARCH=amd64
 
 RUN go env -w GOPROXY=https://goproxy.cn,direct
 
 RUN --mount=type=cache,target=/go --mount=type=cache,target=/root/.cache/go-build\
-    GOODS=${GOODS} GOARCH=${GOARCH}  go build -o /app/app
+    GOODS=${GOODS} GOARCH=${GOARCH} go build -o /app/app  app.go
 
 FROM debian:sid-slim
 
+RUN mkdir -p /app/static/web
+
 WORKDIR /app
 COPY --from=builder /app/app /app
-COPY server/conf /app/conf
-COPY server/data  /app/data
+COPY conf /app/conf
+COPY data  /app/data
 #COPY ../server/static  /app/static
-COPY dist  /app/static/web
+COPY frontend/dist  /app/static/web
 
 RUN chmod +x /app/app
 
 RUN rm -rf /app/static/web/config.js
 
-#RUN sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list
-#RUN sed -i 's/security.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list
-#RUN echo "deb http://mirrors.ustc.edu.cn/debian sid main" >> /etc/apt/sources.list
+RUN sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list.d/*
+RUN sed -i 's/security.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list.d/*
+RUN apt -qq update && apt -qq install -y --no-install-recommends ca-certificates curl
 
 ENTRYPOINT ["/app/app"]

docker/Dockerfile-with-nginx

@@ -1,30 +1,30 @@
 FROM golang:1.20 AS builder
 WORKDIR /app
-COPY server .
+COPY . .
 ARG GOODS=linux
 ARG GOARCH=amd64
 
 RUN go env -w GOPROXY=https://goproxy.cn,direct
 
 RUN --mount=type=cache,target=/go --mount=type=cache,target=/root/.cache/go-build \
-    GOODS=${GOODS} GOARCH=${GOARCH}  go build -o /app/app
+    GOODS=${GOODS} GOARCH=${GOARCH}  go build -o /app/app  app.go
 
 FROM nginx:1.25.1
 
 WORKDIR /app
 COPY --from=builder /app/app /app
-COPY server/conf /app/conf
-COPY server/data  /app/data
+COPY conf /app/conf
+COPY data  /app/data
 #COPY ../server/static  /app/static
-COPY dist  /app/static/web
+COPY frontend/dist  /app/static/web
 COPY docker/entrypoint.sh /entrypoint.sh
 
 RUN chmod +x /entrypoint.sh /app/app
 
 RUN rm -rf /app/static/web/config.js
 RUN rm -rf /etc/nginx/conf.d
-#RUN sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list
-#RUN sed -i 's/security.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list
-#RUN echo "deb http://mirrors.ustc.edu.cn/debian sid main" >> /etc/apt/sources.list
+RUN sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list.d/*
+RUN sed -i 's/security.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list.d/*
+RUN apt -qq update && apt -qq install -y --no-install-recommends ca-certificates curl
 
 ENTRYPOINT ["/entrypoint.sh"]

frontend/.env.production

@@ -0,0 +1 @@
+VITE_BASE_API=/

.eslintrc.cjs → frontend/.eslintrc.cjs

@@ -1,16 +1,16 @@
-module.exports = {
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': 'warn',
-      '@typescript-eslint/ban-ts-comment':"warn",
-      '@typescript-eslint/no-explicit-any': 'off'
-  },
-}
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+      '@typescript-eslint/ban-ts-comment':"warn",
+      '@typescript-eslint/no-explicit-any': 'off'
+  },
+}

LICENSE → frontend/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2023 niantuo
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2023 niantuo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

frontend/README.md

@@ -0,0 +1,157 @@
+# nginx 可视化界面
+项目的主要功能未nginx的配置管理，通过可视化的界面去配置nginx，所有的配置渲染逻辑都在前端进行，通过后台服务渲染到部署nginx的服务器上；\
+由于nginx的配置实在是太多了，只是可视化了部分常用的功能；\
+可以用于开发环境，需要经常变动一些配置信息的场景.
+
+- 项目的web前端基于react开发，使用vite构建工具；
+- 后端使用golang语言开发（菜鸟学习中）
+
+## demos and docs
+[在线demo](http://demos.tonyandmoney.cn/nginx-ui/#/) \
+账号： demo \
+密码： demo
+
+[在线文档](https://portal.tonyandmoney.cn/common/notes/html/pages/list?type=nginx-ui)
+
+## 快速部署
+
+- docker-compose
+```yaml
+
+version: "3"
+
+services:
+  nginx-with-ui:
+    image: registry.cn-hangzhou.aliyuncs.com/tuon-pub/nginx-with-ui:latest
+    restart: always
+    ports:
+      - 8080:8080
+    #    network_mode: host
+    volumes:
+      - ./data:/app/data
+      - ./data/conf:/app/conf
+
+```
+- docker快速启动
+
+```shell
+docker run -itd --name nginx-ui -p8080:8080 -v {datadir}:/app/data -v {confdir}:/app/conf registry.cn-hangzhou.aliyuncs.com/tuon-pub/nginx-with-ui:latest
+```
+
+- 说明
+  - 8080为nginx-ui的服务端口，其余则为nginx代理端口，自定义或者直接使用 network_mode: host 模式即可
+  - 启动成功后，在登录界面，先注册账号后，使用注册的账号登录即可使用，管理员账号可以查看docker的启动日志查看
+  - 配置文件参考[在线文档](https://portal.tonyandmoney.cn/common/notes/html/pages/list?type=nginx-ui)
+
+
+## 构建
+项目构建基于docker-compose， 分为两种情况
+- 基础镜像为nginx
+  容器自带nginx，启用web服务
+    ```
+  docker-compose -f ./docker-compose-dev.yaml build
+  ```
+- 基础镜像为debian:sid-slim
+  镜像不包含nginx，仅启动web服务
+    ```
+  docker-compose -f ./docker-compose.yaml build
+  ```
+前端在本地构建，以上构建方式不包含前端
+
+## 部署
+### 使用docker部署
+- 将docker-compose.yaml 或者 docker-compose-dev.yaml 复制到自己的文件夹下
+修改编排中的volumes，更改目录映射，容器内 /app/data 为目录持久化数据所在目录。
+```shell
+docker-compose -f ./docker-compose.yaml up -d
+```
+使用IP:8080端口访问
+或者
+```shell
+docker run -itd -v ./data/:/app/data --network host --name registry.cn-hangzhou.aliyuncs.com/tuon-pub/nginx-with-ui:latest
+# or
+docker run -itd -v ./data/:/app/data -p8080:8080 --name registry.cn-hangzhou.aliyuncs.com/tuon-pub/nginx-ui
+```
+
+### 本地部署
+```shell
+# 下载构建产物，解压
+
+```
+
+## 截图
+  ![实例列表](./docs/images/list.png)
+
+  ![实例信息](./docs/images/dashboard.png)
+
+  ![负载均衡](./docs/images/upstream.png)
+
+  ![虚拟主机](./docs/images/server.png)
+
+## 参考文档
+配置部分参考一下文档：
+
+- [Nginx Rewrite](https://blog.csdn.net/qq1356059950/article/details/125014248)
+- [nginx负载均衡](https://zhuanlan.zhihu.com/p/557994010?utm_id=0)
+
+
+## 构建部署
+以下操作进入到项目根目录执行
+### 构建
+ docker-compose build 或者执行脚本sh build.sh
+
+
+
+## nginx-ui优化点
+- [x] nginx实例列表界面，添加完实例之后，弹窗没有关闭，且没有自动刷新当前界面
+- [x] server或者location的rewrite是否配置的判定问题
+- [x] nginx 实例设置时，将需要的目录文件创建好
+- [x] 新增虚拟主机或者其它新增界面，无法重置当前的表单，需要结合planning-tools，增加重置功能
+- [x] 证书管理，将证书信息保存到数据库，方便做nginx服务前移，不能直接写文件，可以增加从文件夹同步的功能
+- [x] 后端docker启动时，默认启动本地的NGINX，docker镜像问题
+- [ ] 很多界面的默认值问题，优化初始值
+- [x] nginx.conf默认值问题，每次容器重启都会被重置 
+- [x] 增强证书管理：添加时间，有效期，域名
+- [x] 增加一些快捷按钮，比如转发真实IP，支持websocket，跨域设置等
+- [x] 考虑是否增加静态站点的文件上传功能
+- [ ] 考虑多租户的功能，目前前端使用的是nginx auth的授权认证，该方式是否能传递用户id作为查询数据的条件
+- [ ] 考虑增加jwt,basic授权
+
+### 2023-07-06
+- [ ] [ngx_http_auth_request_module](https://nginx.org/en/docs/http/ngx_http_auth_request_module.html)
+    鉴权模块的实现
+
+## 更新日志
+- 20230710：修复return 语句未渲染的问题
+- 20230719: 修复return语句在代理或者静态站点的情况下依然渲染的问题
+
+### 2023-12-19
+- 对接第三方oauth
+- docker镜像增加ca-certificates curl 软件安装
+
+## git代理
+git config --global http.proxy http://127.0.0.1:{port}
+
+git config --global https.proxy  http://127.0.0.1:{port}
+
+
+git config --global --unset http.proxy
+
+git config --global --unset https.proxy
+
+
+## desktop 桌面版本
+参考文档： https://wails.io/zh-Hans/docs/reference/project-config
+
+### 开发
+```shell
+wails dev
+```
+
+### 打包
+```shell
+## 生产版本
+wails build -webview2=embed
+## 带debug
+wails build -webview2=embed -debug
+```

public/config.js → frontend/dist/config.js

@@ -1,5 +1,5 @@
-// config.js
-window.CONFIG = {
-    baseApi: '/api/nginx-ui/api',
-    SSO: true
-}
+// config.js
+window.CONFIG = {
+    baseApi: '/api/nginx-ui/api',
+    SSO: true
+}

dist/index.html → frontend/dist/index.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NginxUI</title>
     <script type="application/javascript" src="./config.js"></script>
-    <script crossorigin="">import('/nginx-ui/assets/index-49244724.js').finally(() => {
+    <script crossorigin="">import('/nginx-ui/assets/index-1fb20f5f.js').finally(() => {
             
     const qiankunLifeCycle = window.moudleQiankunAppLifeCycles && window.moudleQiankunAppLifeCycles['nginx-ui'];
     if (qiankunLifeCycle) {

index.html → frontend/index.html

@@ -1,14 +1,14 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>NginxUI</title>
-    <script type="application/javascript" src="./config.js"></script>
-  </head>
-  <body>
-    <div id="nginx_ui_root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NginxUI</title>
+    <script type="application/javascript" src="./config.js"></script>
+  </head>
+  <body>
+    <div id="nginx_ui_root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json → frontend/package.json

@@ -1,66 +1,68 @@
-{
-  "name": "nginx-ui-react",
-  "private": false,
-  "version": "0.1.0",
-  "license": "MIT",
-  "author": {
-    "email": "976056042@qq.com",
-    "name": "tuonina"
-  },
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build --base=/nginx-ui/",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@ant-design/icons": "^5.1.4",
-    "@mdx-js/mdx": "^2.0.0-rc.2",
-    "@mdx-js/react": "^2.3.0",
-    "@mdx-js/rollup": "^2.3.0",
-    "@reduxjs/toolkit": "^1.9.5",
-    "antd": "4.x",
-    "artt-template": "^4.13.6",
-    "classnames": "^2.3.2",
-    "dayjs": "^1.11.9",
-    "events": "^3.3.0",
-    "history": "^5.3.0",
-    "install": "^0.13.0",
-    "jszip": "^3.10.1",
-    "less": "^4.1.3",
-    "lodash": "^4.17.21",
-    "npm": "^9.8.0",
-    "planning-tools": "^0.1.6",
-    "query-string": "^8.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.1.1",
-    "react-router": "^6.14.0",
-    "react-router-dom": "^6.14.0",
-    "redux-persist": "^6.0.0"
-  },
-  "devDependencies": {
-    "@types/events": "^3.0.0",
-    "@types/lodash": "^4.14.195",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react-swc": "^3.0.0",
-    "consola": "^3.1.0",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9",
-    "vite-plugin-md": "^0.21.5",
-    "vite-plugin-mdx": "^3.5.11",
-    "vite-plugin-qiankun": "^1.0.15",
-    "vite-plugin-require-transform": "^1.0.20",
-    "vite-plugin-style-import": "^2.0.0"
-  },
-  "peerDependencies": {
-    "artt-template": "^4.13.6"
-  }
-}
+{
+  "name": "nginx-ui-react",
+  "private": false,
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": {
+    "email": "976056042@qq.com",
+    "name": "tuonina"
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:desktop": "vite --mode=desktop",
+    "build": "tsc && vite build --base=/nginx-ui/",
+    "build:desktop": "tsc && vite build --base=/ --mode=desktop",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "@mdx-js/mdx": "^2.0.0-rc.2",
+    "@mdx-js/react": "^2.3.0",
+    "@mdx-js/rollup": "^2.3.0",
+    "@reduxjs/toolkit": "^1.9.5",
+    "antd": "4.x",
+    "artt-template": "^4.13.6",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.9",
+    "events": "^3.3.0",
+    "history": "^5.3.0",
+    "install": "^0.13.0",
+    "jszip": "^3.10.1",
+    "less": "^4.1.3",
+    "lodash": "^4.17.21",
+    "npm": "^9.8.0",
+    "planning-tools": "^0.1.6",
+    "query-string": "^8.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.1",
+    "react-router": "^6.14.0",
+    "react-router-dom": "^6.14.0",
+    "redux-persist": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/events": "^3.0.0",
+    "@types/lodash": "^4.14.195",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "consola": "^3.1.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9",
+    "vite-plugin-md": "^0.21.5",
+    "vite-plugin-mdx": "^3.5.11",
+    "vite-plugin-qiankun": "^1.0.15",
+    "vite-plugin-require-transform": "^1.0.20",
+    "vite-plugin-style-import": "^2.0.0"
+  },
+  "peerDependencies": {
+    "artt-template": "^4.13.6"
+  }
+}

frontend/package.json.md5

@@ -0,0 +1 @@
+139e2a18d41f6061014aff378b6e48f2

dist/config.js → frontend/public/config.js

@@ -1,5 +1,5 @@
-// config.js
-window.CONFIG = {
-    baseApi: '/api/nginx-ui/api',
-    SSO: true
-}
+// config.js
+window.CONFIG = {
+    baseApi: '/api/nginx-ui/api',
+    SSO: true
+}

src/App.css → frontend/src/App.css

@@ -1,41 +1,41 @@
-#nginx_ui_root {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+#nginx_ui_root {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/App.tsx → frontend/src/App.tsx

@@ -1,25 +1,25 @@
-import './App.css'
-import {MyRouter} from "./routes";
-import { Provider } from 'react-redux';
-import { persistor, store } from './store';
-import {PersistGate} from "redux-persist/integration/react";
-import {ConfigProvider} from "antd";
-import zhCN from 'antd/lib/locale/zh_CN';
-import 'antd/dist/antd.css'
-import 'planning-tools/dist/umd/planning-tools.min.css'
-
-function App() {
-    return (
-    <>
-      <Provider store={store}>
-        <PersistGate loading persistor={persistor}>
-          <ConfigProvider locale={zhCN}>
-            <MyRouter />
-          </ConfigProvider>
-        </PersistGate>
-      </Provider>
-    </>
-  )
-}
-
-export default App
+import './App.css'
+import {MyRouter} from "./routes";
+import { Provider } from 'react-redux';
+import { persistor, store } from './store';
+import {PersistGate} from "redux-persist/integration/react";
+import {ConfigProvider} from "antd";
+import zhCN from 'antd/lib/locale/zh_CN';
+import 'antd/dist/antd.css'
+import 'planning-tools/dist/umd/planning-tools.min.css'
+
+function App() {
+    return (
+    <>
+      <Provider store={store}>
+        <PersistGate loading persistor={persistor}>
+          <ConfigProvider locale={zhCN}>
+            <MyRouter />
+          </ConfigProvider>
+        </PersistGate>
+      </Provider>
+    </>
+  )
+}
+
+export default App

src/adapter/index.js → frontend/src/adapter/index.js

@@ -1,27 +1,27 @@
-/**
- * 神奇了，这个东西居然没有了，可能跟打包工具有关系
- */
-if (!window.caches) {
-    window.caches = {
-        delete(cacheName) {
-            return false
-        },
-        has(cacheName) {
-            return false
-        },
-        keys() {
-            return []
-        },
-        /**
-         *
-         * @param request RequestInfo | URL
-         * @param options MultiCacheQueryOptions
-         */
-        match(request, options) {
-
-        },
-        open(cacheName) {
-
-        }
-    }
-}
+/**
+ * 神奇了，这个东西居然没有了，可能跟打包工具有关系
+ */
+if (!window.caches) {
+    window.caches = {
+        delete(cacheName) {
+            return false
+        },
+        has(cacheName) {
+            return false
+        },
+        keys() {
+            return []
+        },
+        /**
+         *
+         * @param request RequestInfo | URL
+         * @param options MultiCacheQueryOptions
+         */
+        match(request, options) {
+
+        },
+        open(cacheName) {
+
+        }
+    }
+}

frontend/src/api/desktop.api.ts

@@ -0,0 +1,38 @@
+// import {AxiosInstance, AxiosRequestConfig} from 'axios'
+// import {isDesktop} from "../config/consts.ts";
+// import * as DesktopApi from "../../wailsjs/go/desktop/Api";
+// import {store} from "../store";
+// import {UserActions} from "../store/slice/user.ts";
+// import {desktop} from "../../wailsjs/go/models.ts";
+//
+//
+// const checkResp = (resp: desktop.ApiResp) => {
+//     if (resp.data?.code == 401){
+//         store.dispatch(UserActions.clearUser())
+//     }
+//     return resp
+// }
+//
+// // @ts-ignore
+// export const checkDesktopApi = (request: AxiosInstance)=>{
+//     if (!isDesktop){
+//         return
+//     }
+//     // @ts-ignore
+//     request.get = (url: string, config: AxiosRequestConfig<any>)=> {
+//         const data = config?.params ? JSON.stringify(config.params) : "{}"
+//         return DesktopApi.GetApi(url, data).then(res=>checkResp(res))
+//     }
+//     // @ts-ignore
+//     request.post = (url: string, data?: any, config?: AxiosRequestConfig<any>) =>{
+//         return DesktopApi.PostApi(url, data? JSON.stringify(data): "{}").then(res=>checkResp(res))
+//     }
+//     // @ts-ignore
+//     request.delete = (url: string, config?: AxiosRequestConfig<any>) => {
+//         return DesktopApi.DeleteApi(url, config?.data?JSON.stringify(config.data):"{}").then(res=>checkResp(res))
+//     }
+//     // @ts-ignore
+//     request.put = (url: string, data?: any, config?: AxiosRequestConfig<any>) => {
+//         return DesktopApi.PutApi(url, data ? JSON.stringify(data): "{}").then(res=>checkResp(res))
+//     }
+// }

src/api/nginx.ts → frontend/src/api/nginx.ts

@@ -1,127 +1,127 @@
-import request from "./request.ts";
-import {BaseResp, INginxCerts, IServerHost} from "../models/api.ts";
-import {INginx, INginxServer} from "../models/nginx.ts";
-import {createServer, createServerHost} from "../pages/nginx/utils/nginx.ts";
-
-
-type RefreshHttpData = {
-  id: number
-  httpConf: string
-  httpData: string
-}
-
-
-export const NginxApis= {
-
-  findAll: () => request.get<BaseResp<INginx[]>>('/nginx'),
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  updateOrAdd: (data: Partial<INginx>) => {
-    if (data.id){
-      return request.post<BaseResp<INginx>>(`/nginx/${data.id}`, data, { disableErrorMsg: true, timeout: 60000 } as any)
-    }else {
-      return request.post<BaseResp<INginx>>('/nginx', data, { disableErrorMsg: true, timeout: 60000 } as any)
-    }
-  },
-  /**
-   * 同步配置文件到本地，仅需要传递id  和httpConf, httpData 三个参数
-   * @param nginx
-   */
-  refreshHttp: (nginx: RefreshHttpData) => {
-    return request.post(`/nginx/${nginx.id}/http/refresh`, nginx, { timeout: 60000 })
-  },
-  getNginx: (id:number | string) => request.get<BaseResp<{nginx: INginx, servers: IServerHost[]}>>(`/nginx/${id}`),
-  delNginx: (id:number) => request.delete(`/nginx/${id}`),
-  status: (id:number) => request.post(`/nginx/${id}/status`, { }, { timeout: 60000 }),
-  startNginx: (id:number) => request.post(`/nginx/${id}/start`, { }, { timeout: 60000 }),
-  stopNginx: (id:number) => request.post(`/nginx/${id}/stop`, { }, { timeout: 60000 }),
-
-  /**
-   * 不更改配置文件，仅保存数据，方便某些特殊情况，一直手动修改配置文件
-   * @param nginx
-   * @param server
-   */
-  // add or update
-  updateServer: (nginx: INginx,server: Partial<INginxServer>) => {
-    const serverHost: Partial<IServerHost> = createServerHost(nginx,server);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return request.post<BaseResp<IServerHost>>(`/nginx/${nginx.id}/server`,serverHost, { disableErrorMsg: true } as any)
-        .then(({data})=>{
-          if (data.data){
-            return createServer(data.data)
-          }
-          return Promise.reject(data)
-        })
-  },
-  /**
-   * 更改配置文件，保存数据
-   * @param nginx
-   * @param server
-   */
-  refreshServer: (server: Partial<IServerHost>) => {
-    return request.post(`/nginx/${server.nginxId}/server/refresh`, server, { timeout: 60000 })
-  },
-  deleteServer: (nginxId: number,server: INginxServer) => request.delete(`/nginx/${nginxId}/server`,{ data: { id: server.id}}),
-  /**
-   * 获取证书信息，不传name，则返回所有证书文件信息，传了name，则返回该证书的内容
-   * @param id
-   * @param name
-   */
-  getCerts: (id: number,name?: string) => request.get(`/nginx/${id}/certs`, { params: { name }}),
-  /**
-   * 保存证书信息
-   * @param id
-   * @param data
-   */
-  saveCerts: (id: number,data: INginxCerts) => request.post(`/nginx/${id}/certs`, data),
-  delCerts: (nginxId: number,id: number) => request.delete(`/nginx/${nginxId}/certs`, { params: { id } }),
-  /**
-   * 从配置的数据目录中同步
-   * @param id
-   * @param name
-   */
-  syncCerts: (id: number) => request.post(`/nginx/${id}/certs/sync`),
-
-}
-
-
-export type IDeployReq  ={
-  key: string
-  nginxId: number
-  /**
-   * 部署目录，资源部署目录，一般是root+name 或者是alias
-   */
-  dir: string
-  /**
-   * 是否清空文件夹再部署
-   */
-  clear?: boolean
-  cmd?: string
-}
-/**
- * 文件上传
- */
-export const uploadApis = {
-  uploadFile: (entry: FileSystemFileEntry, id: string) => {
-    return new Promise<File>((resolve, reject) => {
-      entry.file(function (f){
-        resolve(f)
-      },function (err){
-        reject(err)
-      })
-    }).then(file=>{
-      const formData = new FormData()
-      formData.append("file", file)
-      formData.append("Path", entry.fullPath)
-      formData.append("Key", id)
-      return request.post('/file',formData, {
-        withCredentials: true,
-        headers: {
-          'Content-type' : 'multipart/form-data'
-        }
-      })
-    })
-  },
-  deploy:(data: IDeployReq)=>request.post(`/nginx/${data.nginxId}/file/deploy`, data, {timeout: 120000}),
-}
+import request from "./request.ts";
+import {BaseResp, INginxCerts, IServerHost} from "../models/api.ts";
+import {INginx, INginxServer} from "../models/nginx.ts";
+import {createServer, createServerHost} from "../pages/nginx/utils/nginx.ts";
+
+
+type RefreshHttpData = {
+  id: number
+  httpConf: string
+  httpData: string
+}
+
+
+export const NginxApis= {
+
+  findAll: () => request.get<BaseResp<INginx[]>>('/nginx'),
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  updateOrAdd: (data: Partial<INginx>) => {
+    if (data.id){
+      return request.post<BaseResp<INginx>>(`/nginx/${data.id}`, data, { disableErrorMsg: true, timeout: 60000 } as any)
+    }else {
+      return request.post<BaseResp<INginx>>('/nginx', data, { disableErrorMsg: true, timeout: 60000 } as any)
+    }
+  },
+  /**
+   * 同步配置文件到本地，仅需要传递id  和httpConf, httpData 三个参数
+   * @param nginx
+   */
+  refreshHttp: (nginx: RefreshHttpData) => {
+    return request.post(`/nginx/${nginx.id}/http/refresh`, nginx, { timeout: 60000 })
+  },
+  getNginx: (id:number | string) => request.get<BaseResp<{nginx: INginx, servers: IServerHost[]}>>(`/nginx/${id}`),
+  delNginx: (id:number) => request.delete(`/nginx/${id}`),
+  status: (id:number) => request.post(`/nginx/${id}/status`, { }, { timeout: 60000 }),
+  startNginx: (id:number) => request.post(`/nginx/${id}/start`, { }, { timeout: 60000 }),
+  stopNginx: (id:number) => request.post(`/nginx/${id}/stop`, { }, { timeout: 60000 }),
+
+  /**
+   * 不更改配置文件，仅保存数据，方便某些特殊情况，一直手动修改配置文件
+   * @param nginx
+   * @param server
+   */
+  // add or update
+  updateServer: (nginx: INginx,server: Partial<INginxServer>) => {
+    const serverHost: Partial<IServerHost> = createServerHost(nginx,server);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return request.post<BaseResp<IServerHost>>(`/nginx/${nginx.id}/server`,serverHost, { disableErrorMsg: true } as any)
+        .then(({data})=>{
+          if (data.data){
+            return createServer(data.data)
+          }
+          return Promise.reject(data)
+        })
+  },
+  /**
+   * 更改配置文件，保存数据
+   * @param nginx
+   * @param server
+   */
+  refreshServer: (server: Partial<IServerHost>) => {
+    return request.post(`/nginx/${server.nginxId}/server/refresh`, server, { timeout: 60000 })
+  },
+  deleteServer: (nginxId: number,server: INginxServer) => request.delete(`/nginx/${nginxId}/server`,{ data: { id: server.id}}),
+  /**
+   * 获取证书信息，不传name，则返回所有证书文件信息，传了name，则返回该证书的内容
+   * @param id
+   * @param name
+   */
+  getCerts: (id: number,name?: string) => request.get(`/nginx/${id}/certs`, { params: { name }}),
+  /**
+   * 保存证书信息
+   * @param id
+   * @param data
+   */
+  saveCerts: (id: number,data: INginxCerts) => request.post(`/nginx/${id}/certs`, data),
+  delCerts: (nginxId: number,id: number) => request.delete(`/nginx/${nginxId}/certs`, { params: { id } }),
+  /**
+   * 从配置的数据目录中同步
+   * @param id
+   * @param name
+   */
+  syncCerts: (id: number) => request.post(`/nginx/${id}/certs/sync`),
+
+}
+
+
+export type IDeployReq  ={
+  key: string
+  nginxId: number
+  /**
+   * 部署目录，资源部署目录，一般是root+name 或者是alias
+   */
+  dir: string
+  /**
+   * 是否清空文件夹再部署
+   */
+  clear?: boolean
+  cmd?: string
+}
+/**
+ * 文件上传
+ */
+export const uploadApis = {
+  uploadFile: (entry: FileSystemFileEntry, id: string) => {
+    return new Promise<File>((resolve, reject) => {
+      entry.file(function (f){
+        resolve(f)
+      },function (err){
+        reject(err)
+      })
+    }).then(file=>{
+      const formData = new FormData()
+      formData.append("file", file)
+      formData.append("Path", entry.fullPath)
+      formData.append("Key", id)
+      return request.post('/file',formData, {
+        withCredentials: true,
+        headers: {
+          'Content-type' : 'multipart/form-data'
+        }
+      })
+    })
+  },
+  deploy:(data: IDeployReq)=>request.post(`/nginx/${data.nginxId}/file/deploy`, data, {timeout: 120000}),
+}

src/api/request.ts → frontend/src/api/request.ts

@@ -1,74 +1,77 @@
-import axios, {AxiosResponse} from 'axios';
-import {BaseResp} from "../models/api.ts";
-import {Message, Notify} from "planning-tools";
-import {store} from "../store";
-import {UserActions} from "../store/slice/user.ts";
-console.log('env', import.meta.env)
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-const CONFIG = window.CONFIG;
-if (!CONFIG.baseApi){
-  CONFIG.baseApi = '/api'
-}
-
-/**
- * 支持网络请求
- * @type {AxiosInstance}
- */
-// create an axios instance
-const request = axios.create({
-  baseURL: CONFIG.baseApi,
-  withCredentials: true, // send cookies when cross-domain requests
-  timeout: 10000, // request timeout
-});
-
-request.interceptors.request.use(
-  (config) => {
-    if (!config.headers){
-      config.headers = {}
-    }
-    config.headers["Authorization"] = "token"
-    return config;
-  },
-  (error) => {
-    // do something with request error
-    console.log(error); // for debug
-    return Promise.reject(error);
-  },
-);
-
-request.interceptors.response.use((resp: AxiosResponse<BaseResp>)=>{
-  const disableErrorMsg = (resp.config as any)['disableErrorMsg']
-  if (resp.data && resp.data.code == 0){
-    return resp
-  }else if (resp.data) {
-    (!disableErrorMsg) && Notify.warn(resp.data.msg)
-    return Promise.reject(resp.data)
-  }else {
-    (!disableErrorMsg) && Notify.warn("请求错误")
-    return resp
-  }
-},error => {
-  let errData: any = {
-    code: 10
-  }
-  const disableErrorMsg = (error.request?.config as any)?.['disableErrorMsg']
-  if (error.response && error.response.data){
-    errData = error.response.data
-  }else if (error.message){
-    errData.msg = error.message;
-  }
-  if (!errData.code){
-    errData.msg = 'request fail'
-  }
-  (!disableErrorMsg)&& Message.error(errData.msg)
-  console.log('status', error.response?.status)
-  if (error.response.status == 401){
-    store.dispatch(UserActions.clearUser())
-  }
-  return Promise.reject(errData)
-})
-
-
-export default request
+import axios, {AxiosResponse} from 'axios';
+import {BaseResp} from "../models/api.ts";
+import {Message, Notify} from "planning-tools";
+import {store} from "../store";
+import {UserActions} from "../store/slice/user.ts";
+// import {checkDesktopApi} from "./desktop.api.ts";
+console.log('env', import.meta.env)
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const CONFIG = window.CONFIG;
+if (!CONFIG.baseApi){
+  CONFIG.baseApi = '/api'
+}
+
+/**
+ * 支持网络请求
+ * @type {AxiosInstance}
+ */
+// create an axios instance
+const request = axios.create({
+  baseURL: CONFIG.baseApi,
+  withCredentials: true, // send cookies when cross-domain requests
+  timeout: 10000, // request timeout
+});
+
+request.interceptors.request.use(
+  (config) => {
+    if (!config.headers){
+      config.headers = {}
+    }
+    config.headers["Authorization"] = "token"
+    return config;
+  },
+  (error) => {
+    // do something with request error
+    console.log(error); // for debug
+    return Promise.reject(error);
+  },
+);
+
+request.interceptors.response.use((resp: AxiosResponse<BaseResp>)=>{
+  const disableErrorMsg = (resp.config as any)['disableErrorMsg']
+  if (resp.data && resp.data.code == 0){
+    return resp
+  }else if (resp.data) {
+    (!disableErrorMsg) && Notify.warn(resp.data.msg)
+    return Promise.reject(resp.data)
+  }else {
+    (!disableErrorMsg) && Notify.warn("请求错误")
+    return resp
+  }
+},error => {
+  let errData: any = {
+    code: 10
+  }
+  const disableErrorMsg = (error.request?.config as any)?.['disableErrorMsg']
+  if (error.response && error.response.data){
+    errData = error.response.data
+  }else if (error.message){
+    errData.msg = error.message;
+  }
+  if (!errData.code){
+    errData.msg = 'request fail'
+  }
+  (!disableErrorMsg)&& Message.error(errData.msg)
+  console.log('status', error.response?.status)
+  if (error.response.status == 401){
+    store.dispatch(UserActions.clearUser())
+  }
+  return Promise.reject(errData)
+})
+
+// checkDesktopApi(request)
+
+
+export default request

src/api/user.ts → frontend/src/api/user.ts

@@ -1,29 +1,33 @@
-import request from "./request.ts";
-
-export type LoginReq = {
-    account: string
-    password: string
-}
-
-export type RegisterReq = LoginReq & {
-    nickname?: string
-}
-
-export type SSOReq = {
-    code: string
-    scope: string
-    state: string
-}
-
-/**
- * 登录相关的API
- */
-export const LoginApis = {
-
-    login: (data: LoginReq) => request.post('/user/login', data),
-    signUp: (data: RegisterReq) => request.post('/user/register', data),
-    userinfo: () => request.get('/user/info', { disableErrorMsg: true } as never),
-    oauth2Url: ()=> request.get('/oauth2'),
-    oauth2Callback: (data: SSOReq) => request.post('/oauth2/callback', data, { disableErrorMsg: true } as never)
-
+import request from "./request.ts";
+
+export type LoginReq = {
+    account: string
+    password: string
+}
+
+export type RegisterReq = LoginReq & {
+    nickname?: string
+}
+
+export type SSOReq = {
+    code: string
+    scope: string
+    state: string
+}
+
+/**
+ * 登录相关的API
+ */
+export const LoginApis = {
+
+    login: (data: LoginReq) => {
+        return request.post('/user/login', data)
+    },
+    signUp: (data: RegisterReq) => request.post('/user/register', data),
+    userinfo: () => {
+        return request.get('/user/info', { disableErrorMsg: true } as never)
+    },
+    oauth2Url: ()=> request.get('/oauth2'),
+    oauth2Callback: (data: SSOReq) => request.post('/oauth2/callback', data, { disableErrorMsg: true } as never)
+
 }

src/components/BackButton.tsx → frontend/src/components/BackButton.tsx

@@ -1,29 +1,29 @@
-/**
- * @author tuonian
- * @date 2023/6/30
- */
-import {Button} from "antd";
-import {ArrowLeftOutlined} from "@ant-design/icons";
-import {useNavigate} from "react-router";
-
-
-type IProps = {
-  to?: string
-}
-export const BackButton = ({to}: IProps) => {
-
-  const navigate = useNavigate()
-
-  const goBack = ()=>{
-    if (to){
-      navigate(to, { replace: true })
-    }else {
-      navigate(-1)
-    }
-  }
-
-  return (<Button
-    ghost style={{color: '#1890ff',marginRight: 10}}
-                  onClick={goBack}
-                  icon={<ArrowLeftOutlined />} /> )
-}
+/**
+ * @author tuonian
+ * @date 2023/6/30
+ */
+import {Button} from "antd";
+import {ArrowLeftOutlined} from "@ant-design/icons";
+import {useNavigate} from "react-router";
+
+
+type IProps = {
+  to?: string
+}
+export const BackButton = ({to}: IProps) => {
+
+  const navigate = useNavigate()
+
+  const goBack = ()=>{
+    if (to){
+      navigate(to, { replace: true })
+    }else {
+      navigate(-1)
+    }
+  }
+
+  return (<Button
+    ghost style={{color: '#1890ff',marginRight: 10}}
+                  onClick={goBack}
+                  icon={<ArrowLeftOutlined />} /> )
+}

src/components/empty/index.less → frontend/src/components/empty/index.less

@@ -1,15 +1,15 @@
-.empty-loading{
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  .ant-spin-dot{
-    font-size: 30px;
-  }
-  .hint-msg{
-    font-weight: lighter;
-    color: #666666;
-  }
+.empty-loading{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .ant-spin-dot{
+    font-size: 30px;
+  }
+  .hint-msg{
+    font-weight: lighter;
+    color: #666666;
+  }
 }

src/components/empty/index.tsx → frontend/src/components/empty/index.tsx

@@ -1,12 +1,12 @@
-import {Spin} from "antd";
-import './index.less'
-
-
-export const EmptyLoading = ()=>{
-    return (
-        <div className="empty-loading">
-            <Spin></Spin>
-            <div className="hint-msg">加载中,请稍等...</div>
-        </div>
-    )
+import {Spin} from "antd";
+import './index.less'
+
+
+export const EmptyLoading = ()=>{
+    return (
+        <div className="empty-loading">
+            <Spin></Spin>
+            <div className="hint-msg">加载中,请稍等...</div>
+        </div>
+    )
 }

frontend/src/config/consts.ts

@@ -0,0 +1,12 @@
+/**
+ * 是否为桌面应用
+ */
+let isDesktop = false;
+// @ts-ignore
+if (window.go){
+    isDesktop = true
+}
+
+export {
+    isDesktop
+}

src/config/nginx_form.json → frontend/src/config/nginx_form.json

@@ -1,723 +1,723 @@
-{
-  "server": [
-    {
-      "key": "server_name",
-      "title": "域名",
-      "type": "string",
-      "ruleType": "",
-      "pattern": "^((?!-)[A-Za-z0-9-]{1,63}(?<!-)\\.)+[A-Za-z]{2,6}$",
-      "placeholder": "请填写域名",
-      "description": "eg. demo.domain.cn",
-      "width": 300
-    },
-    {
-      "key": "listen",
-      "type": "int",
-      "title": "监听",
-      "min": 0,
-      "max": 65535,
-      "width": 300
-    },
-    {
-      "key": "enable",
-      "title": "启用",
-      "type": "switch",
-      "description": "是否启用，如果不启用，将不会渲染该配置"
-    },
-    {
-      "key": "ssl",
-      "title": "https",
-      "type": "switch",
-      "cascade": {
-        "true": [
-          {
-            "key": "certName",
-            "type": "certs",
-            "placeholder": "选择SSL证书",
-            "title": "SSL证书",
-            "description": "选择SSL证书，如果没有，请填到“SSL证书”管理界面添加证书"
-          }
-        ]
-      }
-    },
-    {
-      "key": "http2",
-      "title": "http2",
-      "type": "switch",
-      "cascade": {
-        "true": [
-          {
-            "key": "http2_max_concurrent_streams",
-            "value": 1024,
-            "title": "最大并发流",
-            "type": "int",
-            "placeholder": "http2_max_concurrent_streams",
-            "description": "http2_max_concurrent_streams",
-            "width": 300
-          }
-        ]
-      }
-    },
-    {
-      "key": "access_log",
-      "title": "访问日志",
-      "type": "access_log",
-      "required": false
-    },
-    {
-      "key": "proxy_settings",
-      "title": "更多代理设置",
-      "type": "proxy_settings",
-      "required": false,
-      "description": "更多代理设置"
-    },
-    {
-      "key": "fastcgi",
-      "title": "fastcgi",
-      "type": "fastcgi",
-      "required": false,
-      "description": "ngx_http_fastcgi_module,allows passing requests to a FastCGI server."
-    },
-    {
-      "type": "locations",
-      "title": "代理/站点",
-      "key": "locations",
-      "required": false,
-      "description": "静态资源或者反向代理，路由规则"
-    },
-    {
-      "type": "gzip",
-      "title": "压缩配置",
-      "key": "gzip",
-      "required": false,
-      "description": "gzip"
-    },
-    {
-      "title": "Access",
-      "key": "access",
-      "type": "access",
-      "required": false,
-      "description": "deny or allow,白名单或者黑名单访问限制"
-    },
-    {
-      "type": "auth",
-      "title": "鉴权",
-      "key": "auth_request",
-      "required": false,
-      "description": "ngx_http_auth_request_module:实现了基于一子请求的结果的客户端的授权。如果子请求返回2xx响应码，则允许访问。如果它返回401或403，则访问被拒绝并显示相应的错误代码。子请求返回的任何其他响应代码都被认为是错误的"
-    },
-    {
-      "key": "rewrite",
-      "type": "object",
-      "title": "rewrite",
-      "required": false,
-      "hideHeader": true,
-      "description": "格式：rewrite < regex > < replacement > [flag]",
-      "items": [
-        {
-          "key": "regex",
-          "title": "正则表达式",
-          "type": "string",
-          "width": 180,
-          "placeholder": "eq. ^/(.*)",
-          "description": "<regex> 正则匹配",
-          "required": false
-        },
-        {
-          "key": "replacement",
-          "title": "跳转路径",
-          "type": "string",
-          "placeholder": "eq. https://www.demo.com/$1",
-          "width": 300,
-          "required": false
-        },
-        {
-          "key": "flag",
-          "title": "flag",
-          "type": "select",
-          "option": ["last","break","redirect","permanent"],
-          "width": 120,
-          "placeholder": "[flag] 标记",
-          "description": "last: 相当于Apache的【L】标记，表示完成rewrite;\nbreak:本条规则匹配完成即终止，不在匹配后面的任何规则;\nredirect: 返回302临时重定向，浏览器地址栏会显示跳转后的URL地址，爬虫不会更新url;\npermanent:返回301永久重定向，浏览器地址栏会显示跳转后的URL地址，爬虫更新url;"
-        }
-      ]
-    },
-    {
-      "key": "cors_setting",
-      "title": "跨域配置",
-      "type": "cors",
-      "description": "跨域配置，可以通过该配置项解决前端跨域问题",
-      "required": false
-    },
-    {
-      "key": "tmp_custom_config",
-      "title": "自定义配置",
-      "type": "textarea",
-      "hideHeader": true,
-      "description": "自定义配置，注意，每行结尾需要加“;”号，将会拼接在最后,不做任何修改，请注意格式",
-      "required": false,
-      "trim": false,
-      "width": 600
-    },
-    {
-      "type": "divider",
-      "key": "tmp_more_settings",
-      "collapsible": true,
-      "value": false,
-      "title": "更多设置",
-      "items": [
-        {
-          "key": "keepalive_timeout",
-          "type": "string",
-          "required": false,
-          "title": "keepalive_timeout",
-          "description": "eg. 10s",
-          "min": 0,
-          "ruleType": "reg",
-          "pattern": "(\\d)(s|m|h)$"
-        },
-        {
-          "key": "client_max_body_size",
-          "type": "string",
-          "placeholder": "请求体的最大大小",
-          "title": "最大请求体大小",
-          "description": "eg. 500m 20m",
-          "required": false,
-          "value": "10m"
-        },
-        {
-          "key": "charset",
-          "title": "编码",
-          "required": false,
-          "description": "charset"
-        },
-        {
-          "key": "ssl_session_timeout",
-          "type": "string",
-          "placeholder": "ssl_session_timeout",
-          "title": "ssl_session_timeout",
-          "description": "eg. 5m 60s",
-          "required": false
-        },
-        {
-          "key": "ssl_prefer_server_ciphers",
-          "type": "select",
-          "placeholder": "ssl_prefer_server_ciphers",
-          "title": "ssl_prefer_server_ciphers",
-          "option": ["on","off"],
-          "value": "on",
-          "required": false,
-          "width": 260
-        },
-        {
-          "key": "ssl_ciphers",
-          "type": "string",
-          "placeholder": "ssl_ciphers",
-          "title": "ssl_ciphers",
-          "description": "ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4",
-          "required": false,
-          "width": 450
-        },
-        {
-          "key": "ssl_protocols",
-          "type": "select",
-          "mode": "multiple",
-          "placeholder": "ssl_protocols",
-          "title": "SSL协议",
-          "option": ["TLSv1","TLSv1.1","TLSv1.2","TLSv2","TLSv3"],
-          "required": false,
-          "width": 450
-        }
-      ]
-    }
-  ],
-  "addNginx": [
-    {
-      "type": "string",
-      "key": "name",
-      "title": "名称"
-    },
-    {
-      "key": "isLocal",
-      "type": "switch",
-      "description": "本地实例，直接在服务器上运行名称，非本地实例，需要配置SSH连接信息，使用SSH执行相关命令",
-      "value": true,
-      "title": "本地实例",
-      "cascade": {
-        "false": [
-          {
-            "type": "string",
-            "key": "ipAddr",
-            "title": "IP地址"
-          },
-          {
-            "type": "int",
-            "key": "port",
-            "title": "端口"
-          },
-          {
-            "type": "string",
-            "key": "user",
-            "title": "用户名"
-          },
-          {
-            "type": "password",
-            "key": "password",
-            "title": "密码"
-          }
-        ]
-      }
-    }
-  ],
-  "nginxSettings": [
-    {
-      "key": "isServer",
-      "title": "服务方式运行",
-      "type": "switch",
-      "description": "以服务方式运行，则使用service nginx start|stop|reload 等命令，否则使用nginx -s reload|stop 等命令"
-    },
-    {
-      "key": "nginxPath",
-      "title": "nginx位置",
-      "type": "string",
-      "description": "nginx的文件所在的绝对路径，默认为:/usr/sbin/nginx,可使用nginx -V 查看参数--sbin-path；",
-      "value": "/usr/sbin/nginx"
-    },
-    {
-      "key": "nginxDir",
-      "title": "nginx配置目录",
-      "type": "string",
-      "description": "nginx的配置文件所在的目录，即nginx.conf所在的目录，一般为：/etc/nginx，可使用nginx -V 查看参数 --prefix",
-      "value": "/etc/nginx"
-    },
-    {
-      "key":"dataDir",
-      "type": "string",
-      "title": "数据目录",
-      "description": "nginx的自定义配置文件所在目录，注意，是nginx的配置文件目录，包括配置文件，证书，备份文件都将保存到该目录下"
-    },
-    {
-      "key": "remark",
-      "title": "备注信息",
-      "placeholder": "输入备注",
-      "type": "textarea",
-      "required": false,
-      "trim": false
-    }
-  ],
-  "nginxConf": [
-    {
-      "key": "user",
-      "value": "nginx",
-      "title": "user",
-      "placeholder": "nginx user"
-    },
-    {
-      "key": "worker_processes",
-      "title": "工作进程数量",
-      "type": "string",
-      "ruleType": "reg",
-      "pattern": "^(auto|\\d+)$",
-      "description": "auto或者指定数量"
-    },
-    {
-      "key": "error_log",
-      "title": "错误日志路径",
-      "type": "error_log",
-      "value": {
-        "path": "/var/log/nginx/error.log",
-        "level": "notice"
-      }
-    },
-    {
-      "key": "pid",
-      "title": "pid位置",
-      "type": "string",
-      "value": "/var/run/nginx.pid",
-      "description": "eg. /var/run/nginx.pid"
-    },
-    {
-      "key": "temp.events",
-      "type": "divider",
-      "title": "events配置",
-      "description": "nginx events 模块主要是nginx 和用户交互网络连接优化的配置内容",
-      "items": [
-        {
-          "key": "events.accept_mutex",
-          "title": "accept_mutex",
-          "type": "switch",
-          "value": true,
-          "required": false,
-          "description": "这个配置主要可以用来解决常说的\"惊群\"问题。大致意思是在某一个时刻，客户端发来一个请求连接，Nginx后台是以多进程的工作模式，也就是说有多个worker进程会被同时唤醒，但是最终只会有一个进程可以获取到连接，如果每次唤醒的进程数目太多，就会影响Nginx的整体性能。如果将上述值设置为on(开启状态)，将会对多个Nginx进程接收连接进行序列号，一个个来唤醒接收，就防止了多个进程对连接的争抢"
-        },
-        {
-          "key": "events.worker_connections",
-          "type": "int",
-          "layout": "form",
-          "title": "最大连接数",
-          "description": "用来配置单个worker进程最大的连接数，nginx 默认连接数是1024",
-          "min": 0,
-          "max": 65536,
-          "value": 1024,
-          "required": false
-        },
-        {
-          "key": "events.multi_accept",
-          "title": "multi_accept",
-          "description": "用来设置是否允许同时接收多个网络连接",
-          "type": "switch",
-          "value": false,
-          "required": false
-        },
-        {
-          "key": "events.use",
-          "title": "网络驱动",
-          "description": "用来设置Nginx服务器选择哪种事件驱动来处理网络消息;另外这些值的选择，我们也可以在编译的时候使用：–with-select_module、–without-select_module、 --with-poll_module、–without-poll_module来设置是否需要将对应的事件驱动模块编译到Nginx的内核",
-          "type": "select",
-          "option": ["select","poll","epoll","kqueue"],
-          "required": false
-        }
-      ]
-    },
-    {
-      "key": "temp.http",
-      "title": "http配置",
-      "type": "divider",
-      "items": [
-        {
-          "key": "http.include",
-          "type": "string",
-          "value": "/etc/nginx/mime.types",
-          "title": "include"
-        },
-        {
-          "key": "http.default_type",
-          "type": "string",
-          "value": "application/octet-stream",
-          "title": "default_type"
-        },
-        {
-          "key": "http.log_format",
-          "title": "日志格式",
-          "type": "array",
-          "items": [
-            {
-              "type": "textarea",
-              "key": "name",
-              "value": "main",
-              "title": "格式名称",
-              "rows": 4,
-              "placeholder": "日志格式名称，eg. main compression",
-              "width": 200,
-              "description": "日志格式名称，eg. main compression log1 log2",
-              "trim": false,
-              "required": true
-            },
-            {
-              "type": "textarea",
-              "key": "content",
-              "value": "",
-              "title": "日志格式",
-              "required": true,
-              "rows": 4,
-              "width": 400,
-              "trim": false,
-              "placeholder": "'$remote_addr - $remote_user [$time_local] \"$request\" '\n                      '$status $body_bytes_sent \"$http_referer\" '\n                      '\"$http_user_agent\" \"$http_x_forwarded_for\"'",
-              "description": "参数                      说明                                         示例\n$remote_addr             客户端地址                                    211.28.65.253\n$remote_user             客户端用户名称                                --\n$time_local              访问时间和时区                                18/Jul/2012:17:00:01 +0800\n$request                 请求的URI和HTTP协议                           \"GET /article-10000.html HTTP/1.1\"\n$http_host               请求地址，即浏览器中你输入的地址（IP或域名）     www.wang.com 192.168.100.100\n$status                  HTTP请求状态                                  200\n$upstream_status         upstream状态                                  200\n$body_bytes_sent         发送给客户端文件内容大小                        1547\n$http_referer            url跳转来源                                   https://www.baidu.com/\n$http_user_agent         用户终端浏览器等信息                           \"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SV1; GTB7.0; .NET4.0C;\n$ssl_protocol            SSL协议版本                                   TLSv1\n$ssl_cipher              交换数据中的算法                               RC4-SHA\n$upstream_addr           后台upstream的地址，即真正提供服务的主机地址     10.10.10.100:80\n$request_time            整个请求的总时间                               0.205\n$upstream_response_time  请求过程中，upstream响应时间                    0.002\neg.'$remote_addr - $remote_user [$time_local] \"$request\" '\n                      '$status $body_bytes_sent \"$http_referer\" '\n                      '\"$http_user_agent\" \"$http_x_forwarded_for\"'"
-            }
-          ]
-        },
-        {
-          "key": "http.access_log",
-          "title": "访问日志",
-          "type": "access_log",
-          "required": false,
-          "stream": false
-        },
-        {
-          "key": "http.error_log",
-          "title": "错误日志",
-          "type": "error_log",
-          "required": false
-        },
-        {
-          "key": "http.sendfile",
-          "type": "select",
-          "required": false,
-          "option": ["on","off"],
-          "title": "sendfile"
-        },
-        {
-          "key": "http.tcp_nopush",
-          "type": "select",
-          "required": false,
-          "option": ["on","off"],
-          "title": "tcp_nopush"
-        },
-        {
-          "type": "gzip",
-          "title": "压缩配置",
-          "key": "http.gzip",
-          "required": false,
-          "description": "gzip"
-        },
-        {
-          "key": "http.keepalive_timeout",
-          "type": "int",
-          "required": false,
-          "title": "keepalive_timeout",
-          "description": "单位为秒(s), 0表示不限制",
-          "min": 0
-        },
-        {
-          "title": "Access",
-          "key": "http.access",
-          "type": "access",
-          "required": false,
-          "description": "deny or allow,白名单或者黑名单访问限制"
-        },
-        {
-          "key": "http.proxy_settings",
-          "title": "代理设置",
-          "type": "proxy_settings",
-          "required": false
-        },
-        {
-          "key": "http.fastcgi",
-          "title": "fastcgi",
-          "type": "fastcgi",
-          "required": false,
-          "description": "ngx_http_fastcgi_module,allows passing requests to a FastCGI server."
-        },
-        {
-          "key": "http.more",
-          "type": "textarea",
-          "required": false,
-          "title": "更多配置",
-          "description": "自定义配置，每行需要有分隔符号",
-          "trim": false
-        }
-      ]
-    },
-    {
-      "key": "stream",
-      "type": "divider",
-      "collapsible": true,
-      "title": "TCP/UDP配置",
-      "description": "stream配置，需要注意安装的nginx版本是否支持；默认情况下，没有构建此模块。 -必须使用-with stream配置参数启用",
-      "items": [
-        {
-          "key": "stream.log_format",
-          "title": "日志格式",
-          "type": "array",
-          "items": [
-            {
-              "type": "textarea",
-              "key": "name",
-              "value": "tcp_format",
-              "title": "格式名称",
-              "rows": 4,
-              "placeholder": "日志格式名称，eg. tcp_format",
-              "width": 200,
-              "description": "日志格式名称，eg. tcp_format",
-              "trim": false
-            },
-            {
-              "type": "textarea",
-              "key": "content",
-              "value": "",
-              "title": "日志格式",
-              "rows": 4,
-              "width": 400,
-              "trim": false,
-              "description": "eg. '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time'",
-              "placeholder": "'$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time'"
-            }
-          ]
-        },
-        {
-          "key": "stream.access_log",
-          "title": "访问日志",
-          "type": "access_log",
-          "value": {
-            "level": "tcp_format",
-            "path": "/var/log/nginx/access_stream.log"
-          },
-          "stream": true
-        },
-        {
-          "key": "stream.error_log",
-          "title": "错误日志",
-          "type": "error_log",
-          "stream": true,
-          "value": {
-            "path": "/var/log/nginx/error_stream.log"
-          }
-        }
-      ]
-    }
-  ],
-  "upstream": [
-    {
-      "title": "名称",
-      "key": "name",
-      "width": 100,
-      "description": "名称相同则为同一组负载均衡,只支持英文字母",
-      "type": "string"
-    },
-    {
-      "title": "负载方式",
-      "key": "type",
-      "type": "select",
-      "option": ["ip_hash","weight"],
-      "width": 100,
-      "required": false,
-      "description": "ip_hash： 每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session不能跨服务器的问题。如果后端服务器down掉，要手工down掉；weight：指定轮询几率，weight和访问比率成正比，如果后端服务器down掉，能自动剔除。"
-    },
-    {
-      "title": "是否启用",
-      "key": "enable",
-      "type": "switch",
-      "value": true
-    },
-    {
-      "title": "服务配置",
-      "type": "array",
-      "key": "servers",
-      "items": [
-        {
-          "title": "主机",
-          "type": "string",
-          "key": "host",
-          "description": "后端服务IP",
-          "width": 150
-        },
-        {
-          "title": "端口",
-          "type": "int",
-          "key": "port",
-          "description": "后端服务端口",
-          "width": 100
-        },
-        {
-          "title": "权重",
-          "type": "int",
-          "key": "weight",
-          "description": "权重，ip_hash模式下不生效，数字越大，越高,为0将剔除",
-          "width": 80,
-          "min": 0,
-          "value": 100
-        },
-        {
-          "title": "状态/角色",
-          "type": "select",
-          "key": "status",
-          "option": ["normal","down","backup"],
-          "description": "weight,backup 不能和 ip_hash 关键字一起使用;down：表示当前的server暂时不参与负载",
-          "width": 100,
-          "required": false
-        },
-        {
-          "title": "max_fails",
-          "type": "int",
-          "key": "max_fails",
-          "required": false,
-          "description": "最大失败次数，也就是最多进行 3 次尝试，默认为1",
-          "width": 100
-        },
-        {
-          "title": "超时时间",
-          "type": "int",
-          "key": "fail_timeout",
-          "required": false,
-          "description": "超时时间，单位秒，默认值是10s",
-          "width": 100
-        }
-      ]
-    }
-  ],
-  "stream": [
-    {
-      "key": "listen",
-      "type": "int",
-      "value": 3306,
-      "title": "端口",
-      "width": 100
-    },
-    {
-      "key": "isUdp",
-      "type": "switch",
-      "value": false,
-      "title": "是否UDP"
-    },
-    {
-      "key": "proxy_pass",
-      "type": "stream_proxy_pass",
-      "title": "后端服务",
-      "description": "IP:PORT 或者upstream的名称",
-      "width": 200
-    },
-    {
-      "key": "enable",
-      "type": "switch",
-      "title": "启用",
-      "description": "如果不启用，不会渲染该组配置信息",
-      "required": false
-    },
-    {
-      "key": "proxy_connect_timeout",
-      "type": "int",
-      "value": 10,
-      "title": "connect_timeout",
-      "placeholder": "与被代理服务器建立连接的超时时间,单位为s",
-      "required": false
-    },
-    {
-      "key": "proxy_timeout",
-      "type": "int",
-      "value": 10,
-      "title": "超时时间",
-      "placeholder": "获取被代理服务器的响应最大超时时间,单位为s",
-      "required": false
-    },
-    {
-      "key": "proxy_next_upstream",
-      "type": "switch",
-      "value": true,
-      "title": "next_upstream",
-      "description": "当被代理的服务器返回错误或超时时，将未返回响应的客户端连接请求传递给upstream中的下一个服务器",
-      "required": false
-    },
-    {
-      "key": "proxy_next_upstream_tries",
-      "type": "int",
-      "value": 3,
-      "title": "最大错误次数",
-      "description": "转发尝试请求最多3次",
-      "required": false
-    },
-    {
-      "key": "proxy_next_upstream_timeout",
-      "type": "int",
-      "value": 10,
-      "title": "总尝试超时时间",
-      "description": "总尝试超时时间,单位为s",
-      "required": false
-    },
-    {
-      "key": "proxy_socket_keepalive",
-      "type": "switch",
-      "value": true,
-      "title": "心跳",
-      "description": "开启SO_KEEPALIVE选项进行心跳检测",
-      "required": false
-    },
-    {
-      "key": "remark",
-      "type": "string",
-      "placeholder": "备注信息",
-      "required": false,
-      "title": "备注"
-    }
-  ]
-}
+{
+  "server": [
+    {
+      "key": "server_name",
+      "title": "域名",
+      "type": "string",
+      "ruleType": "",
+      "pattern": "^((?!-)[A-Za-z0-9-]{1,63}(?<!-)\\.)+[A-Za-z]{2,6}$",
+      "placeholder": "请填写域名",
+      "description": "eg. demo.domain.cn",
+      "width": 300
+    },
+    {
+      "key": "listen",
+      "type": "int",
+      "title": "监听",
+      "min": 0,
+      "max": 65535,
+      "width": 300
+    },
+    {
+      "key": "enable",
+      "title": "启用",
+      "type": "switch",
+      "description": "是否启用，如果不启用，将不会渲染该配置"
+    },
+    {
+      "key": "ssl",
+      "title": "https",
+      "type": "switch",
+      "cascade": {
+        "true": [
+          {
+            "key": "certName",
+            "type": "certs",
+            "placeholder": "选择SSL证书",
+            "title": "SSL证书",
+            "description": "选择SSL证书，如果没有，请填到“SSL证书”管理界面添加证书"
+          }
+        ]
+      }
+    },
+    {
+      "key": "http2",
+      "title": "http2",
+      "type": "switch",
+      "cascade": {
+        "true": [
+          {
+            "key": "http2_max_concurrent_streams",
+            "value": 1024,
+            "title": "最大并发流",
+            "type": "int",
+            "placeholder": "http2_max_concurrent_streams",
+            "description": "http2_max_concurrent_streams",
+            "width": 300
+          }
+        ]
+      }
+    },
+    {
+      "key": "access_log",
+      "title": "访问日志",
+      "type": "access_log",
+      "required": false
+    },
+    {
+      "key": "proxy_settings",
+      "title": "更多代理设置",
+      "type": "proxy_settings",
+      "required": false,
+      "description": "更多代理设置"
+    },
+    {
+      "key": "fastcgi",
+      "title": "fastcgi",
+      "type": "fastcgi",
+      "required": false,
+      "description": "ngx_http_fastcgi_module,allows passing requests to a FastCGI server."
+    },
+    {
+      "type": "locations",
+      "title": "代理/站点",
+      "key": "locations",
+      "required": false,
+      "description": "静态资源或者反向代理，路由规则"
+    },
+    {
+      "type": "gzip",
+      "title": "压缩配置",
+      "key": "gzip",
+      "required": false,
+      "description": "gzip"
+    },
+    {
+      "title": "Access",
+      "key": "access",
+      "type": "access",
+      "required": false,
+      "description": "deny or allow,白名单或者黑名单访问限制"
+    },
+    {
+      "type": "auth",
+      "title": "鉴权",
+      "key": "auth_request",
+      "required": false,
+      "description": "ngx_http_auth_request_module:实现了基于一子请求的结果的客户端的授权。如果子请求返回2xx响应码，则允许访问。如果它返回401或403，则访问被拒绝并显示相应的错误代码。子请求返回的任何其他响应代码都被认为是错误的"
+    },
+    {
+      "key": "rewrite",
+      "type": "object",
+      "title": "rewrite",
+      "required": false,
+      "hideHeader": true,
+      "description": "格式：rewrite < regex > < replacement > [flag]",
+      "items": [
+        {
+          "key": "regex",
+          "title": "正则表达式",
+          "type": "string",
+          "width": 180,
+          "placeholder": "eq. ^/(.*)",
+          "description": "<regex> 正则匹配",
+          "required": false
+        },
+        {
+          "key": "replacement",
+          "title": "跳转路径",
+          "type": "string",
+          "placeholder": "eq. https://www.demo.com/$1",
+          "width": 300,
+          "required": false
+        },
+        {
+          "key": "flag",
+          "title": "flag",
+          "type": "select",
+          "option": ["last","break","redirect","permanent"],
+          "width": 120,
+          "placeholder": "[flag] 标记",
+          "description": "last: 相当于Apache的【L】标记，表示完成rewrite;\nbreak:本条规则匹配完成即终止，不在匹配后面的任何规则;\nredirect: 返回302临时重定向，浏览器地址栏会显示跳转后的URL地址，爬虫不会更新url;\npermanent:返回301永久重定向，浏览器地址栏会显示跳转后的URL地址，爬虫更新url;"
+        }
+      ]
+    },
+    {
+      "key": "cors_setting",
+      "title": "跨域配置",
+      "type": "cors",
+      "description": "跨域配置，可以通过该配置项解决前端跨域问题",
+      "required": false
+    },
+    {
+      "key": "tmp_custom_config",
+      "title": "自定义配置",
+      "type": "textarea",
+      "hideHeader": true,
+      "description": "自定义配置，注意，每行结尾需要加“;”号，将会拼接在最后,不做任何修改，请注意格式",
+      "required": false,
+      "trim": false,
+      "width": 600
+    },
+    {
+      "type": "divider",
+      "key": "tmp_more_settings",
+      "collapsible": true,
+      "value": false,
+      "title": "更多设置",
+      "items": [
+        {
+          "key": "keepalive_timeout",
+          "type": "string",
+          "required": false,
+          "title": "keepalive_timeout",
+          "description": "eg. 10s",
+          "min": 0,
+          "ruleType": "reg",
+          "pattern": "(\\d)(s|m|h)$"
+        },
+        {
+          "key": "client_max_body_size",
+          "type": "string",
+          "placeholder": "请求体的最大大小",
+          "title": "最大请求体大小",
+          "description": "eg. 500m 20m",
+          "required": false,
+          "value": "10m"
+        },
+        {
+          "key": "charset",
+          "title": "编码",
+          "required": false,
+          "description": "charset"
+        },
+        {
+          "key": "ssl_session_timeout",
+          "type": "string",
+          "placeholder": "ssl_session_timeout",
+          "title": "ssl_session_timeout",
+          "description": "eg. 5m 60s",
+          "required": false
+        },
+        {
+          "key": "ssl_prefer_server_ciphers",
+          "type": "select",
+          "placeholder": "ssl_prefer_server_ciphers",
+          "title": "ssl_prefer_server_ciphers",
+          "option": ["on","off"],
+          "value": "on",
+          "required": false,
+          "width": 260
+        },
+        {
+          "key": "ssl_ciphers",
+          "type": "string",
+          "placeholder": "ssl_ciphers",
+          "title": "ssl_ciphers",
+          "description": "ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4",
+          "required": false,
+          "width": 450
+        },
+        {
+          "key": "ssl_protocols",
+          "type": "select",
+          "mode": "multiple",
+          "placeholder": "ssl_protocols",
+          "title": "SSL协议",
+          "option": ["TLSv1","TLSv1.1","TLSv1.2","TLSv2","TLSv3"],
+          "required": false,
+          "width": 450
+        }
+      ]
+    }
+  ],
+  "addNginx": [
+    {
+      "type": "string",
+      "key": "name",
+      "title": "名称"
+    },
+    {
+      "key": "isLocal",
+      "type": "switch",
+      "description": "本地实例，直接在服务器上运行名称，非本地实例，需要配置SSH连接信息，使用SSH执行相关命令",
+      "value": true,
+      "title": "本地实例",
+      "cascade": {
+        "false": [
+          {
+            "type": "string",
+            "key": "ipAddr",
+            "title": "IP地址"
+          },
+          {
+            "type": "int",
+            "key": "port",
+            "title": "端口"
+          },
+          {
+            "type": "string",
+            "key": "user",
+            "title": "用户名"
+          },
+          {
+            "type": "password",
+            "key": "password",
+            "title": "密码"
+          }
+        ]
+      }
+    }
+  ],
+  "nginxSettings": [
+    {
+      "key": "isServer",
+      "title": "服务方式运行",
+      "type": "switch",
+      "description": "以服务方式运行，则使用service nginx start|stop|reload 等命令，否则使用nginx -s reload|stop 等命令"
+    },
+    {
+      "key": "nginxPath",
+      "title": "nginx位置",
+      "type": "string",
+      "description": "nginx的文件所在的绝对路径，默认为:/usr/sbin/nginx,可使用nginx -V 查看参数--sbin-path；",
+      "value": "/usr/sbin/nginx"
+    },
+    {
+      "key": "nginxDir",
+      "title": "nginx配置目录",
+      "type": "string",
+      "description": "nginx的配置文件所在的目录，即nginx.conf所在的目录，一般为：/etc/nginx，可使用nginx -V 查看参数 --prefix",
+      "value": "/etc/nginx"
+    },
+    {
+      "key":"dataDir",
+      "type": "string",
+      "title": "数据目录",
+      "description": "nginx的自定义配置文件所在目录，注意，是nginx的配置文件目录，包括配置文件，证书，备份文件都将保存到该目录下"
+    },
+    {
+      "key": "remark",
+      "title": "备注信息",
+      "placeholder": "输入备注",
+      "type": "textarea",
+      "required": false,
+      "trim": false
+    }
+  ],
+  "nginxConf": [
+    {
+      "key": "user",
+      "value": "nginx",
+      "title": "user",
+      "placeholder": "nginx user"
+    },
+    {
+      "key": "worker_processes",
+      "title": "工作进程数量",
+      "type": "string",
+      "ruleType": "reg",
+      "pattern": "^(auto|\\d+)$",
+      "description": "auto或者指定数量"
+    },
+    {
+      "key": "error_log",
+      "title": "错误日志路径",
+      "type": "error_log",
+      "value": {
+        "path": "/var/log/nginx/error.log",
+        "level": "notice"
+      }
+    },
+    {
+      "key": "pid",
+      "title": "pid位置",
+      "type": "string",
+      "value": "/var/run/nginx.pid",
+      "description": "eg. /var/run/nginx.pid"
+    },
+    {
+      "key": "temp.events",
+      "type": "divider",
+      "title": "events配置",
+      "description": "nginx events 模块主要是nginx 和用户交互网络连接优化的配置内容",
+      "items": [
+        {
+          "key": "events.accept_mutex",
+          "title": "accept_mutex",
+          "type": "switch",
+          "value": true,
+          "required": false,
+          "description": "这个配置主要可以用来解决常说的\"惊群\"问题。大致意思是在某一个时刻，客户端发来一个请求连接，Nginx后台是以多进程的工作模式，也就是说有多个worker进程会被同时唤醒，但是最终只会有一个进程可以获取到连接，如果每次唤醒的进程数目太多，就会影响Nginx的整体性能。如果将上述值设置为on(开启状态)，将会对多个Nginx进程接收连接进行序列号，一个个来唤醒接收，就防止了多个进程对连接的争抢"
+        },
+        {
+          "key": "events.worker_connections",
+          "type": "int",
+          "layout": "form",
+          "title": "最大连接数",
+          "description": "用来配置单个worker进程最大的连接数，nginx 默认连接数是1024",
+          "min": 0,
+          "max": 65536,
+          "value": 1024,
+          "required": false
+        },
+        {
+          "key": "events.multi_accept",
+          "title": "multi_accept",
+          "description": "用来设置是否允许同时接收多个网络连接",
+          "type": "switch",
+          "value": false,
+          "required": false
+        },
+        {
+          "key": "events.use",
+          "title": "网络驱动",
+          "description": "用来设置Nginx服务器选择哪种事件驱动来处理网络消息;另外这些值的选择，我们也可以在编译的时候使用：–with-select_module、–without-select_module、 --with-poll_module、–without-poll_module来设置是否需要将对应的事件驱动模块编译到Nginx的内核",
+          "type": "select",
+          "option": ["select","poll","epoll","kqueue"],
+          "required": false
+        }
+      ]
+    },
+    {
+      "key": "temp.http",
+      "title": "http配置",
+      "type": "divider",
+      "items": [
+        {
+          "key": "http.include",
+          "type": "string",
+          "value": "/etc/nginx/mime.types",
+          "title": "include"
+        },
+        {
+          "key": "http.default_type",
+          "type": "string",
+          "value": "application/octet-stream",
+          "title": "default_type"
+        },
+        {
+          "key": "http.log_format",
+          "title": "日志格式",
+          "type": "array",
+          "items": [
+            {
+              "type": "textarea",
+              "key": "name",
+              "value": "main",
+              "title": "格式名称",
+              "rows": 4,
+              "placeholder": "日志格式名称，eg. main compression",
+              "width": 200,
+              "description": "日志格式名称，eg. main compression log1 log2",
+              "trim": false,
+              "required": true
+            },
+            {
+              "type": "textarea",
+              "key": "content",
+              "value": "",
+              "title": "日志格式",
+              "required": true,
+              "rows": 4,
+              "width": 400,
+              "trim": false,
+              "placeholder": "'$remote_addr - $remote_user [$time_local] \"$request\" '\n                      '$status $body_bytes_sent \"$http_referer\" '\n                      '\"$http_user_agent\" \"$http_x_forwarded_for\"'",
+              "description": "参数                      说明                                         示例\n$remote_addr             客户端地址                                    211.28.65.253\n$remote_user             客户端用户名称                                --\n$time_local              访问时间和时区                                18/Jul/2012:17:00:01 +0800\n$request                 请求的URI和HTTP协议                           \"GET /article-10000.html HTTP/1.1\"\n$http_host               请求地址，即浏览器中你输入的地址（IP或域名）     www.wang.com 192.168.100.100\n$status                  HTTP请求状态                                  200\n$upstream_status         upstream状态                                  200\n$body_bytes_sent         发送给客户端文件内容大小                        1547\n$http_referer            url跳转来源                                   https://www.baidu.com/\n$http_user_agent         用户终端浏览器等信息                           \"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SV1; GTB7.0; .NET4.0C;\n$ssl_protocol            SSL协议版本                                   TLSv1\n$ssl_cipher              交换数据中的算法                               RC4-SHA\n$upstream_addr           后台upstream的地址，即真正提供服务的主机地址     10.10.10.100:80\n$request_time            整个请求的总时间                               0.205\n$upstream_response_time  请求过程中，upstream响应时间                    0.002\neg.'$remote_addr - $remote_user [$time_local] \"$request\" '\n                      '$status $body_bytes_sent \"$http_referer\" '\n                      '\"$http_user_agent\" \"$http_x_forwarded_for\"'"
+            }
+          ]
+        },
+        {
+          "key": "http.access_log",
+          "title": "访问日志",
+          "type": "access_log",
+          "required": false,
+          "stream": false
+        },
+        {
+          "key": "http.error_log",
+          "title": "错误日志",
+          "type": "error_log",
+          "required": false
+        },
+        {
+          "key": "http.sendfile",
+          "type": "select",
+          "required": false,
+          "option": ["on","off"],
+          "title": "sendfile"
+        },
+        {
+          "key": "http.tcp_nopush",
+          "type": "select",
+          "required": false,
+          "option": ["on","off"],
+          "title": "tcp_nopush"
+        },
+        {
+          "type": "gzip",
+          "title": "压缩配置",
+          "key": "http.gzip",
+          "required": false,
+          "description": "gzip"
+        },
+        {
+          "key": "http.keepalive_timeout",
+          "type": "int",
+          "required": false,
+          "title": "keepalive_timeout",
+          "description": "单位为秒(s), 0表示不限制",
+          "min": 0
+        },
+        {
+          "title": "Access",
+          "key": "http.access",
+          "type": "access",
+          "required": false,
+          "description": "deny or allow,白名单或者黑名单访问限制"
+        },
+        {
+          "key": "http.proxy_settings",
+          "title": "代理设置",
+          "type": "proxy_settings",
+          "required": false
+        },
+        {
+          "key": "http.fastcgi",
+          "title": "fastcgi",
+          "type": "fastcgi",
+          "required": false,
+          "description": "ngx_http_fastcgi_module,allows passing requests to a FastCGI server."
+        },
+        {
+          "key": "http.more",
+          "type": "textarea",
+          "required": false,
+          "title": "更多配置",
+          "description": "自定义配置，每行需要有分隔符号",
+          "trim": false
+        }
+      ]
+    },
+    {
+      "key": "stream",
+      "type": "divider",
+      "collapsible": true,
+      "title": "TCP/UDP配置",
+      "description": "stream配置，需要注意安装的nginx版本是否支持；默认情况下，没有构建此模块。 -必须使用-with stream配置参数启用",
+      "items": [
+        {
+          "key": "stream.log_format",
+          "title": "日志格式",
+          "type": "array",
+          "items": [
+            {
+              "type": "textarea",
+              "key": "name",
+              "value": "tcp_format",
+              "title": "格式名称",
+              "rows": 4,
+              "placeholder": "日志格式名称，eg. tcp_format",
+              "width": 200,
+              "description": "日志格式名称，eg. tcp_format",
+              "trim": false
+            },
+            {
+              "type": "textarea",
+              "key": "content",
+              "value": "",
+              "title": "日志格式",
+              "rows": 4,
+              "width": 400,
+              "trim": false,
+              "description": "eg. '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time'",
+              "placeholder": "'$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time'"
+            }
+          ]
+        },
+        {
+          "key": "stream.access_log",
+          "title": "访问日志",
+          "type": "access_log",
+          "value": {
+            "level": "tcp_format",
+            "path": "/var/log/nginx/access_stream.log"
+          },
+          "stream": true
+        },
+        {
+          "key": "stream.error_log",
+          "title": "错误日志",
+          "type": "error_log",
+          "stream": true,
+          "value": {
+            "path": "/var/log/nginx/error_stream.log"
+          }
+        }
+      ]
+    }
+  ],
+  "upstream": [
+    {
+      "title": "名称",
+      "key": "name",
+      "width": 100,
+      "description": "名称相同则为同一组负载均衡,只支持英文字母",
+      "type": "string"
+    },
+    {
+      "title": "负载方式",
+      "key": "type",
+      "type": "select",
+      "option": ["ip_hash","weight"],
+      "width": 100,
+      "required": false,
+      "description": "ip_hash： 每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session不能跨服务器的问题。如果后端服务器down掉，要手工down掉；weight：指定轮询几率，weight和访问比率成正比，如果后端服务器down掉，能自动剔除。"
+    },
+    {
+      "title": "是否启用",
+      "key": "enable",
+      "type": "switch",
+      "value": true
+    },
+    {
+      "title": "服务配置",
+      "type": "array",
+      "key": "servers",
+      "items": [
+        {
+          "title": "主机",
+          "type": "string",
+          "key": "host",
+          "description": "后端服务IP",
+          "width": 150
+        },
+        {
+          "title": "端口",
+          "type": "int",
+          "key": "port",
+          "description": "后端服务端口",
+          "width": 100
+        },
+        {
+          "title": "权重",
+          "type": "int",
+          "key": "weight",
+          "description": "权重，ip_hash模式下不生效，数字越大，越高,为0将剔除",
+          "width": 80,
+          "min": 0,
+          "value": 100
+        },
+        {
+          "title": "状态/角色",
+          "type": "select",
+          "key": "status",
+          "option": ["normal","down","backup"],
+          "description": "weight,backup 不能和 ip_hash 关键字一起使用;down：表示当前的server暂时不参与负载",
+          "width": 100,
+          "required": false
+        },
+        {
+          "title": "max_fails",
+          "type": "int",
+          "key": "max_fails",
+          "required": false,
+          "description": "最大失败次数，也就是最多进行 3 次尝试，默认为1",
+          "width": 100
+        },
+        {
+          "title": "超时时间",
+          "type": "int",
+          "key": "fail_timeout",
+          "required": false,
+          "description": "超时时间，单位秒，默认值是10s",
+          "width": 100
+        }
+      ]
+    }
+  ],
+  "stream": [
+    {
+      "key": "listen",
+      "type": "int",
+      "value": 3306,
+      "title": "端口",
+      "width": 100
+    },
+    {
+      "key": "isUdp",
+      "type": "switch",
+      "value": false,
+      "title": "是否UDP"
+    },
+    {
+      "key": "proxy_pass",
+      "type": "stream_proxy_pass",
+      "title": "后端服务",
+      "description": "IP:PORT 或者upstream的名称",
+      "width": 200
+    },
+    {
+      "key": "enable",
+      "type": "switch",
+      "title": "启用",
+      "description": "如果不启用，不会渲染该组配置信息",
+      "required": false
+    },
+    {
+      "key": "proxy_connect_timeout",
+      "type": "int",
+      "value": 10,
+      "title": "connect_timeout",
+      "placeholder": "与被代理服务器建立连接的超时时间,单位为s",
+      "required": false
+    },
+    {
+      "key": "proxy_timeout",
+      "type": "int",
+      "value": 10,
+      "title": "超时时间",
+      "placeholder": "获取被代理服务器的响应最大超时时间,单位为s",
+      "required": false
+    },
+    {
+      "key": "proxy_next_upstream",
+      "type": "switch",
+      "value": true,
+      "title": "next_upstream",
+      "description": "当被代理的服务器返回错误或超时时，将未返回响应的客户端连接请求传递给upstream中的下一个服务器",
+      "required": false
+    },
+    {
+      "key": "proxy_next_upstream_tries",
+      "type": "int",
+      "value": 3,
+      "title": "最大错误次数",
+      "description": "转发尝试请求最多3次",
+      "required": false
+    },
+    {
+      "key": "proxy_next_upstream_timeout",
+      "type": "int",
+      "value": 10,
+      "title": "总尝试超时时间",
+      "description": "总尝试超时时间,单位为s",
+      "required": false
+    },
+    {
+      "key": "proxy_socket_keepalive",
+      "type": "switch",
+      "value": true,
+      "title": "心跳",
+      "description": "开启SO_KEEPALIVE选项进行心跳检测",
+      "required": false
+    },
+    {
+      "key": "remark",
+      "type": "string",
+      "placeholder": "备注信息",
+      "required": false,
+      "title": "备注"
+    }
+  ]
+}

src/config/nginx_template.json → frontend/src/config/nginx_template.json

@@ -1,68 +1,68 @@
-{
-  "nginxConf": {
-    "user": "nginx",
-    "worker_processes": "auto",
-    "error_log": "/var/log/nginx/error.log notice",
-    "pid": "/var/run/nginx.pid",
-    "events.worker_connections": 1024,
-    "http.include": "/etc/nginx/mime.types",
-    "http.default_type": "application/octet-stream",
-    "http.log_format": [
-      {
-        "key": "http.log_formatXK1BCq0XKQCMEuV",
-        "name": "main",
-        "content": "'$remote_addr - $remote_user [$time_local] \"$request\" '\n                      '$status $body_bytes_sent \"$http_referer\" '\n                      '\"$http_user_agent\" \"$http_x_forwarded_for\"'"
-      }
-    ],
-    "http.access_log": {
-      "key": "http.access_logqwY8npz3ypNjgIA",
-      "name": "main",
-      "path": "/var/log/nginx/access.log"
-    },
-    "http.sendfile": "off",
-    "http.tcp_nopush": "off",
-    "http.keepalive_timeout": 0,
-    "http.gzip": "off",
-    "stream": true,
-    "stream.log_format": [
-      {
-        "key": "stream.log_format8avSYRKrTjzgzcF",
-        "name": "tcp_format",
-        "content": "'$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time'"
-      }
-    ],
-    "stream.access_log": {
-      "key": "stream.access_logpuBlWTJXD64QiOL",
-      "name": "tcp_format",
-      "path": "/var/log/nginx/access_stream.log"
-    },
-    "stream.error_log": "/var/log/nginx/error_stream.log"
-  },
-  "server": {
-    "port": 80,
-    "enable": true,
-    "ssl_session_timeout": "5m",
-    "ssl_ciphers": "ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4",
-    "ssl_protocols": ["TLSv1","TLSv1.1","TLSv1.2"],
-    "ssl_prefer_server_ciphers": "on",
-    "locations": [
-      {
-        "id": "default",
-        "name": "默认",
-        "match": {
-          "path": "/"
-        },
-        "root": "/data/www",
-        "proxy_type": "static",
-        "enable": true
-      }
-    ]
-  },
-  "location": {
-
-  },
-  "addNginx": {
-
-  },
-  "nginxSettings": {}
-}
+{
+  "nginxConf": {
+    "user": "nginx",
+    "worker_processes": "auto",
+    "error_log": "/var/log/nginx/error.log notice",
+    "pid": "/var/run/nginx.pid",
+    "events.worker_connections": 1024,
+    "http.include": "/etc/nginx/mime.types",
+    "http.default_type": "application/octet-stream",
+    "http.log_format": [
+      {
+        "key": "http.log_formatXK1BCq0XKQCMEuV",
+        "name": "main",
+        "content": "'$remote_addr - $remote_user [$time_local] \"$request\" '\n                      '$status $body_bytes_sent \"$http_referer\" '\n                      '\"$http_user_agent\" \"$http_x_forwarded_for\"'"
+      }
+    ],
+    "http.access_log": {
+      "key": "http.access_logqwY8npz3ypNjgIA",
+      "name": "main",
+      "path": "/var/log/nginx/access.log"
+    },
+    "http.sendfile": "off",
+    "http.tcp_nopush": "off",
+    "http.keepalive_timeout": 0,
+    "http.gzip": "off",
+    "stream": true,
+    "stream.log_format": [
+      {
+        "key": "stream.log_format8avSYRKrTjzgzcF",
+        "name": "tcp_format",
+        "content": "'$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time'"
+      }
+    ],
+    "stream.access_log": {
+      "key": "stream.access_logpuBlWTJXD64QiOL",
+      "name": "tcp_format",
+      "path": "/var/log/nginx/access_stream.log"
+    },
+    "stream.error_log": "/var/log/nginx/error_stream.log"
+  },
+  "server": {
+    "port": 80,
+    "enable": true,
+    "ssl_session_timeout": "5m",
+    "ssl_ciphers": "ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4",
+    "ssl_protocols": ["TLSv1","TLSv1.1","TLSv1.2"],
+    "ssl_prefer_server_ciphers": "on",
+    "locations": [
+      {
+        "id": "default",
+        "name": "默认",
+        "match": {
+          "path": "/"
+        },
+        "root": "/data/www",
+        "proxy_type": "static",
+        "enable": true
+      }
+    ]
+  },
+  "location": {
+
+  },
+  "addNginx": {
+
+  },
+  "nginxSettings": {}
+}

src/index.css → frontend/src/index.css

@@ -1,75 +1,75 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-html,body{
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+html,body{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.tsx → frontend/src/main.tsx

@@ -1,56 +1,56 @@
-import React from 'react'
-import ReactDOM, {Root} from 'react-dom/client'
-import './adapter/index.js'
-import App from './App.tsx'
-import './index.css'
-import './styles/index.less'
-import renderWithQiankun from "vite-plugin-qiankun/es/helper";
-
-let root: Root | null
-
-const render = (props: any ={}) => {
-  console.log('[nginx-ui] render', props);
-  const {container} = props;
-  const rootContainer = container ? (container as HTMLElement).querySelector('#nginx_ui_root') : document.getElementById('nginx_ui_root')
-  root = ReactDOM.createRoot(rootContainer as never);
-  root.render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  )
-}
-
-const initQianKun = ()=>{
-  renderWithQiankun({
-    bootstrap(){
-      console.log('bootstrap')
-    },
-    mount(props){
-      console.log('[nginx-ui] mount', props)
-      render(props)
-    },
-    unmount(){
-      console.log('unmount')
-      if (!root){
-        return
-      }
-      try {
-        root.unmount()
-        root = null
-      }catch (e) {
-        console.log('[nginx-ui] unmount fail', e)
-      }
-    },
-    update(props){
-      console.log('update', props)
-    }
-  })
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-if (window.__POWERED_BY_QIANKUN__){
-  initQianKun()
-} else {
-  render()
-}
+import React from 'react'
+import ReactDOM, {Root} from 'react-dom/client'
+import './adapter/index.js'
+import App from './App.tsx'
+import './index.css'
+import './styles/index.less'
+import renderWithQiankun from "vite-plugin-qiankun/es/helper";
+
+let root: Root | null
+
+const render = (props: any ={}) => {
+  console.log('[nginx-ui] render', props);
+  const {container} = props;
+  const rootContainer = container ? (container as HTMLElement).querySelector('#nginx_ui_root') : document.getElementById('nginx_ui_root')
+  root = ReactDOM.createRoot(rootContainer as never);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  )
+}
+
+const initQianKun = ()=>{
+  renderWithQiankun({
+    bootstrap(){
+      console.log('bootstrap')
+    },
+    mount(props){
+      console.log('[nginx-ui] mount', props)
+      render(props)
+    },
+    unmount(){
+      console.log('unmount')
+      if (!root){
+        return
+      }
+      try {
+        root.unmount()
+        root = null
+      }catch (e) {
+        console.log('[nginx-ui] unmount fail', e)
+      }
+    },
+    update(props){
+      console.log('update', props)
+    }
+  })
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+if (window.__POWERED_BY_QIANKUN__){
+  initQianKun()
+} else {
+  render()
+}

src/models/api.ts → frontend/src/models/api.ts

@@ -1,41 +1,41 @@
-/**
- * 后端返回数据的基本格式
- */
-export type BaseResp<T =any> = {
-  code: number
-  msg: string
-  data?: T
-}
-
-/**
- * 虚拟主机，后端，跟前端不一致
- */
-export type IServerHost = {
-  id: number
-  name: string
-  nginxId: number
-  enable?: boolean
-  serverData: string
-  serverConf: string
-  remark: string
-  /**
-   * 是否为TCP/UDP代理
-   */
-  isStream?: boolean
-}
-
-/**
- * 证书信息
- */
-export type INginxCerts = {
-  id: number
-  nginxId: number
-  serviceName: string
-  subjectName?: string
-  hintMsg?: string
-  pem: string
-  key: string
-  createdAt?: string
-  expiresAt?: string
-  remark?: string
-}
+/**
+ * 后端返回数据的基本格式
+ */
+export type BaseResp<T =any> = {
+  code: number
+  msg: string
+  data?: T
+}
+
+/**
+ * 虚拟主机，后端，跟前端不一致
+ */
+export type IServerHost = {
+  id: number
+  name: string
+  nginxId: number
+  enable?: boolean
+  serverData: string
+  serverConf: string
+  remark: string
+  /**
+   * 是否为TCP/UDP代理
+   */
+  isStream?: boolean
+}
+
+/**
+ * 证书信息
+ */
+export type INginxCerts = {
+  id: number
+  nginxId: number
+  serviceName: string
+  subjectName?: string
+  hintMsg?: string
+  pem: string
+  key: string
+  createdAt?: string
+  expiresAt?: string
+  remark?: string
+}

src/models/nginx.ts → frontend/src/models/nginx.ts

@@ -1,284 +1,285 @@
-import {FormColumnType} from "planning-tools";
-import {NgxModuleData} from "../pages/nginx/components/input.ts";
-
-export type INginx = {
-  id: number
-  name: string
-  uid: string
-  /**
-   * 数据目录，所有自定义配置文件都在里面
-   * conf.d stream.d backup certs
-   */
-  dataDir: string
-  /**
-   * nginx的配置文件主目录，及nginx.conf 配置文件所在的目录
-   */
-  nginxDir: string
-  /**
-   * nginx可执行文件
-   */
-  nginxPath?:string
-  isLocal: boolean
-  ipAddr: string
-  port: number
-  user: string
-  password: string
-  httpData: string
-  httpConf: string
-  remark: string
-  /**
-   * 版本信息
-   */
-  versionInfo?: string
-}
-
-/**
- * 虚拟主机或者 TCP/UDP代理
- */
-export type INginxServer = {
-  /**
-   * 唯一标识
-   */
-  id: number
-  /**
-   * 是否是负载均衡
-   */
-  isUpstream?: boolean
-  /**
-   * 是否为TCP/UDP代理
-   */
-  isStream?: boolean
-  nginxId: number
-  enable?: boolean
-  http2?: boolean
-  /**
-   * 配置文件，当前的配置文件
-   */
-  confData?: string
-
-  server_name: string
-  listen: number
-  ssl?: boolean
-  charset?: string
-  access_log?: string
-  error_log?: string
-  /**
-   * 客户端最大的请求体大小，500m 1g
-   */
-  client_max_body_size?: string
-  /**
-   * 证书名称，平台托管的证书名称
-   */
-  certName?: string
-  ssl_certificate?: string
-  ssl_certificate_key?: string
-  /**
-   * eg. 5m 1h
-   */
-  ssl_session_timeout?: string
-  // ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4
-  ssl_ciphers?: string
-  // TLSv1 TLSv1.1 TLSv1.2
-  ssl_protocols?: string[]
-  ssl_prefer_server_ciphers?: 'on'|'off'
-
-  locations?: INginxLocation[]
-  upstreams?: IUpstream[]
-  streams?: INginxStream[]
-  rewrite?: IRewrite
-  remark?: string
-
-  proxy_settings?: NgxModuleData
-  tmp_custom_config?: string
-  gzip?: NgxModuleData
-}
-/**
- * 负载均衡，跟虚拟主机放在一起吧，方便
- */
-export type IUpstream = {
-  name: string
-  /**
-   * weight\backup 不能和 ip_hash 关键字一起使用。
-   * ip_hash 或者weight 轮训
-   */
-  type?:'ip_hash' | 'weight'
-  /**
-   * 是否启用
-   */
-  enable?: boolean
-  servers: {
-    host: string
-    port: number
-    weight?: number
-    /**
-     * down：表示当前的server暂时不参与负载
-     * weight：默认为1.weight越大，负载的权重就越大。
-     * backup： 其它所有的非backup机器down或者忙的时候，请求backup机器。所以这台机器压力会最轻。
-     */
-    status?: 'down' | 'backup' | 'normal'
-    /**
-     * 最大失败次数，也就是最多进行 3 次尝试，默认为1
-     */
-    max_fails?: number
-    /**
-     * 超时时间，单位秒，默认值是10s
-     */
-    fail_timeout?: number
-  }[]
-}
-
-export type INginxStream = {
-  /**
-   * 唯一索引
-   */
-  key: string
-  listen: number
-  /**
-   * 与被代理服务器建立连接的超时时间为5s
-   */
-  proxy_connect_timeout?: number
-  /**
-   * 获取被代理服务器的响应最大超时时间为10s
-   */
-  proxy_timeout?: number
-  /**
-   * 当被代理的服务器返回错误或超时时，将未返回响应的客户端连接请求传递给upstream中的下一个服务器
-   */
-  proxy_next_upstream?: boolean
-  /**
-   * 总尝试超时时间为10s
-   */
-  proxy_next_upstream_tries?: number
-  /**
-   *  总尝试超时时间为10s
-   */
-  proxy_next_upstream_timeout?: number
-  /**
-   * 开启SO_KEEPALIVE选项进行心跳检测
-   */
-  proxy_socket_keepalive?: boolean
-  /**
-   * proxy_pass
-   */
-  proxy_pass: string
-  /**
-   * 是否启用
-   */
-  enable?: boolean
-  /**
-   * 是否监听TCP，但是isSteam=true时有效
-   */
-  isUdp?: boolean;
-}
-
-export type PNginxServer = Partial<INginxServer>
-
-/**
- * 键值对
- */
-export type KeyValue = {
-  name: string
-  value: string
-}
-
-/**
- * nginx 的location配置
- */
-export type INginxLocation = Omit<NgxModuleData, "data"> & {
-  /**
-   * 唯一标识
-   */
-  id: string
-  /**
-   * location的名称
-   */
-  name: string;
-  /**
-   * 匹配规则
-   */
-  match: {
-    path: string
-    regex?: string
-  }
-  index?: string
-  root?: string
-  alias?: string
-  proxy_set_header?: IProxyHeader[]
-  add_header?: IProxyHeader[]
-  proxy_pass?: string
-  // http_502 http_504 http_404 error timeout invalid_header
-  proxy_next_upstream?: string[]
-  //eg. 60s 1m
-  proxy_connect_timeout?: string
-  // 1.1
-  proxy_http_version?: string
-  rewrite?: IRewrite
-
-  proxy_settings?: NgxModuleData
-  gzip?: NgxModuleData
-  tmp_custom_config?: string
-  proxy_type?: 'proxy'| 'static' | 'returnBody' | 'other'
-  /**
-   * 是否为内部路由
-   */
-  internal?: boolean
-  return?: {
-    code: number
-    content: string
-  }
-  /**
-   * 临时数据，表示
-   */
-  __index__?: number
-  __deploy__?: any
-}
-
-export type PLocation = Partial<INginxLocation>
-
-export type IProxyHeader = {
-  name: string
-  value: string
-}
-
-
-export type IRewrite = {
-  /**
-   * 正则表达式
-   */
-  regex: string
-  /**
-   * 跳转后的内容
-   */
-  replacement: string
-  /**
-   * rewrite支持的flag标记
-   */
-  flag: 'last' | 'break' | 'redirect' | 'permanent'
-}
-
-/**
- * nginx的自动化表单配置
- */
-export type INginxFormConfig = {
-  server: FormColumnType[]
-  location: FormColumnType[]
-  addNginx: FormColumnType[]
-  nginxSettings: FormColumnType[]
-  nginxConf: FormColumnType[]
-  /**
-   * 负载均衡的
-   */
-  upstream: FormColumnType[]
-  stream: FormColumnType[]
-}
-
-/**
- * 给定的初始值模板
- */
-export type INginxFormTemplate = {
-  server: Partial<INginxServer>,
-  location: any,
-  addNginx: any,
-  nginxSettings: any,
-  nginxConf: any
-}
+import {FormColumnType} from "planning-tools";
+import {NgxModuleData} from "../pages/nginx/components/input.ts";
+
+export type INginx = {
+  id: number
+  name: string
+  uid: string
+  /**
+   * 数据目录，所有自定义配置文件都在里面
+   * conf.d stream.d backup certs
+   */
+  dataDir: string
+  /**
+   * nginx的配置文件主目录，及nginx.conf 配置文件所在的目录
+   */
+  nginxDir: string
+  /**
+   * nginx可执行文件
+   */
+  nginxPath?:string
+  isLocal: boolean
+  ipAddr: string
+  port: number
+  user: string
+  password: string
+  httpData: string
+  httpConf: string
+  remark: string
+  /**
+   * 版本信息
+   */
+  versionInfo?: string
+}
+
+/**
+ * 虚拟主机或者 TCP/UDP代理
+ */
+export type INginxServer = {
+  /**
+   * 唯一标识
+   */
+  id: number
+  /**
+   * 是否是负载均衡
+   */
+  isUpstream?: boolean
+  /**
+   * 是否为TCP/UDP代理
+   */
+  isStream?: boolean
+  nginxId: number
+  enable?: boolean
+  http2?: boolean
+  /**
+   * 配置文件，当前的配置文件
+   */
+  confData?: string
+
+  server_name: string
+  listen: number
+  ssl?: boolean
+  charset?: string
+  access_log?: string
+  error_log?: string
+  /**
+   * 客户端最大的请求体大小，500m 1g
+   */
+  client_max_body_size?: string
+  /**
+   * 证书名称，平台托管的证书名称
+   */
+  certName?: string
+  ssl_certificate?: string
+  ssl_certificate_key?: string
+  /**
+   * eg. 5m 1h
+   */
+  ssl_session_timeout?: string
+  // ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4
+  ssl_ciphers?: string
+  // TLSv1 TLSv1.1 TLSv1.2
+  ssl_protocols?: string[]
+  ssl_prefer_server_ciphers?: 'on'|'off'
+
+  locations?: INginxLocation[]
+  upstreams?: IUpstream[]
+  streams?: INginxStream[]
+  rewrite?: IRewrite
+  remark?: string
+
+  proxy_settings?: NgxModuleData
+  tmp_custom_config?: string
+  gzip?: NgxModuleData
+}
+/**
+ * 负载均衡，跟虚拟主机放在一起吧，方便
+ */
+export type IUpstream = {
+  name: string
+  /**
+   * weight\backup 不能和 ip_hash 关键字一起使用。
+   * ip_hash 或者weight 轮训
+   */
+  type?:'ip_hash' | 'weight'
+  /**
+   * 是否启用
+   */
+  enable?: boolean
+  servers: {
+    host: string
+    port: number
+    weight?: number
+    /**
+     * down：表示当前的server暂时不参与负载
+     * weight：默认为1.weight越大，负载的权重就越大。
+     * backup： 其它所有的非backup机器down或者忙的时候，请求backup机器。所以这台机器压力会最轻。
+     */
+    status?: 'down' | 'backup' | 'normal'
+    /**
+     * 最大失败次数，也就是最多进行 3 次尝试，默认为1
+     */
+    max_fails?: number
+    /**
+     * 超时时间，单位秒，默认值是10s
+     */
+    fail_timeout?: number
+  }[]
+}
+
+export type INginxStream = {
+  /**
+   * 唯一索引
+   */
+  key: string
+  listen: number
+  /**
+   * 与被代理服务器建立连接的超时时间为5s
+   */
+  proxy_connect_timeout?: number
+  /**
+   * 获取被代理服务器的响应最大超时时间为10s
+   */
+  proxy_timeout?: number
+  /**
+   * 当被代理的服务器返回错误或超时时，将未返回响应的客户端连接请求传递给upstream中的下一个服务器
+   */
+  proxy_next_upstream?: boolean
+  /**
+   * 总尝试超时时间为10s
+   */
+  proxy_next_upstream_tries?: number
+  /**
+   *  总尝试超时时间为10s
+   */
+  proxy_next_upstream_timeout?: number
+  /**
+   * 开启SO_KEEPALIVE选项进行心跳检测
+   */
+  proxy_socket_keepalive?: boolean
+  /**
+   * proxy_pass
+   */
+  proxy_pass: string
+  /**
+   * 是否启用
+   */
+  enable?: boolean
+  /**
+   * 是否监听TCP，但是isSteam=true时有效
+   */
+  isUdp?: boolean;
+}
+
+export type PNginxServer = Partial<INginxServer>
+
+/**
+ * 键值对
+ */
+export type KeyValue = {
+  name: string
+  value: string
+}
+
+/**
+ * nginx 的location配置
+ */
+export type INginxLocation = Omit<NgxModuleData, "data"> & {
+  /**
+   * 唯一标识
+   */
+  id: string
+  /**
+   * location的名称
+   */
+  name: string;
+  /**
+   * 匹配规则
+   */
+  match: {
+    path: string
+    regex?: string
+  }
+  index?: string
+  root?: string
+  alias?: string
+  try_files?: string
+  proxy_set_header?: IProxyHeader[]
+  add_header?: IProxyHeader[]
+  proxy_pass?: string
+  // http_502 http_504 http_404 error timeout invalid_header
+  proxy_next_upstream?: string[]
+  //eg. 60s 1m
+  proxy_connect_timeout?: string
+  // 1.1
+  proxy_http_version?: string
+  rewrite?: IRewrite
+
+  proxy_settings?: NgxModuleData
+  gzip?: NgxModuleData
+  tmp_custom_config?: string
+  proxy_type?: 'proxy'| 'static' | 'returnBody' | 'other'
+  /**
+   * 是否为内部路由
+   */
+  internal?: boolean
+  return?: {
+    code: number
+    content: string
+  }
+  /**
+   * 临时数据，表示
+   */
+  __index__?: number
+  __deploy__?: any
+}
+
+export type PLocation = Partial<INginxLocation>
+
+export type IProxyHeader = {
+  name: string
+  value: string
+}
+
+
+export type IRewrite = {
+  /**
+   * 正则表达式
+   */
+  regex: string
+  /**
+   * 跳转后的内容
+   */
+  replacement: string
+  /**
+   * rewrite支持的flag标记
+   */
+  flag: 'last' | 'break' | 'redirect' | 'permanent'
+}
+
+/**
+ * nginx的自动化表单配置
+ */
+export type INginxFormConfig = {
+  server: FormColumnType[]
+  location: FormColumnType[]
+  addNginx: FormColumnType[]
+  nginxSettings: FormColumnType[]
+  nginxConf: FormColumnType[]
+  /**
+   * 负载均衡的
+   */
+  upstream: FormColumnType[]
+  stream: FormColumnType[]
+}
+
+/**
+ * 给定的初始值模板
+ */
+export type INginxFormTemplate = {
+  server: Partial<INginxServer>,
+  location: any,
+  addNginx: any,
+  nginxSettings: any,
+  nginxConf: any
+}

src/models/user.ts → frontend/src/models/user.ts

@@ -1,14 +1,14 @@
-/**
- * 用户
- */
-export type User = {
-    id: number
-    account: string
-    nickname: string
-    roles?: string
-    remark?: string
-    /**
-     * 缓存时间
-     */
-    timestamp: number
+/**
+ * 用户
+ */
+export type User = {
+    id: number
+    account: string
+    nickname: string
+    roles?: string
+    remark?: string
+    /**
+     * 缓存时间
+     */
+    timestamp: number
 }

frontend/src/pages/error/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * @author tuonian
+ * @date 2023/12/18
+ */
+import './less.less'
+
+
+export const ErrorPage = () => {
+
+  return (<div className="error-page">
+
+  </div>)
+}

frontend/src/pages/error/less.less

@@ -0,0 +1,3 @@
+.error-page{
+
+}

src/pages/login/index.less → frontend/src/pages/login/index.less

@@ -1,36 +1,36 @@
-.login-page{
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background: #efefef;
-  .login-container{
-    width: 400px;
-    max-width: 100%;
-    min-height: 300px;
-    background: white;
-    padding: 10px 20px 20px;
-    border-radius: 10px;
-    .ant-form{
-      margin-top: 15px;
-    }
-    .login-btn{
-      text-align: center;
-      display: flex;
-      flex-direction: row;
-      align-items: flex-end;
-      padding-left: 60px;
-      .signup{
-        font-size: 12px;
-        line-height: 15px;
-        color: #666666;
-        margin-left: 10px;
-        a{
-          color: #1890ff;
-        }
-      }
-    }
-  }
+.login-page{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #efefef;
+  .login-container{
+    width: 400px;
+    max-width: 100%;
+    min-height: 300px;
+    background: white;
+    padding: 10px 20px 20px;
+    border-radius: 10px;
+    .ant-form{
+      margin-top: 15px;
+    }
+    .login-btn{
+      text-align: center;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      padding-left: 60px;
+      .signup{
+        font-size: 12px;
+        line-height: 15px;
+        color: #666666;
+        margin-left: 10px;
+        a{
+          color: #1890ff;
+        }
+      }
+    }
+  }
 }

src/pages/login/index.tsx → frontend/src/pages/login/index.tsx

@@ -1,117 +1,117 @@
-
-import './index.less'
-import {Button, Form, Input, Spin, Tabs} from "antd";
-import {TabsProps} from "antd/lib/tabs";
-import {Link} from "react-router-dom";
-import {LoginApis, LoginReq } from "../../api/user.ts";
-import { useState} from "react";
-import {useAppDispatch} from "../../store";
-import {UserActions} from "../../store/slice/user.ts";
-import {Message} from "planning-tools";
-import {useNavigate } from "react-router";
-import {cacheTo, parseQuery, useQuery} from "../../utils";
-
-const AccountPanel = ()=>{
-
-    const [loading,setLoading] = useState(false)
-    const dispatch = useAppDispatch()
-    const navigate = useNavigate()
-    const query = useQuery<{to?: string}>()
-
-    const onSubmit = (values: LoginReq)=>{
-        console.log('submit',values);
-        setLoading(true);
-        LoginApis.login(values)
-            .then(({data})=>{
-                console.log('login resp',data)
-                if (data.data){
-                    dispatch(UserActions.setUser(data.data));
-                    navigate(query?.to || '/')
-                }
-                if (data.code == 0){
-                    Message.success(data.msg)
-                }else {
-                    Message.warning(data.msg)
-                }
-            })
-            .finally(()=>{
-                setLoading(false)
-            })
-    }
-
-    return (
-        <Form onFinish={onSubmit} labelCol={{span: 4}}>
-            <Form.Item name="account" label="账号" rules={[{required: true,message: '请输入账号'}]}>
-                <Input placeholder="请输入账号" />
-            </Form.Item>
-            <Form.Item name="password" label="密码"  rules={[{required: true,message: '请输入密码'}]}>
-                <Input.Password placeholder="请输入密码" />
-            </Form.Item>
-            <div className="login-btn">
-                <Button loading={loading} htmlType="submit" type="primary">登录</Button>
-                <span className="signup">没有账号？<Link to="/signup">去注册</Link></span>
-            </div>
-        </Form>
-    )
-}
-
-
-export const LoginPage = ()=>{
-
-    const [activeKey,setActiveKey] = useState('account')
-    const [loading,setLoading] = useState(false)
-    const { query } = parseQuery()
-    console.log('query', query)
-
-    const fetchSSO = ()=>{
-        setLoading(true)
-
-        LoginApis.oauth2Url()
-            .then(({data})=>{
-                cacheTo(query?.to);
-                window.location.href = data.data.redirect_url
-            })
-            .catch(e=>{
-                setActiveKey('account');
-                console.log('fetchSSO data fail', e)
-            })
-            .finally(()=>{
-                setLoading(false)
-            })
-    }
-
-
-    const onActiveKeyChange = (ak: string)=>{
-        if (ak === 'sso'){
-            setActiveKey(ak);
-            fetchSSO()
-        }else if (!loading){
-            setActiveKey(ak);
-        }
-    }
-
-
-    const tabItems:TabsProps["items"] = [
-        {
-            label: '账号密码',
-            key: 'account',
-            children: <AccountPanel />
-        },
-    ]
-    // @ts-ignore
-    if (window.CONFIG.SSO){
-        tabItems.push({
-            label: "SSO",
-            key: 'sso',
-            children: <Spin />
-        })
-    }
-
-    return (<div className="login-page">
-        <div className="login-container">
-            <Tabs activeKey={activeKey} onChange={onActiveKeyChange} items={tabItems}></Tabs>
-        </div>
-    </div>)
-}
-
-
+
+import './index.less'
+import {Button, Form, Input, Spin, Tabs} from "antd";
+import {TabsProps} from "antd/lib/tabs";
+import {Link} from "react-router-dom";
+import {LoginApis, LoginReq } from "../../api/user.ts";
+import { useState} from "react";
+import {useAppDispatch} from "../../store";
+import {UserActions} from "../../store/slice/user.ts";
+import {Message} from "planning-tools";
+import {useNavigate } from "react-router";
+import {cacheTo, parseQuery, useQuery} from "../../utils";
+
+const AccountPanel = ()=>{
+
+    const [loading,setLoading] = useState(false)
+    const dispatch = useAppDispatch()
+    const navigate = useNavigate()
+    const query = useQuery<{to?: string}>()
+
+    const onSubmit = (values: LoginReq)=>{
+        console.log('submit',values);
+        setLoading(true);
+        LoginApis.login(values)
+            .then(({data})=>{
+                console.log('login resp',data)
+                if (data.data){
+                    dispatch(UserActions.setUser(data.data));
+                    navigate(query?.to || '/')
+                }
+                if (data.code == 0){
+                    Message.success(data.msg)
+                }else {
+                    Message.warning(data.msg)
+                }
+            })
+            .finally(()=>{
+                setLoading(false)
+            })
+    }
+
+    return (
+        <Form onFinish={onSubmit} labelCol={{span: 4}}>
+            <Form.Item name="account" label="账号" rules={[{required: true,message: '请输入账号'}]}>
+                <Input placeholder="请输入账号" />
+            </Form.Item>
+            <Form.Item name="password" label="密码"  rules={[{required: true,message: '请输入密码'}]}>
+                <Input.Password placeholder="请输入密码" />
+            </Form.Item>
+            <div className="login-btn">
+                <Button loading={loading} htmlType="submit" type="primary">登录</Button>
+                <span className="signup">没有账号？<Link to="/signup">去注册</Link></span>
+            </div>
+        </Form>
+    )
+}
+
+
+export const LoginPage = ()=>{
+
+    const [activeKey,setActiveKey] = useState('account')
+    const [loading,setLoading] = useState(false)
+    const { query } = parseQuery()
+    console.log('query', query)
+
+    const fetchSSO = ()=>{
+        setLoading(true)
+
+        LoginApis.oauth2Url()
+            .then(({data})=>{
+                cacheTo(query?.to);
+                window.location.href = data.data.redirect_url
+            })
+            .catch(e=>{
+                setActiveKey('account');
+                console.log('fetchSSO data fail', e)
+            })
+            .finally(()=>{
+                setLoading(false)
+            })
+    }
+
+
+    const onActiveKeyChange = (ak: string)=>{
+        if (ak === 'sso'){
+            setActiveKey(ak);
+            fetchSSO()
+        }else if (!loading){
+            setActiveKey(ak);
+        }
+    }
+
+
+    const tabItems:TabsProps["items"] = [
+        {
+            label: '账号密码',
+            key: 'account',
+            children: <AccountPanel />
+        },
+    ]
+    // @ts-ignore
+    if (window.CONFIG.SSO){
+        tabItems.push({
+            label: "SSO",
+            key: 'sso',
+            children: <Spin />
+        })
+    }
+
+    return (<div className="login-page">
+        <div className="login-container">
+            <Tabs activeKey={activeKey} onChange={onActiveKeyChange} items={tabItems}></Tabs>
+        </div>
+    </div>)
+}
+
+

src/pages/nginx/certs/index.less → frontend/src/pages/nginx/certs/index.less

@@ -1,52 +1,52 @@
-.cert-page{
-  padding: 0 10px;
-  .cert-list{
-    display: flex;
-    flex-direction: column;
-  }
-  .cert-tags{
-    padding: 10px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    .ant-tag{
-      margin-bottom: 5px;
-      cursor: pointer;
-    }
-  }
-
-}
-.cert-edit-drawer{
-  .ant-drawer-header{
-    padding: 5px 10px;
-  }
-  .ant-drawer-body{
-    padding: 10px;
-
-    .ant-picker{
-      min-width: 60%;
-    }
-  }
-
-  .cert-data{
-    max-width: 900px;
-    h5{
-      font-weight: bold;
-      font-size: 16px;
-    }
-  }
-  .inline-item{
-    display: flex;
-    flex-direction: row;
-    .ant-form-item{
-      flex: 1;
-      margin-right: 10px;
-    }
-  }
-  .footer-item{
-    padding-left: 16%;
-    .ant-btn+.ant-btn{
-      margin-left: 10px;
-    }
-  }
-}
+.cert-page{
+  padding: 0 10px;
+  .cert-list{
+    display: flex;
+    flex-direction: column;
+  }
+  .cert-tags{
+    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    .ant-tag{
+      margin-bottom: 5px;
+      cursor: pointer;
+    }
+  }
+
+}
+.cert-edit-drawer{
+  .ant-drawer-header{
+    padding: 5px 10px;
+  }
+  .ant-drawer-body{
+    padding: 10px;
+
+    .ant-picker{
+      min-width: 60%;
+    }
+  }
+
+  .cert-data{
+    max-width: 900px;
+    h5{
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+  .inline-item{
+    display: flex;
+    flex-direction: row;
+    .ant-form-item{
+      flex: 1;
+      margin-right: 10px;
+    }
+  }
+  .footer-item{
+    padding-left: 16%;
+    .ant-btn+.ant-btn{
+      margin-left: 10px;
+    }
+  }
+}

src/pages/nginx/certs/index.tsx → frontend/src/pages/nginx/certs/index.tsx

@@ -1,249 +1,249 @@
-import {NginxApis} from "../../../api/nginx.ts";
-import {useAppSelector} from "../../../store";
-import {useEffect, useState} from "react";
-import {Button, Drawer, Form, Input, Modal, Table, Tooltip, Upload} from "antd";
-import {
-  DeleteOutlined,
-  EditOutlined,
-  ImportOutlined,
-  PlusOutlined, QuestionOutlined,
-  SyncOutlined,
-  UploadOutlined
-} from "@ant-design/icons";
-
-import './index.less'
-import {INginxCerts} from "../../../models/api.ts";
-import {RcFile} from "antd/es/upload";
-import {isNull, Message} from "planning-tools";
-import {ModalStaticFunctions} from "antd/es/modal/confirm";
-
-/**
- * 证书管理
- * @constructor
- */
-export const NginxCerts = () => {
-    const nginx = useAppSelector(state => state.nginx.current)
-
-    const [loading, setLoading] = useState(false)
-    const [certs, setCerts] = useState<INginxCerts[]>([])
-    const [cert, setCert] = useState<Partial<INginxCerts>>()
-    const [modal,contextHolder] = Modal.useModal()
-
-
-  const [form] = Form.useForm()
-
-    const onBeforeUpload = (name: 'pem' | 'key', file: RcFile) => {
-        console.log('onBeforeUpload', name, file.name)
-        file.text().then(v=>{
-            const data = {...cert, [name]: v };
-            setCert(data as INginxCerts)
-            form.setFieldsValue(data)
-        })
-
-        return false
-    }
-
-    const fetchList = () => {
-        if (!nginx?.id) {
-            return
-        }
-        setLoading(true)
-        NginxApis.getCerts(nginx.id)
-            .then(({data}) => {
-                const content = data.data;
-                if (!content) {
-                    setCerts([])
-                }else {
-                  setCerts(data.data)
-                }
-            })
-            .finally(() => {
-                setLoading(false)
-            })
-    }
-
-    const syncFromDisk = ()=>{
-      if (!nginx?.id){
-        return
-      }
-      setLoading(true)
-      NginxApis.syncCerts(nginx.id)
-        .then(() => {
-          fetchList()
-        })
-        .finally(() => {
-          setLoading(false)
-        })
-    }
-
-    const onAddData = ()=>{
-        setCert({})
-        form.resetFields()
-    }
-
-  const onEditCert = (data: INginxCerts)=>{
-    const fields = { ...data }
-    setCert(fields)
-    form.setFieldsValue(fields)
-  }
-
-    const onSubmitData = async ()=>{
-        if (!nginx?.id){
-          Message.warning('缓存数据异常，请退出到首页重新进去nginx实例配置页面。')
-            return
-        }
-        const values = await form.validateFields()
-        console.log('values',values);
-        setLoading(true);
-        const postData = { ...cert, ...values}
-        postData.nginxId = nginx.id
-        NginxApis.saveCerts(nginx.id, postData)
-            .then(({data})=>{
-                console.log('data',data);
-                Message.success('保存成功！');
-                setCert(undefined)
-                fetchList();
-            })
-            .finally(()=>{
-                setLoading(false)
-            })
-    }
-
-
-    useEffect(() => {
-        fetchList()
-    }, [])
-
-    return (<div className="page cert-page">
-        <div className="page-header">
-            <Button type="primary" loading={loading} onClick={fetchList} icon={<SyncOutlined/>}/>
-            <Button onClick={onAddData} icon={<PlusOutlined/>}/>
-            <div style={{flex:1}} />
-          <Tooltip placement="left" title="从数据目录中导入，适用于初始化;如果数据库中已存在，会覆盖，请谨慎处理">
-            <Button danger loading={loading} onClick={syncFromDisk} icon={<ImportOutlined/>}></Button>
-          </Tooltip>
-        </div>
-        <div className="page-container cert-list">
-          <Table rowKey="id" dataSource={certs} pagination={false}>
-            <Table.Column
-              title="名称"
-              dataIndex="serviceName"
-            />
-            <Table.Column
-              title="域名"
-              dataIndex="subjectName"
-              render={(v,data: INginxCerts)=>{
-                return (<>
-                  {v || '--'}
-                  { data.hintMsg ? <Tooltip title={data.hintMsg}><QuestionOutlined /></Tooltip> : null }
-                </>)
-              }}
-            />
-            <Table.Column title="添加时间" dataIndex="createdAt" />
-            <Table.Column title="过期时间" dataIndex="expiresAt" />
-            <Table.Column title="备注" dataIndex="remark" />
-            <Table.Column title="操作" dataIndex="ops"
-                          width={120}
-                          render={(_,data: INginxCerts)=>(<>
-                            <DelButton onRefresh={fetchList} cert={data} nginxId={nginx?.id || 0} modal={modal} />
-                            <Button onClick={()=>onEditCert(data)} type="link" icon={<EditOutlined />}></Button>
-            </>)} />
-          </Table>
-          <Drawer open={!!cert}
-                  width={750}
-                  className="cert-edit-drawer"
-                  onClose={()=>setCert(undefined)}
-                  destroyOnClose
-                  title={isNull(cert?.id) ?'添加证书': '编辑证书'}>
-
-            <div className="cert-data">
-              <Form form={form} initialValues={cert} labelCol={{span: 4}}>
-                <Form.Item name="serviceName"
-                           rules={[{required: true, message: '请输入域名或者名称，唯一不可重复'}]}
-                           label="域名">
-                  <Input />
-                </Form.Item>
-                <div className="inline-item" >
-                  <Form.Item name="pem"
-                             rules={[{required: true, message: '请输入或者选择证书'}]}
-                             label="pem证书">
-                    <Input.TextArea rows={8}/>
-
-                  </Form.Item>
-                  <Upload beforeUpload={(file) => onBeforeUpload("pem", file)}
-                          showUploadList={false}
-                          accept=".pem">
-                    <Button icon={<UploadOutlined/>}></Button>
-                  </Upload>
-                </div>
-                <div className="inline-item" >
-                  <Form.Item name="key"
-                             rules={[{required: true, message: '请输入或者选择私钥'}]}
-                             label="私钥">
-                    <Input.TextArea rows={8} />
-
-                  </Form.Item>
-                  <Upload beforeUpload={(file) => onBeforeUpload("key", file)}
-                          showUploadList={false}
-                          accept=".key">
-                    <Button icon={<UploadOutlined/>}></Button>
-                  </Upload>
-                </div>
-
-                <Form.Item name="remark" label="备注">
-                  <Input.TextArea />
-                </Form.Item>
-                <Form.Item className="footer-item">
-                  <Button onClick={()=>setCert(undefined)}>取消</Button>
-                  <Button loading={loading} onClick={onSubmitData} type="primary">保存</Button>
-                </Form.Item>
-              </Form>
-            </div>
-          </Drawer>
-        </div>
-      {contextHolder}
-
-    </div>)
-}
-type IProps = {
-    cert: INginxCerts
-    nginxId: number
-    onRefresh: () => void
-  modal: Omit<ModalStaticFunctions, "warn">
-}
-const DelButton = ({cert, nginxId, onRefresh, modal}: IProps)=>{
-
-    const [loading,setLoading] = useState(false)
-
-    const onDel = (e: any)=>{
-        e.preventDefault()
-        modal.confirm({
-            title: '警告',
-            content: '您确定要删除该证书信息吗？删除操作不可恢复，请谨慎操作.',
-            okType: 'danger',
-            cancelText: '取消',
-            okText: '确定',
-            onOk: ()=>{
-                setLoading(true)
-                NginxApis.delCerts(nginxId, cert.id)
-                    .then(()=>{
-                        onRefresh?.()
-                    })
-                    .finally(()=>{
-                        setLoading(false)
-                    })
-            }
-        })
-    }
-
-
-
-    return <>
-        <Button onClick={onDel}
-                loading={loading}
-                type="text"
-                danger
-                icon={<DeleteOutlined />}
-        />
-    </>
-}
+import {NginxApis} from "../../../api/nginx.ts";
+import {useAppSelector} from "../../../store";
+import {useEffect, useState} from "react";
+import {Button, Drawer, Form, Input, Modal, Table, Tooltip, Upload} from "antd";
+import {
+  DeleteOutlined,
+  EditOutlined,
+  ImportOutlined,
+  PlusOutlined, QuestionOutlined,
+  SyncOutlined,
+  UploadOutlined
+} from "@ant-design/icons";
+
+import './index.less'
+import {INginxCerts} from "../../../models/api.ts";
+import {RcFile} from "antd/es/upload";
+import {isNull, Message} from "planning-tools";
+import {ModalStaticFunctions} from "antd/es/modal/confirm";
+
+/**
+ * 证书管理
+ * @constructor
+ */
+export const NginxCerts = () => {
+    const nginx = useAppSelector(state => state.nginx.current)
+
+    const [loading, setLoading] = useState(false)
+    const [certs, setCerts] = useState<INginxCerts[]>([])
+    const [cert, setCert] = useState<Partial<INginxCerts>>()
+    const [modal,contextHolder] = Modal.useModal()
+
+
+  const [form] = Form.useForm()
+
+    const onBeforeUpload = (name: 'pem' | 'key', file: RcFile) => {
+        console.log('onBeforeUpload', name, file.name)
+        file.text().then(v=>{
+            const data = {...cert, [name]: v };
+            setCert(data as INginxCerts)
+            form.setFieldsValue(data)
+        })
+
+        return false
+    }
+
+    const fetchList = () => {
+        if (!nginx?.id) {
+            return
+        }
+        setLoading(true)
+        NginxApis.getCerts(nginx.id)
+            .then(({data}) => {
+                const content = data.data;
+                if (!content) {
+                    setCerts([])
+                }else {
+                  setCerts(data.data)
+                }
+            })
+            .finally(() => {
+                setLoading(false)
+            })
+    }
+
+    const syncFromDisk = ()=>{
+      if (!nginx?.id){
+        return
+      }
+      setLoading(true)
+      NginxApis.syncCerts(nginx.id)
+        .then(() => {
+          fetchList()
+        })
+        .finally(() => {
+          setLoading(false)
+        })
+    }
+
+    const onAddData = ()=>{
+        setCert({})
+        form.resetFields()
+    }
+
+  const onEditCert = (data: INginxCerts)=>{
+    const fields = { ...data }
+    setCert(fields)
+    form.setFieldsValue(fields)
+  }
+
+    const onSubmitData = async ()=>{
+        if (!nginx?.id){
+          Message.warning('缓存数据异常，请退出到首页重新进去nginx实例配置页面。')
+            return
+        }
+        const values = await form.validateFields()
+        console.log('values',values);
+        setLoading(true);
+        const postData = { ...cert, ...values}
+        postData.nginxId = nginx.id
+        NginxApis.saveCerts(nginx.id, postData)
+            .then(({data})=>{
+                console.log('data',data);
+                Message.success('保存成功！');
+                setCert(undefined)
+                fetchList();
+            })
+            .finally(()=>{
+                setLoading(false)
+            })
+    }
+
+
+    useEffect(() => {
+        fetchList()
+    }, [])
+
+    return (<div className="page cert-page">
+        <div className="page-header">
+            <Button type="primary" loading={loading} onClick={fetchList} icon={<SyncOutlined/>}/>
+            <Button onClick={onAddData} icon={<PlusOutlined/>}/>
+            <div style={{flex:1}} />
+          <Tooltip placement="left" title="从数据目录中导入，适用于初始化;如果数据库中已存在，会覆盖，请谨慎处理">
+            <Button danger loading={loading} onClick={syncFromDisk} icon={<ImportOutlined/>}></Button>
+          </Tooltip>
+        </div>
+        <div className="page-container cert-list">
+          <Table rowKey="id" dataSource={certs} pagination={false}>
+            <Table.Column
+              title="名称"
+              dataIndex="serviceName"
+            />
+            <Table.Column
+              title="域名"
+              dataIndex="subjectName"
+              render={(v,data: INginxCerts)=>{
+                return (<>
+                  {v || '--'}
+                  { data.hintMsg ? <Tooltip title={data.hintMsg}><QuestionOutlined /></Tooltip> : null }
+                </>)
+              }}
+            />
+            <Table.Column title="添加时间" dataIndex="createdAt" />
+            <Table.Column title="过期时间" dataIndex="expiresAt" />
+            <Table.Column title="备注" dataIndex="remark" />
+            <Table.Column title="操作" dataIndex="ops"
+                          width={120}
+                          render={(_,data: INginxCerts)=>(<>
+                            <DelButton onRefresh={fetchList} cert={data} nginxId={nginx?.id || 0} modal={modal} />
+                            <Button onClick={()=>onEditCert(data)} type="link" icon={<EditOutlined />}></Button>
+            </>)} />
+          </Table>
+          <Drawer open={!!cert}
+                  width={750}
+                  className="cert-edit-drawer"
+                  onClose={()=>setCert(undefined)}
+                  destroyOnClose
+                  title={isNull(cert?.id) ?'添加证书': '编辑证书'}>
+
+            <div className="cert-data">
+              <Form form={form} initialValues={cert} labelCol={{span: 4}}>
+                <Form.Item name="serviceName"
+                           rules={[{required: true, message: '请输入域名或者名称，唯一不可重复'}]}
+                           label="域名">
+                  <Input />
+                </Form.Item>
+                <div className="inline-item" >
+                  <Form.Item name="pem"
+                             rules={[{required: true, message: '请输入或者选择证书'}]}
+                             label="pem证书">
+                    <Input.TextArea rows={8}/>
+
+                  </Form.Item>
+                  <Upload beforeUpload={(file) => onBeforeUpload("pem", file)}
+                          showUploadList={false}
+                          accept=".pem">
+                    <Button icon={<UploadOutlined/>}></Button>
+                  </Upload>
+                </div>
+                <div className="inline-item" >
+                  <Form.Item name="key"
+                             rules={[{required: true, message: '请输入或者选择私钥'}]}
+                             label="私钥">
+                    <Input.TextArea rows={8} />
+
+                  </Form.Item>
+                  <Upload beforeUpload={(file) => onBeforeUpload("key", file)}
+                          showUploadList={false}
+                          accept=".key">
+                    <Button icon={<UploadOutlined/>}></Button>
+                  </Upload>
+                </div>
+
+                <Form.Item name="remark" label="备注">
+                  <Input.TextArea />
+                </Form.Item>
+                <Form.Item className="footer-item">
+                  <Button onClick={()=>setCert(undefined)}>取消</Button>
+                  <Button loading={loading} onClick={onSubmitData} type="primary">保存</Button>
+                </Form.Item>
+              </Form>
+            </div>
+          </Drawer>
+        </div>
+      {contextHolder}
+
+    </div>)
+}
+type IProps = {
+    cert: INginxCerts
+    nginxId: number
+    onRefresh: () => void
+  modal: Omit<ModalStaticFunctions, "warn">
+}
+const DelButton = ({cert, nginxId, onRefresh, modal}: IProps)=>{
+
+    const [loading,setLoading] = useState(false)
+
+    const onDel = (e: any)=>{
+        e.preventDefault()
+        modal.confirm({
+            title: '警告',
+            content: '您确定要删除该证书信息吗？删除操作不可恢复，请谨慎操作.',
+            okType: 'danger',
+            cancelText: '取消',
+            okText: '确定',
+            onOk: ()=>{
+                setLoading(true)
+                NginxApis.delCerts(nginxId, cert.id)
+                    .then(()=>{
+                        onRefresh?.()
+                    })
+                    .finally(()=>{
+                        setLoading(false)
+                    })
+            }
+        })
+    }
+
+
+
+    return <>
+        <Button onClick={onDel}
+                loading={loading}
+                type="text"
+                danger
+                icon={<DeleteOutlined />}
+        />
+    </>
+}

src/pages/nginx/components/EditNginxBtn.tsx → frontend/src/pages/nginx/components/EditNginxBtn.tsx

@@ -1,56 +1,56 @@
-/**
- * @author tuonian
- * @date 2023/6/30
- */
-import {INginx} from "../../../models/nginx.ts";
-import {NginxActions} from "../../../store/slice/nginx.ts";
-import {useState} from "react";
-import {EditOutlined} from "@ant-design/icons";
-import {Button} from "antd";
-import {NginxApis} from "../../../api/nginx.ts";
-import {Notify} from "planning-tools";
-import {useAppDispatch} from "../../../store";
-import {useNavigate} from "react-router";
-import {nginxPrefix} from "../../../routes/routes.tsx";
-
-type IProps = {
-  nginx: INginx
-}
-
-
-export const EditNginxBtn = ({nginx}: IProps)=>{
-
-  const [loading,setLoading] = useState(false)
-  const dispatch = useAppDispatch()
-  const navigate = useNavigate()
-
-  const toNginx = ()=>{
-    setLoading(true);
-    NginxApis.getNginx(nginx.id)
-      .then(({data})=>{
-        const respData = data.data;
-        if (!respData){
-          Notify.warn('查询失败，请重试！');
-          return
-        }
-        console.log('getNginx', data)
-        dispatch(NginxActions.setCurrent({
-            nginx,
-            servers: respData.servers
-        }))
-        navigate(nginxPrefix(nginx.id))
-      })
-      .catch(e=>{
-        Notify.warn(e.msg || e.message)
-      })
-      .finally(()=>{
-        setLoading(false)
-      })
-
-
-  }
-
-  return (
-    <Button loading={loading} onClick={()=>toNginx()} type="link" icon={<EditOutlined />} />
-  )
-}
+/**
+ * @author tuonian
+ * @date 2023/6/30
+ */
+import {INginx} from "../../../models/nginx.ts";
+import {NginxActions} from "../../../store/slice/nginx.ts";
+import {useState} from "react";
+import {EditOutlined} from "@ant-design/icons";
+import {Button} from "antd";
+import {NginxApis} from "../../../api/nginx.ts";
+import {Notify} from "planning-tools";
+import {useAppDispatch} from "../../../store";
+import {useNavigate} from "react-router";
+import {nginxPrefix} from "../../../routes/routes.tsx";
+
+type IProps = {
+  nginx: INginx
+}
+
+
+export const EditNginxBtn = ({nginx}: IProps)=>{
+
+  const [loading,setLoading] = useState(false)
+  const dispatch = useAppDispatch()
+  const navigate = useNavigate()
+
+  const toNginx = ()=>{
+    setLoading(true);
+    NginxApis.getNginx(nginx.id)
+      .then(({data})=>{
+        const respData = data.data;
+        if (!respData){
+          Notify.warn('查询失败，请重试！');
+          return
+        }
+        console.log('getNginx', data)
+        dispatch(NginxActions.setCurrent({
+            nginx,
+            servers: respData.servers
+        }))
+        navigate(nginxPrefix(nginx.id))
+      })
+      .catch(e=>{
+        Notify.warn(e.msg || e.message)
+      })
+      .finally(()=>{
+        setLoading(false)
+      })
+
+
+  }
+
+  return (
+    <Button loading={loading} onClick={()=>toNginx()} type="link" icon={<EditOutlined />} />
+  )
+}

src/pages/nginx/components/StopStartButton.tsx → frontend/src/pages/nginx/components/StopStartButton.tsx

@@ -1,97 +1,97 @@
-import {useEffect, useState} from "react";
-import {Button, Modal, Tag} from "antd";
-import {isNull, Message} from "planning-tools";
-import {NginxApis} from "../../../api/nginx.ts";
-import {useAppSelector} from "../../../store";
-
-/**
- *
- * @constructor
- */
-export const StopStartButton = () => {
-
-    const [isRun,setIsRun] = useState<boolean>()
-    const [loading,setLoading] = useState(false)
-    const [modal,contextHolder] = Modal.useModal()
-
-    const nginx = useAppSelector(state => state.nginx.current)
-
-    const fetchStatus = () => {
-        if (!nginx){
-            return
-        }
-        setLoading(true)
-        NginxApis.status(nginx.id)
-            .then(({data})=>{
-                setIsRun(data.data)
-                console.log('status', data)
-                if (!data.msg){
-                    return
-                }
-                if (data.data){
-                    Message.success(data.msg)
-                }else {
-                    Message.warning(data.msg)
-                }
-            })
-            .finally(()=>{
-                setLoading(false)
-            })
-    }
-
-
-    const postStartOrStopApi = ()=>{
-        if (!nginx){
-            return
-        }
-        setLoading(true)
-        const request = isRun ? NginxApis.stopNginx(nginx.id) : NginxApis.startNginx(nginx.id);
-        request.then(({data})=>{
-            console.log('data', data);
-            setIsRun(data.data);
-            if (data.msg){
-                Message.warning(data.msg)
-            }
-        }).finally(()=>{
-            setLoading(false)
-        })
-    }
-    const onStartOrStop  = () => {
-        if (isNull(isRun)){
-            fetchStatus()
-            return
-        }
-        modal.confirm({
-            type: 'warning',
-            title: `您确定要${isRun ? '停止' : '启动'}nginx服务吗？`,
-            okType: 'danger',
-            okText: '确定',
-            cancelText: '取消',
-            onOk: ()=>{
-                postStartOrStopApi()
-            }
-        })
-    }
-
-    useEffect(()=>{
-        fetchStatus()
-    },[])
-
-    if (!nginx){
-        return null
-    }
-
-    return (<>
-      <span>Nginx：</span>
-      <Tag color={isNull(isRun) ? 'grey': isRun ? 'green': 'red'}>{isNull(isRun) ? '未知': isRun ? '运行中':'已停止'}</Tag>
-        <Button type={ isRun?'default' : 'primary'}
-                onClick={onStartOrStop}
-                hidden={isNull(isRun)}
-                size="small"
-                danger={isRun}
-                loading={loading}>
-            { isRun ? '停止':'启动'}
-        </Button>
-        {contextHolder}
-        </>)
-}
+import {useEffect, useState} from "react";
+import {Button, Modal, Tag} from "antd";
+import {isNull, Message} from "planning-tools";
+import {NginxApis} from "../../../api/nginx.ts";
+import {useAppSelector} from "../../../store";
+
+/**
+ *
+ * @constructor
+ */
+export const StopStartButton = () => {
+
+    const [isRun,setIsRun] = useState<boolean>()
+    const [loading,setLoading] = useState(false)
+    const [modal,contextHolder] = Modal.useModal()
+
+    const nginx = useAppSelector(state => state.nginx.current)
+
+    const fetchStatus = () => {
+        if (!nginx){
+            return
+        }
+        setLoading(true)
+        NginxApis.status(nginx.id)
+            .then(({data})=>{
+                setIsRun(data.data)
+                console.log('status', data)
+                if (!data.msg){
+                    return
+                }
+                if (data.data){
+                    Message.success(data.msg)
+                }else {
+                    Message.warning(data.msg)
+                }
+            })
+            .finally(()=>{
+                setLoading(false)
+            })
+    }
+
+
+    const postStartOrStopApi = ()=>{
+        if (!nginx){
+            return
+        }
+        setLoading(true)
+        const request = isRun ? NginxApis.stopNginx(nginx.id) : NginxApis.startNginx(nginx.id);
+        request.then(({data})=>{
+            console.log('data', data);
+            setIsRun(data.data);
+            if (data.msg){
+                Message.warning(data.msg)
+            }
+        }).finally(()=>{
+            setLoading(false)
+        })
+    }
+    const onStartOrStop  = () => {
+        if (isNull(isRun)){
+            fetchStatus()
+            return
+        }
+        modal.confirm({
+            type: 'warning',
+            title: `您确定要${isRun ? '停止' : '启动'}nginx服务吗？`,
+            okType: 'danger',
+            okText: '确定',
+            cancelText: '取消',
+            onOk: ()=>{
+                postStartOrStopApi()
+            }
+        })
+    }
+
+    useEffect(()=>{
+        fetchStatus()
+    },[])
+
+    if (!nginx){
+        return null
+    }
+
+    return (<>
+      <span>Nginx：</span>
+      <Tag color={isNull(isRun) ? 'grey': isRun ? 'green': 'red'}>{isNull(isRun) ? '未知': isRun ? '运行中':'已停止'}</Tag>
+        <Button type={ isRun?'default' : 'primary'}
+                onClick={onStartOrStop}
+                hidden={isNull(isRun)}
+                size="small"
+                danger={isRun}
+                loading={loading}>
+            { isRun ? '停止':'启动'}
+        </Button>
+        {contextHolder}
+        </>)
+}

src/pages/nginx/components/auth/config.json → frontend/src/pages/nginx/components/auth/config.json

@@ -1,42 +1,42 @@
-{
-  "form": [
-    {
-      "title": "是否启用",
-      "key": "auth_request_on",
-      "required": false,
-      "type": "switch",
-      "cascade": {
-        "true": [
-          {
-            "title": "auth_request_uri",
-            "key": "auth_request_uri",
-            "type": "string",
-            "placeholder": "输入鉴权的路由",
-            "width": 382
-          }
-        ]
-      }
-    },
-    {
-      "title": "auth_request_set",
-      "key": "auth_request_set",
-      "required": false,
-      "type": "array",
-      "items": [
-        {
-          "key": "name",
-          "title": "变量",
-          "type": "string",
-          "width": 120
-        },
-        {
-          "key": "value",
-          "title": "变量值",
-          "type": "string",
-          "width": 200
-        }
-      ],
-      "description": "Sets the request variable to the given value after the authorization request completes. The value may contain variables from the authorization request, such as $upstream_http_*."
-    }
-  ]
-}
+{
+  "form": [
+    {
+      "title": "是否启用",
+      "key": "auth_request_on",
+      "required": false,
+      "type": "switch",
+      "cascade": {
+        "true": [
+          {
+            "title": "auth_request_uri",
+            "key": "auth_request_uri",
+            "type": "string",
+            "placeholder": "输入鉴权的路由",
+            "width": 382
+          }
+        ]
+      }
+    },
+    {
+      "title": "auth_request_set",
+      "key": "auth_request_set",
+      "required": false,
+      "type": "array",
+      "items": [
+        {
+          "key": "name",
+          "title": "变量",
+          "type": "string",
+          "width": 120
+        },
+        {
+          "key": "value",
+          "title": "变量值",
+          "type": "string",
+          "width": 200
+        }
+      ],
+      "description": "Sets the request variable to the given value after the authorization request completes. The value may contain variables from the authorization request, such as $upstream_http_*."
+    }
+  ]
+}

src/pages/nginx/components/auth/index.less → frontend/src/pages/nginx/components/auth/index.less

@@ -1,10 +1,10 @@
-.gzip-input{
-  margin-right: 10px;
-}
-
-.gzip-popover{
-  .auto-form{
-    min-width: 450px;
-    width: 550px;
-  }
-}
+.gzip-input{
+  margin-right: 10px;
+}
+
+.gzip-popover{
+  .auto-form{
+    min-width: 450px;
+    width: 550px;
+  }
+}

src/pages/nginx/components/auth/index.tsx → frontend/src/pages/nginx/components/auth/index.tsx

@@ -1,40 +1,40 @@
-/**
- * @author tuonian
- * @date 2023/7/5
- */
-import {AutoTypeInputProps} from 'planning-tools'
-import './index.less'
-import config from './config.json'
-import {IContentProps, NgxBasicInput, registerInput} from "../basic";
-import {KeyValue} from "../../../../models/nginx.ts";
-
-export const AuthInput = ({...props}: AutoTypeInputProps)=>{
-
-  const ShowContent = ({data}: IContentProps)=>{
-    return (<span>{data.auth_request_on ? data.auth_request_uri : '不启用'}</span>)
-  }
-
-  const renderLines = (values: any)=>{
-    const lines: string[] = []
-    if (!values.auth_request_on){
-      return lines
-    }
-    lines.push(`auth_request  ${values.auth_request_uri};`)
-    if (Array.isArray(values.auth_request_set)){
-      values.auth_request_set.forEach((item: KeyValue)=>{
-        lines.push(`auth_request_set  ${item.name}  ${item.value};`)
-      })
-    }
-    return lines;
-  }
-
-  return <NgxBasicInput
-    {...props}
-    columns={config.form}
-    renderLines={renderLines}
-    content={ShowContent}
-    />
-}
-
-registerInput('auth', AuthInput)
-
+/**
+ * @author tuonian
+ * @date 2023/7/5
+ */
+import {AutoTypeInputProps} from 'planning-tools'
+import './index.less'
+import config from './config.json'
+import {IContentProps, NgxBasicInput, registerInput} from "../basic";
+import {KeyValue} from "../../../../models/nginx.ts";
+
+export const AuthInput = ({...props}: AutoTypeInputProps)=>{
+
+  const ShowContent = ({data}: IContentProps)=>{
+    return (<span>{data.auth_request_on ? data.auth_request_uri : '不启用'}</span>)
+  }
+
+  const renderLines = (values: any)=>{
+    const lines: string[] = []
+    if (!values.auth_request_on){
+      return lines
+    }
+    lines.push(`auth_request  ${values.auth_request_uri};`)
+    if (Array.isArray(values.auth_request_set)){
+      values.auth_request_set.forEach((item: KeyValue)=>{
+        lines.push(`auth_request_set  ${item.name}  ${item.value};`)
+      })
+    }
+    return lines;
+  }
+
+  return <NgxBasicInput
+    {...props}
+    columns={config.form}
+    renderLines={renderLines}
+    content={ShowContent}
+    />
+}
+
+registerInput('auth', AuthInput)
+

src/pages/nginx/components/basic/index.less → frontend/src/pages/nginx/components/basic/index.less

@@ -1,37 +1,37 @@
-.popover-input{
-  margin-right: 10px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.popover-popover{
-  .auto-form{
-    min-width: 450px;
-    width: 550px;
-  }
-  .form-btns{
-    padding-left: 25%;
-    .ant-btn+.ant-btn{
-      margin-left: 10px;
-    }
-  }
-}
-
-.drawer-input{
-  .ant-drawer-header{
-    padding: 5px 15px;
-  }
-  .ant-drawer-body{
-    padding: 15px;
-    .form-btns{
-      padding-left: 16%;
-      .ant-btn+.ant-btn{
-        margin-left: 10px;
-      }
-    }
-  }
-  .ant-drawer-content-wrapper{
-
-  }
-}
+.popover-input{
+  margin-right: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.popover-popover{
+  .auto-form{
+    min-width: 450px;
+    width: 550px;
+  }
+  .form-btns{
+    padding-left: 25%;
+    .ant-btn+.ant-btn{
+      margin-left: 10px;
+    }
+  }
+}
+
+.drawer-input{
+  .ant-drawer-header{
+    padding: 5px 15px;
+  }
+  .ant-drawer-body{
+    padding: 15px;
+    .form-btns{
+      padding-left: 16%;
+      .ant-btn+.ant-btn{
+        margin-left: 10px;
+      }
+    }
+  }
+  .ant-drawer-content-wrapper{
+
+  }
+}

src/pages/nginx/components/basic/index.tsx → frontend/src/pages/nginx/components/basic/index.tsx

@@ -1,133 +1,133 @@
-/**
- * @author tuonian
- * @date 2023/7/5
- */
-import {AdvanceInputConfigs, AutoForm, AutoTypeInputProps, FormColumnType} from 'planning-tools'
-import {Button, Drawer, FormInstance, Popover} from "antd";
-import {EditOutlined} from "@ant-design/icons";
-import React, {useEffect, useState} from "react";
-import {AutoFormFooterProps} from "planning-tools/dist/esm/Components/AutoForm/form";
-import {NgxModuleData} from "../input.ts";
-import './index.less'
-import {DrawerProps} from "antd/lib/drawer";
-
-export type OnChange = (values: any) => void
-
-export type IContentProps<T = any> = {
-  data: T
-  onChange: OnChange
-}
-
-type IProps = {
-  content: React.FC<IContentProps>
-  columns?: FormColumnType[]
-  renderLines: (values: any) => string[]
-  renderHttpLines?: (values: any) =>string[]
-  overlayClassName?: string
-  labelCol?: number;
-  drawer?: boolean;
-  drawerProps?: Partial<DrawerProps>
-}
-export const NgxBasicInput = (
-  {
-    content: ContentComp,
-    columns = [],
-    renderLines,
-      renderHttpLines,
-    overlayClassName,
-    labelCol = 6,
-    value, onChange,
-      drawer,
-      drawerProps,
-  }: IProps & AutoTypeInputProps) => {
-
-  const [data, setData] = useState<any>({})
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    if (value?.data) {
-      setData(value.data || {})
-    }
-  }, [value])
-
-  const triggerChange = (values: any) => {
-    const lines = renderLines(values)
-    onChange?.({
-      data: values,
-      lines: lines,
-      http: renderHttpLines?.(values) || []
-    } as NgxModuleData)
-  }
-
-  const onValuesChange = (values: any) => {
-    const current = {...data, ...values}
-    setData(current)
-    setOpen(false)
-    triggerChange(current)
-  }
-
-  const onSubmitData = async (form: FormInstance | null) => {
-    if (!form) {
-      return
-    }
-    const values = await form.validateFields();
-    console.log('values', values);
-    onValuesChange(values)
-  }
-
-  const renderFormFooter = ({formRef}: AutoFormFooterProps) => {
-    return (<div className="form-btns">
-      <Button onClick={() => onSubmitData(formRef.current as never)} type="primary">保存</Button>
-      <Button onClick={() => setOpen(false)}>取消</Button>
-    </div>)
-  }
-
-  const renderForm = () => {
-    return (<AutoForm columns={columns}
-                      formProps={{
-                        labelCol: {span: labelCol}
-                      }}
-                      onlyFields={true}
-                      footer={renderFormFooter}
-                      data={data}/>)
-  }
-
-  const renderFormContainer = ()=>{
-      if (drawer){
-          return (<>
-              <Button type="link" onClick={() => setOpen(true)} icon={<EditOutlined/>}/>
-              <Drawer open={open}
-                      destroyOnClose
-                      onClose={()=>setOpen(false)}
-                      width={500}
-                      className="drawer-input"
-                      {...drawerProps}
-              >
-                  {renderForm()}
-              </Drawer>
-              </>)
-      }
-      return (
-          <Popover destroyTooltipOnHide
-                   overlayClassName={`popover-popover ${overlayClassName || ''}`}
-                   placement="right"
-                   open={open}
-                   onOpenChange={o => setOpen(o)}
-                   trigger="click" content={renderForm}>
-              <Button type="link" onClick={() => setOpen(true)} icon={<EditOutlined/>}/>
-          </Popover>
-      )
-  }
-
-  return (<div className="popover-input">
-    <ContentComp data={data} onChange={onValuesChange}/>
-      {renderFormContainer()}
-  </div>)
-}
-
-/**
- * 注册自定义的输入框
- * @param type
- * @param Component
- */
-export const registerInput = (type: string, Component: React.FC<AutoTypeInputProps>) => AdvanceInputConfigs[type] = Component
+/**
+ * @author tuonian
+ * @date 2023/7/5
+ */
+import {AdvanceInputConfigs, AutoForm, AutoTypeInputProps, FormColumnType} from 'planning-tools'
+import {Button, Drawer, FormInstance, Popover} from "antd";
+import {EditOutlined} from "@ant-design/icons";
+import React, {useEffect, useState} from "react";
+import {AutoFormFooterProps} from "planning-tools/dist/esm/Components/AutoForm/form";
+import {NgxModuleData} from "../input.ts";
+import './index.less'
+import {DrawerProps} from "antd/lib/drawer";
+
+export type OnChange = (values: any) => void
+
+export type IContentProps<T = any> = {
+  data: T
+  onChange: OnChange
+}
+
+type IProps = {
+  content: React.FC<IContentProps>
+  columns?: FormColumnType[]
+  renderLines: (values: any) => string[]
+  renderHttpLines?: (values: any) =>string[]
+  overlayClassName?: string
+  labelCol?: number;
+  drawer?: boolean;
+  drawerProps?: Partial<DrawerProps>
+}
+export const NgxBasicInput = (
+  {
+    content: ContentComp,
+    columns = [],
+    renderLines,
+      renderHttpLines,
+    overlayClassName,
+    labelCol = 6,
+    value, onChange,
+      drawer,
+      drawerProps,
+  }: IProps & AutoTypeInputProps) => {
+
+  const [data, setData] = useState<any>({})
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (value?.data) {
+      setData(value.data || {})
+    }
+  }, [value])
+
+  const triggerChange = (values: any) => {
+    const lines = renderLines(values)
+    onChange?.({
+      data: values,
+      lines: lines,
+      http: renderHttpLines?.(values) || []
+    } as NgxModuleData)
+  }
+
+  const onValuesChange = (values: any) => {
+    const current = {...data, ...values}
+    setData(current)
+    setOpen(false)
+    triggerChange(current)
+  }
+
+  const onSubmitData = async (form: FormInstance | null) => {
+    if (!form) {
+      return
+    }
+    const values = await form.validateFields();
+    console.log('values', values);
+    onValuesChange(values)
+  }
+
+  const renderFormFooter = ({formRef}: AutoFormFooterProps) => {
+    return (<div className="form-btns">
+      <Button onClick={() => onSubmitData(formRef.current as never)} type="primary">保存</Button>
+      <Button onClick={() => setOpen(false)}>取消</Button>
+    </div>)
+  }
+
+  const renderForm = () => {
+    return (<AutoForm columns={columns}
+                      formProps={{
+                        labelCol: {span: labelCol}
+                      }}
+                      onlyFields={true}
+                      footer={renderFormFooter}
+                      data={data}/>)
+  }
+
+  const renderFormContainer = ()=>{
+      if (drawer){
+          return (<>
+              <Button type="link" onClick={() => setOpen(true)} icon={<EditOutlined/>}/>
+              <Drawer open={open}
+                      destroyOnClose
+                      onClose={()=>setOpen(false)}
+                      width={500}
+                      className="drawer-input"
+                      {...drawerProps}
+              >
+                  {renderForm()}
+              </Drawer>
+              </>)
+      }
+      return (
+          <Popover destroyTooltipOnHide
+                   overlayClassName={`popover-popover ${overlayClassName || ''}`}
+                   placement="right"
+                   open={open}
+                   onOpenChange={o => setOpen(o)}
+                   trigger="click" content={renderForm}>
+              <Button type="link" onClick={() => setOpen(true)} icon={<EditOutlined/>}/>
+          </Popover>
+      )
+  }
+
+  return (<div className="popover-input">
+    <ContentComp data={data} onChange={onValuesChange}/>
+      {renderFormContainer()}
+  </div>)
+}
+
+/**
+ * 注册自定义的输入框
+ * @param type
+ * @param Component
+ */
+export const registerInput = (type: string, Component: React.FC<AutoTypeInputProps>) => AdvanceInputConfigs[type] = Component

src/pages/nginx/components/certs/index.tsx → frontend/src/pages/nginx/components/certs/index.tsx

@@ -1,52 +1,52 @@
-import {AdvanceInputConfigs, AutoTypeInputProps} from "planning-tools";
-import {Select} from "antd";
-import {useEffect, useState} from "react";
-import {NginxApis} from "../../../../api/nginx.ts";
-import {useAppSelector} from "../../../../store";
-import {INginxCerts} from "../../../../models/api.ts";
-/**
- * @author tuonian
- * @date 2023/7/4
- */
-
-export const CertsSelect = ({value, onChange }: AutoTypeInputProps)=>{
-
-  const [loading,setLoading] = useState(false)
-  const [options,setOptions] = useState<any[]>([])
-
-  const nginx = useAppSelector(state => state.nginx.current)
-
-  const fetchCerts = ()=>{
-    if (!nginx?.id){
-      return
-    }
-    setLoading(true)
-    NginxApis.getCerts(nginx.id)
-      .then(({data})=>{
-        const list = Array.isArray(data.data) ?data.data.map((item: INginxCerts)=>{
-          return {
-            label: item.serviceName,
-            value: item.serviceName
-          }
-        }): []
-        setOptions(list)
-      })
-      .finally(()=>{
-        setLoading(false)
-      })
-
-  }
-  useEffect(()=>{
-    fetchCerts()
-  },[])
-
-
-  return (<Select loading={loading}
-                  value={value}
-                  onChange={onChange}
-                  options={options}
-                  style={{marginRight: 10}} />)
-}
-
-
-AdvanceInputConfigs['certs'] = CertsSelect
+import {AdvanceInputConfigs, AutoTypeInputProps} from "planning-tools";
+import {Select} from "antd";
+import {useEffect, useState} from "react";
+import {NginxApis} from "../../../../api/nginx.ts";
+import {useAppSelector} from "../../../../store";
+import {INginxCerts} from "../../../../models/api.ts";
+/**
+ * @author tuonian
+ * @date 2023/7/4
+ */
+
+export const CertsSelect = ({value, onChange }: AutoTypeInputProps)=>{
+
+  const [loading,setLoading] = useState(false)
+  const [options,setOptions] = useState<any[]>([])
+
+  const nginx = useAppSelector(state => state.nginx.current)
+
+  const fetchCerts = ()=>{
+    if (!nginx?.id){
+      return
+    }
+    setLoading(true)
+    NginxApis.getCerts(nginx.id)
+      .then(({data})=>{
+        const list = Array.isArray(data.data) ?data.data.map((item: INginxCerts)=>{
+          return {
+            label: item.serviceName,
+            value: item.serviceName
+          }
+        }): []
+        setOptions(list)
+      })
+      .finally(()=>{
+        setLoading(false)
+      })
+
+  }
+  useEffect(()=>{
+    fetchCerts()
+  },[])
+
+
+  return (<Select loading={loading}
+                  value={value}
+                  onChange={onChange}
+                  options={options}
+                  style={{marginRight: 10}} />)
+}
+
+
+AdvanceInputConfigs['certs'] = CertsSelect

src/pages/nginx/components/cors/config.json → frontend/src/pages/nginx/components/cors/config.json

@@ -1,53 +1,62 @@
-{
-  "form": [
-    {
-      "title": "域名",
-      "key": "origins",
-      "type": "select",
-      "mode": "tags",
-      "description": "配置允许跨域的域名,多个域名用map指令实现",
-      "option": [],
-      "required": false
-    },
-    {
-      "title": "请求方法",
-      "type": "select",
-      "key": "methods",
-      "required": false,
-      "option": ["GET","POST","PUT","DELETE","OPTIONS"],
-      "description": "配置允许跨域的请求方法",
-      "mode": "tags"
-    },
-    {
-      "title": "请求头",
-      "type": "select",
-      "key": "headers",
-      "required": false,
-      "option": ["Authorization","Content-Type","Accept","Origin","Cache-Control","X-Requested-With"],
-      "description": "配置允许跨域的请求头",
-      "mode": "tags"
-    },
-    {
-      "title": "拦截preflight",
-      "key": "preflight",
-      "required": false,
-      "type": "switch",
-      "description": "拦截preflight的OPTION请求，返回跨域配置"
-    },
-    {
-      "title": "允许发送凭据",
-      "key": "credentials",
-      "type": "switch",
-      "required": false,
-      "description": "可选字段，为true表示允许发送Cookie"
-    },
-    {
-      "title": "跨域缓存",
-      "key": "maxAge",
-      "required": false,
-      "type": "int",
-      "description": "配置 Access-Control-Max-Age，代表着在指定时间(秒)之内不用请求该地址的时候，不需要再进行预检请求，也就是跨域缓存。",
-      "value": 86400
-    }
-  ]
-}
+{
+  "form": [
+    {
+      "title": "域名",
+      "key": "origins",
+      "type": "select",
+      "mode": "tags",
+      "description": "配置允许跨域的域名,多个域名用map指令实现",
+      "option": [],
+      "required": false
+    },
+    {
+      "title": "请求方法",
+      "type": "select",
+      "key": "methods",
+      "required": false,
+      "option": ["GET","POST","PUT","DELETE","OPTIONS"],
+      "description": "配置允许跨域的请求方法",
+      "mode": "tags"
+    },
+    {
+      "title": "请求头",
+      "type": "select",
+      "key": "headers",
+      "required": false,
+      "option": ["Authorization","Content-Type","Accept","Origin","Cache-Control","X-Requested-With"],
+      "description": "配置允许跨域的请求头",
+      "mode": "tags"
+    },
+    {
+      "title": "公开请求头",
+      "type": "select",
+      "key": "expose",
+      "required": false,
+      "option": ["Authorization","Content-Type","Accept","Origin","Cache-Control","X-Requested-With"],
+      "description": "跨域时，允许js获取的响应头名称,当返回自定义响应头，跨域的情况下，不设置，会导致无法获取该值",
+      "mode": "tags"
+    },
+    {
+      "title": "拦截preflight",
+      "key": "preflight",
+      "required": false,
+      "type": "switch",
+      "description": "拦截preflight的OPTION请求，返回跨域配置"
+    },
+    {
+      "title": "允许发送凭据",
+      "key": "credentials",
+      "type": "switch",
+      "required": false,
+      "description": "可选字段，为true表示允许发送Cookie"
+    },
+    {
+      "title": "跨域缓存",
+      "key": "maxAge",
+      "required": false,
+      "type": "int",
+      "description": "配置 Access-Control-Max-Age，代表着在指定时间(秒)之内不用请求该地址的时候，不需要再进行预检请求，也就是跨域缓存。",
+      "value": 86400
+    }
+  ]
+}

src/pages/nginx/components/cors/index.less → frontend/src/pages/nginx/components/cors/index.less

@@ -1,39 +1,39 @@
-.cors-page-overlay{
-  .ant-form-item-row{
-    .ant-form-item-control{
-      .ant-select{
-        width: 100%;
-        max-width: 100%;
-        min-width: 250px;
-      }
-    }
-    .auto-input-wrapper{
-      width: 100%;
-    }
-  }
-  .form-btns{
-    padding-left: 16%;
-  }
-}
-
-.config-status{
-  &.has-config{
-    color: #1890ff;
-  }
-}
-
-.cors-config-overlay{
-  .ant-tooltip-inner{
-    min-width: 600px;
-    padding: 2px;
-    .ant-input{
-      width: 100%;
-      min-width: 400px;
-      max-width: 100%;
-      color: white;
-      background: #000000;
-      border: none;
-    }
-  }
-
-}
+.cors-page-overlay{
+  .ant-form-item-row{
+    .ant-form-item-control{
+      .ant-select{
+        width: 100%;
+        max-width: 100%;
+        min-width: 250px;
+      }
+    }
+    .auto-input-wrapper{
+      width: 100%;
+    }
+  }
+  .form-btns{
+    padding-left: 16%;
+  }
+}
+
+.config-status{
+  &.has-config{
+    color: #1890ff;
+  }
+}
+
+.cors-config-overlay{
+  .ant-tooltip-inner{
+    min-width: 600px;
+    padding: 2px;
+    .ant-input{
+      width: 100%;
+      min-width: 400px;
+      max-width: 100%;
+      color: white;
+      background: #000000;
+      border: none;
+    }
+  }
+
+}

src/pages/nginx/components/cors/index.tsx → frontend/src/pages/nginx/components/cors/index.tsx

@@ -1,110 +1,114 @@
-/**
- * @author tuonian
- * @date 2023/7/5
- */
-import {AutoTypeInputProps, isNull, uniqueKey} from 'planning-tools'
-import './index.less'
-import config from './config.json'
-import {IContentProps, NgxBasicInput, registerInput} from "../basic";
-import {Input, Tooltip} from "antd";
-
-type DataType = {
-  /**
-   * 多域名时的随机key
-   */
-  key?: string
-  origins?: string[]
-  methods?: string[]
-  headers?: string[]
-  preflight?: boolean
-  credentials?: boolean
-  maxAge?: number
-}
-
-export const CorsInput = ({...props}: AutoTypeInputProps)=>{
-
-  const ShowContent = ({data}: IContentProps<DataType>)=>{
-    if (data.origins?.length && data.methods?.length){
-      const lines = renderLines(data);
-      const httpLines = renderHttpLines(data)
-      let hint = ''
-      if (httpLines.length){
-        hint = '# map \n'+ httpLines.join('\n') +'\n'
-      }
-      hint +='# location\n'
-      hint += lines.join('\n')
-
-      return (<Tooltip
-          destroyTooltipOnHide
-          overlayClassName="cors-config-overlay"
-          trigger="click"
-          placement="topLeft"
-          autoAdjustOverflow
-          title={<Input.TextArea disabled rows={Math.min(10,lines.length + httpLines.length + 3)} value={hint} />}>
-        <span className="config-status has-config">已配置</span>
-      </Tooltip>)
-    }
-   return <span className="config-status">未完成配置</span>
-  }
-
-  const renderHttpLines = (values: DataType = {})=>{
-    const lines: string[] = []
-    if (!values.origins?.length){
-      return lines
-    }
-    if (values.origins.length < 2){
-      return lines
-    }
-    lines.push(`map  $http_origin ${values.key}  {`)
-    lines.push(`    default 0;`)
-    values.origins.forEach(host=>{
-      lines.push(`    "~${host}"   ${host};`)
-    })
-    lines.push(`}`)
-    return lines
-  }
-
-  const renderLines = (values: DataType = {})=>{
-    const lines: string[] = []
-    if (!values.key){
-      values.key = `$cors_${uniqueKey(20)}`
-    }
-    if (!values.origins?.length){
-      return lines
-    }
-    if (values.origins.length === 1){
-      lines.push(`add_header 'Access-Control-Allow-Origin' '${values.origins[0]}';`)
-    }else {
-      lines.push(`add_header 'Access-Control-Allow-Origin' ${values.key};`)
-    }
-
-    if (values.methods?.length){
-      lines.push(`add_header 'Access-Control-Allow-Methods' '${values.methods.join(',')}';`)
-    }
-    if (values.headers?.length){
-      lines.push(`add_header 'Access-Control-Allow-Headers' '${values.headers.join(',')}';`)
-    }
-    if (!isNull(values.credentials)){
-      lines.push(`add_header Access-Control-Allow-Credentials   '${values.credentials ? 'true': 'false'}';`)
-    }
-    if (!isNull(values.preflight)){
-      lines.push(`if ($request_method = 'OPTIONS') {
-        return 204;
- }`)
-    }
-    return lines;
-  }
-
-  return <NgxBasicInput
-    {...props}
-    columns={config.form}
-    renderLines={renderLines}
-    renderHttpLines={renderHttpLines}
-    content={ShowContent}
-    overlayClassName="cors-page-overlay"
-    labelCol={4}
-    />
-}
-
-registerInput('cors', CorsInput)
-
+/**
+ * @author tuonian
+ * @date 2023/7/5
+ */
+import {AutoTypeInputProps, isNull, uniqueKey} from 'planning-tools'
+import './index.less'
+import config from './config.json'
+import {IContentProps, NgxBasicInput, registerInput} from "../basic";
+import {Input, Tooltip} from "antd";
+
+type DataType = {
+  /**
+   * 多域名时的随机key
+   */
+  key?: string
+  origins?: string[]
+  methods?: string[]
+  headers?: string[]
+  expose?: string[]
+  preflight?: boolean
+  credentials?: boolean
+  maxAge?: number
+}
+
+export const CorsInput = ({...props}: AutoTypeInputProps)=>{
+
+  const ShowContent = ({data}: IContentProps<DataType>)=>{
+    if (data.origins?.length && data.methods?.length){
+      const lines = renderLines(data);
+      const httpLines = renderHttpLines(data)
+      let hint = ''
+      if (httpLines.length){
+        hint = '# map \n'+ httpLines.join('\n') +'\n'
+      }
+      hint +='# location\n'
+      hint += lines.join('\n')
+
+      return (<Tooltip
+          destroyTooltipOnHide
+          overlayClassName="cors-config-overlay"
+          trigger="click"
+          placement="topLeft"
+          autoAdjustOverflow
+          title={<Input.TextArea disabled rows={Math.min(10,lines.length + httpLines.length + 3)} value={hint} />}>
+        <span className="config-status has-config">已配置</span>
+      </Tooltip>)
+    }
+   return <span className="config-status">未完成配置</span>
+  }
+
+  const renderHttpLines = (values: DataType = {})=>{
+    const lines: string[] = []
+    if (!values.origins?.length){
+      return lines
+    }
+    if (values.origins.length < 2){
+      return lines
+    }
+    lines.push(`map  $http_origin ${values.key}  {`)
+    lines.push(`    default 0;`)
+    values.origins.forEach(host=>{
+      lines.push(`    "~${host}"   ${host};`)
+    })
+    lines.push(`}`)
+    return lines
+  }
+
+  const renderLines = (values: DataType = {})=>{
+    const lines: string[] = []
+    if (!values.key){
+      values.key = `$cors_${uniqueKey(20)}`
+    }
+    if (!values.origins?.length){
+      return lines
+    }
+    if (values.origins.length === 1){
+      lines.push(`add_header 'Access-Control-Allow-Origin' '${values.origins[0]}';`)
+    }else {
+      lines.push(`add_header 'Access-Control-Allow-Origin' ${values.key};`)
+    }
+
+    if (values.methods?.length){
+      lines.push(`add_header 'Access-Control-Allow-Methods' '${values.methods.join(',')}';`)
+    }
+    if (values.headers?.length){
+      lines.push(`add_header 'Access-Control-Allow-Headers' '${values.headers.join(',')}';`)
+    }
+    if (!isNull(values.credentials)){
+      lines.push(`add_header Access-Control-Allow-Credentials   '${values.credentials ? 'true': 'false'}';`)
+    }
+    if (values.expose?.length){
+      lines.push(`add_header 'Access-Control-Expose-Headers' '${values.expose.join(',')}';`)
+    }
+    if (!isNull(values.preflight)){
+      lines.push(`if ($request_method = 'OPTIONS') {
+        return 204;
+ }`)
+    }
+    return lines;
+  }
+
+  return <NgxBasicInput
+    {...props}
+    columns={config.form}
+    renderLines={renderLines}
+    renderHttpLines={renderHttpLines}
+    content={ShowContent}
+    overlayClassName="cors-page-overlay"
+    labelCol={4}
+    />
+}
+
+registerInput('cors', CorsInput)
+

src/pages/nginx/components/error/config.json → frontend/src/pages/nginx/components/error/config.json

@@ -1,32 +1,32 @@
-{
-  "form": [
-    {
-      "title": "错误页面",
-      "type": "array",
-      "key": "error_pages",
-      "required": false,
-      "items": [
-        {
-          "title": "错误码",
-          "key": "codes",
-          "type": "select",
-          "option": ["502","401","403","503"],
-          "mode": "tags"
-        },
-        {
-          "title": "响应码",
-          "key": "respCode",
-          "type": "int",
-          "required": false,
-          "description": "重定向错误页面后，返回给前端的HTTP状态码，比如：404,200,301"
-        },
-        {
-          "title": "跳转uri",
-          "key": "uri",
-          "type": "string",
-          "description": "当错误发生时，跳转的路由或者页面"
-        }
-      ]
-    }
-  ]
-}
+{
+  "form": [
+    {
+      "title": "错误页面",
+      "type": "array",
+      "key": "error_pages",
+      "required": false,
+      "items": [
+        {
+          "title": "错误码",
+          "key": "codes",
+          "type": "select",
+          "option": ["502","401","403","503"],
+          "mode": "tags"
+        },
+        {
+          "title": "响应码",
+          "key": "respCode",
+          "type": "int",
+          "required": false,
+          "description": "重定向错误页面后，返回给前端的HTTP状态码，比如：404,200,301"
+        },
+        {
+          "title": "跳转uri",
+          "key": "uri",
+          "type": "string",
+          "description": "当错误发生时，跳转的路由或者页面"
+        }
+      ]
+    }
+  ]
+}

src/pages/nginx/components/error/index.less → frontend/src/pages/nginx/components/error/index.less

@@ -1,2 +1,2 @@
-.error-page-overlay{
-}
+.error-page-overlay{
+}

src/pages/nginx/components/error/index.tsx → frontend/src/pages/nginx/components/error/index.tsx

@@ -1,73 +1,73 @@
-/**
- * @author tuonian
- * @date 2023/7/5
- */
-import {AutoTypeInputProps} from 'planning-tools'
-import './index.less'
-import config from './config.json'
-import {IContentProps, NgxBasicInput, registerInput} from "../basic";
-
-type ErrorPageData = {
-  error_pages?: {
-    /**
-     * 处理的错误状态码
-     */
-    codes: string[]
-    /**
-     * 响应状态码
-     */
-    respCode?: string
-
-    /**
-     * 错误路由，或者命名路由
-     */
-    uri: string
-  }[]
-}
-
-export const ErrorPageInput = ({...props}: AutoTypeInputProps)=>{
-
-  const ShowContent = ({data}: IContentProps<ErrorPageData>)=>{
-    const lines = renderLines(data);
-    return (<div className="error-pages">
-      {
-      lines.map((line,index)=>(<div className="error-page-item" key={index}>{line}</div>))
-      }
-      {
-        lines.length ? null : '未配置'
-      }
-    </div>)
-  }
-
-  const renderLines = (values: ErrorPageData = {})=>{
-    const lines: string[] = []
-    if (!values.error_pages || !values.error_pages.length){
-      return lines
-    }
-    values.error_pages.forEach(item=>{
-      if (!item.codes || item.codes.length ===0 || !item.uri){
-        lines.push(`#error_page code or uri is empty, skip`)
-        return
-      }
-      let text = `error_page  ${item.codes.join(' ')}`
-      if (item.respCode){
-        text += `  =${item.respCode}`
-      }
-      text +=`   ${item.uri};`
-      lines.push(text)
-    })
-    return lines;
-  }
-
-  return <NgxBasicInput
-    {...props}
-    columns={config.form}
-    renderLines={renderLines}
-    content={ShowContent}
-    overlayClassName="error-page-overlay"
-    labelCol={0}
-    />
-}
-
-registerInput('error_page', ErrorPageInput)
-
+/**
+ * @author tuonian
+ * @date 2023/7/5
+ */
+import {AutoTypeInputProps} from 'planning-tools'
+import './index.less'
+import config from './config.json'
+import {IContentProps, NgxBasicInput, registerInput} from "../basic";
+
+type ErrorPageData = {
+  error_pages?: {
+    /**
+     * 处理的错误状态码
+     */
+    codes: string[]
+    /**
+     * 响应状态码
+     */
+    respCode?: string
+
+    /**
+     * 错误路由，或者命名路由
+     */
+    uri: string
+  }[]
+}
+
+export const ErrorPageInput = ({...props}: AutoTypeInputProps)=>{
+
+  const ShowContent = ({data}: IContentProps<ErrorPageData>)=>{
+    const lines = renderLines(data);
+    return (<div className="error-pages">
+      {
+      lines.map((line,index)=>(<div className="error-page-item" key={index}>{line}</div>))
+      }
+      {
+        lines.length ? null : '未配置'
+      }
+    </div>)
+  }
+
+  const renderLines = (values: ErrorPageData = {})=>{
+    const lines: string[] = []
+    if (!values.error_pages || !values.error_pages.length){
+      return lines
+    }
+    values.error_pages.forEach(item=>{
+      if (!item.codes || item.codes.length ===0 || !item.uri){
+        lines.push(`#error_page code or uri is empty, skip`)
+        return
+      }
+      let text = `error_page  ${item.codes.join(' ')}`
+      if (item.respCode){
+        text += `  =${item.respCode}`
+      }
+      text +=`   ${item.uri};`
+      lines.push(text)
+    })
+    return lines;
+  }
+
+  return <NgxBasicInput
+    {...props}
+    columns={config.form}
+    renderLines={renderLines}
+    content={ShowContent}
+    overlayClassName="error-page-overlay"
+    labelCol={0}
+    />
+}
+
+registerInput('error_page', ErrorPageInput)
+

src/pages/nginx/components/gzip/config.json → frontend/src/pages/nginx/components/gzip/config.json

@@ -1,64 +1,64 @@
-{
-  "form": [
-    {
-      "title": "gzip_types",
-      "key": "gzip_types",
-      "required": false,
-      "type": "select",
-      "mode": "tags",
-      "option": ["text/html","application/javascript"],
-      "description": "Syntax:\tgzip_types mime-type ...;\nDefault:\t\ngzip_types text/html;\nEnables gzipping of responses for the specified MIME types in addition to “text/html”. The special value “*” matches any MIME type (0.8.29). Responses with the “text/html” type are always compressed."
-    },
-    {
-      "title": "gzip_buffers",
-      "key": "gzip_buffers",
-      "required": false,
-      "type": "string",
-      "description": "Syntax:gzip_buffers number size;\nDefault:gzip_buffers 32 4k|16 8k;\nSets the number and size of buffers used to compress a response. By default, the buffer size is equal to one memory page. This is either 4K or 8K, depending on a platform."
-    },
-    {
-      "title": "gzip_comp_level",
-      "key": "gzip_comp_level",
-      "required": false,
-      "type": "int",
-      "description": "Syntax:gzip_comp_level level;\nDefault:\ngzip_comp_level 1;\nSets a gzip compression level of a response. Acceptable values are in the range from 1 to 9.\n"
-    },
-    {
-      "title": "gzip_disable",
-      "key": "gzip_disable",
-      "required": false,
-      "type": "string",
-      "description": "Syntax:\tgzip_disable regex ...;\nDisables gzipping of responses for requests with “User-Agent” header fields matching any of the specified regular expressions."
-    },
-    {
-      "title": "gzip_http_version",
-      "key": "gzip_http_version",
-      "required": false,
-      "type": "select",
-      "option": ["1.0","1.1"],
-      "description": "Syntax:\tgzip_http_version 1.0 | 1.1;\nDefault:\t\ngzip_http_version 1.1;"
-    },
-    {
-      "title": "gzip_min_length",
-      "key": "gzip_min_length",
-      "required": false,
-      "type": "int",
-      "description": "Syntax:\tgzip_min_length length;\nDefault:\t\ngzip_min_length 20;\nSets the minimum length of a response that will be gzipped. The length is determined only from the “Content-Length” response header field."
-    },
-    {
-      "title": "gzip_proxied",
-      "key": "gzip_proxied",
-      "required": false,
-      "type": "select",
-      "option": ["off","expired","no-cache","no-store","private","no_last_modified","no_etag","auth","any"],
-      "description": "Syntax:\tgzip_proxied off | expired | no-cache | no-store | private | no_last_modified | no_etag | auth | any ...;\nDefault:\t\ngzip_proxied off;\nEnables or disables gzipping of responses for proxied requests depending on the request and response. The fact that the request is proxied is determined by the presence of the “Via” request header field. The directive accepts multiple parameters:off\ndisables compression for all proxied requests, ignoring other parameters;\nexpired\nenables compression if a response header includes the “Expires” field with a value that disables caching;\nno-cache\nenables compression if a response header includes the “Cache-Control” field with the “no-cache” parameter;\nno-store\nenables compression if a response header includes the “Cache-Control” field with the “no-store” parameter;\nprivate\nenables compression if a response header includes the “Cache-Control” field with the “private” parameter;\nno_last_modified\nenables compression if a response header does not include the “Last-Modified” field;\nno_etag\nenables compression if a response header does not include the “ETag” field;\nauth\nenables compression if a request header includes the “Authorization” field;\nany\nenables compression for all proxied requests."
-    },
-    {
-      "title": "gzip_vary",
-      "key": "gzip_vary",
-      "required": false,
-      "type": "switch",
-      "description": "Syntax:\tgzip_vary on | off;\nDefault:\t\ngzip_vary off;\nEnables or disables inserting the “Vary: Accept-Encoding” response header field if the directives gzip, gzip_static, or gunzip are active."
-    }
-  ]
-}
+{
+  "form": [
+    {
+      "title": "gzip_types",
+      "key": "gzip_types",
+      "required": false,
+      "type": "select",
+      "mode": "tags",
+      "option": ["text/html","application/javascript"],
+      "description": "Syntax:\tgzip_types mime-type ...;\nDefault:\t\ngzip_types text/html;\nEnables gzipping of responses for the specified MIME types in addition to “text/html”. The special value “*” matches any MIME type (0.8.29). Responses with the “text/html” type are always compressed."
+    },
+    {
+      "title": "gzip_buffers",
+      "key": "gzip_buffers",
+      "required": false,
+      "type": "string",
+      "description": "Syntax:gzip_buffers number size;\nDefault:gzip_buffers 32 4k|16 8k;\nSets the number and size of buffers used to compress a response. By default, the buffer size is equal to one memory page. This is either 4K or 8K, depending on a platform."
+    },
+    {
+      "title": "gzip_comp_level",
+      "key": "gzip_comp_level",
+      "required": false,
+      "type": "int",
+      "description": "Syntax:gzip_comp_level level;\nDefault:\ngzip_comp_level 1;\nSets a gzip compression level of a response. Acceptable values are in the range from 1 to 9.\n"
+    },
+    {
+      "title": "gzip_disable",
+      "key": "gzip_disable",
+      "required": false,
+      "type": "string",
+      "description": "Syntax:\tgzip_disable regex ...;\nDisables gzipping of responses for requests with “User-Agent” header fields matching any of the specified regular expressions."
+    },
+    {
+      "title": "gzip_http_version",
+      "key": "gzip_http_version",
+      "required": false,
+      "type": "select",
+      "option": ["1.0","1.1"],
+      "description": "Syntax:\tgzip_http_version 1.0 | 1.1;\nDefault:\t\ngzip_http_version 1.1;"
+    },
+    {
+      "title": "gzip_min_length",
+      "key": "gzip_min_length",
+      "required": false,
+      "type": "int",
+      "description": "Syntax:\tgzip_min_length length;\nDefault:\t\ngzip_min_length 20;\nSets the minimum length of a response that will be gzipped. The length is determined only from the “Content-Length” response header field."
+    },
+    {
+      "title": "gzip_proxied",
+      "key": "gzip_proxied",
+      "required": false,
+      "type": "select",
+      "option": ["off","expired","no-cache","no-store","private","no_last_modified","no_etag","auth","any"],
+      "description": "Syntax:\tgzip_proxied off | expired | no-cache | no-store | private | no_last_modified | no_etag | auth | any ...;\nDefault:\t\ngzip_proxied off;\nEnables or disables gzipping of responses for proxied requests depending on the request and response. The fact that the request is proxied is determined by the presence of the “Via” request header field. The directive accepts multiple parameters:off\ndisables compression for all proxied requests, ignoring other parameters;\nexpired\nenables compression if a response header includes the “Expires” field with a value that disables caching;\nno-cache\nenables compression if a response header includes the “Cache-Control” field with the “no-cache” parameter;\nno-store\nenables compression if a response header includes the “Cache-Control” field with the “no-store” parameter;\nprivate\nenables compression if a response header includes the “Cache-Control” field with the “private” parameter;\nno_last_modified\nenables compression if a response header does not include the “Last-Modified” field;\nno_etag\nenables compression if a response header does not include the “ETag” field;\nauth\nenables compression if a request header includes the “Authorization” field;\nany\nenables compression for all proxied requests."
+    },
+    {
+      "title": "gzip_vary",
+      "key": "gzip_vary",
+      "required": false,
+      "type": "switch",
+      "description": "Syntax:\tgzip_vary on | off;\nDefault:\t\ngzip_vary off;\nEnables or disables inserting the “Vary: Accept-Encoding” response header field if the directives gzip, gzip_static, or gunzip are active."
+    }
+  ]
+}

src/pages/nginx/components/gzip/index.less → frontend/src/pages/nginx/components/gzip/index.less

@@ -1,10 +1,10 @@
-.gzip-input{
-  margin-right: 10px;
-}
-
-.gzip-popover{
-  .auto-form{
-    min-width: 450px;
-    width: 550px;
-  }
-}
+.gzip-input{
+  margin-right: 10px;
+}
+
+.gzip-popover{
+  .auto-form{
+    min-width: 450px;
+    width: 550px;
+  }
+}

src/pages/nginx/components/gzip/index.tsx → frontend/src/pages/nginx/components/gzip/index.tsx

@@ -1,97 +1,97 @@
-/**
- * @author tuonian
- * @date 2023/7/5
- */
-import {AdvanceInputConfigs, AutoForm, AutoTypeInputProps, isNull} from 'planning-tools'
-import {Button, FormInstance, Popover, Switch} from "antd";
-import './index.less'
-import {EditOutlined} from "@ant-design/icons";
-import {useEffect, useState} from "react";
-import config from './config.json'
-import {AutoFormFooterProps} from "planning-tools/dist/esm/Components/AutoForm/form";
-import {isBoolean} from "lodash";
-import {NgxModuleData} from "../input.ts";
-
-export const GzipInput = ({value, onChange}:AutoTypeInputProps) => {
-
-  const [data,setData] = useState<any>({})
-  const [open,setOpen] = useState(false)
-
-  useEffect(()=>{
-    if (value?.data){
-      setData(value.data || {})
-    }
-  },[value])
-
-  const onSwitch = (checked: boolean)=>{
-    const values = { ...data,gzip: checked}
-    setData(values)
-    triggerChange(values)
-  }
-
-  const triggerChange = (values: any)=>{
-    const lines:string[] = []
-    if (values?.gzip){
-      lines.push(`gzip      on;`)
-      Object.keys(values).forEach(k=>{
-        let v = values[k];
-        if (isNull(v) || k ==='gzip'){
-          return
-        }
-        if (Array.isArray(v)){
-          v = v.join(' ')
-        }else if (isBoolean(v)){
-          v = v ? 'on' : 'off'
-        }
-        lines.push(`${k}  ${v};`)
-      })
-    }
-    onChange?.({
-      data: values,
-      lines
-    } as NgxModuleData)
-  }
-
-  const onSubmitData =async (form: FormInstance | null)=>{
-    if (!form){
-      return
-    }
-    const values = await form.validateFields();
-    console.log('values', values);
-    const current = { ...data, ...values }
-    setData(current)
-    setOpen(false)
-    triggerChange(current)
-  }
-
-  const renderFormFooter = ({formRef}:AutoFormFooterProps)=>{
-    return (<div style={{textAlign: 'center'}}>
-      <Button onClick={()=>onSubmitData(formRef.current as never)} type="primary">保存</Button>
-      <Button onClick={()=>setOpen(false)}>取消</Button>
-    </div>)
-  }
-
-  const renderForm = ()=>{
-    return (<AutoForm columns={config.form}
-                      formProps={{
-                        labelCol: {span: 6}
-                      }}
-                      onlyFields={true}
-                      footer={renderFormFooter}
-                      data={data} />)
-  }
-
-  return (<div className="gzip-input">
-    <Switch onChange={onSwitch} checked={data.gzip} />
-    <Popover destroyTooltipOnHide overlayClassName="gzip-popover"
-             placement="right"
-             open={open}
-             onOpenChange={o=>setOpen(o)}
-             trigger="click" content={renderForm}>
-      <Button onClick={()=>setOpen(true)} hidden={!data.gzip} type="link" icon={<EditOutlined />} />
-    </Popover>
-
-  </div>)
-}
-
-AdvanceInputConfigs['gzip'] = GzipInput
+/**
+ * @author tuonian
+ * @date 2023/7/5
+ */
+import {AdvanceInputConfigs, AutoForm, AutoTypeInputProps, isNull} from 'planning-tools'
+import {Button, FormInstance, Popover, Switch} from "antd";
+import './index.less'
+import {EditOutlined} from "@ant-design/icons";
+import {useEffect, useState} from "react";
+import config from './config.json'
+import {AutoFormFooterProps} from "planning-tools/dist/esm/Components/AutoForm/form";
+import {isBoolean} from "lodash";
+import {NgxModuleData} from "../input.ts";
+
+export const GzipInput = ({value, onChange}:AutoTypeInputProps) => {
+
+  const [data,setData] = useState<any>({})
+  const [open,setOpen] = useState(false)
+
+  useEffect(()=>{
+    if (value?.data){
+      setData(value.data || {})
+    }
+  },[value])
+
+  const onSwitch = (checked: boolean)=>{
+    const values = { ...data,gzip: checked}
+    setData(values)
+    triggerChange(values)
+  }
+
+  const triggerChange = (values: any)=>{
+    const lines:string[] = []
+    if (values?.gzip){
+      lines.push(`gzip      on;`)
+      Object.keys(values).forEach(k=>{
+        let v = values[k];
+        if (isNull(v) || k ==='gzip'){
+          return
+        }
+        if (Array.isArray(v)){
+          v = v.join(' ')
+        }else if (isBoolean(v)){
+          v = v ? 'on' : 'off'
+        }
+        lines.push(`${k}  ${v};`)
+      })
+    }
+    onChange?.({
+      data: values,
+      lines
+    } as NgxModuleData)
+  }
+
+  const onSubmitData =async (form: FormInstance | null)=>{
+    if (!form){
+      return
+    }
+    const values = await form.validateFields();
+    console.log('values', values);
+    const current = { ...data, ...values }
+    setData(current)
+    setOpen(false)
+    triggerChange(current)
+  }
+
+  const renderFormFooter = ({formRef}:AutoFormFooterProps)=>{
+    return (<div style={{textAlign: 'center'}}>
+      <Button onClick={()=>onSubmitData(formRef.current as never)} type="primary">保存</Button>
+      <Button onClick={()=>setOpen(false)}>取消</Button>
+    </div>)
+  }
+
+  const renderForm = ()=>{
+    return (<AutoForm columns={config.form}
+                      formProps={{
+                        labelCol: {span: 6}
+                      }}
+                      onlyFields={true}
+                      footer={renderFormFooter}
+                      data={data} />)
+  }
+
+  return (<div className="gzip-input">
+    <Switch onChange={onSwitch} checked={data.gzip} />
+    <Popover destroyTooltipOnHide overlayClassName="gzip-popover"
+             placement="right"
+             open={open}
+             onOpenChange={o=>setOpen(o)}
+             trigger="click" content={renderForm}>
+      <Button onClick={()=>setOpen(true)} hidden={!data.gzip} type="link" icon={<EditOutlined />} />
+    </Popover>
+
+  </div>)
+}
+
+AdvanceInputConfigs['gzip'] = GzipInput

src/pages/nginx/components/index.ts → frontend/src/pages/nginx/components/index.ts

@@ -1,12 +1,12 @@
-import './proxy/index.tsx'
-import './gzip/index.tsx'
-import './auth'
-import './location'
-import './certs'
-import './proxypass'
-import './proxypass/stream.tsx'
-import './error'
-import './cors'
-import './access'
-import './fastcgi'
-import './log'
+import './proxy/index.tsx'
+import './gzip/index.tsx'
+import './auth'
+import './location'
+import './certs'
+import './proxypass'
+import './proxypass/stream.tsx'
+import './error'
+import './cors'
+import './access'
+import './fastcgi'
+import './log'

src/pages/nginx/components/input.ts → frontend/src/pages/nginx/components/input.ts

@@ -1,56 +1,56 @@
-import {isObject} from "planning-tools";
-
-/**
- * 自定义的模块化输入框的数据格式
- */
-export type NgxModuleData<D=any> = {
-  data: D
-  lines?: string[]
-  /**
-   * 渲染到http模块，也就是跟server同级别，没想好怎么搞
-   */
-  http?: string[]
-  /**
-   * 指定为false，则跳过渲染
-   */
-  enable?: boolean
-}
-
-/**
- * 是否是自定义的nginx的输入框
- * @param value
- */
-export const isNgxModuleValue = (value: any)=>{
-  if (!isObject(value)){
-    return false
-  }
-  return !!Array.isArray((value as NgxModuleData)?.lines);
-}
-
-/**
- * 键值对
- */
-export type KeyValue = {
-    name: string
-    value: string
-}
-
-/**
- * 值是那种 ，{name: xxx, value: 123}的形式
- * @param value
- */
-export const isNameValue = (value: any)=>{
-    return value && value.name && value.value
-}
-
-export type ProcessorData = {
-    key: string,
-    value: any,
-    lines:string[],
-    httpLines:string[]
-}
-
-/**
- * 返回true，表示已经处理完了，不继续后续的处理
- */
-export type IRenderProcessor = (data: ProcessorData) => boolean
+import {isObject} from "planning-tools";
+
+/**
+ * 自定义的模块化输入框的数据格式
+ */
+export type NgxModuleData<D=any> = {
+  data: D
+  lines?: string[]
+  /**
+   * 渲染到http模块，也就是跟server同级别，没想好怎么搞
+   */
+  http?: string[]
+  /**
+   * 指定为false，则跳过渲染
+   */
+  enable?: boolean
+}
+
+/**
+ * 是否是自定义的nginx的输入框
+ * @param value
+ */
+export const isNgxModuleValue = (value: any)=>{
+  if (!isObject(value)){
+    return false
+  }
+  return !!Array.isArray((value as NgxModuleData)?.lines);
+}
+
+/**
+ * 键值对
+ */
+export type KeyValue = {
+    name: string
+    value: string
+}
+
+/**
+ * 值是那种 ，{name: xxx, value: 123}的形式
+ * @param value
+ */
+export const isNameValue = (value: any)=>{
+    return value && value.name && value.value
+}
+
+export type ProcessorData = {
+    key: string,
+    value: any,
+    lines:string[],
+    httpLines:string[]
+}
+
+/**
+ * 返回true，表示已经处理完了，不继续后续的处理
+ */
+export type IRenderProcessor = (data: ProcessorData) => boolean

src/pages/nginx/components/location/config.json → frontend/src/pages/nginx/components/location/config.json

@@ -1,301 +1,301 @@
-{
-  "form": [
-    {
-      "key": "name",
-      "type": "string",
-      "title": "名称",
-      "placeholder": "输入名称方便辨别",
-      "required": false
-    },
-    {
-      "key": "match",
-      "type": "object",
-      "title": "匹配路径",
-      "hideHeader": true,
-      "items": [
-        {
-          "type": "select",
-          "title": "匹配规则",
-          "option": [
-            {
-              "label": "精确匹配",
-              "value": "="
-            },
-            {
-              "label": "以字符开头",
-              "value": "^~"
-            },
-            {
-              "label": "正则(区分大小写)",
-              "value": "~"
-            },
-            {
-              "label": "正则(不区分大小写)",
-              "value": "~*"
-            },{
-              "label": "默认",
-              "value": ""
-            }
-          ],
-          "required": false,
-          "key": "regex",
-          "placeholder": "匹配规则，如=，~^",
-          "width": 180
-        },
-        {
-          "type": "string",
-          "title": "路径",
-          "key": "path",
-          "placeholder": "请输入路径",
-          "value": "/",
-          "width": 300
-        }
-      ],
-      "description": "优选级：精确匹配(=) > 完整路径 > 以字符开头(^~) > 正则顺序(~或者~*) > 部分起始路径(/xx/) > 默认路径(/);\n当有正则时，变量$1,$2为正则中匹配的()内的顺序内容，比如：~ \/(d+)\/([0-9]+),当访问/abc/123时,$1为abc,$2为123"
-    },
-    {
-      "key": "enable",
-      "title": "启用",
-      "type": "switch",
-      "description": "是否启用，如果不启用，将不会渲染该配置"
-    },
-    {
-      "key": "proxy_type",
-      "title": "代理类型",
-      "type": "select",
-      "option": [
-        {
-        "label": "反向代理",
-        "value": "proxy"
-      },{
-        "label": "静态资源",
-        "value": "static"
-      },
-        {
-          "label": "fastcgi",
-          "value": "fastcgi"
-        },
-        {
-        "label": "其它",
-        "value": "other"
-      }],
-      "cascade": {
-        "proxy": [
-          {
-            "key": "proxy_pass",
-            "title": "代理地址",
-            "type": "proxy_pass"
-          },
-          {
-            "key": "proxy_settings",
-            "title": "更多代理设置",
-            "type": "proxy_settings",
-            "required": false,
-            "description": "更多代理设置"
-          }
-        ],
-        "static": [
-          {
-            "key": "index",
-            "title": "首页",
-            "required": false,
-            "type": "select",
-            "mode": "tags",
-            "option": ["index.html","index.php","index.htm"],
-            "description": "nginx静态资源默认的首页文件名，比如index.html index.php"
-          },
-          {
-            "key": "root",
-            "type": "string",
-            "title": "根路径",
-            "required": false,
-            "description": "静态资源的根路径，查找方式为直接拼接，比如：匹配路径为 /test/ ,root为/data/root,则查找资源的完整路径为：/data/root/test"
-          },
-          {
-            "key": "alias",
-            "type": "string",
-            "title": "路径别名",
-            "required": false,
-            "description": "alias和root二选一，注意与root的区别，比如：匹配路径为 /test/ ,alias为/data/root,则查找资源的完整路径为：/data/root/"
-          },
-          {
-            "key": "try_files",
-            "title": "try_files",
-            "type": "select",
-            "mode": "tags",
-            "option": ["$uri","$uri/","/index.html"],
-            "description": "",
-            "required": false,
-            "width": 450
-          }
-        ],
-        "fastcgi": [
-          {
-            "key": "fastcgi",
-            "title": "fastcgi",
-            "type": "fastcgi",
-            "required": false,
-            "description": "ngx_http_fastcgi_module,allows passing requests to a FastCGI server."
-          }
-        ],
-        "other": [
-          {
-            "key": "return",
-            "title": "return",
-            "description": "直接返回固定内容",
-            "type": "object",
-            "hideHeader": true,
-            "required": false,
-            "items": [
-              {
-                "key": "code",
-                "type": "int",
-                "min": 200,
-                "max": 600,
-                "placeholder": "http状态码",
-                "width": 120,
-                "title": "状态码"
-              },
-              {
-                "key": "content",
-                "type": "textarea",
-                "title": "内容",
-                "placeholder": "响应内容",
-                "width": 360,
-                "rows": 3
-              }
-            ]
-          }
-        ]
-      }
-    },
-    {
-      "key": "cors_setting",
-      "title": "跨域配置",
-      "type": "cors",
-      "description": "跨域配置，可以通过该配置项解决前端跨域问题",
-      "required": false
-    },
-    {
-      "title": "Access",
-      "key": "access",
-      "type": "access",
-      "required": false,
-      "description": "deny or allow,白名单或者黑名单访问限制"
-    },
-    {
-      "type": "auth",
-      "title": "鉴权",
-      "key": "auth_request",
-      "required": false,
-      "minimizeDesc": true,
-      "description": "ngx_http_auth_request_module:实现了基于一子请求的结果的客户端的授权。如果子请求返回2xx响应码，则允许访问。如果它返回401或403，则访问被拒绝并显示相应的错误代码。子请求返回的任何其他响应代码都被认为是错误的"
-    },
-    {
-      "type": "gzip",
-      "title": "压缩配置",
-      "key": "gzip",
-      "required": false,
-      "description": "gzip"
-    },
-    {
-      "key": "add_header",
-      "title": "添加响应头",
-      "type": "array",
-      "hideHeader": true,
-      "description": "添加http响应头",
-      "required": false,
-      "items": [
-        {
-          "key": "name",
-          "title": "header名称",
-          "type": "string",
-          "width": 180,
-          "placeholder": "header名称"
-        },
-        {
-          "key": "value",
-          "title": "header值",
-          "type": "string",
-          "placeholder": "header值",
-          "width": 300
-        }
-      ]
-    },
-    {
-      "key": "rewrite",
-      "type": "object",
-      "title": "rewrite",
-      "required": false,
-      "description": "rewrite:对访问路径进行,放在server{}, if{},location{}段中,rewrite < regex > < replacement > [flag], 必须填写正则表达式和跳转路径才能生效",
-      "items": [
-        {
-          "key": "regex",
-          "title": "正则表达式",
-          "type": "string",
-          "width": 180,
-          "description": "跳转匹配的正则表达式",
-          "required": false,
-          "placeholder": "eq. ^/(.*)"
-        },
-        {
-          "key": "replacement",
-          "title": "跳转路径",
-          "type": "string",
-          "placeholder": "eq. https://www.demo.com/$1",
-          "width": 300,
-          "required": false
-        },
-        {
-          "width": 120,
-          "key": "flag",
-          "title": "flag",
-          "type": "select",
-          "option": ["last","break","redirect","permanent"],
-          "value": "permanent",
-          "required": false,
-          "description": "last: 相当于Apache的【L】标记，表示完成rewrite;\nbreak:本条规则匹配完成即终止，不在匹配后面的任何规则;\nredirect: 返回302临时重定向，浏览器地址栏会显示跳转后的URL地址，爬虫不会更新url;\npermanent:返回301永久重定向，浏览器地址栏会显示跳转后的URL地址，爬虫更新url;"
-        }
-      ]
-    },
-    {
-      "key": "tmp_custom_config",
-      "title": "自定义配置",
-      "type": "textarea",
-      "hideHeader": true,
-      "description": "自定义配置，注意，每行结尾需要加“;”号，将会拼接在最后",
-      "required": false,
-      "trim": false
-    },
-    {
-      "key": "internal",
-      "title": "内部路由",
-      "type": "switch",
-      "description": "内部路由：nginx内部访问，一旦出了这个配置文件，则失效"
-    },
-    {
-      "key": "error_page",
-      "title": "错误页面",
-      "type": "error_page",
-      "required": false,
-      "description": "错误页面配置"
-    },
-    {
-      "key": "default_type",
-      "title": "默认内容类型",
-      "type": "string",
-      "required": false,
-      "description": "default_type eg. text/plain application/json"
-    },
-    {
-      "key": "remark",
-      "title": "备注信息",
-      "type": "textarea",
-      "rows": 3,
-      "placeholder": "输入备注信息",
-      "required": false,
-      "trim": false,
-      "width": 600
-    }
-  ]
-}
+{
+  "form": [
+    {
+      "key": "name",
+      "type": "string",
+      "title": "名称",
+      "placeholder": "输入名称方便辨别",
+      "required": false
+    },
+    {
+      "key": "match",
+      "type": "object",
+      "title": "匹配路径",
+      "hideHeader": true,
+      "items": [
+        {
+          "type": "select",
+          "title": "匹配规则",
+          "option": [
+            {
+              "label": "精确匹配",
+              "value": "="
+            },
+            {
+              "label": "以字符开头",
+              "value": "^~"
+            },
+            {
+              "label": "正则(区分大小写)",
+              "value": "~"
+            },
+            {
+              "label": "正则(不区分大小写)",
+              "value": "~*"
+            },{
+              "label": "默认",
+              "value": ""
+            }
+          ],
+          "required": false,
+          "key": "regex",
+          "placeholder": "匹配规则，如=，~^",
+          "width": 180
+        },
+        {
+          "type": "string",
+          "title": "路径",
+          "key": "path",
+          "placeholder": "请输入路径",
+          "value": "/",
+          "width": 300
+        }
+      ],
+      "description": "优选级：精确匹配(=) > 完整路径 > 以字符开头(^~) > 正则顺序(~或者~*) > 部分起始路径(/xx/) > 默认路径(/);\n当有正则时，变量$1,$2为正则中匹配的()内的顺序内容，比如：~ \/(d+)\/([0-9]+),当访问/abc/123时,$1为abc,$2为123"
+    },
+    {
+      "key": "enable",
+      "title": "启用",
+      "type": "switch",
+      "description": "是否启用，如果不启用，将不会渲染该配置"
+    },
+    {
+      "key": "proxy_type",
+      "title": "代理类型",
+      "type": "select",
+      "option": [
+        {
+        "label": "反向代理",
+        "value": "proxy"
+      },{
+        "label": "静态资源",
+        "value": "static"
+      },
+        {
+          "label": "fastcgi",
+          "value": "fastcgi"
+        },
+        {
+        "label": "其它",
+        "value": "other"
+      }],
+      "cascade": {
+        "proxy": [
+          {
+            "key": "proxy_pass",
+            "title": "代理地址",
+            "type": "proxy_pass"
+          },
+          {
+            "key": "proxy_settings",
+            "title": "更多代理设置",
+            "type": "proxy_settings",
+            "required": false,
+            "description": "更多代理设置"
+          }
+        ],
+        "static": [
+          {
+            "key": "index",
+            "title": "首页",
+            "required": false,
+            "type": "select",
+            "mode": "tags",
+            "option": ["index.html","index.php","index.htm"],
+            "description": "nginx静态资源默认的首页文件名，比如index.html index.php"
+          },
+          {
+            "key": "root",
+            "type": "string",
+            "title": "根路径",
+            "required": false,
+            "description": "静态资源的根路径，查找方式为直接拼接，比如：匹配路径为 /test/ ,root为/data/root,则查找资源的完整路径为：/data/root/test"
+          },
+          {
+            "key": "alias",
+            "type": "string",
+            "title": "路径别名",
+            "required": false,
+            "description": "alias和root二选一，注意与root的区别，比如：匹配路径为 /test/ ,alias为/data/root,则查找资源的完整路径为：/data/root/"
+          },
+          {
+            "key": "try_files",
+            "title": "try_files",
+            "type": "select",
+            "mode": "tags",
+            "option": ["$uri","$uri/","/index.html"],
+            "description": "",
+            "required": false,
+            "width": 450
+          }
+        ],
+        "fastcgi": [
+          {
+            "key": "fastcgi",
+            "title": "fastcgi",
+            "type": "fastcgi",
+            "required": false,
+            "description": "ngx_http_fastcgi_module,allows passing requests to a FastCGI server."
+          }
+        ],
+        "other": [
+          {
+            "key": "return",
+            "title": "return",
+            "description": "直接返回固定内容",
+            "type": "object",
+            "hideHeader": true,
+            "required": false,
+            "items": [
+              {
+                "key": "code",
+                "type": "int",
+                "min": 200,
+                "max": 600,
+                "placeholder": "http状态码",
+                "width": 120,
+                "title": "状态码"
+              },
+              {
+                "key": "content",
+                "type": "textarea",
+                "title": "内容",
+                "placeholder": "响应内容",
+                "width": 360,
+                "rows": 3
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "key": "cors_setting",
+      "title": "跨域配置",
+      "type": "cors",
+      "description": "跨域配置，可以通过该配置项解决前端跨域问题",
+      "required": false
+    },
+    {
+      "title": "Access",
+      "key": "access",
+      "type": "access",
+      "required": false,
+      "description": "deny or allow,白名单或者黑名单访问限制"
+    },
+    {
+      "type": "auth",
+      "title": "鉴权",
+      "key": "auth_request",
+      "required": false,
+      "minimizeDesc": true,
+      "description": "ngx_http_auth_request_module:实现了基于一子请求的结果的客户端的授权。如果子请求返回2xx响应码，则允许访问。如果它返回401或403，则访问被拒绝并显示相应的错误代码。子请求返回的任何其他响应代码都被认为是错误的"
+    },
+    {
+      "type": "gzip",
+      "title": "压缩配置",
+      "key": "gzip",
+      "required": false,
+      "description": "gzip"
+    },
+    {
+      "key": "add_header",
+      "title": "添加响应头",
+      "type": "array",
+      "hideHeader": true,
+      "description": "添加http响应头",
+      "required": false,
+      "items": [
+        {
+          "key": "name",
+          "title": "header名称",
+          "type": "string",
+          "width": 180,
+          "placeholder": "header名称"
+        },
+        {
+          "key": "value",
+          "title": "header值",
+          "type": "string",
+          "placeholder": "header值",
+          "width": 300
+        }
+      ]
+    },
+    {
+      "key": "rewrite",
+      "type": "object",
+      "title": "rewrite",
+      "required": false,
+      "description": "rewrite:对访问路径进行,放在server{}, if{},location{}段中,rewrite < regex > < replacement > [flag], 必须填写正则表达式和跳转路径才能生效",
+      "items": [
+        {
+          "key": "regex",
+          "title": "正则表达式",
+          "type": "string",
+          "width": 180,
+          "description": "跳转匹配的正则表达式",
+          "required": false,
+          "placeholder": "eq. ^/(.*)"
+        },
+        {
+          "key": "replacement",
+          "title": "跳转路径",
+          "type": "string",
+          "placeholder": "eq. https://www.demo.com/$1",
+          "width": 300,
+          "required": false
+        },
+        {
+          "width": 120,
+          "key": "flag",
+          "title": "flag",
+          "type": "select",
+          "option": ["last","break","redirect","permanent"],
+          "value": "permanent",
+          "required": false,
+          "description": "last: 相当于Apache的【L】标记，表示完成rewrite;\nbreak:本条规则匹配完成即终止，不在匹配后面的任何规则;\nredirect: 返回302临时重定向，浏览器地址栏会显示跳转后的URL地址，爬虫不会更新url;\npermanent:返回301永久重定向，浏览器地址栏会显示跳转后的URL地址，爬虫更新url;"
+        }
+      ]
+    },
+    {
+      "key": "tmp_custom_config",
+      "title": "自定义配置",
+      "type": "textarea",
+      "hideHeader": true,
+      "description": "自定义配置，注意，每行结尾需要加“;”号，将会拼接在最后",
+      "required": false,
+      "trim": false
+    },
+    {
+      "key": "internal",
+      "title": "内部路由",
+      "type": "switch",
+      "description": "内部路由：nginx内部访问，一旦出了这个配置文件，则失效"
+    },
+    {
+      "key": "error_page",
+      "title": "错误页面",
+      "type": "error_page",
+      "required": false,
+      "description": "错误页面配置"
+    },
+    {
+      "key": "default_type",
+      "title": "默认内容类型",
+      "type": "string",
+      "required": false,
+      "description": "default_type eg. text/plain application/json"
+    },
+    {
+      "key": "remark",
+      "title": "备注信息",
+      "type": "textarea",
+      "rows": 3,
+      "placeholder": "输入备注信息",
+      "required": false,
+      "trim": false,
+      "width": 600
+    }
+  ]
+}

src/pages/nginx/components/location/index.less → frontend/src/pages/nginx/components/location/index.less

@@ -1,42 +1,42 @@
-.location-input{
-
-  .ant-drawer-header{
-    padding: 5px 10px;
-  }
-  .ant-drawer-body{
-    padding: 10px;
-  }
-}
-
-.location-table{
-  .ant-table-cell{
-    padding: 10px;
-  }
-  .location-btns{
-    .ant-btn+.ant-btn{
-      margin-left: 5px;
-    }
-    .ant-btn{
-      padding: 2.4px 0;
-    }
-    .ant-btn-link{
-      font-size: 13px;
-    }
-  }
-
-}
-.location-table ~ .description{
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-  padding-right: 20px;
-}
-
-.location-conf-preview{
-  width: 520px;
-  min-height: 100px;
-  .ant-input[disabled]{
-    color: #333333;
-    background: none;
-  }
+.location-input{
+
+  .ant-drawer-header{
+    padding: 5px 10px;
+  }
+  .ant-drawer-body{
+    padding: 10px;
+  }
+}
+
+.location-table{
+  .ant-table-cell{
+    padding: 10px;
+  }
+  .location-btns{
+    .ant-btn+.ant-btn{
+      margin-left: 5px;
+    }
+    .ant-btn{
+      padding: 2.4px 0;
+    }
+    .ant-btn-link{
+      font-size: 13px;
+    }
+  }
+
+}
+.location-table ~ .description{
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 20px;
+}
+
+.location-conf-preview{
+  width: 520px;
+  min-height: 100px;
+  .ant-input[disabled]{
+    color: #333333;
+    background: none;
+  }
 }

src/pages/nginx/components/location/index.tsx → frontend/src/pages/nginx/components/location/index.tsx

@@ -1,296 +1,296 @@
-import {Button, Drawer, Input, Modal, Popover, Space, Switch, Table} from "antd";
-import {ColumnsType} from "antd/es/table";
-import {
-    AdvanceInputConfigs,
-    AutoForm,
-    AutoFormInstance,
-    AutoTypeInputProps,
-    isNull,
-    Message,
-    uniqueKey
-} from "planning-tools";
-import {useEffect, useRef, useState} from "react";
-import {CopyOutlined, DeleteOutlined, EditOutlined, PlusOutlined} from "@ant-design/icons";
-import {INginxLocation} from "../../../../models/nginx.ts";
-import {cloneDeep} from "lodash";
-import FormConfig from './config.json'
-
-import './index.less'
-import {SiteInput} from "../site";
-import {renderLocation} from "./utils.ts";
-
-/**
- * 部分的重要信息
- * @param data
- * @param onChange
- * @constructor
- */
-const LocationInfo = ({data, onChange}:{ data: INginxLocation, onChange?: (data: INginxLocation) => void})=>{
-
-    const rootDir = ()=>{
-        if (data.alias){
-            return `alias: ${data.alias}`
-        }
-        return `root: ${data.root || '--'}`
-    }
-
-
-    return (<div>
-        {
-            data.proxy_type === 'proxy' ? <div>{`proxy: ${data.proxy_pass}`}</div> : null
-        }
-        {
-            data.proxy_type === 'static' ? <div>{rootDir()}<SiteInput onChange={onChange} location={data} /></div>:null
-        }
-        <div>
-            {
-                data.rewrite?.regex && data.rewrite?.replacement ? `${data.rewrite.regex} ${data.rewrite.replacement}` : ''
-            }
-        </div>
-    </div>)
-}
-
-/**
- * 路由，站点，规则编辑
- * @param value
- * @param onChange
- * @param column
- * @constructor
- */
-export const LocationInput = ({value, onChange }: AutoTypeInputProps) => {
-
-    const [locations, setLocations] = useState<INginxLocation[]>([])
-
-    const [editData, setEditData] = useState<INginxLocation>()
-    const isAddRef = useRef(false)
-
-    const [modal,contextHolder] = Modal.useModal()
-
-    const formRef = useRef<AutoFormInstance>()
-
-    useEffect(() => {
-        if (Array.isArray(value)) {
-            setLocations(value.map((item: INginxLocation) => {
-                if (!item.id) {
-                    item.id = uniqueKey(20)
-                }
-                if (!item.lines){
-                    renderLocation(item)
-                }
-                return item
-            }))
-        }
-
-    }, [value])
-
-    const onEditRow = (data: INginxLocation) => {
-        isAddRef.current = false
-        setEditData(cloneDeep(data))
-    }
-
-    const onAddData = (data?: INginxLocation, index?: number)=>{
-        isAddRef.current = true
-        setEditData({ ...data,id: uniqueKey(20),__index__: index} as never)
-    }
-
-    const onRemoveData = (data: INginxLocation)=>{
-        const onOk = ()=>{
-            const list = locations.filter(item=>item.id !== data.id);
-            onChange?.(list)
-        }
-        modal.confirm({
-            title: '提示',
-            type: 'warning',
-            content: '您确定要删除该代理/站点吗？删除操作不可恢复，请谨慎操作!',
-            okType: 'danger',
-            okText: '仍要删除',
-            cancelText: '先不了',
-            onOk,
-        })
-    }
-
-    const onQuickChangeStatus = (data: INginxLocation, enable: boolean) => {
-        const list = locations.map(item=>{
-            if (item.id === data.id){
-                return { ...item, enable }
-            }
-            return item
-        })
-        onChange?.(list)
-    }
-
-    const onSubmitData = async () => {
-        const values = await formRef.current?.onSyncSubmit(true);
-        const newData = {...editData, ...values} as INginxLocation;
-        console.log('newLocation', newData);
-        if (!editData) {
-            console.warn('editData is null ,skip ');
-            return
-        }
-        renderLocation(newData)
-        let list: INginxLocation[]
-        if (isAddRef.current){
-            const index = newData.__index__ || locations.length;
-            delete newData.__index__;
-            let exist = locations.find(item=>item.name == newData.name);
-            if (exist){
-                Message.warning('名称不能相同，请修改后再保存！');
-                return
-            }
-            exist = locations.find(item=> {
-                if (item.match && newData.match){
-                    return item.match.regex === newData.match.regex && item.match.path === newData.match.path
-                }
-                return false
-            });
-            if (exist){
-                Message.warning('匹配规则不能完全一样，请修改后重新添加！');
-                return
-            }
-            renderLocation(newData);
-            if (isNull(index) || index < 0 || index >= locations.length-1){
-                list = locations.concat([newData])
-            }else {
-                list = []
-                locations.forEach((item,idx)=>{
-                    if (idx === index){
-                        list.push(item)
-                        list.push(newData)
-                    }else {
-                        list.push(item)
-                    }
-                })
-            }
-        }else {
-            renderLocation(newData);
-            list = locations.map(item => {
-                if (item.id === newData.id) {
-                    return {...item, ...newData}
-                }
-                return item
-            })
-        }
-        onChange?.(list)
-        setEditData(undefined)
-    }
-
-  /**
-   * 部署数据变化，不重新渲染
-   * @param data
-   */
-  const onDeployDataChange = (data: INginxLocation) => {
-    const newList = locations.map(item=>{
-      if (item.id === data.id){
-        return { ...item, ...data}
-      }
-      return item;
-    });
-    onChange?.(newList)
-  }
-
-    const renderPreview = (data: INginxLocation)=>{
-        let content ='';
-        let rows = 0;
-        if (data.http?.length){
-           content = data.http.join('\n') + '\n';
-           rows = data.http.length;
-        }
-        if (data.lines){
-            content = content+ data.lines.join('\n')
-            rows +=data.lines.length
-        }
-        return (<div className="location-conf-preview">
-            <Input.TextArea rows={Math.max(Math.min(10,rows),5)} disabled value={content} />
-        </div>)
-    }
-
-    const renderOps = (_: never, data: INginxLocation, index: number) => {
-        return (
-            <div className="location-btns">
-                <Button onClick={() => onRemoveData(data)} type="text" danger icon={<DeleteOutlined/>}/>
-                <Button onClick={() => onEditRow(data)} type="link" icon={<EditOutlined/>}/>
-                <Button onClick={()=>onAddData(data, index)} type="link" icon={<CopyOutlined/>}/>
-                <Popover trigger="click" destroyTooltipOnHide
-                         placement="top"
-                         content={()=>renderPreview(data as never)} >
-                    <Button type="link">预览</Button>
-                </Popover>
-            </div>
-        )
-    }
-
-    const columns: ColumnsType = [
-        {
-            dataIndex: 'name',
-            title: '路由名称',
-            width: 120
-        },
-        {
-            dataIndex: 'match',
-            title: "规则",
-            render: (value) => <span>{`${value.regex || ''} ${value.path}`}</span>
-        },
-        {
-            dataIndex: 'enable',
-            title: '状态',
-            render: (value,record) => <Switch onChange={c=>onQuickChangeStatus(record as never,c)} checked={value}/>
-        },
-        {
-            dataIndex: 'proxy_pass',
-            title: '代理或路径',
-            render: (_,record: any)=>{
-                return (<LocationInfo onChange={onDeployDataChange} data={record} />)
-            }
-        },
-        {
-          dataIndex: 'remark',
-          title:"备注",
-        },
-        {
-            title: '操作',
-            render: renderOps as never,
-            width: 180,
-            fixed: 'right'
-        }
-    ]
-
-    return (
-        <>
-
-            {
-                locations.length ? (<Table pagination={false}
-                                           style={{marginRight: 5}}
-                                           rowKey="id"
-                                           columns={columns as never}
-                                           className="location-table"
-                                           dataSource={locations}>
-                    <div>Empty</div>
-                </Table>) : (
-                    <>
-                        <Button onClick={()=>onAddData()} className="add-btn" type="link" icon={<PlusOutlined/>}/>
-                    </>
-                )
-            }
-            <Drawer title={isAddRef.current? '新增' : '编辑'}
-                    placement="right"
-                    open={!!editData}
-                    onClose={() => setEditData(undefined)}
-                    destroyOnClose
-                    width={900}
-                    className="location-input"
-                    extra={<Space>
-                        <Button onClick={onSubmitData} ghost type="primary">保存</Button>
-                    </Space>}
-            >
-                <AutoForm
-                    columns={FormConfig.form}
-                    ref={formRef as never}
-                    data={editData}/>
-            </Drawer>
-            {contextHolder}
-        </>
-    )
-}
-
-
-AdvanceInputConfigs['locations'] = LocationInput
+import {Button, Drawer, Input, Modal, Popover, Space, Switch, Table} from "antd";
+import {ColumnsType} from "antd/es/table";
+import {
+    AdvanceInputConfigs,
+    AutoForm,
+    AutoFormInstance,
+    AutoTypeInputProps,
+    isNull,
+    Message,
+    uniqueKey
+} from "planning-tools";
+import {useEffect, useRef, useState} from "react";
+import {CopyOutlined, DeleteOutlined, EditOutlined, PlusOutlined} from "@ant-design/icons";
+import {INginxLocation} from "../../../../models/nginx.ts";
+import {cloneDeep} from "lodash";
+import FormConfig from './config.json'
+
+import './index.less'
+import {SiteInput} from "../site";
+import {renderLocation} from "./utils.ts";
+
+/**
+ * 部分的重要信息
+ * @param data
+ * @param onChange
+ * @constructor
+ */
+const LocationInfo = ({data, onChange}:{ data: INginxLocation, onChange?: (data: INginxLocation) => void})=>{
+
+    const rootDir = ()=>{
+        if (data.alias){
+            return `alias: ${data.alias}`
+        }
+        return `root: ${data.root || '--'}`
+    }
+
+
+    return (<div>
+        {
+            data.proxy_type === 'proxy' ? <div>{`proxy: ${data.proxy_pass}`}</div> : null
+        }
+        {
+            data.proxy_type === 'static' ? <div>{rootDir()}<SiteInput onChange={onChange} location={data} /></div>:null
+        }
+        <div>
+            {
+                data.rewrite?.regex && data.rewrite?.replacement ? `${data.rewrite.regex} ${data.rewrite.replacement}` : ''
+            }
+        </div>
+    </div>)
+}
+
+/**
+ * 路由，站点，规则编辑
+ * @param value
+ * @param onChange
+ * @param column
+ * @constructor
+ */
+export const LocationInput = ({value, onChange }: AutoTypeInputProps) => {
+
+    const [locations, setLocations] = useState<INginxLocation[]>([])
+
+    const [editData, setEditData] = useState<INginxLocation>()
+    const isAddRef = useRef(false)
+
+    const [modal,contextHolder] = Modal.useModal()
+
+    const formRef = useRef<AutoFormInstance>()
+
+    useEffect(() => {
+        if (Array.isArray(value)) {
+            setLocations(value.map((item: INginxLocation) => {
+                if (!item.id) {
+                    item.id = uniqueKey(20)
+                }
+                if (!item.lines){
+                    renderLocation(item)
+                }
+                return item
+            }))
+        }
+
+    }, [value])
+
+    const onEditRow = (data: INginxLocation) => {
+        isAddRef.current = false
+        setEditData(cloneDeep(data))
+    }
+
+    const onAddData = (data?: INginxLocation, index?: number)=>{
+        isAddRef.current = true
+        setEditData({ ...data,id: uniqueKey(20),__index__: index} as never)
+    }
+
+    const onRemoveData = (data: INginxLocation)=>{
+        const onOk = ()=>{
+            const list = locations.filter(item=>item.id !== data.id);
+            onChange?.(list)
+        }
+        modal.confirm({
+            title: '提示',
+            type: 'warning',
+            content: '您确定要删除该代理/站点吗？删除操作不可恢复，请谨慎操作!',
+            okType: 'danger',
+            okText: '仍要删除',
+            cancelText: '先不了',
+            onOk,
+        })
+    }
+
+    const onQuickChangeStatus = (data: INginxLocation, enable: boolean) => {
+        const list = locations.map(item=>{
+            if (item.id === data.id){
+                return { ...item, enable }
+            }
+            return item
+        })
+        onChange?.(list)
+    }
+
+    const onSubmitData = async () => {
+        const values = await formRef.current?.onSyncSubmit(true);
+        const newData = {...editData, ...values} as INginxLocation;
+        console.log('newLocation', newData);
+        if (!editData) {
+            console.warn('editData is null ,skip ');
+            return
+        }
+        renderLocation(newData)
+        let list: INginxLocation[]
+        if (isAddRef.current){
+            const index = newData.__index__ || locations.length;
+            delete newData.__index__;
+            let exist = locations.find(item=>item.name == newData.name);
+            if (exist){
+                Message.warning('名称不能相同，请修改后再保存！');
+                return
+            }
+            exist = locations.find(item=> {
+                if (item.match && newData.match){
+                    return item.match.regex === newData.match.regex && item.match.path === newData.match.path
+                }
+                return false
+            });
+            if (exist){
+                Message.warning('匹配规则不能完全一样，请修改后重新添加！');
+                return
+            }
+            renderLocation(newData);
+            if (isNull(index) || index < 0 || index >= locations.length-1){
+                list = locations.concat([newData])
+            }else {
+                list = []
+                locations.forEach((item,idx)=>{
+                    if (idx === index){
+                        list.push(item)
+                        list.push(newData)
+                    }else {
+                        list.push(item)
+                    }
+                })
+            }
+        }else {
+            renderLocation(newData);
+            list = locations.map(item => {
+                if (item.id === newData.id) {
+                    return {...item, ...newData}
+                }
+                return item
+            })
+        }
+        onChange?.(list)
+        setEditData(undefined)
+    }
+
+  /**
+   * 部署数据变化，不重新渲染
+   * @param data
+   */
+  const onDeployDataChange = (data: INginxLocation) => {
+    const newList = locations.map(item=>{
+      if (item.id === data.id){
+        return { ...item, ...data}
+      }
+      return item;
+    });
+    onChange?.(newList)
+  }
+
+    const renderPreview = (data: INginxLocation)=>{
+        let content ='';
+        let rows = 0;
+        if (data.http?.length){
+           content = data.http.join('\n') + '\n';
+           rows = data.http.length;
+        }
+        if (data.lines){
+            content = content+ data.lines.join('\n')
+            rows +=data.lines.length
+        }
+        return (<div className="location-conf-preview">
+            <Input.TextArea rows={Math.max(Math.min(10,rows),5)} disabled value={content} />
+        </div>)
+    }
+
+    const renderOps = (_: never, data: INginxLocation, index: number) => {
+        return (
+            <div className="location-btns">
+                <Button onClick={() => onRemoveData(data)} type="text" danger icon={<DeleteOutlined/>}/>
+                <Button onClick={() => onEditRow(data)} type="link" icon={<EditOutlined/>}/>
+                <Button onClick={()=>onAddData(data, index)} type="link" icon={<CopyOutlined/>}/>
+                <Popover trigger="click" destroyTooltipOnHide
+                         placement="top"
+                         content={()=>renderPreview(data as never)} >
+                    <Button type="link">预览</Button>
+                </Popover>
+            </div>
+        )
+    }
+
+    const columns: ColumnsType = [
+        {
+            dataIndex: 'name',
+            title: '路由名称',
+            width: 120
+        },
+        {
+            dataIndex: 'match',
+            title: "规则",
+            render: (value) => <span>{`${value.regex || ''} ${value.path}`}</span>
+        },
+        {
+            dataIndex: 'enable',
+            title: '状态',
+            render: (value,record) => <Switch onChange={c=>onQuickChangeStatus(record as never,c)} checked={value}/>
+        },
+        {
+            dataIndex: 'proxy_pass',
+            title: '代理或路径',
+            render: (_,record: any)=>{
+                return (<LocationInfo onChange={onDeployDataChange} data={record} />)
+            }
+        },
+        {
+          dataIndex: 'remark',
+          title:"备注",
+        },
+        {
+            title: '操作',
+            render: renderOps as never,
+            width: 180,
+            fixed: 'right'
+        }
+    ]
+
+    return (
+        <>
+
+            {
+                locations.length ? (<Table pagination={false}
+                                           style={{marginRight: 5}}
+                                           rowKey="id"
+                                           columns={columns as never}
+                                           className="location-table"
+                                           dataSource={locations}>
+                    <div>Empty</div>
+                </Table>) : (
+                    <>
+                        <Button onClick={()=>onAddData()} className="add-btn" type="link" icon={<PlusOutlined/>}/>
+                    </>
+                )
+            }
+            <Drawer title={isAddRef.current? '新增' : '编辑'}
+                    placement="right"
+                    open={!!editData}
+                    onClose={() => setEditData(undefined)}
+                    destroyOnClose
+                    width={900}
+                    className="location-input"
+                    extra={<Space>
+                        <Button onClick={onSubmitData} ghost type="primary">保存</Button>
+                    </Space>}
+            >
+                <AutoForm
+                    columns={FormConfig.form}
+                    ref={formRef as never}
+                    data={editData}/>
+            </Drawer>
+            {contextHolder}
+        </>
+    )
+}
+
+
+AdvanceInputConfigs['locations'] = LocationInput

src/pages/nginx/components/location/utils.ts → frontend/src/pages/nginx/components/location/utils.ts

@@ -1,108 +1,115 @@
-import {INginxLocation} from "../../../../models/nginx.ts";
-import {cloneDeep} from "lodash";
-import {isNgxModuleValue, NgxModuleData} from "../input.ts";
-import {isBasicData} from "planning-tools";
-
-/**
- * 临时数据，不渲染
- */
-const blacklist: { [key:string]:boolean } = {
-    'rewrite': true,
-    'add_header': true,
-    'id': true,
-    'name': true,
-    'proxy_type': true,
-    'enable': true,
-    "remark": true,
-    "nginxId": true,
-    "proxy_set_header": true,
-    "__index__": true,
-    "internal": true,
-    "lines": true,
-    http:true,
-    data: true
-}
-
-/**
- * 这里暂时要考虑下
- * @param origin
- * @param httpLines
- */
-export const renderLocation = (origin: INginxLocation) => {
-    const loc = cloneDeep(origin)
-    const lines: string[] = [];
-    const httpLines: string[] = [];
-    origin.lines = lines;
-    origin.http = httpLines;
-
-    lines.push('')
-    lines.push(`####   ${loc.name || loc.id} start...`)
-    lines.push(`location ${loc.match.regex || ''} ${loc.match.path || '/'} {`)
-
-    if (loc.rewrite && loc.rewrite.replacement && loc.rewrite.regex){
-        lines.push(`    rewrite ${loc.rewrite.regex} ${loc.rewrite.replacement} ${loc.rewrite.flag || 'permanent'};`)
-    }
-
-    (loc.add_header || []).forEach(h=>{
-        lines.push(`    add_header ${h.name} ${h.value};`)
-    })
-
-    if (loc.proxy_type !=='proxy'){
-        delete loc.proxy_settings
-        delete loc.proxy_pass
-        delete loc.proxy_set_header
-        console.log('loc', loc)
-    }
-
-    if (loc.proxy_type !== 'static'){
-        delete loc.root
-        delete loc.alias
-    }
-    if (loc.proxy_type !== 'other'){
-        delete loc.return
-    }
-
-    if (loc.internal){
-        lines.push('    internal;');
-    }
-    delete loc.internal;
-
-    Object.keys(loc).forEach(k=>{
-        if (blacklist[k]){
-            return;
-        }
-        if (k.startsWith("tmp" || k.startsWith("temp")) || k.startsWith("__")){
-            return;
-        }
-        let value = (loc as any)[k];
-        if (Array.isArray(value)){
-            value = value.join(' ')
-        }else if (isNgxModuleValue(value)){
-            value.lines.forEach((line: string)=>{
-                lines.push(`    ${line}`)
-            });
-            (value as NgxModuleData).http?.forEach(l=>httpLines.push(l))
-            value = '';
-        } else if (!isBasicData(value)){
-            console.log('[render] skip',k, value)
-            value = ''
-        }
-        if (value){
-            lines.push(`    ${k}      ${value};`)
-        }
-    })
-
-    if (loc.tmp_custom_config){
-        loc.tmp_custom_config.split('\n').forEach(line=>{
-            lines.push(`    ${line}`)
-        })
-    }
-    if (loc.return && loc.return.code){
-        lines.push(`    return  ${loc.return.code}  ${loc.return.content};`)
-    }
-
-    lines.push('}')
-    lines.push(`####   ${loc.name || loc.id} end...`)
-    lines.push('')
-    return lines
-}
+import {INginxLocation} from "../../../../models/nginx.ts";
+import {cloneDeep} from "lodash";
+import {isNgxModuleValue, NgxModuleData} from "../input.ts";
+import {isBasicData} from "planning-tools";
+
+/**
+ * 临时数据，不渲染
+ */
+const blacklist: { [key:string]:boolean } = {
+    'rewrite': true,
+    'add_header': true,
+    'id': true,
+    'name': true,
+    'proxy_type': true,
+    'enable': true,
+    "remark": true,
+    "nginxId": true,
+    "proxy_set_header": true,
+    "__index__": true,
+    "internal": true,
+    "lines": true,
+    http:true,
+    data: true,
+  'return': true, //需要特殊处理
+}
+
+/**
+ * 这里暂时要考虑下
+ * @param origin
+ * @param httpLines
+ */
+export const renderLocation = (origin: INginxLocation) => {
+    const loc = cloneDeep(origin)
+    const lines: string[] = [];
+    const httpLines: string[] = [];
+    origin.lines = lines;
+    origin.http = httpLines;
+
+    lines.push('')
+    lines.push(`####   ${loc.name || loc.id} start...`)
+    lines.push(`location ${loc.match.regex || ''} ${loc.match.path || '/'} {`)
+
+    if (loc.rewrite && loc.rewrite.replacement && loc.rewrite.regex){
+        lines.push(`    rewrite ${loc.rewrite.regex} ${loc.rewrite.replacement} ${loc.rewrite.flag || 'permanent'};`)
+    }
+
+    (loc.add_header || []).forEach(h=>{
+        lines.push(`    add_header ${h.name} ${h.value};`)
+    })
+
+    if (loc.proxy_type !=='proxy'){
+        delete loc.proxy_settings
+        delete loc.proxy_pass
+        delete loc.proxy_set_header
+        console.log('loc', loc)
+    }
+
+    if (loc.proxy_type !== 'static'){
+        delete loc.root
+        delete loc.alias
+        delete loc.index
+        delete loc.try_files
+    }
+    if (loc.proxy_type !== 'other'){
+        delete loc.return
+    }
+
+    if (loc.internal){
+        lines.push('    internal;');
+    }
+    delete loc.internal;
+
+
+    Object.keys(loc).forEach(k=>{
+        if (blacklist[k]){
+            return;
+        }
+        if (k.startsWith("tmp" || k.startsWith("temp")) || k.startsWith("__")){
+            return;
+        }
+        let value = (loc as any)[k];
+        if (Array.isArray(value)){
+            value = value.join(' ')
+        }else if (isNgxModuleValue(value)){
+            value.lines.forEach((line: string)=>{
+                lines.push(`    ${line}`)
+            });
+            (value as NgxModuleData).http?.forEach(l=>httpLines.push(l))
+            value = '';
+        } else if (!isBasicData(value)){
+            console.log('[render] skip',k, value)
+            value = ''
+        }
+        if (value){
+            lines.push(`    ${k}      ${value};`)
+        }
+    })
+
+    if (loc.tmp_custom_config){
+        loc.tmp_custom_config.split('\n').forEach(line=>{
+            lines.push(`    ${line}`)
+        })
+    }
+
+  if (loc.return?.code){
+    let content = loc.return.content
+    content = JSON.stringify(content)
+    lines.push(`    return  ${loc.return.code || 200}   ${content};`)
+  }
+
+    lines.push('}')
+    lines.push(`####   ${loc.name || loc.id} end...`)
+    lines.push('')
+    return lines
+}

src/pages/nginx/components/proxy/config.json → frontend/src/pages/nginx/components/proxy/config.json

@@ -1,199 +1,199 @@
-{
-  "form": [
-    {
-      "key": "tmp_trans_ip",
-      "title": "透传客户端IP",
-      "type": "switch",
-      "required": false,
-      "description": "添加：proxy_set_header X-Real_IP $remote_addr,X-Forwarded-For $proxy_add_x_forwarded_for",
-      "minimizeDesc": true
-    },
-    {
-      "key": "tmp_trans_host",
-      "title": "改写访问域名",
-      "type": "switch",
-      "required": false,
-      "description": "添加：proxy_set_header Host $host"
-    },
-    {
-      "key": "tmp_support_ws",
-      "title": "支持Websocket",
-      "type": "switch",
-      "required": false,
-      "description": "添加websocket代理需要的请求头"
-    },
-    {
-      "key": "proxy_connect_timeout",
-      "title": "连接超时时间",
-      "type": "string",
-      "required": false,
-      "ruleType": "reg",
-      "pattern": "^(\\d+(s|m|h))?$",
-      "description": "eg. 60s 5m 1h"
-    },
-    {
-      "key": "proxy_read_timeout",
-      "title": "读超时时间",
-      "type": "string",
-      "ruleType": "reg",
-      "pattern": "[\\d+](s|m|h)$",
-      "required": false,
-      "description": "proxy_read_timeout"
-    },
-    {
-      "key": "proxy_http_version",
-      "title": "代理http版本",
-      "type": "select",
-      "option": ["1.0","1.1"],
-      "required": false
-    },
-    {
-      "key": "proxy_set_header",
-      "title": "代理请求头",
-      "type": "array",
-      "items": [
-        {
-          "key": "name",
-          "type": "string",
-          "placeholder": "请求头名称",
-          "title": "请求头名称",
-          "mode": "tags",
-          "option": ["Host","X-Real-IP","X-Forwarded-For","Upgrade","Connection"],
-          "description": "Host,X-Real-IP,X-Forwarded-For,Upgrade,Connection",
-          "width": 180
-        },
-        {
-          "key": "value",
-          "type": "string",
-          "mode": "tags",
-          "placeholder": "请求头值",
-          "title": "请求头值",
-          "option": ["$host","$remote_addr","$proxy_add_x_forwarded_for","$http_upgrade","upgrade"],
-          "description": "如：$host,$remote_addr,$proxy_add_x_forwarded_for,$http_upgrade,upgrade",
-          "width": 180
-        }
-      ],
-      "required": false
-    },
-    {
-      "key": "proxy_next_upstream",
-      "title": "proxy_next_upstream",
-      "type": "select",
-      "option": ["error","timeout","invalid_header","http_500","http_502","http_503","http_504","http_403","http_404","http_429","non_idempotent","off"],
-      "mode": "multiple",
-      "placeholder": "default: proxy_next_upstream error timeout",
-      "required": false,
-      "width": 425
-    },
-    {
-      "key": "proxy_next_upstream_timeout",
-      "title": "next_upstream_timeout",
-      "type": "string",
-      "required": false,
-      "placeholder": "eg. 60s 5m"
-    },
-    {
-      "key": "proxy_next_upstream_tries",
-      "title": "proxy_next_upstream_tries",
-      "type": "int",
-      "required": false,
-      "placeholder": "proxy_next_upstream_tries,default is 0"
-    },
-    {
-      "key": "proxy_custom_config",
-      "title": "自定义配置",
-      "type": "textarea",
-      "hideHeader": true,
-      "description": "参考文档： https://nginx.org/en/docs/http/ngx_http_proxy_module.html",
-      "required": false,
-      "placeholder": "将会拼接到http的配置文件后，请注意格式",
-      "width": 425
-    },
-    {
-      "key": "tmp_proxy_more",
-      "title": "更多设置",
-      "collapsible": true,
-      "type": "divider",
-      "items": [
-        {
-          "key": "proxy_send_timeout",
-          "title": "proxy_send_timeout",
-          "type": "string",
-          "ruleType": "reg",
-          "pattern": "[\\d+](s|m|h)$",
-          "required": false
-        },
-        {
-          "key": "proxy_redirect",
-          "title": "重定向(proxy_redirect)",
-          "type": "string",
-          "required": false,
-          "description": "请输入 default 或者off 或者 redirect replacement，eg. http://upstream:port/two/ /one/"
-        },
-        {
-          "key": "proxy_pass_request_body",
-          "title": "发送请求数据",
-          "description": "proxy_pass_request_body: 特定场景，不需要将数据转发到服务端,默认发送;关闭会同时添加 proxy_set_header Content-Length \"\" ",
-          "type": "switch",
-          "value": true,
-          "required": false
-        },
-        {
-          "key": "ssl_certificate",
-          "title": "SSL证书",
-          "type": "certs",
-          "required": false
-        },
-        {
-          "key": "proxy_ssl_ciphers",
-          "title": "proxy_ssl_ciphers",
-          "type": "string",
-          "required": false
-        },
-        {
-          "key": "proxy_ssl_protocols",
-          "title": "proxy_ssl_protocols",
-          "type": "select",
-          "option": ["SSLv2","SSLv3","SSLv1","SSLv1.1","SSLv1.2","SSLv1.3"],
-          "mode": "multiple",
-          "required": false
-        },
-        {
-          "key": "proxy_ssl_verify",
-          "title": "SSL证书校验",
-          "type": "switch",
-          "required": false,
-          "description": "proxy_ssl_verify on|off"
-        },
-        {
-          "key": "proxy_store",
-          "title": "proxy_store",
-          "type": "string",
-          "required": false,
-          "description": "Enables saving of files to a disk. The on parameter saves files with paths corresponding to the directives alias or root. The off parameter disables saving of files. In addition, the file name can be set explicitly using the string with variables:\n\nproxy_store /data/www$original_uri;"
-        },
-        {
-          "key": "proxy_store_access",
-          "title": "proxy_store_access",
-          "type": "string",
-          "required": false,
-          "description": "Sets access permissions for newly created files and directories, e.g.:\n\nproxy_store_access user:rw group:rw all:r;\nIf any group or all access permissions are specified then user permissions may be omitted:\n\nproxy_store_access group:rw all:r;"
-        },
-        {
-          "key": "proxy_temp_file_write_size",
-          "title": "proxy_temp_file_write_size",
-          "type": "string",
-          "required": false,
-          "description": "Default:\t\nproxy_temp_file_write_size 8k|16k;"
-        },
-        {
-          "key": "proxy_temp_path",
-          "title": "proxy_temp_path",
-          "type": "string",
-          "required": false,
-          "description": "Syntax: proxy_temp_path path [level1 [level2 [level3]]];eg. proxy_temp_path /spool/nginx/proxy_temp 1 2;"
-        }
-      ]
-    }
-  ]
-}
+{
+  "form": [
+    {
+      "key": "tmp_trans_ip",
+      "title": "透传客户端IP",
+      "type": "switch",
+      "required": false,
+      "description": "添加：proxy_set_header X-Real_IP $remote_addr,X-Forwarded-For $proxy_add_x_forwarded_for",
+      "minimizeDesc": true
+    },
+    {
+      "key": "tmp_trans_host",
+      "title": "改写访问域名",
+      "type": "switch",
+      "required": false,
+      "description": "添加：proxy_set_header Host $host"
+    },
+    {
+      "key": "tmp_support_ws",
+      "title": "支持Websocket",
+      "type": "switch",
+      "required": false,
+      "description": "添加websocket代理需要的请求头"
+    },
+    {
+      "key": "proxy_connect_timeout",
+      "title": "连接超时时间",
+      "type": "string",
+      "required": false,
+      "ruleType": "reg",
+      "pattern": "^(\\d+(s|m|h))?$",
+      "description": "eg. 60s 5m 1h"
+    },
+    {
+      "key": "proxy_read_timeout",
+      "title": "读超时时间",
+      "type": "string",
+      "ruleType": "reg",
+      "pattern": "[\\d+](s|m|h)$",
+      "required": false,
+      "description": "proxy_read_timeout"
+    },
+    {
+      "key": "proxy_http_version",
+      "title": "代理http版本",
+      "type": "select",
+      "option": ["1.0","1.1"],
+      "required": false
+    },
+    {
+      "key": "proxy_set_header",
+      "title": "代理请求头",
+      "type": "array",
+      "items": [
+        {
+          "key": "name",
+          "type": "string",
+          "placeholder": "请求头名称",
+          "title": "请求头名称",
+          "mode": "tags",
+          "option": ["Host","X-Real-IP","X-Forwarded-For","Upgrade","Connection"],
+          "description": "Host,X-Real-IP,X-Forwarded-For,Upgrade,Connection",
+          "width": 180
+        },
+        {
+          "key": "value",
+          "type": "string",
+          "mode": "tags",
+          "placeholder": "请求头值",
+          "title": "请求头值",
+          "option": ["$host","$remote_addr","$proxy_add_x_forwarded_for","$http_upgrade","upgrade"],
+          "description": "如：$host,$remote_addr,$proxy_add_x_forwarded_for,$http_upgrade,upgrade",
+          "width": 180
+        }
+      ],
+      "required": false
+    },
+    {
+      "key": "proxy_next_upstream",
+      "title": "proxy_next_upstream",
+      "type": "select",
+      "option": ["error","timeout","invalid_header","http_500","http_502","http_503","http_504","http_403","http_404","http_429","non_idempotent","off"],
+      "mode": "multiple",
+      "placeholder": "default: proxy_next_upstream error timeout",
+      "required": false,
+      "width": 425
+    },
+    {
+      "key": "proxy_next_upstream_timeout",
+      "title": "next_upstream_timeout",
+      "type": "string",
+      "required": false,
+      "placeholder": "eg. 60s 5m"
+    },
+    {
+      "key": "proxy_next_upstream_tries",
+      "title": "proxy_next_upstream_tries",
+      "type": "int",
+      "required": false,
+      "placeholder": "proxy_next_upstream_tries,default is 0"
+    },
+    {
+      "key": "proxy_custom_config",
+      "title": "自定义配置",
+      "type": "textarea",
+      "hideHeader": true,
+      "description": "参考文档： https://nginx.org/en/docs/http/ngx_http_proxy_module.html",
+      "required": false,
+      "placeholder": "将会拼接到http的配置文件后，请注意格式",
+      "width": 425
+    },
+    {
+      "key": "tmp_proxy_more",
+      "title": "更多设置",
+      "collapsible": true,
+      "type": "divider",
+      "items": [
+        {
+          "key": "proxy_send_timeout",
+          "title": "proxy_send_timeout",
+          "type": "string",
+          "ruleType": "reg",
+          "pattern": "[\\d+](s|m|h)$",
+          "required": false
+        },
+        {
+          "key": "proxy_redirect",
+          "title": "重定向(proxy_redirect)",
+          "type": "string",
+          "required": false,
+          "description": "请输入 default 或者off 或者 redirect replacement，eg. http://upstream:port/two/ /one/"
+        },
+        {
+          "key": "proxy_pass_request_body",
+          "title": "发送请求数据",
+          "description": "proxy_pass_request_body: 特定场景，不需要将数据转发到服务端,默认发送;关闭会同时添加 proxy_set_header Content-Length \"\" ",
+          "type": "switch",
+          "value": true,
+          "required": false
+        },
+        {
+          "key": "ssl_certificate",
+          "title": "SSL证书",
+          "type": "certs",
+          "required": false
+        },
+        {
+          "key": "proxy_ssl_ciphers",
+          "title": "proxy_ssl_ciphers",
+          "type": "string",
+          "required": false
+        },
+        {
+          "key": "proxy_ssl_protocols",
+          "title": "proxy_ssl_protocols",
+          "type": "select",
+          "option": ["SSLv2","SSLv3","SSLv1","SSLv1.1","SSLv1.2","SSLv1.3"],
+          "mode": "multiple",
+          "required": false
+        },
+        {
+          "key": "proxy_ssl_verify",
+          "title": "SSL证书校验",
+          "type": "switch",
+          "required": false,
+          "description": "proxy_ssl_verify on|off"
+        },
+        {
+          "key": "proxy_store",
+          "title": "proxy_store",
+          "type": "string",
+          "required": false,
+          "description": "Enables saving of files to a disk. The on parameter saves files with paths corresponding to the directives alias or root. The off parameter disables saving of files. In addition, the file name can be set explicitly using the string with variables:\n\nproxy_store /data/www$original_uri;"
+        },
+        {
+          "key": "proxy_store_access",
+          "title": "proxy_store_access",
+          "type": "string",
+          "required": false,
+          "description": "Sets access permissions for newly created files and directories, e.g.:\n\nproxy_store_access user:rw group:rw all:r;\nIf any group or all access permissions are specified then user permissions may be omitted:\n\nproxy_store_access group:rw all:r;"
+        },
+        {
+          "key": "proxy_temp_file_write_size",
+          "title": "proxy_temp_file_write_size",
+          "type": "string",
+          "required": false,
+          "description": "Default:\t\nproxy_temp_file_write_size 8k|16k;"
+        },
+        {
+          "key": "proxy_temp_path",
+          "title": "proxy_temp_path",
+          "type": "string",
+          "required": false,
+          "description": "Syntax: proxy_temp_path path [level1 [level2 [level3]]];eg. proxy_temp_path /spool/nginx/proxy_temp 1 2;"
+        }
+      ]
+    }
+  ]
+}

src/pages/nginx/components/proxy/index.less → frontend/src/pages/nginx/components/proxy/index.less

@@ -1,29 +1,29 @@
-
-
-.more-conf-popover{
-  .ant-popover-inner-content{
-    width: 100%;
-    padding: 5px;
-  }
-  .more-values.ant-input{
-    min-width: 650px;
-    border: none;
-    color: #333333;
-  }
-
-}
-
-.proxy-settings-input{
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  .less-values{
-    max-width: 250px;
-    overflow: hidden;
-    display: inline-block;
-    line-height: 32px;
-    height: 32px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
+
+
+.more-conf-popover{
+  .ant-popover-inner-content{
+    width: 100%;
+    padding: 5px;
+  }
+  .more-values.ant-input{
+    min-width: 650px;
+    border: none;
+    color: #333333;
+  }
+
+}
+
+.proxy-settings-input{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .less-values{
+    max-width: 250px;
+    overflow: hidden;
+    display: inline-block;
+    line-height: 32px;
+    height: 32px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

src/pages/nginx/components/proxy/index.tsx → frontend/src/pages/nginx/components/proxy/index.tsx

@@ -1,87 +1,87 @@
-/**
- * @author tuonian
- * @date 2023/7/5
- */
-import {Button, Drawer, Input, Popover, Tooltip} from "antd";
-import {AdvanceInputConfigs, AutoForm, AutoFormInstance, AutoTypeInputProps, isObject} from 'planning-tools'
-
-import './index.less'
-import {useEffect, useRef, useState} from "react";
-import {EditOutlined} from "@ant-design/icons";
-import {renderProxy} from "./utils.ts";
-import {useAppSelector} from "../../../../store";
-import FormConfig from './config.json'
-
-
-export const ProxySettings = ({value, onChange}: AutoTypeInputProps) => {
-
-  const nginx = useAppSelector(state => state.nginx.current)
-
-  const [data,setData] = useState<any>()
-  const [lines,setLines] = useState<string[]>([])
-  const [open,setOpen] = useState(false)
-
-  const formRef = useRef<AutoFormInstance>()
-
-  useEffect(()=>{
-    if (isObject(value)){
-      setData(value.data)
-      setLines(value.lines || [])
-    }
-    console.log('value change', value)
-  },[value])
-
-  const onSubmitData = async ()=>{
-    if (!nginx?.id){
-      return
-    }
-    const values = await formRef.current?.onSyncSubmit(true);
-    const lines = renderProxy(values, nginx)
-    const postData = {
-      lines: lines,
-      data:  values
-    }
-    onChange?.(postData)
-    setOpen(false)
-  }
-
-  const renderMoreContent = ()=>{
-    if (!lines?.length){
-      return <span>无配置，点击编辑按钮编辑代理设置</span>
-    }
-    return (<Input.TextArea className="more-values"
-                            rows={Math.min(10,lines.length)}
-                            disabled value={lines.join('\n')} />)
-  }
-
-  return (<div className="proxy-settings-input">
-    <Popover
-             overlayClassName="more-conf-popover"
-             destroyTooltipOnHide content={renderMoreContent}>
-      <span className="less-values">{lines.length ? lines.join(' ; ') : '无配置'}</span>
-    </Popover>
-    <Button onClick={()=>setOpen(true)} type="link" icon={<EditOutlined />} />
-    <Drawer title="代理设置"
-            open={open}
-            width={700}
-            onClose={()=>setOpen(false)}
-            rootClassName="proxy-drawer"
-            extra={<>
-              <Tooltip placement="rightBottom" title="提交后，请点击界面保存按钮，保存到服务器">
-                <Button onClick={onSubmitData} type="primary">提交</Button>
-              </Tooltip>
-
-               </>}
-            >
-
-      <AutoForm ref={formRef as never}
-                formProps={{
-                    labelCol:{span: 7}
-                }}
-                data={data}
-                columns={FormConfig.form} />
-    </Drawer>
-    </div>)
-}
-
-AdvanceInputConfigs["proxy_settings"] =ProxySettings
+/**
+ * @author tuonian
+ * @date 2023/7/5
+ */
+import {Button, Drawer, Input, Popover, Tooltip} from "antd";
+import {AdvanceInputConfigs, AutoForm, AutoFormInstance, AutoTypeInputProps, isObject} from 'planning-tools'
+
+import './index.less'
+import {useEffect, useRef, useState} from "react";
+import {EditOutlined} from "@ant-design/icons";
+import {renderProxy} from "./utils.ts";
+import {useAppSelector} from "../../../../store";
+import FormConfig from './config.json'
+
+
+export const ProxySettings = ({value, onChange}: AutoTypeInputProps) => {
+
+  const nginx = useAppSelector(state => state.nginx.current)
+
+  const [data,setData] = useState<any>()
+  const [lines,setLines] = useState<string[]>([])
+  const [open,setOpen] = useState(false)
+
+  const formRef = useRef<AutoFormInstance>()
+
+  useEffect(()=>{
+    if (isObject(value)){
+      setData(value.data)
+      setLines(value.lines || [])
+    }
+    console.log('value change', value)
+  },[value])
+
+  const onSubmitData = async ()=>{
+    if (!nginx?.id){
+      return
+    }
+    const values = await formRef.current?.onSyncSubmit(true);
+    const lines = renderProxy(values, nginx)
+    const postData = {
+      lines: lines,
+      data:  values
+    }
+    onChange?.(postData)
+    setOpen(false)
+  }
+
+  const renderMoreContent = ()=>{
+    if (!lines?.length){
+      return <span>无配置，点击编辑按钮编辑代理设置</span>
+    }
+    return (<Input.TextArea className="more-values"
+                            rows={Math.min(10,lines.length)}
+                            disabled value={lines.join('\n')} />)
+  }
+
+  return (<div className="proxy-settings-input">
+    <Popover
+             overlayClassName="more-conf-popover"
+             destroyTooltipOnHide content={renderMoreContent}>
+      <span className="less-values">{lines.length ? lines.join(' ; ') : '无配置'}</span>
+    </Popover>
+    <Button onClick={()=>setOpen(true)} type="link" icon={<EditOutlined />} />
+    <Drawer title="代理设置"
+            open={open}
+            width={700}
+            onClose={()=>setOpen(false)}
+            rootClassName="proxy-drawer"
+            extra={<>
+              <Tooltip placement="rightBottom" title="提交后，请点击界面保存按钮，保存到服务器">
+                <Button onClick={onSubmitData} type="primary">提交</Button>
+              </Tooltip>
+
+               </>}
+            >
+
+      <AutoForm ref={formRef as never}
+                formProps={{
+                    labelCol:{span: 7}
+                }}
+                data={data}
+                columns={FormConfig.form} />
+    </Drawer>
+    </div>)
+}
+
+AdvanceInputConfigs["proxy_settings"] =ProxySettings

src/pages/nginx/components/proxy/utils.ts → frontend/src/pages/nginx/components/proxy/utils.ts

@@ -1,70 +1,70 @@
-import {cloneDeep, isBoolean} from "lodash";
-import {INginx, KeyValue} from "../../../../models/nginx.ts";
-import {isFalse, isNull} from "planning-tools";
-
-/**
- * 渲染代理配置
- * @param data
- * @param nginx
- */
-export const renderProxy = (data: any, nginx: INginx)=>{
-  const lines: string[] = []
-  const values = cloneDeep(data);
-  if (values.proxy_custom_config){
-    lines.push(values.proxy_custom_config)
-  }
-  delete values.proxy_custom_config
-
-  if (Array.isArray(values.proxy_set_header)){
-    values.proxy_set_header.forEach((item: KeyValue)=>{
-      if (isNull(item.value) || isNull(item.name)){
-        return
-      }
-      lines.push(`proxy_set_header    ${item.name}  ${item.value};`)
-    })
-  }
-  delete values.proxy_set_header
-
-  if (values.ssl_certificate){
-    values.proxy_ssl_certificate = `${nginx.dataDir}/certs/${values.ssl_certificate}.pem`
-    values.proxy_ssl_certificate_key = `${nginx.dataDir}/certs/${values.ssl_certificate}.key`
-    delete values.ssl_certificate
-  }
-
-  if (values.tmp_trans_ip){
-    lines.push(`proxy_set_header X-Real-IP $remote_addr;`)
-    lines.push(`proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;`)
-  }
-  delete values.tmp_trans_ip
-  if (values.tmp_trans_host){
-    lines.push(`proxy_set_header Host $host;`)
-  }
-  delete values.tmp_trans_host
-  if (values.tmp_support_ws){
-    lines.push(`proxy_set_header Upgrade $http_upgrade;`)
-    lines.push(`proxy_set_header Connection "upgrade";`)
-  }
-  delete values.tmp_support_ws
-
-  delete values.tmp_proxy_more
-
-  if (isFalse(values.proxy_pass_request_body)){
-    lines.push(`proxy_pass_request_body   off;`)
-    lines.push(`proxy_set_header  Content-Length    "";`)
-  }
-  delete values.proxy_pass_request_body
-
-  Object.keys(values).forEach(k=>{
-    let v = values[k];
-    if (isNull(v)){
-      return
-    }
-    if (isBoolean(v)){
-      v = v ? 'on':'off'
-    }else if (Array.isArray(v)){
-      v = v.join(' ')
-    }
-    lines.push(`${k}  ${v};`)
-  })
-  return lines
-}
+import {cloneDeep, isBoolean} from "lodash";
+import {INginx, KeyValue} from "../../../../models/nginx.ts";
+import {isFalse, isNull} from "planning-tools";
+
+/**
+ * 渲染代理配置
+ * @param data
+ * @param nginx
+ */
+export const renderProxy = (data: any, nginx: INginx)=>{
+  const lines: string[] = []
+  const values = cloneDeep(data);
+  if (values.proxy_custom_config){
+    lines.push(values.proxy_custom_config)
+  }
+  delete values.proxy_custom_config
+
+  if (Array.isArray(values.proxy_set_header)){
+    values.proxy_set_header.forEach((item: KeyValue)=>{
+      if (isNull(item.value) || isNull(item.name)){
+        return
+      }
+      lines.push(`proxy_set_header    ${item.name}  ${item.value};`)
+    })
+  }
+  delete values.proxy_set_header
+
+  if (values.ssl_certificate){
+    values.proxy_ssl_certificate = `${nginx.dataDir}/certs/${values.ssl_certificate}.pem`
+    values.proxy_ssl_certificate_key = `${nginx.dataDir}/certs/${values.ssl_certificate}.key`
+    delete values.ssl_certificate
+  }
+
+  if (values.tmp_trans_ip){
+    lines.push(`proxy_set_header X-Real-IP $remote_addr;`)
+    lines.push(`proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;`)
+  }
+  delete values.tmp_trans_ip
+  if (values.tmp_trans_host){
+    lines.push(`proxy_set_header Host $host;`)
+  }
+  delete values.tmp_trans_host
+  if (values.tmp_support_ws){
+    lines.push(`proxy_set_header Upgrade $http_upgrade;`)
+    lines.push(`proxy_set_header Connection "upgrade";`)
+  }
+  delete values.tmp_support_ws
+
+  delete values.tmp_proxy_more
+
+  if (isFalse(values.proxy_pass_request_body)){
+    lines.push(`proxy_pass_request_body   off;`)
+    lines.push(`proxy_set_header  Content-Length    "";`)
+  }
+  delete values.proxy_pass_request_body
+
+  Object.keys(values).forEach(k=>{
+    let v = values[k];
+    if (isNull(v)){
+      return
+    }
+    if (isBoolean(v)){
+      v = v ? 'on':'off'
+    }else if (Array.isArray(v)){
+      v = v.join(' ')
+    }
+    lines.push(`${k}  ${v};`)
+  })
+  return lines
+}