feat(frontend): 实现审计面板模块

页面： - views/audit/LoginAudit.vue，登录审计页（查询登录记录、按时间/IP/结果筛选） - views/audit/OpsAudit.vue，运维操作审计页（查询操作记录、按类型/状态筛选）组件： - components/AuditLogTable.vue，审计日志表格组件（分页、筛选） API： - api/audit.ts，审计相关接口（登录审计、运维操作审计） MVP 验收：可查询所有用户的登录记录和运维操作记录
2026-07-14 15:39:54 +08:00
parent 35e626971c
commit 0b94583796
4 changed files with 420 additions and 0 deletions
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="page-head">
+      <div>
+        <h1>登录审计</h1>
+        <p>查询所有用户的登录记录，包括时间、IP、目标系统、结果</p>
+      </div>
+      <el-button @click="refresh">⟳ 刷新</el-button>
+    </div>
+    <AuditLogTable
+      title="登录审计记录"
+      :columns="columns"
+      :data="auditData"
+      :total="total"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { auditApi, type LoginAudit } from '@/api/audit'
+import AuditLogTable from '@/components/AuditLogTable.vue'
+
+const columns = [
+  { key: 'username', label: '用户名', class: 'mono' },
+  { key: 'login_time', label: '登录时间' },
+  { key: 'source_ip', label: '来源 IP', class: 'mono' },
+  { key: 'target_system', label: '目标系统' },
+  { key: 'status', label: '状态' },
+]
+
+const auditData = ref<LoginAudit[]>([])
+const total = ref(0)
+
+const fetchData = async () => {
+  const { data } = await auditApi.getLoginAudit()
+  auditData.value = data.items
+  total.value = data.total
+}
+
+const refresh = () => {
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.page-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.page-head h1 {
+  font-size: 19px;
+  margin: 0 0 4px;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+}
+
+.page-head p {
+  margin: 0;
+  color: var(--text-dim);
+  font-size: 12.5px;
+}
+</style>
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="page-head">
+      <div>
+        <h1>运维操作审计</h1>
+        <p>查询运维操作记录，包括操作类型、目标、结果</p>
+      </div>
+      <el-button @click="refresh">⟳ 刷新</el-button>
+    </div>
+    <AuditLogTable
+      title="运维操作审计记录"
+      :columns="columns"
+      :data="auditData"
+      :total="total"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { auditApi, type OpsAudit } from '@/api/audit'
+import AuditLogTable from '@/components/AuditLogTable.vue'
+
+const columns = [
+  { key: 'username', label: '用户名', class: 'mono' },
+  { key: 'operation_type', label: '操作类型' },
+  { key: 'operation', label: '操作内容' },
+  { key: 'target', label: '目标' },
+  { key: 'status', label: '状态' },
+  { key: 'created_at', label: '时间' },
+]
+
+const auditData = ref<OpsAudit[]>([])
+const total = ref(0)
+
+const fetchData = async () => {
+  const { data } = await auditApi.getOpsAudit()
+  auditData.value = data.items
+  total.value = data.total
+}
+
+const refresh = () => {
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
+<style scoped>
+.page-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 18px;
+}
+
+.page-head h1 {
+  font-size: 19px;
+  margin: 0 0 4px;
+  font-weight: 700;
+  letter-spacing: 0.2px;
+}
+
+.page-head p {
+  margin: 0;
+  color: var(--text-dim);
+  font-size: 12.5px;
+}
+</style>