🎨合并编译打包

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

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { useServerStoreHook } from "@/store/modules/server";
+import { getSystemLog } from "@/api/dashboard";
+import { reactive } from "vue";
+import { getClientConnects } from "@/api/clients";
+
+defineOptions({
+  name: "Dashboard"
+});
+
+const systemLogForm = reactive({
+  current: 1,
+  size: 5
+});
+
+const systemLogTableData = reactive({
+  total: 0,
+  data: []
+});
+
+const clientConnectsData = reactive({
+  data: []
+});
+
+// 请求操作日志记录
+const getSystemLogHandler = () => {
+  getSystemLog(systemLogForm).then(res => {
+    if (res.code === 200) {
+      systemLogTableData.data = res.data.records;
+      systemLogTableData.total = res.data.total;
+    }
+  });
+};
+
+// 定义分页相关事件
+const pageChange = (page: number, size: number) => {
+  systemLogForm.size = size;
+  systemLogForm.current = page;
+  getSystemLogHandler();
+};
+
+const getClientsStatus = () => {
+  getClientConnects().then(res => {
+    if (res.code === 200) {
+      clientConnectsData.data = res.data;
+    }
+  });
+};
+
+const initServerInfo = () => {
+  useServerStoreHook().getServerApi();
+};
+
+initServerInfo();
+getSystemLogHandler();
+getClientsStatus();
+</script>
+
+<template>
+  <div>
+    <el-card style="max-width: 100%">
+      <template #header>
+        <div class="card-header">
+          <span>操作日志</span>
+        </div>
+      </template>
+      <el-table
+        :data="systemLogTableData.data"
+        align="center"
+        :border="true"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="username"
+          label="用户名称"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="clientIP"
+          label="客户端IP"
+          min-width="80"
+          align="center"
+        >
+          <template #default="scope">
+            <el-tag effect="dark">{{ scope.row.clientIP }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="method"
+          label="操作方法"
+          min-width="80"
+          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 === '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
+          prop="host"
+          label="请求主机"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="uri"
+          label="操作路径"
+          min-width="80"
+          align="center"
+        />
+        <el-table-column
+          prop="statusCode"
+          label="响应状态码"
+          min-width="80"
+          align="center"
+        >
+          <template #default="scope">
+            <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
+          prop="createdAt"
+          label="操作时间"
+          min-width="80"
+          align="center"
+        />
+      </el-table>
+      <template #footer>
+        <el-pagination
+          small
+          background
+          layout="total,prev,pager,next"
+          :page-size="systemLogForm.size"
+          :total="systemLogTableData.total"
+          @change="pageChange"
+        />
+      </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>