🎨基本功能完结

src/api/clients.ts

@@ -27,3 +27,8 @@ export const saveClient = (data?: object) => {
 export const deleteClient = (id: string) => {
   return http.request<any>("delete", baseUri("/client/" + id));
 };
+
+// 获取客户端链接状态列表
+export const getClientConnects = () => {
+  return http.request<any>("get", baseUri("/client/status"));
+};

src/views/dashboard/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import {useServerStoreHook} from "@/store/modules/server";
+import { useServerStoreHook } from "@/store/modules/server";
-import {getSystemLog} from "@/api/dashboard";
+import { getSystemLog } from "@/api/dashboard";
-import {reactive} from "vue";
+import { reactive } from "vue";
+import { getClientConnects } from "@/api/clients";
 
 defineOptions({
   name: "Dashboard"
@@ -9,7 +10,7 @@ defineOptions({
 
 const systemLogForm = reactive({
   current: 1,
-  size: 10
+  size: 5
 });
 
 const systemLogTableData = reactive({
@@ -17,6 +18,10 @@ const systemLogTableData = reactive({
   data: []
 });
 
+const clientConnectsData = reactive({
+  data: []
+});
+
 // 请求操作日志记录
 const getSystemLogHandler = () => {
   getSystemLog(systemLogForm).then(res => {
@@ -34,12 +39,21 @@ const pageChange = (page: number, size: number) => {
   getSystemLogHandler();
 };
 
+const getClientsStatus = () => {
+  getClientConnects().then(res => {
+    if (res.code === 200) {
+      clientConnectsData.data = res.data;
+    }
+  });
+};
+
 const initServerInfo = () => {
   useServerStoreHook().getServerApi();
 };
 
 initServerInfo();
 getSystemLogHandler();
+getClientsStatus();
 </script>
 
 <template>
@@ -50,7 +64,12 @@ getSystemLogHandler();
           <span>操作日志</span>
         </div>
       </template>
-      <el-table :data="systemLogTableData.data" align="center" :border="true" style="width: 100%">
+      <el-table
+        :data="systemLogTableData.data"
+        align="center"
+        :border="true"
+        style="width: 100%"
+      >
         <el-table-column
           prop="username"
           label="用户名称"
@@ -74,10 +93,27 @@ getSystemLogHandler();
           align="center"
         >
           <template #default="scope">
-            <el-tag v-if="scope.row.method === 'POST'" effect="dark">{{ scope.row.method }}</el-tag>
+            <el-tag v-if="scope.row.method === 'POST'" effect="dark">{{
-            <el-tag v-if="scope.row.method === 'PUT'" type="warning" effect="dark">{{ scope.row.method }}</el-tag>
+              scope.row.method
-            <el-tag v-if="scope.row.method === 'DELETE'" type="danger" effect="dark">{{ scope.row.method }}</el-tag>
+            }}</el-tag>
-            <el-tag v-if="scope.row.method === 'GET'" type="info" effect="dark">{{ scope.row.method }}</el-tag>
+            <el-tag
+              v-if="scope.row.method === 'PUT'"
+              type="warning"
+              effect="dark"
+              >{{ scope.row.method }}</el-tag
+            >
+            <el-tag
+              v-if="scope.row.method === 'DELETE'"
+              type="danger"
+              effect="dark"
+              >{{ scope.row.method }}</el-tag
+            >
+            <el-tag
+              v-if="scope.row.method === 'GET'"
+              type="info"
+              effect="dark"
+              >{{ scope.row.method }}</el-tag
+            >
           </template>
         </el-table-column>
         <el-table-column
@@ -99,8 +135,15 @@ getSystemLogHandler();
           align="center"
         >
           <template #default="scope">
-            <el-tag v-if="scope.row.statusCode === 200" type="success" effect="dark">{{ scope.row.statusCode }}</el-tag>
+            <el-tag
-            <el-tag v-else type="danger" effect="dark">{{ scope.row.statusCode }}</el-tag>
+              v-if="scope.row.statusCode === 200"
+              type="success"
+              effect="dark"
+              >{{ scope.row.statusCode }}</el-tag
+            >
+            <el-tag v-else type="danger" effect="dark">{{
+              scope.row.statusCode
+            }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column
@@ -121,5 +164,67 @@ getSystemLogHandler();
         />
       </template>
     </el-card>
+    <el-card style="max-width: 100%; margin-top: 10px">
+      <template #header>
+        <div class="card-header">
+          <span>客户端链接状态</span>
+        </div>
+      </template>
+      <el-table
+        :data="clientConnectsData.data"
+        align="center"
+        :border="true"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="name"
+          label="客户端名称"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="email"
+          label="联系邮箱"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="ipAllocation"
+          label="客户端IP"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="endpoint"
+          label="端点"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="received"
+          label="接受流量"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="transmitted"
+          label="传输流量"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="isOnline"
+          label="是否在线"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="lastHandShake"
+          label="最后握手时间"
+          min-width="80"
+          align="center"
+        />
+      </el-table>
+    </el-card>
   </div>
 </template>

src/views/server/server.vue

@@ -144,10 +144,10 @@ getGlobalSettingApi();
               />
             </el-form-item>
             <el-form-item prop="privateKey" label="私钥">
-              <el-input v-model="serverForm.privateKey" disabled />
+              <el-input v-model="serverForm.privateKey" />
             </el-form-item>
             <el-form-item prop="publicKey" label="公钥">
-              <el-input v-model="serverForm.publicKey" disabled />
+              <el-input v-model="serverForm.publicKey" />
             </el-form-item>
             <el-form-item prop="postUpScript" label="postUpScript">
               <el-input v-model="serverForm.postUpScript" />
@@ -177,7 +177,13 @@ getGlobalSettingApi();
         <el-form ref="configFormRef" :model="configForm" label-position="top">
           <el-form-item prop="endpointAddress" label="endpointAddress">
             <el-input v-model="configForm.endpointAddress" />
-            <el-button size="small" type="warning" class="getIp" @click="getPublicIPApi">获取IP</el-button>
+            <el-button
+              size="small"
+              type="warning"
+              class="getIp"
+              @click="getPublicIPApi"
+              >获取IP</el-button
+            >
           </el-form-item>
           <el-form-item prop="dnsServer" label="dnsServer">
             <el-select
@@ -231,21 +237,25 @@ getGlobalSettingApi();
   margin-bottom: 30px;
   margin-left: 20px;
 }
+
 .el-row:last-child {
   margin-bottom: 0;
 }
+
 .el-col {
   border-radius: 4px;
 }
 
 .grid-content {
-  border-radius: 4px;
   min-height: 36px;
+  border-radius: 4px;
 }
+
 .options-class {
   display: none;
 }
-.getIp{
+
+.getIp {
   margin-top: 5px;
 }
 </style>