🎨基本完成

.env

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

.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"

app/static.go

@@ -1,6 +0,0 @@
-package web
-
-import "embed"
-
-//go:embed index.html logo.svg favicon.ico platform-config.json public/platform-config.json static assets
-var Static embed.FS

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));
+};

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
+  });
+};

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,13 +166,21 @@ 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" />-->
-      <!-- 全屏 -->
+      <!--       全屏-->
       <!--            <LaySidebarFullScreen id="full-screen" />-->
-      <!-- 消息通知 -->
+      <!--       消息通知-->
       <!--            <LayNotice id="header-notice" />-->
-      <!-- 退出登录 -->
+      <!--       退出登录-->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">
           <img :src="userAvatar" :style="avatarsStyle" />

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>

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
       }
     },

src/views/server/component/detail.vue

@@ -3,7 +3,8 @@ import { ref } from "vue";
 import { FormInstance } from "element-plus";
 import { storageLocal } from "@pureadmin/utils";
 import { userKey } from "@/utils/auth";
-import {clientFormRules} from "@/views/server/component/rules";
+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>

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" />