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

补全动作/业务类型中文映射,表格与下拉按分组展示,系统任务操作人可读。
This commit is contained in:
yml2213
2026-07-13 21:38:16 +08:00
parent b96d6141f5
commit f51aed1f0f
2 changed files with 310 additions and 44 deletions
@@ -3,6 +3,14 @@ import { Search } from '@element-plus/icons-vue'
import { computed, onMounted, reactive, ref } from 'vue' import { computed, onMounted, reactive, ref } from 'vue'
import { fetchAdminAuditLogs, type AdminAuditLog } from '@/features/admin/api/adminAudit' 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 { formatDateTime } from '@/shared/utils/time'
import AdminTablePagination from '../components/AdminTablePagination.vue' import AdminTablePagination from '../components/AdminTablePagination.vue'
@@ -18,10 +26,11 @@ const filters = reactive({
biz_type: '', biz_type: '',
}) })
const actionGroups = groupedAuditActionOptions()
/** 当前页高风险条数(筛选结果内的本页统计) */
const highRiskCount = computed( const highRiskCount = computed(
() => () => logs.value.filter(item => isHighRiskAuditAction(item.action)).length
logs.value.filter(item => item.action.includes('freeze') || item.action.includes('update'))
.length
) )
onMounted(loadLogs) onMounted(loadLogs)
@@ -54,20 +63,22 @@ async function handlePageChange() {
await loadLogs() await loadLogs()
} }
function queryLogs() {
currentPage.value = 1
void loadLogs()
}
function actorName(row: AdminAuditLog) { 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) { function detailText(row: AdminAuditLog | null) {
if (!row?.detail) return '{}' if (!row?.detail) return '{}'
return JSON.stringify(row.detail, null, 2) 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> </script>
<template> <template>
@@ -80,7 +91,7 @@ function actionType(action: string) {
</div> </div>
<div class="toolbar-actions"> <div class="toolbar-actions">
<el-button @click="resetFilters">重置</el-button> <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 >查询</el-button
> >
</div> </div>
@@ -92,14 +103,20 @@ function actionType(action: string) {
<strong>{{ total }} </strong> <strong>{{ total }} </strong>
</div> </div>
<div class="metric-card"> <div class="metric-card">
<span>高风险动作</span> <span>本页高风险</span>
<strong>{{ highRiskCount }} </strong> <strong>{{ highRiskCount }} </strong>
</div> </div>
</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-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>
<el-form-item label="动作"> <el-form-item label="动作">
<el-select <el-select
@@ -108,47 +125,60 @@ function actionType(action: string) {
filterable filterable
placeholder="全部动作" placeholder="全部动作"
class="full-control" class="full-control"
@change="queryLogs"
> >
<el-option label="冻结用户" value="admin_user.freeze" /> <el-option-group v-for="group in actionGroups" :key="group.group" :label="group.group">
<el-option label="解冻用户" value="admin_user.unfreeze" /> <el-option
<el-option label="后台下架商品" value="listing.admin_offline" /> v-for="item in group.options"
<el-option label="商品标记异常" value="listing.mark_abnormal" /> :key="item.value"
<el-option label="客服关闭订单" value="order.admin_close" /> :label="item.label"
<el-option label="订单标记异常" value="order.mark_abnormal" /> :value="item.value"
<el-option label="申诉仲裁" value="dispute.arbitrate" /> />
<el-option label="更新系统配置" value="system_config.update" /> </el-option-group>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="业务类型"> <el-form-item label="业务类型">
<el-select v-model="filters.biz_type" clearable placeholder="全部业务" class="full-control"> <el-select
<el-option label="用户" value="user" /> v-model="filters.biz_type"
<el-option label="商品" value="listing" /> clearable
<el-option label="订单" value="order" /> filterable
<el-option label="申诉" value="dispute" /> placeholder="全部业务"
<el-option label="系统配置" value="system_config" /> 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-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table v-loading="loading" class="table-panel" :data="logs"> <el-table v-loading="loading" class="table-panel" :data="logs" empty-text="暂无审计记录">
<el-table-column label="操作人" min-width="160"> <el-table-column label="操作人" min-width="140">
<template #default="{ row }"> <template #default="{ row }">
<strong>{{ actorName(row) }}</strong> <strong>{{ actorName(row) }}</strong>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="动作" min-width="180"> <el-table-column label="动作" min-width="170">
<template #default="{ row }"> <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> </template>
</el-table-column> </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 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> <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="100"> <el-table-column label="操作" width="90" align="center">
<template #default="{ row }"> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -168,15 +198,44 @@ function actionType(action: string) {
width="720px" width="720px"
@update:model-value="activeLog = null" @update:model-value="activeLog = null"
> >
<div v-if="activeLog" class="dialog-body"> <div v-if="activeLog" class="dialog-body audit-detail">
<p> <div class="detail-summary">
<strong>{{ activeLog.action }}</strong> · {{ activeLog.biz_type }} #{{ <div>
activeLog.biz_id || '-' <span>动作</span>
}} <strong>
</p> <el-tag :type="auditActionTagType(activeLog.action)" effect="light">
<p>操作人{{ actorName(activeLog) }} · IP{{ activeLog.ip }}</p> {{ auditActionLabel(activeLog.action) }}
<p>User-Agent{{ activeLog.user_agent }}</p> </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">
<div class="code-panel-title">操作明细</div>
<pre>{{ detailText(activeLog) }}</pre> <pre>{{ detailText(activeLog) }}</pre>
</div> </div>
</div> </div>
@@ -186,3 +245,90 @@ function actionType(action: string) {
</el-dialog> </el-dialog>
</section> </section>
</template> </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>
+120
View File
@@ -0,0 +1,120 @@
/** 审计日志动作 / 业务类型中文映射(展示用,存储仍为英文 code) */
export interface AuditOption {
value: string
label: string
/** 筛选下拉分组 */
group?: string
/** 是否高风险操作 */
highRisk?: boolean
}
export const AUDIT_ACTION_OPTIONS: AuditOption[] = [
// 用户
{ value: 'admin_user.freeze', label: '冻结用户', group: '用户', highRisk: true },
{ value: 'admin_user.unfreeze', label: '解冻用户', group: '用户' },
{ value: 'admin_user.set_deposit_free_quota', label: '设置免押额度', group: '用户', highRisk: true },
{ value: 'admin_user.manual_realname', label: '人工实名', group: '用户', highRisk: true },
{ value: 'admin_user.revoke_realname', label: '撤销实名', group: '用户', highRisk: true },
{ value: 'admin_user.wallet_adjust', label: '调整用户余额', group: '用户', highRisk: true },
// 商品
{ value: 'listing.admin_offline', label: '后台下架商品', group: '商品', highRisk: true },
{ value: 'listing.mark_abnormal', label: '商品标记异常', group: '商品', highRisk: true },
{ value: 'listing.transfer_owner', label: '转移商品所有权', group: '商品', highRisk: true },
{ value: 'listing.adjust_review_price', label: '审核调价', group: '商品' },
// 订单
{ value: 'order.admin_close', label: '客服关闭订单', group: '订单', highRisk: true },
{ value: 'order.admin_seal', label: '客服封存订单', group: '订单', highRisk: true },
{ value: 'order.mark_abnormal', label: '订单标记异常', group: '订单', highRisk: true },
{ value: 'order.reset_handoff', label: '重置交接流程', group: '订单' },
{ value: 'order.reset_renter_confirm', label: '重置租客确认', group: '订单' },
{ value: 'order.reset_checkout_confirm', label: '重置结账确认', group: '订单' },
{ value: 'order.reset_return_overdue', label: '重置归还逾期', group: '订单' },
{ value: 'order.deposit_hold', label: '押金暂扣', group: '订单', highRisk: true },
{ value: 'order.deposit_release', label: '押金归还', group: '订单', highRisk: true },
// 超时任务(system
{ value: 'order.timeout.pending_payment', label: '超时关闭待支付', group: '系统任务' },
{ value: 'order.timeout.owner_submit', label: '超时号主提交交接', group: '系统任务' },
{ value: 'order.timeout.renter_confirm', label: '超时租客确认收号', group: '系统任务' },
{ value: 'order.timeout.return_overdue', label: '超时归还逾期', group: '系统任务' },
{ value: 'order.timeout.owner_checkout_confirm', label: '超时号主确认结账', group: '系统任务' },
{ value: 'chat.renter_retention.remove', label: '到期移除租客会话', group: '系统任务' },
// 提号
{ value: 'pickup_create', label: '创建提号', group: '提号' },
{ value: 'pickup_complete', label: '完成提号结算', group: '提号', highRisk: true },
{ value: 'pickup_cancel', label: '取消提号', group: '提号' },
// 申诉
{ value: 'dispute.arbitrate', label: '申诉仲裁', group: '申诉', highRisk: true },
// 系统配置
{ value: 'system_config.create', label: '创建系统配置', group: '系统配置', highRisk: true },
{ value: 'system_config.update', label: '更新系统配置', group: '系统配置', highRisk: true },
// 支付配置
{ value: 'payment_config.create', label: '创建支付配置', group: '支付配置', highRisk: true },
{ value: 'payment_config.update', label: '更新支付配置', group: '支付配置', highRisk: true },
{ value: 'payment_config.delete', label: '删除支付配置', group: '支付配置', highRisk: true },
{ value: 'payment_config.view_secret', label: '查看支付密钥', group: '支付配置', highRisk: true },
{ value: 'payment_config.export', label: '导出支付配置', group: '支付配置', highRisk: true },
{ value: 'payment_config.import', label: '导入支付配置', group: '支付配置', highRisk: true },
]
export const AUDIT_BIZ_TYPE_OPTIONS: AuditOption[] = [
{ value: 'user', label: '用户' },
{ value: 'listing', label: '商品' },
{ value: 'order', label: '订单' },
{ value: 'dispute', label: '申诉' },
{ value: 'system_config', label: '系统配置' },
{ value: 'payment_config', label: '支付配置' },
{ value: 'admin_pickup', label: '提号' },
]
const actionLabelMap = Object.fromEntries(AUDIT_ACTION_OPTIONS.map(item => [item.value, item.label]))
const bizTypeLabelMap = Object.fromEntries(AUDIT_BIZ_TYPE_OPTIONS.map(item => [item.value, item.label]))
const highRiskActions = new Set(AUDIT_ACTION_OPTIONS.filter(item => item.highRisk).map(item => item.value))
/** 动作 code → 中文;未知 code 原样返回 */
export function auditActionLabel(action: string | undefined | null): string {
if (!action) return '-'
return actionLabelMap[action] || action
}
/** 业务类型 code → 中文 */
export function auditBizTypeLabel(bizType: string | undefined | null): string {
if (!bizType) return '-'
return bizTypeLabelMap[bizType] || bizType
}
export function isHighRiskAuditAction(action: string | undefined | null): boolean {
if (!action) return false
if (highRiskActions.has(action)) return true
// 兜底:未登记但含敏感关键词
return /freeze|delete|import|export|secret|wallet_adjust|seal|close|arbitrate|offline|abnormal/i.test(
action
)
}
/** 表格标签颜色 */
export function auditActionTagType(
action: string | undefined | null
): 'danger' | 'warning' | 'success' | 'info' {
if (!action) return 'info'
if (isHighRiskAuditAction(action)) return 'danger'
if (action.startsWith('order.timeout') || action.startsWith('chat.')) return 'info'
if (action.includes('create') || action.includes('update') || action.includes('reset')) {
return 'warning'
}
if (action.includes('complete') || action.includes('release') || action.includes('unfreeze')) {
return 'success'
}
return 'info'
}
/** 按 group 分组,供 el-option-group 使用 */
export function groupedAuditActionOptions(): Array<{ group: string; options: AuditOption[] }> {
const map = new Map<string, AuditOption[]>()
for (const item of AUDIT_ACTION_OPTIONS) {
const group = item.group || '其他'
if (!map.has(group)) map.set(group, [])
map.get(group)!.push(item)
}
return Array.from(map.entries()).map(([group, options]) => ({ group, options }))
}