优化审计日志中文展示与动作筛选

补全动作/业务类型中文映射，表格与下拉按分组展示，系统任务操作人可读。

frontend/src/features/admin/views/AdminAuditLogsView.vue

@@ -3,6 +3,14 @@ import { Search } from '@element-plus/icons-vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 
 import { fetchAdminAuditLogs, type AdminAuditLog } from '@/features/admin/api/adminAudit'
+import {
+  AUDIT_BIZ_TYPE_OPTIONS,
+  auditActionLabel,
+  auditActionTagType,
+  auditBizTypeLabel,
+  groupedAuditActionOptions,
+  isHighRiskAuditAction,
+} from '@/shared/utils/auditLabels'
 import { formatDateTime } from '@/shared/utils/time'
 import AdminTablePagination from '../components/AdminTablePagination.vue'
 
@@ -18,10 +26,11 @@ const filters = reactive({
   biz_type: '',
 })
 
+const actionGroups = groupedAuditActionOptions()
+
+/** 当前页高风险条数（筛选结果内的本页统计） */
 const highRiskCount = computed(
-  () =>
-    logs.value.filter(item => item.action.includes('freeze') || item.action.includes('update'))
-      .length
+  () => logs.value.filter(item => isHighRiskAuditAction(item.action)).length
 )
 
 onMounted(loadLogs)
@@ -54,20 +63,22 @@ async function handlePageChange() {
   await loadLogs()
 }
 
