140 lines
3.9 KiB
TypeScript
140 lines
3.9 KiB
TypeScript
import { useEffect, useState, useCallback } from 'react'
|
|
import { getAuditLogs } from '../api/audit'
|
|
import Table, { type TableColumn } from '../components/ui/Table'
|
|
import Button from '../components/ui/Button'
|
|
import toast from '../components/ui/Toast'
|
|
|
|
interface AuditRecord {
|
|
id: string
|
|
username: string
|
|
action: string
|
|
target: string
|
|
detail: string | null
|
|
ip_address: string | null
|
|
created_at: string
|
|
}
|
|
|
|
const ACTION_OPTIONS = [
|
|
'',
|
|
'keys.batch_overwrite',
|
|
'gateway.toggle',
|
|
'cron.trigger',
|
|
'user.login',
|
|
'user.update_role',
|
|
'user.approve',
|
|
'keys.generate',
|
|
'kaban.create',
|
|
'kaban.update',
|
|
]
|
|
|
|
export default function AuditLogPage() {
|
|
const [logs, setLogs] = useState<AuditRecord[]>([])
|
|
const [page, setPage] = useState(1)
|
|
const [hasMore, setHasMore] = useState(true)
|
|
const [loading, setLoading] = useState(false)
|
|
const [actionFilter, setActionFilter] = useState('')
|
|
|
|
const fetchLogs = useCallback(async (p: number, action?: string) => {
|
|
setLoading(true)
|
|
try {
|
|
const params: Record<string, unknown> = { page: p, page_size: 20 }
|
|
if (action) params.action = action
|
|
const res = await getAuditLogs(params)
|
|
const data: AuditRecord[] = res.data
|
|
setLogs(data)
|
|
setHasMore(data.length === 20)
|
|
} catch {
|
|
toast.error('加载审计日志失败')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
fetchLogs(page, actionFilter)
|
|
}, [page, fetchLogs])
|
|
|
|
const handleFilterChange = (val: string) => {
|
|
setActionFilter(val)
|
|
setPage(1)
|
|
}
|
|
|
|
const columns: TableColumn[] = [
|
|
{ key: 'created_at', label: '时间', width: 180 },
|
|
{ key: 'username', label: '用户', width: 100 },
|
|
{ key: 'action', label: '操作', width: 160 },
|
|
{ key: 'target', label: '目标', width: 200 },
|
|
{ key: 'detail', label: '详情' },
|
|
{ key: 'ip_address', label: 'IP', width: 140 },
|
|
]
|
|
|
|
const data = logs.map((l) => ({
|
|
created_at: new Date(l.created_at).toLocaleString('zh-CN'),
|
|
username: l.username,
|
|
action: l.action,
|
|
target: l.target,
|
|
detail: l.detail ?? '-',
|
|
ip_address: l.ip_address ?? '-',
|
|
}))
|
|
|
|
return (
|
|
<div>
|
|
<h2 style={{ color: 'var(--text)', fontSize: 18, fontWeight: 600 }}>审计日志</h2>
|
|
<p style={{ color: 'var(--text-dim)', marginTop: 4, marginBottom: 16, fontSize: 13 }}>
|
|
操作审计记录
|
|
</p>
|
|
|
|
{/* Filter */}
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<label className="text-[12px] font-semibold" style={{ color: 'var(--text-dim)' }}>
|
|
操作筛选：
|
|
</label>
|
|
<select
|
|
value={actionFilter}
|
|
onChange={(e) => handleFilterChange(e.target.value)}
|
|
className="px-3 py-[7px] rounded-[var(--radius-sm)] text-[13px] outline-none"
|
|
style={{
|
|
background: 'var(--bg-root)',
|
|
color: 'var(--text)',
|
|
border: '1px solid var(--border)',
|
|
}}
|
|
>
|
|
<option value="">全部</option>
|
|
{ACTION_OPTIONS.filter(Boolean).map((a) => (
|
|
<option key={a} value={a}>
|
|
{a}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<Table columns={columns} data={data} rowKey="created_at" />
|
|
|
|
{/* Pagination */}
|
|
<div className="flex items-center justify-between mt-4">
|
|
<span style={{ color: 'var(--text-dim)', fontSize: 13 }}>
|
|
第 {page} 页
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={page <= 1}
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
>
|
|
上一页
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
disabled={!hasMore || loading}
|
|
onClick={() => setPage((p) => p + 1)}
|
|
>
|
|
下一页
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|