fix(audit): 完善前端审计日志详情展示,支持同时渲染changes/deleted_snapshot/created结构

This commit is contained in:
DXC
2026-04-20 16:11:14 +08:00
parent f8f5b05d7d
commit 59a6a10803

View File

@ -63,7 +63,13 @@
<el-table-column prop="created_at" label="操作时间" width="170" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="scope">
<el-button v-if="scope.row.details && Object.keys(scope.row.details).length > 0" link type="primary" size="small" @click="handleViewDetails(scope.row)">
<el-button
v-if="hasDetailContent(scope.row.details)"
link
type="primary"
size="small"
@click="handleViewDetails(scope.row)"
>
查看详情
</el-button>
<span v-else style="color: #909399; font-size: 12px;">无变更明细</span>
@ -102,11 +108,11 @@
<el-descriptions-item label="操作时间" :span="2">{{ currentLog.created_at }}</el-descriptions-item>
</el-descriptions>
<!-- 变更明细区域 -->
<!-- 变更明细区域支持同时展示多种结构 -->
<div class="details-section">
<!-- 情况1UPDATE - 变更对比表 -->
<div v-if="detailType === 'changes'" class="changes-box">
<div v-if="hasChanges" class="changes-box">
<div class="section-title">
<el-icon><EditPen /></el-icon>
字段变更详情 {{ changesList.length }} 处变更
@ -131,10 +137,10 @@
</div>
<!-- 情况2DELETE - 删除快照 -->
<div v-else-if="detailType === 'deleted_snapshot'" class="snapshot-box">
<div v-if="hasDeletedSnapshot" class="snapshot-box">
<div class="section-title">
<el-icon><Delete /></el-icon>
数据删除快照
删除前的数据快照
</div>
<el-descriptions :column="2" border size="small">
<el-descriptions-item
@ -149,10 +155,10 @@
</div>
<!-- 情况3CREATE - 新增详情 -->
<div v-else-if="detailType === 'created'" class="snapshot-box">
<div v-if="hasCreated" class="snapshot-box">
<div class="section-title">
<el-icon><Plus /></el-icon>
新增数据详情
新增数据详情
</div>
<el-descriptions :column="2" border size="small">
<el-descriptions-item
@ -166,8 +172,8 @@
</el-descriptions>
</div>
<!-- 兜底原始 JSON -->
<div v-else class="raw-json-box">
<!-- 兜底原始 JSON仅在没有任何高级结构时显示 -->
<div v-if="showRawJson" class="raw-json-box">
<div class="section-title">
<el-icon><Document /></el-icon>
原始数据
@ -220,16 +226,36 @@ const currentLog = ref<any>({})
// 详情解析逻辑
// ============================================================
// 解析 detail type
const detailType = computed(() => {
// 辅助函数:判断 details 是否有可显示内容
const hasDetailContent = (details: any): boolean => {
if (!details || typeof details !== 'object') return false
if (Object.keys(details).length === 0) return false
return !!(
details.changes ||
details.deleted_snapshot ||
details.created ||
details.payload
)
}
// 判断是否存在各高级结构
const hasChanges = computed(() => {
const details = currentLog.value.details
if (!details) return 'raw'
return !!(details?.changes && typeof details.changes === 'object')
})
if (details.changes && typeof details.changes === 'object') return 'changes'
if (details.deleted_snapshot && typeof details.deleted_snapshot === 'object') return 'deleted_snapshot'
if (details.created && typeof details.created === 'object') return 'created'
const hasDeletedSnapshot = computed(() => {
const details = currentLog.value.details
return !!(details?.deleted_snapshot && typeof details.deleted_snapshot === 'object')
})
return 'raw'
const hasCreated = computed(() => {
const details = currentLog.value.details
return !!(details?.created && typeof details.created === 'object')
})
const showRawJson = computed(() => {
return !hasChanges.value && !hasDeletedSnapshot.value && !hasCreated.value
})
// 解析 changes 为表格数据