+function queryLogs() {
+  currentPage.value = 1
+  void loadLogs()
+}
+
 function actorName(row: AdminAuditLog) {
-  return row.actor_nickname || row.actor_username || `${row.actor_type} ${row.actor_id}`
+  if (row.actor_type === 'system' || row.actor_id === 0) {
+    return '系统任务'
+  }
+  return row.actor_nickname || row.actor_username || `管理员 ${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>
@@ -80,7 +91,7 @@ function actionType(action: string) {
       </div>
       <div class="toolbar-actions">
         <el-button @click="resetFilters">重置</el-button>
-        <el-button type="primary" :icon="Search" :loading="loading" @click="loadLogs"
+        <el-button type="primary" :icon="Search" :loading="loading" @click="queryLogs"
           >查询</el-button
         >
       </div>
@@ -92,14 +103,20 @@ function actionType(action: string) {
         <strong>{{ total }} 条</strong>
       </div>
       <div class="metric-card">
-        <span>高风险动作</span>
+        <span>本页高风险</span>
         <strong>{{ highRiskCount }} 条</strong>
       </div>
     </div>
 
-    <el-form class="filter-panel" label-position="top">
+    <el-form class="filter-panel" label-position="top" @submit.prevent="queryLogs">
       <el-form-item label="管理员 ID">
-        <el-input v-model="filters.actor_id" clearable placeholder="按管理员筛选" />
+        <el-input
+          v-model="filters.actor_id"
+          clearable
+          placeholder="按管理员 ID 筛选"
+          @keyup.enter="queryLogs"
+          @clear="queryLogs"
+        />
       </el-form-item>
       <el-form-item label="动作">
         <el-select
@@ -108,47 +125,60 @@ function actionType(action: string) {
           filterable
           placeholder="全部动作"
           class="full-control"
+          @change="queryLogs"
         >
-          <el-option label="冻结用户" value="admin_user.freeze" />
-          <el-option label="解冻用户" value="admin_user.unfreeze" />
-          <el-option label="后台下架商品" value="listing.admin_offline" />
-          <el-option label="商品标记异常" value="listing.mark_abnormal" />
-          <el-option label="客服关闭订单" value="order.admin_close" />
-          <el-option label="订单标记异常" value="order.mark_abnormal" />
-          <el-option label="申诉仲裁" value="dispute.arbitrate" />
-          <el-option label="更新系统配置" value="system_config.update" />
+          <el-option-group v-for="group in actionGroups" :key="group.group" :label="group.group">
+            <el-option
+              v-for="item in group.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-option-group>
         </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="listing" />
-          <el-option label="订单" value="order" />
-          <el-option label="申诉" value="dispute" />
-          <el-option label="系统配置" value="system_config" />
+        <el-select
+          v-model="filters.biz_type"
+          clearable
+          filterable
+          placeholder="全部业务"
+          class="full-control"
+          @change="queryLogs"
+        >
+          <el-option
+            v-for="item in AUDIT_BIZ_TYPE_OPTIONS"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
     </el-form>
 
-    <el-table v-loading="loading" class="table-panel" :data="logs">
-      <el-table-column label="操作人" min-width="160">
+    <el-table v-loading="loading" class="table-panel" :data="logs" empty-text="暂无审计记录">
+      <el-table-column label="操作人" min-width="140">
         <template #default="{ row }">
           <strong>{{ actorName(row) }}</strong>
         </template>
       </el-table-column>
-      <el-table-column label="动作" min-width="180">
+      <el-table-column label="动作" min-width="170">
         <template #default="{ row }">
-          <el-tag :type="actionType(row.action)">{{ row.action }}</el-tag>
+          <el-tag :type="auditActionTagType(row.action)" effect="light">
+            {{ auditActionLabel(row.action) }}
+          </el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="biz_type" label="业务类型" width="130" />
+      <el-table-column label="业务类型" width="110">
+        <template #default="{ row }">{{ auditBizTypeLabel(row.biz_type) }}</template>
+      </el-table-column>
       <el-table-column prop="biz_id" label="业务 ID" width="100" />
-      <el-table-column label="时间" min-width="180">
+      <el-table-column label="时间" min-width="170">
         <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
       </el-table-column>
-      <el-table-column label="操作" width="100">
+      <el-table-column label="操作" width="90" align="center">
         <template #default="{ row }">
-          <el-button size="small" @click="activeLog = row">明细</el-button>
+          <el-button text type="primary" size="small" @click="activeLog = row">明细</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -168,15 +198,44 @@ function actionType(action: string) {
       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>
-        <p>操作人：{{ actorName(activeLog) }} · IP：{{ activeLog.ip }}</p>
-        <p>User-Agent：{{ activeLog.user_agent }}</p>
+      <div v-if="activeLog" class="dialog-body audit-detail">
+        <div class="detail-summary">
+          <div>
+            <span>动作</span>
+            <strong>
+              <el-tag :type="auditActionTagType(activeLog.action)" effect="light">
+                {{ auditActionLabel(activeLog.action) }}
+              </el-tag>
+            </strong>
+            <small v-if="auditActionLabel(activeLog.action) !== activeLog.action" class="code-hint">
+              {{ activeLog.action }}
+            </small>
+          </div>
+          <div>
+            <span>业务</span>
+            <strong
+              >{{ auditBizTypeLabel(activeLog.biz_type) }} #{{ activeLog.biz_id || '-' }}</strong
+            >
+          </div>
+          <div>
+            <span>操作人</span>
+            <strong>{{ actorName(activeLog) }}</strong>
+          </div>
+          <div>
+            <span>时间</span>
+            <strong>{{ formatDateTime(activeLog.created_at) }}</strong>
+          </div>
+          <div>
+            <span>IP</span>
+            <strong>{{ activeLog.ip || '-' }}</strong>
+          </div>
+          <div class="wide">
+            <span>User-Agent</span>
+            <strong class="ua">{{ activeLog.user_agent || '-' }}</strong>
+          </div>
+        </div>
         <div class="code-panel">
+          <div class="code-panel-title">操作明细</div>
           <pre>{{ detailText(activeLog) }}</pre>
         </div>
       </div>
@@ -186,3 +245,90 @@ function actionType(action: string) {
     </el-dialog>
   </section>
 </template>
+
+<style scoped>
+.audit-detail {
+  display: grid;
+  gap: 16px;
+}
+
+.detail-summary {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.detail-summary > div {
+  display: grid;
+  gap: 6px;
+  padding: 12px 14px;
+  border: 1px solid #eef2f7;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.detail-summary > div.wide {
+  grid-column: 1 / -1;
+}
+
+.detail-summary span {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.detail-summary strong {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.detail-summary .ua {
+  font-size: 12px;
+  font-weight: 500;
+  color: #475569;
+}
+
+.code-hint {
+  display: block;
+  margin-top: 4px;
+  color: #94a3b8;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.code-panel {
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #0f172a;
+}
+
+.code-panel-title {
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
+  color: #94a3b8;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.code-panel pre {
+  margin: 0;
+  padding: 14px;
+  overflow: auto;
+  max-height: 360px;
+  color: #e2e8f0;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+@media (max-width: 720px) {
+  .detail-summary {
+    grid-template-columns: 1fr;
+  }
+}
+</style>