🎨完成基本构想的全部

global/global.go

@@ -1 +0,0 @@
-package global

http/api/client.go

@@ -5,8 +5,11 @@ import (
 	"fmt"
 	"gitee.ltd/lxh/logger/log"
 	"github.com/gin-gonic/gin"
+	"github.com/spf13/cast"
+	"golang.zx2c4.com/wireguard/wgctrl/wgtypes"
 	"os"
 	"strings"
+	"time"
 	"wireguard-dashboard/client"
 	"wireguard-dashboard/http/param"
 	"wireguard-dashboard/model/entity"
@@ -75,6 +78,84 @@ func (clients) Save(c *gin.Context) {
 	utils.GinResponse(c).OK()
 }
 
+// AssignIPAndAllowedIP
+// @description: 分配客户端IP和允许访问的IP段
+// @receiver clients
+// @param c
+func (clients) AssignIPAndAllowedIP(c *gin.Context) {
+	var p param.AssignIPAndAllowedIP
+	if err := c.ShouldBind(&p); err != nil {
+		utils.GinResponse(c).FailedWithErr("参数错误", err)
+		return
+	}
+
+	// 获取一下服务端信息，因为IP分配需要根据服务端的IP制定
+	serverInfo, err := repository.Server().GetServer()
+	if err != nil {
+		utils.GinResponse(c).FailedWithErr("获取服务端信息失败", err)
+		return
+	}
+
+	var assignIPS []string
+	assignIPS = append(assignIPS, serverInfo.IpScope)
+	switch p.Rule {
+	case "AUTO":
+		// 只获取最新的一个
+		var clientInfo *entity.Client
+		if err = repository.Client().Order("created_at DESC").Take(&clientInfo).Error; err == nil {
+			if cast.ToInt64(utils.Wireguard().GetIPSuffix(clientInfo.IpAllocation)) >= 255 {
+				utils.GinResponse(c).FailedWithMsg("当前IP分配错误，请手动进行分配")
+				return
+			}
+			assignIPS = append(assignIPS, clientInfo.IpAllocation)
+		}
+
+	case "RANDOM":
+		// 查询全部客户端不管是禁用还是没禁用的
+		var clientsInfo []entity.Client
+		if err = repository.Client().Find(&clientsInfo).Error; err != nil {
+			utils.GinResponse(c).FailedWithErr("获取失败", err)
+			return
+		}
+
+		for _, v := range clientsInfo {
+			assignIPS = append(assignIPS, v.IpAllocation)
+		}
+	}
+
+	clientIP := utils.Wireguard().GenerateClientIP(serverInfo.IpScope, p.Rule, assignIPS...)
+
+	utils.GinResponse(c).OKWithData(map[string]any{
+		"clientIP": []string{fmt.Sprintf("%s/32", clientIP)},
+		"serverIP": []string{serverInfo.IpScope},
+	})
+}
+
+// GenerateKeys
+// @description: 生成密钥对
+// @receiver clients
+// @param c
+func (clients) GenerateKeys(c *gin.Context) {
+	// 为空，新增
+	privateKey, err := wgtypes.GeneratePrivateKey()
+	if err != nil {
+		utils.GinResponse(c).FailedWithErr("生成密钥对失败", err)
+		return
+	}
+	publicKey := privateKey.PublicKey().String()
+	presharedKey, err := wgtypes.GenerateKey()
+	if err != nil {
+		return
+	}
+	keys := template_data.Keys{
+		PrivateKey:   privateKey.String(),
+		PublicKey:    publicKey,
+		PresharedKey: presharedKey.String(),
+	}
+
+	utils.GinResponse(c).OKWithData(keys)
+}
+
 // Delete
 // @description: 删除客户端
 // @receiver clients
@@ -127,12 +208,17 @@ func (clients) Download(c *gin.Context) {
 		return
 	}
 
+	var serverDNS []string
+	if *data.UseServerDns == 1 {
+		serverDNS = setting.DnsServer
+	}
+
 	// 处理一下数据
 	execData := template_data.ClientConfig{
 		PrivateKey:          keys.PrivateKey,
 		IpAllocation:        data.IpAllocation,
 		MTU:                 setting.MTU,
-		DNS:                 strings.Join(setting.DnsServer, ","),
+		DNS:                 strings.Join(serverDNS, ","),
 		PublicKey:           data.Server.PublicKey,
 		PresharedKey:        keys.PresharedKey,
 		AllowedIPS:          data.AllowedIps,
@@ -199,11 +285,17 @@ func (clients) GenerateQrCode(c *gin.Context) {
 		return
 	}
 
+	var serverDNS []string
+	if *data.UseServerDns == 1 {
+		serverDNS = setting.DnsServer
+	}
+
 	// 处理一下数据
 	execData := template_data.ClientConfig{
 		PrivateKey:          keys.PrivateKey,
 		IpAllocation:        data.IpAllocation,
 		MTU:                 setting.MTU,
+		DNS:                 strings.Join(serverDNS, ","),
 		PublicKey:           data.Server.PublicKey,
 		PresharedKey:        keys.PresharedKey,
 		AllowedIPS:          data.AllowedIps,
@@ -281,7 +373,7 @@ func (clients) Status(c *gin.Context) {
 				ipAllocation += iaip.String() + ","
 			}
 			ipAllocation = strings.TrimRight(ipAllocation, ",")
-			isOnline := p.LastHandshakeTime.Minute() < 1
+			isOnline := time.Since(p.LastHandshakeTime).Minutes() < 1
 			data = append(data, vo.ClientStatus{
 				ID:            clientInfo.Id,
 				Name:          clientInfo.Name,

http/api/setting.go

@@ -4,6 +4,7 @@ import (
 	"encoding/json"
 	"gitee.ltd/lxh/logger/log"
 	"github.com/gin-gonic/gin"
+	"wireguard-dashboard/config"
 	"wireguard-dashboard/http/param"
 	"wireguard-dashboard/model/entity"
 	"wireguard-dashboard/queues"
@@ -92,3 +93,13 @@ func (setting) GetPublicNetworkIP(c *gin.Context) {
 		"IP": utils.Network().GetHostPublicIP(),
 	})
 }
+
+// GetServerRestartRule
+// @description: 获取服务重启规则
+// @receiver setting
+// @param c
+func (setting) GetServerRestartRule(c *gin.Context) {
+	utils.GinResponse(c).OKWithData(map[string]string{
+		"rule": config.Config.Wireguard.ListenConfig,
+	})
+}

http/param/client.go

@@ -42,3 +42,9 @@ type SaveClient struct {
 type ControlServer struct {
 	Status string `json:"status" form:"status" binding:"required,oneof=START STOP RESTART"`
 }
+
+// AssignIPAndAllowedIP
+// @description: 分配IP和允许访问的IP段
+type AssignIPAndAllowedIP struct {
+	Rule string `json:"rule" form:"rule" binding:"required,oneof=RANDOM AUTO"` // 分配IP的规则 RANDOM - 固定 | AUTO - 自动生成
+}

main.go

@@ -3,7 +3,9 @@ package main
 import (
 	"fmt"
 	"gitee.ltd/lxh/logger/log"
+	"math/rand"
 	"net/http"
+	"time"
 	"wireguard-dashboard/config"
 	"wireguard-dashboard/initialize"
 	"wireguard-dashboard/queues"
@@ -20,6 +22,7 @@ func init() {
 }
 
 func main() {
+	rand.New(rand.NewSource(time.Now().Local().UnixNano()))
 	route.IncludeRouters(
 		route.CaptchaApi,
 		route.UserApi,

queues/async_wg_config.go

@@ -78,6 +78,10 @@ func asyncWireguardConfigFile() {
 		// 客户端数据
 		var renderClients []template_data.Client
 		for _, v := range serverEnt.Clients {
+			// 如果不是确认后创建或者未启用就不写入到wireguard配置文件当中
+			if *v.EnableAfterCreation != 1 || *v.Enabled != 1 {
+				continue
+			}
 			var clientKey template_data.Keys
 			_ = json.Unmarshal([]byte(v.Keys), &clientKey)
 			var createUserName string

repository/client.go

@@ -131,16 +131,40 @@ func (r clientRepo) Save(p param.SaveClient, adminId string) (client *entity.Cli
 		return nil, errors.New("该客户端的IP已经存在，请检查后再添加！")
 	}
 
+	var privateKey, presharedKey wgtypes.Key
+	var publicKey string
+
+	if p.Keys.PrivateKey == "" {
 		// 为空，新增
-	privateKey, err := wgtypes.GeneratePrivateKey()
+		privateKey, err = wgtypes.GeneratePrivateKey()
 		if err != nil {
-		return
+			log.Errorf("生成密钥对失败: %v", err.Error())
+			return nil, errors.New("解析密钥失败")
 		}
-	publicKey := privateKey.PublicKey().String()
+	} else {
-	presharedKey, err := wgtypes.GenerateKey()
+		privateKey, err = wgtypes.ParseKey(p.Keys.PrivateKey)
 		if err != nil {
-		return
+			log.Errorf("解析密钥对失败: %v", err.Error())
+			return nil, errors.New("解析密钥失败")
 		}
+	}
+
+	publicKey = privateKey.PublicKey().String()
+
+	if p.Keys.PresharedKey == "" {
+		presharedKey, err = wgtypes.GenerateKey()
+		if err != nil {
+			log.Errorf("生成共享密钥失败: %v", err.Error())
+			return nil, errors.New("解析密钥失败")
+		}
+	} else {
+		presharedKey, err = wgtypes.ParseKey(p.Keys.PresharedKey)
+		if err != nil {
+			log.Errorf("解析共享密钥失败: %v", err.Error())
+			return nil, errors.New("解析密钥失败")
+		}
+	}
+
 	keys := template_data.Keys{
 		PrivateKey:   privateKey.String(),
 		PublicKey:    publicKey,

route/client.go

@@ -16,5 +16,7 @@ func ClientApi(r *gin.RouterGroup) {
 		apiGroup.POST("generate-qrcode/:id", api.Client().GenerateQrCode)    // 生成客户端二维码
 		apiGroup.GET("status", api.Client().Status)                          // 获取客户端链接状态监听列表
 		apiGroup.POST("offline/:id", api.Client().Offline)                   // 强制下线指定客户端
+		apiGroup.POST("assignIP", api.Client().AssignIPAndAllowedIP)         // 分配IP
+		apiGroup.POST("generate-keys", api.Client().GenerateKeys)            // 生成密钥对
 	}
 }

route/server.go

@@ -7,10 +7,10 @@ import (
 )
 
 func ServerApi(r *gin.RouterGroup) {
-	apiGroup := r.Group("server", middleware.Authorization(), middleware.Permission(), middleware.SystemLogRequest())
+	apiGroup := r.Group("server", middleware.Authorization(), middleware.SystemLogRequest())
 	{
 		apiGroup.GET("", api.Server().GetServer)                                                                      // 获取服务端信息
-		apiGroup.POST("", middleware.Permission(), api.Server().SaveServer)                  // 新增/更新服务端信息
+		apiGroup.POST("", middleware.Permission(), middleware.Permission(), api.Server().SaveServer)                  // 新增/更新服务端信息
-		apiGroup.POST("control-server", middleware.Permission(), api.Server().ControlServer) // 服务端操作控制
+		apiGroup.POST("control-server", middleware.Permission(), middleware.Permission(), api.Server().ControlServer) // 服务端操作控制
 	}
 }

route/setting.go

@@ -16,5 +16,6 @@ func SettingApi(r *gin.RouterGroup) {
 		apiGroup.POST("server-global", middleware.Permission(), api.Setting().SetServerGlobal) // 设置服务端全局配置
 		apiGroup.GET("server", api.Setting().GetGlobalSetting)                                 // 获取全局服务端配置
 		apiGroup.GET("public-ip", api.Setting().GetPublicNetworkIP)                            // 获取公网IP
+		apiGroup.GET("restart-rule", api.Setting().GetServerRestartRule)                       // 服务端重启规则
 	}
 }

script/script.go

@@ -107,7 +107,7 @@ func (s Script) InitServer() error {
 	// 初始化服务端的全局配置
 	var data = map[string]any{
 		"endpointAddress":     utils.Network().GetHostPublicIP(),
-		"dnsServer":           []string{"10.10.10.1/24"},
+		"dnsServer":           []string{"10.25.8.1"},
 		"MTU":                 1450,
 		"persistentKeepalive": 15,
 		"firewallMark":        "0xca6c",
@@ -135,13 +135,13 @@ func (s Script) InitServer() error {
 	// 根据密钥生成公钥
 	publicKey := privateKey.PublicKey()
 	serverEnt := &entity.Server{
-		IpScope:        "10.10.10.1/24",
+		IpScope:        "10.25.8.1/24",
 		ListenPort:     51820,
 		PrivateKey:     privateKey.String(),
 		PublicKey:      publicKey.String(),
-		PostUpScript:   "",
+		PostUpScript:   "iptables -A FORWARD -i wg0 -j ACCEPT; iptables -A FORWARD -o wg0 -j ACCEPT; iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE",
 		PreDownScript:  "",
-		PostDownScript: "",
+		PostDownScript: "iptables -D FORWARD -i wg0 -j ACCEPT; iptables -D FORWARD -o wg0 -j ACCEPT; iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE",
 	}
 
 	// 没有服务端，开始初始化

template/wg.client.conf

@@ -1,8 +1,10 @@
 [Interface]
 PrivateKey = {{ .PrivateKey|html }}
 Address = {{ .IpAllocation|html }}
-{{ if .DNS }}DNS = {{ .DNS|html }} {{ end }}
+{{ if .DNS }}DNS = {{ .DNS|html }}
 MTU = {{ .MTU }}
+{{ else }}MTU = {{ .MTU }}{{ end }}
+
 
 [Peer]
 PublicKey = {{ .PublicKey|html }}

utils/wireguard.go

@@ -1,7 +1,12 @@
 package utils
 
 import (
+	"fmt"
+	"github.com/spf13/cast"
 	"golang.zx2c4.com/wireguard/wgctrl/wgtypes"
+	"math/rand"
+	"slices"
+	"strings"
 	"wireguard-dashboard/client"
 )
 
@@ -33,3 +38,78 @@ func (wireguard) GetSpecClient(pk string) (*wgtypes.Peer, error) {
 
 	return nil, nil
 }
+
+// GenerateClientIP
+// @description: 生成客户端IP
+// @receiver wireguard
+// @param serverIP
+// @param rule
+// @return string
+func (w wireguard) GenerateClientIP(serverIP, rule string, assignedIPS ...string) string {
+	// 再次拆分，只取最后一段
+	suffix := w.GetIPSuffix(serverIP)
+	prefix := w.GetIPPrefix(serverIP)
+	// 如果是随机模式，则需要结尾数字小于等于 255，并且生成的数字不能是已分配当中任何一个
+	// 如果是自动模式，只需要是已经分配的最后一位自增
+	switch rule {
+	case "RANDOM":
+		suffix = w.random(assignedIPS...)
+	case "AUTO":
+		switch len(assignedIPS) {
+		case 1:
+			suffix = w.GetIPSuffix(assignedIPS[0])
+		case 2:
+			suffix = w.GetIPSuffix(assignedIPS[1])
+		}
+
+		suffix = cast.ToString(cast.ToInt64(suffix) + 1)
+	}
+
+	return fmt.Sprintf("%s.%s", prefix, suffix)
+}
+
+// random
+// @description: 随机模式
+// @receiver w
+// @param assignedIPS
+// @return string
+func (w wireguard) random(assignedIPS ...string) string {
+	randomNumber := rand.Int63n(256)
+	var assuffixIP []int64
+	for _, v := range assignedIPS {
+		assuffixIP = append(assuffixIP, cast.ToInt64(strings.Split(v, ".")[3]))
+	}
+
+	if slices.Contains(assuffixIP, randomNumber) {
+		return w.random(assignedIPS...)
+	}
+
+	return cast.ToString(randomNumber)
+}
+
+// GetIPSuffix
+// @description: 获取IP后缀 [10.10.10.23] 这里只获取23
+// @receiver w
+// @param ip
+// @return string
+func (w wireguard) GetIPSuffix(ip string) string {
+	if strings.Contains(ip, "/") {
+		ip = strings.Split(ip, "/")[0]
+	}
+
+	// 再次拆分，只取最后一段
+	return strings.Split(ip, ".")[3]
+}
+
+// GetIPPrefix
+// @description: 获取IP前缀[10.10.10.23] 这里只获取 10.10.10
+// @receiver w
+// @param ip
+// @return string
+func (w wireguard) GetIPPrefix(ip string) string {
+	if strings.Contains(ip, "/") {
+		ip = strings.Split(ip, "/")[0]
+	}
+
+	return strings.Join(strings.Split(ip, ".")[:3], ".")
+}

web-src/.env

@@ -4,4 +4,3 @@ VITE_PORT = 8848
 # 是否隐藏首页 隐藏 true 不隐藏 false （勿删除，VITE_HIDE_HOME只需在.env文件配置）
 VITE_HIDE_HOME = false
 
-VITE_PUBLIC_PATH = //

web-src/.env.development

@@ -2,7 +2,7 @@
 VITE_PORT = 8848
 
 # 开发环境读取配置文件路径
-VITE_PUBLIC_PATH = //
+VITE_PUBLIC_PATH = /
 
 # 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"

web-src/public/platform-config.json

@@ -1,6 +1,6 @@
 {
   "Version": "5.5.0",
-  "Title": "Wireguard-Dashboard",
+  "Title": "WG-Dashboard",
   "FixedHeader": true,
   "HiddenSideBar": false,
   "MultiTagsCache": false,

web-src/src/api/clients.ts

@@ -13,6 +13,16 @@ export const downloadClient = (id: string) => {
   });
 };
 
+// 客户端IP生成
+export const generateClientIP = (data?: object) => {
+  return http.request<any>("post", baseUri("/client/assignIP"), { data });
+};
+
+// 生成客户端密钥对
+export const generateClientKeys = () => {
+  return http.request<any>("post", baseUri("/client/generate-keys"));
+};
+
 // 获取客户端配置二维码
 export const clientQrCode = (id: string) => {
   return http.request<any>("post", baseUri("/client/generate-qrcode/" + id));
@@ -32,3 +42,8 @@ export const deleteClient = (id: string) => {
 export const getClientConnects = () => {
   return http.request<any>("get", baseUri("/client/status"));
 };
+
+// 强制下线客户端
+export const offlineClient = (id: string) => {
+  return http.request<any>("post", baseUri("/client/offline/" + id));
+};

web-src/src/api/server.ts

@@ -25,3 +25,15 @@ export const updateGlobalSetting = (data?: object) => {
 export const getPublicIP = () => {
   return http.request<any>("get", baseUri("/setting/public-ip"));
 };
+
+// 获取服务端重启规则
+export const getServerRestartRule = () => {
+  return http.request<any>("get", baseUri("/setting/restart-rule"));
+};
+
+// 重启服务端
+export const restartServer = (data?: object) => {
+  return http.request<any>("post", baseUri("/server/control-server"), {
+    data
+  });
+};

web-src/src/layout/components/lay-navbar/index.vue

@@ -24,6 +24,9 @@ import changePwdForms, {
 } from "./component/change-password.vue";
 import { useRouter } from "vue-router";
 import useGetGlobalProperties from "@/hooks/useGetGlobalProperties";
+import { Refresh } from "@element-plus/icons-vue";
+import { getServerRestartRule, restartServer } from "@/api/server";
+import { message } from "@/utils/message";
 
 const {
   layout,
@@ -121,6 +124,29 @@ const openChangePasswordDialog = () => {
     }
   });
 };
+let rule = ref(false);
+// 判断是否展示重载配置按钮
+const getRule = () => {
+  getServerRestartRule().then(res => {
+    if (res.code === 200) {
+      rule.value = res.data.rule === "hand";
+    }
+  });
+  return rule;
+};
+
+// 重启服务端
+const restartServerCommand = () => {
+  restartServer({
+    status: "RESTART"
+  }).then(res => {
+    if (res.code === 200) {
+      message("应用配置成功", { type: "success" });
+    }
+  });
+};
+
+getRule();
 </script>
 
 <template>
@@ -140,6 +166,14 @@ const openChangePasswordDialog = () => {
     <LayNavMix v-if="layout === 'mix'" />
 
     <div v-if="layout === 'vertical'" class="vertical-header-right">
+      <el-button
+        v-if="rule"
+        type="danger"
+        :icon="Refresh"
+        style="margin-right: 150px"
+        @click="restartServerCommand()"
+        >重载配置</el-button
+      >
       <!--       菜单搜索-->
       <!--            <LaySearch id="header-search" />-->
       <!--       全屏-->

web-src/src/views/dashboard/index.vue

@@ -2,7 +2,9 @@
 import { useServerStoreHook } from "@/store/modules/server";
 import { getSystemLog } from "@/api/dashboard";
 import { reactive } from "vue";
-import { getClientConnects } from "@/api/clients";
+import {getClientConnects, offlineClient} from "@/api/clients";
+import {Refresh} from "@element-plus/icons-vue";
+import {message} from "@/utils/message";
 
 defineOptions({
   name: "Dashboard"
@@ -39,6 +41,7 @@ const pageChange = (page: number, size: number) => {
   getSystemLogHandler();
 };
 
+// 获取客户端链接状态列表
 const getClientsStatus = () => {
   getClientConnects().then(res => {
     if (res.code === 200) {
@@ -47,10 +50,31 @@ const getClientsStatus = () => {
   });
 };
 
+// 刷新列表
+const refreshClick = (eventStr: string) => {
+  switch (eventStr) {
+    case "systemLog":
+      getSystemLogHandler();
+      break;
+    case "clientStatus":
+      getClientsStatus();
+      break;
+  }
+};
+
 const initServerInfo = () => {
   useServerStoreHook().getServerApi();
 };
 
+// 强制下线客户端
+const offlineClientHandler = (clientID: string) => {
+  offlineClient().then(res => {
+    if (res.code === 200) {
+      message("下线客户端成功", { type: "success" });
+    }
+  });
+};
+
 initServerInfo();
 getSystemLogHandler();
 getClientsStatus();
@@ -62,6 +86,7 @@ getClientsStatus();
       <template #header>
         <div class="card-header">
           <span>操作日志</span>
+          <el-button style="float: right"  type="primary" :icon="Refresh" @click="refreshClick('systemLog')">刷新</el-button>
         </div>
       </template>
       <el-table
@@ -168,6 +193,7 @@ getClientsStatus();
       <template #header>
         <div class="card-header">
           <span>客户端链接状态</span>
+          <el-button style="float: right"  type="primary" :icon="Refresh" @click="refreshClick('clientStatus')">刷新</el-button>
         </div>
       </template>
       <el-table
@@ -217,13 +243,32 @@ getClientsStatus();
           label="是否在线"
           min-width="80"
           align="center"
-        />
+        >
+          <template #default="scope">
+            <el-tag v-if="scope.row.isOnline" type="success">在线</el-tag>
+            <el-tag v-else type="warning">离线</el-tag>
+          </template>
+        </el-table-column>
         <el-table-column
           prop="lastHandShake"
           label="最后握手时间"
           min-width="80"
           align="center"
         />
+        <el-table-column
+          label="操作"
+          min-width="80"
+          align="center"
+        >
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.isOnline"
+              type="primary"
+              @click="offlineClientHandler(scope.row.id)"
+              >下线</el-button
+            >
+          </template>
+        </el-table-column>
       </el-table>
     </el-card>
   </div>

web-src/src/views/server/clients.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
   deleteClient,
-  downloadClient,
+  downloadClient, generateClientIP,
   getClients,
   saveClient
 } from "@/api/clients";
@@ -139,6 +139,17 @@ const openQrCodeDialog = (clientName: string, id: string) => {
 
 // 打开新增客户端弹窗
 const openAddClientDialog = () => {
+  let clientIP = ref([]);
+  let serverIP = ref([]);
+  // 先 生成客户端IP
+  generateClientIP({
+    rule: "AUTO"
+  }).then(res => {
+    if (res.code === 200) {
+      clientIP.value = res.data.clientIP;
+      serverIP.value = res.data.serverIP;
+    }
+  });
   const serverInfo = storageLocal().getItem("server-info");
   addDialog({
     width: "40%",
@@ -151,13 +162,17 @@ const openAddClientDialog = () => {
         name: "",
         email: "",
         subnetRange: "",
-        ipAllocation: "",
+        ipAllocation: clientIP,
-        allowedIPS: "",
+        allowedIPS: serverIP,
         extraAllowedIPS: "",
         endpoint: "",
         useServerDNS: 0,
         enableAfterCreation: 0,
-        keys: null,
+        keys: {
+          privateKey: "",
+          publicKey: "",
+          presharedKey: ""
+        },
         enabled: 1
       }
     },

web-src/src/views/server/component/detail.vue

@@ -4,6 +4,7 @@ import { FormInstance } from "element-plus";
 import { storageLocal } from "@pureadmin/utils";
 import { userKey } from "@/utils/auth";
 import { clientFormRules } from "@/views/server/component/rules";
+import {generateClientKeys} from "@/api/clients";
 
 // 声明 props 类型
 export interface DetailFormProps {
@@ -64,6 +65,14 @@ function getDetailFormRef() {
   return detailFormRef.value;
 }
 
+function generateClientKeysApi() {
+  generateClientKeys().then(res => {
+    if (res.code === 200) {
+      detailForm.value.keys = res.data;
+    }
+  });
+}
+
 defineExpose({ getDetailFormRef });
 </script>
 
@@ -132,6 +141,32 @@ defineExpose({ getDetailFormRef });
     <el-form-item prop="endpoint" label="链接端点">
       <el-input v-model="detailForm.endpoint" />
     </el-form-item>
+    <el-form-item prop="privateKey" label="私钥">
+      <el-input
+        v-if="detailForm.id === ''"
+        v-model="detailForm.keys.privateKey"
+      />
+      <el-input v-else disabled v-model="detailForm.keys.privateKey" />
+    </el-form-item>
+    <el-form-item prop="publicKey" label="公钥">
+      <el-input
+        v-if="detailForm.id === ''"
+        v-model="detailForm.keys.publicKey"
+      />
+      <el-input v-else disabled v-model="detailForm.keys.publicKey" />
+    </el-form-item>
+    <el-form-item prop="presharedKey" label="共享密钥">
+      <el-input
+        v-if="detailForm.id === ''"
+        v-model="detailForm.keys.presharedKey"
+      />
+      <el-input v-else disabled v-model="detailForm.keys.presharedKey" />
+    </el-form-item>
+    <el-form-item v-if="detailForm.id === ''">
+      <el-button type="primary" size="small" @click="generateClientKeysApi()"
+        >生成密钥对</el-button
+      >
+    </el-form-item>
     <el-form-item prop="useServerDNS" label="是否使用服务端DNS">
       <el-radio-group v-model="detailForm.useServerDNS">
         <el-radio :value="1">是</el-radio>

web-src/src/views/server/server.vue

@@ -5,6 +5,7 @@ import { useServerStoreHook } from "@/store/modules/server";
 import { serverFormRules } from "@/views/server/utils/rules";
 import { useGlobalSettingStoreHook } from "@/store/modules/globalSetting";
 import { getPublicIP } from "@/api/server";
+import { useUserStoreHook } from "@/store/modules/user";
 
 defineOptions({
   // name 作为一种规范最好必须写上并且和路由的name保持一致
@@ -113,6 +114,10 @@ const getPublicIPApi = () => {
   });
 };
 
+const isEditServerKeys = () => {
+  return useUserStoreHook().isAdmin && useUserStoreHook().account === "admin";
+};
+
 getServerApi();
 getGlobalSettingApi();
 </script>
@@ -144,10 +149,18 @@ getGlobalSettingApi();
               />
             </el-form-item>
             <el-form-item prop="privateKey" label="私钥">
-              <el-input v-model="serverForm.privateKey" />
+              <el-input
+                v-if="isEditServerKeys()"
+                v-model="serverForm.privateKey"
+              />
+              <el-input v-else v-model="serverForm.privateKey" disabled />
             </el-form-item>
             <el-form-item prop="publicKey" label="公钥">
-              <el-input v-model="serverForm.publicKey" />
+              <el-input
+                v-if="isEditServerKeys()"
+                v-model="serverForm.publicKey"
+              />
+              <el-input v-else v-model="serverForm.publicKey" disabled />
             </el-form-item>
             <el-form-item prop="postUpScript" label="postUpScript">
               <el-input v-model="serverForm.postUpScript" />

web-src/vite.config.ts

@@ -47,7 +47,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
       sourcemap: false,
       // 消除打包大小超过500kb警告
       chunkSizeWarningLimit: 4000,
-      outDir: '../web',
+      outDir: "../web",
       rollupOptions: {
         input: {
           index: pathResolve("./index.html", import.meta.url)