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

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref } from 'vue'

import { fetchAdminAuditLogs, type AdminAuditLog } from '@/features/admin/api/adminAudit'
import { formatDateTime } from '@/shared/utils/time'
import AdminTablePagination from '../components/AdminTablePagination.vue'

const loading = ref(false)
const logs = ref<AdminAuditLog[]>([])
const activeLog = ref<AdminAuditLog | null>(null)
const currentPage = ref(1)
const currentPageSize = ref(20)
const total = ref(0)
const filters = reactive({
  actor_id: '',
  action: '',
  biz_type: '',
})

const highRiskCount = computed(
  () =>
    logs.value.filter(item => item.action.includes('freeze') || item.action.includes('update'))
      .length
)

onMounted(loadLogs)

async function loadLogs() {
  loading.value = true
  try {
    const query = {
      ...filters,
      page: currentPage.value,
      page_size: currentPageSize.value,
    }
    const result = await fetchAdminAuditLogs(query)
    logs.value = result.items
    total.value = result.total
  } finally {
    loading.value = false
  }
}

function resetFilters() {
  filters.actor_id = ''
  filters.action = ''
  filters.biz_type = ''
  currentPage.value = 1
  void loadLogs()
}

async function handlePageChange() {
  await 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>查看后台管理员操作、业务对象和操作明细，用于追踪冻结、配置修改等高风险动作。</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>{{ total }} 条</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="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-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>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" class="table-panel" :data="logs">
      <el-table-column label="操作人" min-width="160">
        <template #default="{ row }">
          <strong>{{ actorName(row) }}</strong>
        </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 label="时间" min-width="180">
        <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button size="small" @click="activeLog = row">明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <AdminTablePagination
      v-if="total > 0"
      v-model:current-page="currentPage"
      v-model:page-size="currentPageSize"
      :total="total"
      :loading="loading"
      @page-change="handlePageChange"
    />

    <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>
        <p>操作人：{{ actorName(activeLog) }} · IP：{{ activeLog.ip }}</p>
        <p>User-Agent：{{ activeLog.user_agent }}</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>