admin后台第一阶段目录优化

2026-05-15 14:12:38 +08:00
parent 34b71decf1
commit 11678a7f83
35 changed files with 41 additions and 46 deletions
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
+import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
+import { fetchAdminAuditLogs } from '@/services/admin'
+import type { AdminAuditLogItem, AdminPagination } from '@/types/admin'
+import { hasAdminRole } from '@/utils/admin-auth'
+import { formatAuditAction, formatAuditTargetType } from '@/utils/admin-display'
+import { adminAuditActionOptions, adminAuditTargetTypeOptions } from '@/utils/admin-options'
+import { formatAdminDateTime } from '@/utils/admin-time'
+import { stringifyDisplayJson } from '@/utils/date-time'
+
+const loading = ref(true)
+const errorMessage = ref('')
+const actorUsername = ref('')
+const action = ref('')
+const targetType = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+const items = ref<AdminAuditLogItem[]>([])
+const pagination = ref<AdminPagination>({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+})
+
+async function loadAuditLogs(page = 1) {
+  if (!hasAdminRole('admin')) {
+    loading.value = false
+    return
+  }
+
+  loading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await fetchAdminAuditLogs({
+      page,
+      pageSize: pagination.value.pageSize,
+      actorUsername: actorUsername.value.trim(),
+      action: action.value.trim(),
+      targetType: targetType.value.trim(),
+      dateFrom: dateFrom.value.trim(),
+      dateTo: dateTo.value.trim(),
+    })
+    items.value = response.data.items
+    pagination.value = response.data.pagination
+  } catch (error) {
+    errorMessage.value = error instanceof Error ? error.message : '读取审计日志失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+function handlePageChange() {
+  loadAuditLogs(pagination.value.page)
+}
+
+function formatPayload(payload: Record<string, unknown>) {
+  const text = stringifyDisplayJson(payload, 0)
+  return text.length > 120 ? `${text.slice(0, 120)}...` : text
+}
+
+function resolveTargetLabel(targetType: string, targetId: string) {
+  return `${formatAuditTargetType(targetType)} #${targetId || '-'}`
+}
+
+const totalLabel = computed(() => `共 ${pagination.value.total} 条审计记录`)
+
+onMounted(loadAuditLogs)
+</script>
+
+<template>
+  <div class="audit-page list-page">
+    <AdminPageHeader title="操作审计" description="集中查看高风险后台动作，便于排查谁在什么时间改了什么。">
+      <template #extra>
+        <span class="total-label">{{ totalLabel }}</span>
+      </template>
+    </AdminPageHeader>
+
+    <!-- 权限检查 -->
+    <el-result
+      v-if="!hasAdminRole('admin')"
+      icon="warning"
+      title="仅管理员可以访问操作审计"
+    />
+
+    <template v-else>
+      <!-- 筛选栏 -->
+      <el-card shadow="never" class="filter-card">
+        <div class="filter-row">
+          <el-input
+            v-model="actorUsername"
+            placeholder="操作账号"
+            clearable
+            style="width: 160px"
+            @keyup.enter="handlePageChange"
+          />
+          <el-select v-model="action" placeholder="动作" clearable style="width: 160px">
+            <el-option v-for="opt in adminAuditActionOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+          <el-select v-model="targetType" placeholder="目标类型" clearable style="width: 160px">
+            <el-option v-for="opt in adminAuditTargetTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+          </el-select>
+          <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" style="width: 160px" />
+          <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" style="width: 160px" />
+          <el-button type="primary" @click="handlePageChange">查询</el-button>
+        </div>
+      </el-card>
+
+      <!-- 错误提示 -->
+      <el-alert
+        v-if="errorMessage"
+        :title="errorMessage"
+        type="error"
+        show-icon
+        :closable="false"
+        style="margin-top: 16px"
+      />
+
+      <!-- 表格 -->
+      <el-card shadow="never" class="table-card" style="margin-top: 16px">
+        <el-table
+          :data="items"
+          stripe
+          size="small"
+          v-loading="loading"
+          element-loading-text="审计日志加载中"
+        >
+          <el-table-column label="时间" width="180">
+            <template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
+          </el-table-column>
+          <el-table-column prop="actorUsername" label="操作人" width="120" />
+          <el-table-column label="角色" width="100">
+            <template #default="{ row }"><AdminStatusTag :status="row.actorRole" /></template>
+          </el-table-column>
+          <el-table-column label="动作" width="140">
+            <template #default="{ row }">
+              <strong>{{ formatAuditAction(row.action) }}</strong>
+            </template>
+          </el-table-column>
+          <el-table-column label="目标" min-width="160">
+            <template #default="{ row }">
+              <strong>{{ resolveTargetLabel(row.targetType, row.targetId) }}</strong>
+            </template>
+          </el-table-column>
+          <el-table-column label="摘要" min-width="200">
+            <template #default="{ row }">
+              <span class="payload-text">{{ formatPayload(row.payload) }}</span>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <el-empty :image-size="60" description="暂无审计记录" />
+          </template>
+        </el-table>
+
+        <!-- 分页 -->
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="total, prev, pager, next"
+          @current-change="handlePageChange"
+        />
+      </el-card>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+@import '../../../styles/admin-list-pages.css';
+
+.total-label {
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+}
+
+.filter-card {
+  margin-top: var(--space-4);
+}
+
+.filter-row {
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.table-card {
+  overflow: visible;
+}
+
+.payload-text {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  word-break: break-all;
+  color: var(--text-secondary);
+}
+</style>