🎨新增首页操作日志

.env

@@ -3,3 +3,5 @@ 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"

src/api/dashboard.ts

@@ -0,0 +1,7 @@
+import { http } from "@/utils/http";
+import { baseUri } from "@/api/utils";
+
+// 获取操作日志
+export const getSystemLog = (params?: object) => {
+  return http.request<any>("get", baseUri("/dashboard/list"), { params });
+};

src/config/index.ts

@@ -31,7 +31,7 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
   app.config.globalProperties.$config = getConfig();
   return axios({
     method: "get",
-    url: `${VITE_PUBLIC_PATH}/platform-config.json`
+    url: `${VITE_PUBLIC_PATH}platform-config.json`
   })
     .then(({ data: config }) => {
       let $config = app.config.globalProperties.$config;

src/layout/types.ts

@@ -5,7 +5,7 @@ export const routerArrays: Array<RouteConfigs> =
   VITE_HIDE_HOME === "false"
     ? [
         {
-          path: "/welcome",
+          path: "/dashboard",
           meta: {
             title: "首页",
             icon: "ep:home-filled"

src/router/index.ts

@@ -121,7 +121,7 @@ router.beforeEach((to: ToRouteType, _from, next) => {
   }
   if (tokenObj) {
     // 开启隐藏首页后在浏览器地址栏手动输入首页welcome路由则跳转到404页面
-    if (VITE_HIDE_HOME === "true" && to.fullPath === "/welcome") {
+    if (VITE_HIDE_HOME === "true" && to.fullPath === "/dashboard") {
       next({ path: "/error/404" });
     }
     if (_from?.name) {

src/router/modules/home.ts

@@ -5,7 +5,7 @@ export default {
   path: "/",
   name: "Home",
   component: Layout,
-  redirect: "/welcome",
+  redirect: "/dashboard",
   meta: {
     icon: "ep:home-filled",
     title: "首页",
@@ -13,9 +13,9 @@ export default {
   },
   children: [
     {
-      path: "/welcome",
-      name: "Welcome",
-      component: () => import("@/views/welcome/index.vue"),
+      path: "/dashboard",
+      name: "Dashboard",
+      component: () => import("@/views/dashboard/index.vue"),
       meta: {
         title: "首页",
         showLink: VITE_HIDE_HOME === "true" ? false : true

src/views/dashboard/index.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import {useServerStoreHook} from "@/store/modules/server";
+import {getSystemLog} from "@/api/dashboard";
+import {reactive} from "vue";
+
+defineOptions({
+  name: "Dashboard"
+});
+
+const systemLogForm = reactive({
+  current: 1,
+  size: 10
+});
+
+const systemLogTableData = reactive({
+  total: 0,
+  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 initServerInfo = () => {
+  useServerStoreHook().getServerApi();
+};
+
+initServerInfo();
+getSystemLogHandler();
+</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>
+  </div>
+</template>

src/views/login/index.vue

@@ -59,7 +59,7 @@ const onLogin = async (formEl: FormInstance | undefined) => {
             // 获取后端路由
             usePermissionStoreHook().handleWholeMenus([]);
             addPathMatch();
-            router.push("/welcome");
+            router.push("/dashboard");
             message("登录成功", { type: "success" });
           } else {
             message("登录失败", { type: "error" });

src/views/welcome/index.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import {useServerStoreHook} from "@/store/modules/server";
-
-defineOptions({
-  name: "Welcome"
-});
-
-const initServerInfo = () => {
-  useServerStoreHook().getServerApi();
-};
-
-initServerInfo();
-</script>
-
-<template>
-  <h1>Wireguard-Dashboard</h1>
-</template>