:art:完成基本构想的全部

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>