完成了“后台审计日志”

2026-05-22 17:48:46 +08:00
parent c9e6ea2b71
commit 8afd94ca35
12 changed files with 399 additions and 2 deletions
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
+import { computed, onMounted, reactive, ref } from 'vue'
+
+import { fetchAdminAuditLogs, type AdminAuditLog } from '@/api/adminAudit'
+
+const loading = ref(false)
+const logs = ref<AdminAuditLog[]>([])
+const activeLog = ref<AdminAuditLog | null>(null)
+const filters = reactive({
+  actor_id: '',
+  action: '',
+  biz_type: '',
+  limit: 200,
+})
+
+const highRiskCount = computed(() => logs.value.filter((item) => item.action.includes('freeze') || item.action.includes('update')).length)
+const uniqueActors = computed(() => new Set(logs.value.map((item) => item.actor_id)).size)
+
+onMounted(loadLogs)
+
+async function loadLogs() {
+  loading.value = true
+  try {
+    logs.value = await fetchAdminAuditLogs(filters)
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetFilters() {
+  filters.actor_id = ''
+  filters.action = ''
+  filters.biz_type = ''
+  filters.limit = 200
+  void loadLogs()
+}
+
+function actorName(row: AdminAuditLog) {
+  return row.actor_nickname || row.actor_username || `${row.actor_type} ${row.actor_id}`
+}
+
+function detailText(row: AdminAuditLog | null) {
+  if (!row?.detail) return '{}'
+  return JSON.stringify(row.detail, null, 2)
+}
+
+function actionType(action: string) {
+  if (action.includes('freeze')) return 'danger'
+  if (action.includes('update') || action.includes('create')) return 'warning'
+  return 'info'
+}
+</script>
+
+<template>
+  <section class="page">
+    <div class="page-header-row">
+      <div class="page-header">
+        <p class="eyebrow">Audit Logs</p>
+        <h1>审计日志</h1>
+        <p>查看后台管理员操作、业务对象、来源 IP 和操作明细，用于追踪冻结、配置修改等高风险动作。</p>
+      </div>
+      <div class="toolbar-actions">
+        <el-button @click="resetFilters">重置</el-button>
+        <el-button type="primary" :icon="Search" :loading="loading" @click="loadLogs">查询</el-button>
+      </div>
+    </div>
+
+    <div class="metric-grid">
+      <div class="metric-card">
+        <span>当前结果</span>
+        <strong>{{ logs.length }} 条</strong>
+      </div>
+      <div class="metric-card">
+        <span>操作管理员</span>
+        <strong>{{ uniqueActors }} 人</strong>
+      </div>
+      <div class="metric-card">
+        <span>高风险动作</span>
+        <strong>{{ highRiskCount }} 条</strong>
+      </div>
+    </div>
+
+    <el-form class="filter-panel" label-position="top">
+      <el-form-item label="管理员 ID">
+        <el-input v-model="filters.actor_id" clearable placeholder="按管理员筛选" />
+      </el-form-item>
+      <el-form-item label="动作">
+        <el-select v-model="filters.action" clearable filterable placeholder="全部动作" class="full-control">
+          <el-option label="冻结用户" value="admin_user.freeze" />
+          <el-option label="解冻用户" value="admin_user.unfreeze" />
+          <el-option label="更新系统配置" value="system_config.update" />
+          <el-option label="创建系统配置" value="system_config.create" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="业务类型">
+        <el-select v-model="filters.biz_type" clearable placeholder="全部业务" class="full-control">
+          <el-option label="用户" value="user" />
+          <el-option label="系统配置" value="system_config" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="查询条数">
+        <el-input-number v-model="filters.limit" :min="20" :max="500" :step="20" class="full-control" />
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" class="table-panel" :data="logs">
+      <el-table-column prop="id" label="ID" width="90" />
+      <el-table-column label="管理员" min-width="160">
+        <template #default="{ row }">
+          <strong>{{ actorName(row) }}</strong>
+          <span class="table-subtext">{{ row.actor_type }} ID: {{ row.actor_id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="动作" min-width="180">
+        <template #default="{ row }">
+          <el-tag :type="actionType(row.action)">{{ row.action }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="biz_type" label="业务类型" width="130" />
+      <el-table-column prop="biz_id" label="业务 ID" width="100" />
+      <el-table-column prop="ip" label="IP" min-width="130" />
+      <el-table-column prop="user_agent" label="User-Agent" min-width="240" show-overflow-tooltip />
+      <el-table-column prop="created_at" label="时间" min-width="180" />
+      <el-table-column label="操作" width="100">
+        <template #default="{ row }">
+          <el-button size="small" @click="activeLog = row">明细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :model-value="!!activeLog" title="审计明细" width="720px" @update:model-value="activeLog = null">
+      <div v-if="activeLog" class="dialog-body">
+        <p><strong>{{ activeLog.action }}</strong> · {{ activeLog.biz_type }} #{{ activeLog.biz_id || '-' }}</p>
+        <div class="code-panel">
+          <pre>{{ detailText(activeLog) }}</pre>
+        </div>
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="activeLog = null">关闭</el-button>
+      </template>
+    </el-dialog>
+  </section>
+</template>