完成了“后台审计日志”
This commit is contained in:
@@ -0,0 +1,35 @@
|
||||
import { apiClient } from './client'
|
||||
|
||||
export interface AdminAuditLog {
|
||||
id: number
|
||||
actor_type: string
|
||||
actor_id: number
|
||||
actor_username: string
|
||||
actor_nickname: string
|
||||
action: string
|
||||
biz_type: string
|
||||
biz_id?: number
|
||||
ip: string
|
||||
user_agent: string
|
||||
detail?: Record<string, unknown> | null
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface AdminAuditQuery {
|
||||
actor_id?: string
|
||||
action?: string
|
||||
biz_type?: string
|
||||
limit?: number
|
||||
}
|
||||
|
||||
interface ApiResponse<T> {
|
||||
code: string
|
||||
message: string
|
||||
data: T
|
||||
}
|
||||
|
||||
export async function fetchAdminAuditLogs(query: AdminAuditQuery = {}) {
|
||||
const params = Object.fromEntries(Object.entries(query).filter(([, value]) => value !== '' && value !== undefined))
|
||||
const { data } = await apiClient.get<ApiResponse<{ items: AdminAuditLog[] }>>('/admin/audit-logs', { params })
|
||||
return data.data.items
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { DataLine, DocumentChecked, Operation, ScaleToOriginal, SwitchButton, Tickets, User, Wallet } from '@element-plus/icons-vue'
|
||||
import { DataLine, Document, DocumentChecked, Operation, ScaleToOriginal, SwitchButton, Tickets, User, Wallet } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
@@ -18,6 +18,7 @@ const navItems = [
|
||||
{ label: '仲裁中心', to: '/admin/disputes', icon: ScaleToOriginal },
|
||||
{ label: '资金流水', to: '/admin/wallet-ledger', icon: Wallet },
|
||||
{ label: '系统配置', to: '/admin/system-configs', icon: Operation },
|
||||
{ label: '审计日志', to: '/admin/audit-logs', icon: Document },
|
||||
]
|
||||
|
||||
const adminName = computed(() => adminSession.nickname || adminSession.username || '管理员')
|
||||
|
||||
@@ -67,6 +67,12 @@ const router = createRouter({
|
||||
component: () => import('@/views/admin/AdminSystemConfigsView.vue'),
|
||||
meta: { layout: 'admin', requiresAdmin: true },
|
||||
},
|
||||
{
|
||||
path: '/admin/audit-logs',
|
||||
name: 'admin-audit-logs',
|
||||
component: () => import('@/views/admin/AdminAuditLogsView.vue'),
|
||||
meta: { layout: 'admin', requiresAdmin: true },
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
|
||||
import { fetchAdminAuditLogs, type AdminAuditLog } from '@/api/adminAudit'
|
||||
|
||||
const loading = ref(false)
|
||||
const logs = ref<AdminAuditLog[]>([])
|
||||
const activeLog = ref<AdminAuditLog | null>(null)
|
||||
const filters = reactive({
|
||||
actor_id: '',
|
||||
action: '',
|
||||
biz_type: '',
|
||||
limit: 200,
|
||||
})
|
||||
|
||||
const highRiskCount = computed(() => logs.value.filter((item) => item.action.includes('freeze') || item.action.includes('update')).length)
|
||||
const uniqueActors = computed(() => new Set(logs.value.map((item) => item.actor_id)).size)
|
||||
|
||||
onMounted(loadLogs)
|
||||
|
||||
async function loadLogs() {
|
||||
loading.value = true
|
||||
try {
|
||||
logs.value = await fetchAdminAuditLogs(filters)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.actor_id = ''
|
||||
filters.action = ''
|
||||
filters.biz_type = ''
|
||||
filters.limit = 200
|
||||
void 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>查看后台管理员操作、业务对象、来源 IP 和操作明细,用于追踪冻结、配置修改等高风险动作。</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>{{ logs.length }} 条</strong>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<span>操作管理员</span>
|
||||
<strong>{{ uniqueActors }} 人</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="system_config.update" />
|
||||
<el-option label="创建系统配置" value="system_config.create" />
|
||||
</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="system_config" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="查询条数">
|
||||
<el-input-number v-model="filters.limit" :min="20" :max="500" :step="20" class="full-control" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" class="table-panel" :data="logs">
|
||||
<el-table-column prop="id" label="ID" width="90" />
|
||||
<el-table-column label="管理员" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<strong>{{ actorName(row) }}</strong>
|
||||
<span class="table-subtext">{{ row.actor_type }} ID: {{ row.actor_id }}</span>
|
||||
</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 prop="ip" label="IP" min-width="130" />
|
||||
<el-table-column prop="user_agent" label="User-Agent" min-width="240" show-overflow-tooltip />
|
||||
<el-table-column prop="created_at" label="时间" min-width="180" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="activeLog = row">明细</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user