logan
8b921c6c83
P0安全: SECRET_KEY/ADMIN_PASSWORD/CORS环境变量化, seed仅admin P1Mock: mock.ts 301->88行, 删8数据mock+5generateMock, net-1300行 P2组件: useToast/useFetchList+ConfirmDialog/FormDialog P3菜单: menuSections/menuItems->constants/menu.ts P4API: NotificationsPage/WorkflowPage重写+RolesPage演示 测试: 1050passed, tsc clean
556 lines
25 KiB
TypeScript
556 lines
25 KiB
TypeScript
import { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import {
|
|
Search, Download, Filter, ChevronDown, ChevronRight,
|
|
FileText, User, Globe, CheckCircle2, XCircle, AlertTriangle,
|
|
BarChart3, Clock, RotateCcw,
|
|
} from 'lucide-react';
|
|
import {
|
|
BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, PieChart, Pie, Cell,
|
|
} from 'recharts';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import request from '../api/request';
|
|
|
|
/* ───────── Types ───────── */
|
|
|
|
interface AuditLog {
|
|
id: number;
|
|
user_id: number;
|
|
username: string;
|
|
action: string;
|
|
target_type: string;
|
|
target_id: number | null;
|
|
detail: string | null;
|
|
ip_address: string | null;
|
|
result_status: 'success' | 'failed' | 'warning';
|
|
created_at: string | null;
|
|
}
|
|
|
|
interface AuditLogResponse {
|
|
total: number;
|
|
page: number;
|
|
page_size: number;
|
|
items: AuditLog[];
|
|
}
|
|
|
|
/* ───────── Constants ───────── */
|
|
|
|
const ACTION_COLORS: Record<string, string> = {
|
|
CREATE_TICKET: 'bg-blue-500/15 text-blue-400',
|
|
REVIEW_TICKET: 'bg-yellow-500/15 text-yellow-400',
|
|
EXECUTE_TICKET: 'bg-green-500/15 text-green-400',
|
|
CREATE_INSTANCE: 'bg-purple-500/15 text-purple-400',
|
|
DELETE_INSTANCE: 'bg-red-500/15 text-red-400',
|
|
CREATE_USER: 'bg-indigo-500/15 text-indigo-400',
|
|
DELETE_USER: 'bg-red-500/15 text-red-400',
|
|
QUERY: 'bg-cyan-500/15 text-cyan-400',
|
|
LOGIN: 'bg-emerald-500/15 text-emerald-400',
|
|
LOGOUT: 'bg-[var(--dg-text-muted)]/15 text-[var(--dg-text-muted)]',
|
|
};
|
|
|
|
const ACTION_LABELS: Record<string, string> = {
|
|
CREATE_TICKET: '创建工单',
|
|
REVIEW_TICKET: '审批工单',
|
|
EXECUTE_TICKET: '执行工单',
|
|
CREATE_INSTANCE: '创建实例',
|
|
DELETE_INSTANCE: '删除实例',
|
|
CREATE_USER: '创建用户',
|
|
DELETE_USER: '删除用户',
|
|
QUERY: '执行查询',
|
|
LOGIN: '登录',
|
|
LOGOUT: '登出',
|
|
};
|
|
|
|
const STATUS_CONFIG: Record<string, { icon: React.ElementType; color: string; label: string }> = {
|
|
success: { icon: CheckCircle2, color: 'text-green-400', label: '成功' },
|
|
failed: { icon: XCircle, color: 'text-red-400', label: '失败' },
|
|
warning: { icon: AlertTriangle, color: 'text-yellow-400', label: '警告' },
|
|
};
|
|
|
|
const TARGET_ICONS: Record<string, React.ElementType> = {
|
|
ticket: FileText,
|
|
instance: Globe,
|
|
user: User,
|
|
query: Search,
|
|
system: AlertTriangle,
|
|
};
|
|
|
|
const CHART_COLORS = ['#6366f1', '#a855f7', '#ec4899', '#f43f5e', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6'];
|
|
|
|
/* ───────── CSV Export Helper ───────── */
|
|
|
|
function exportLogsToCSV(logs: AuditLog[]) {
|
|
const headers = ['ID', '操作人', '操作类型', '目标类型', '目标ID', '详情', 'IP地址', '结果', '时间'];
|
|
const rows = logs.map(l => [
|
|
l.id, l.username, ACTION_LABELS[l.action] || l.action, l.target_type,
|
|
l.target_id || '', l.detail || '', l.ip_address || '',
|
|
l.result_status === 'success' ? '成功' : l.result_status === 'failed' ? '失败' : '警告',
|
|
l.created_at || '',
|
|
]);
|
|
const csv = [headers, ...rows].map(r => r.map(c => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n');
|
|
const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `audit_logs_${new Date().toISOString().slice(0, 10)}.csv`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
/* ───────── Main Component ───────── */
|
|
|
|
export default function AuditLogsPage() {
|
|
const [logs, setLogs] = useState<AuditLog[]>([]);
|
|
const [, setTotal] = useState(0);
|
|
const [page, setPage] = useState(1);
|
|
const [loading, setLoading] = useState(true);
|
|
const pageSize = 20;
|
|
|
|
// Advanced filters
|
|
const [filterAction, setFilterAction] = useState('');
|
|
const [filterTarget, setFilterTarget] = useState('');
|
|
const [filterStatus, setFilterStatus] = useState('');
|
|
const [filterDateRange, setFilterDateRange] = useState('');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
|
|
// Detail expanded
|
|
const [expandedId, setExpandedId] = useState<number | null>(null);
|
|
// Stats tab
|
|
const [showStats, setShowStats] = useState(false);
|
|
|
|
const fetchLogs = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams({ page: String(page), page_size: String(pageSize) });
|
|
if (filterAction) params.set('action', filterAction);
|
|
const res = await request.get(`/audit/logs?${params}`);
|
|
const data = (res?.data ?? res ?? {}) as AuditLogResponse;
|
|
const items = data.items || [];
|
|
setLogs(items);
|
|
setTotal(data.total || 0);
|
|
} catch {
|
|
setLogs([]);
|
|
setTotal(0);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [page, filterAction]);
|
|
|
|
useEffect(() => { fetchLogs(); }, [fetchLogs]);
|
|
|
|
// Client-side filtering for advanced filters
|
|
const filteredLogs = useMemo(() => {
|
|
return logs.filter(log => {
|
|
if (filterTarget && log.target_type !== filterTarget) return false;
|
|
if (filterStatus && log.result_status !== filterStatus) return false;
|
|
if (filterDateRange && log.created_at) {
|
|
const days = Math.floor((Date.now() - new Date(log.created_at).getTime()) / 86400000);
|
|
if (filterDateRange === '1d' && days > 1) return false;
|
|
if (filterDateRange === '7d' && days > 7) return false;
|
|
if (filterDateRange === '30d' && days > 30) return false;
|
|
}
|
|
if (searchQuery) {
|
|
const q = searchQuery.toLowerCase();
|
|
return (
|
|
log.username.toLowerCase().includes(q) ||
|
|
(log.detail || '').toLowerCase().includes(q) ||
|
|
(log.ip_address || '').toLowerCase().includes(q) ||
|
|
(ACTION_LABELS[log.action] || log.action).toLowerCase().includes(q)
|
|
);
|
|
}
|
|
return true;
|
|
});
|
|
}, [logs, filterTarget, filterStatus, filterDateRange, searchQuery]);
|
|
|
|
const totalPages = Math.max(1, Math.ceil(filteredLogs.length / pageSize));
|
|
const paginatedLogs = filteredLogs.slice((page - 1) * pageSize, page * pageSize);
|
|
|
|
const hasActiveFilters = filterAction || filterTarget || filterStatus || filterDateRange || searchQuery;
|
|
|
|
const clearFilters = () => {
|
|
setFilterAction('');
|
|
setFilterTarget('');
|
|
setFilterStatus('');
|
|
setFilterDateRange('');
|
|
setSearchQuery('');
|
|
setPage(1);
|
|
};
|
|
|
|
// Stats data
|
|
const actionDistribution = useMemo(() => {
|
|
const map: Record<string, number> = {};
|
|
logs.forEach(l => { map[l.action] = (map[l.action] || 0) + 1; });
|
|
return Object.entries(map).map(([name, value], i) => ({ name: ACTION_LABELS[name] || name, value, color: CHART_COLORS[i % CHART_COLORS.length] }));
|
|
}, [logs]);
|
|
|
|
const statusDistribution = useMemo(() => {
|
|
const map: Record<string, number> = { success: 0, failed: 0, warning: 0 };
|
|
logs.forEach(l => { map[l.result_status] = (map[l.result_status] || 0) + 1; });
|
|
return [
|
|
{ name: '成功', value: map.success, color: '#22c55e' },
|
|
{ name: '失败', value: map.failed, color: '#f43f5e' },
|
|
{ name: '警告', value: map.warning, color: '#eab308' },
|
|
];
|
|
}, [logs]);
|
|
|
|
const trendData = useMemo(() => {
|
|
const map: Record<string, number> = {};
|
|
logs.forEach(l => {
|
|
if (l.created_at) {
|
|
const d = new Date(l.created_at).toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
|
|
map[d] = (map[d] || 0) + 1;
|
|
}
|
|
});
|
|
return Object.entries(map)
|
|
.sort(([a], [b]) => new Date(a).getTime() - new Date(b).getTime())
|
|
.slice(-10)
|
|
.map(([date, count]) => ({ date, count }));
|
|
}, [logs]);
|
|
|
|
const formatDate = (d: string | null) => {
|
|
if (!d) return '-';
|
|
return new Date(d).toLocaleString('zh-CN');
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold">审计日志</h1>
|
|
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">追踪系统操作记录，满足合规审计需求</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => setShowStats(!showStats)}
|
|
className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all"
|
|
>
|
|
<BarChart3 className="w-4 h-4" /> 统计
|
|
</button>
|
|
<button
|
|
onClick={() => exportLogsToCSV(filteredLogs)}
|
|
className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm font-medium text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all"
|
|
>
|
|
<Download className="w-4 h-4" /> 导出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Panel */}
|
|
{showStats && (
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<Card className="dg-card">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
|
<BarChart3 className="w-4 h-4 text-blue-400" />
|
|
操作类型分布
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<PieChart>
|
|
<Pie data={actionDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70} label={({ name, value }) => `${name}: ${value}`}>
|
|
{actionDistribution.map((entry, i) => <Cell key={i} fill={entry.color} />)}
|
|
</Pie>
|
|
<Tooltip contentStyle={{ backgroundColor: 'var(--dg-bg-secondary)', border: '1px solid var(--dg-border)', borderRadius: '8px', fontSize: '12px' }} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="dg-card">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
|
<CheckCircle2 className="w-4 h-4 text-green-400" />
|
|
操作结果分布
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<PieChart>
|
|
<Pie data={statusDistribution} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={70} label={({ name, value }) => `${name}: ${value}`}>
|
|
{statusDistribution.map((entry, i) => <Cell key={i} fill={entry.color} />)}
|
|
</Pie>
|
|
<Tooltip contentStyle={{ backgroundColor: 'var(--dg-bg-secondary)', border: '1px solid var(--dg-border)', borderRadius: '8px', fontSize: '12px' }} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="dg-card">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium flex items-center gap-2">
|
|
<Clock className="w-4 h-4 text-purple-400" />
|
|
操作趋势（最近10天）
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<BarChart data={trendData}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="var(--dg-border)" />
|
|
<XAxis dataKey="date" tick={{ fill: 'var(--dg-text-muted)', fontSize: 10 }} />
|
|
<YAxis tick={{ fill: 'var(--dg-text-muted)', fontSize: 10 }} />
|
|
<Tooltip contentStyle={{ backgroundColor: 'var(--dg-bg-secondary)', border: '1px solid var(--dg-border)', borderRadius: '8px', fontSize: '12px' }} />
|
|
<Bar dataKey="count" fill="#6366f1" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Search & Filters */}
|
|
<div className="p-4 dg-card space-y-3">
|
|
<div className="flex items-center gap-3 flex-wrap">
|
|
<div className="relative flex-1 min-w-[200px] max-w-xs">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--dg-text-muted)]" />
|
|
<input
|
|
value={searchQuery}
|
|
onChange={e => { setSearchQuery(e.target.value); setPage(1); }}
|
|
className="w-full pl-10 pr-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm placeholder:text-[var(--dg-text-muted)] focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400/20"
|
|
placeholder="搜索操作人、IP、详情..."
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className={`flex items-center gap-2 px-3 py-2.5 rounded-lg text-sm transition-colors ${
|
|
showFilters ? 'bg-blue-500/15 text-blue-400 border border-blue-500/30' : 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]'
|
|
}`}
|
|
>
|
|
<Filter className="w-4 h-4" /> 筛选 {showFilters ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
|
</button>
|
|
{hasActiveFilters && (
|
|
<button onClick={clearFilters} className="flex items-center gap-1 text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] transition-colors">
|
|
<RotateCcw className="w-3 h-3" /> 重置
|
|
</button>
|
|
)}
|
|
<span className="text-sm text-[var(--dg-text-muted)] ml-auto">共 {filteredLogs.length} 条记录</span>
|
|
</div>
|
|
|
|
{showFilters && (
|
|
<div className="flex items-center gap-3 flex-wrap pt-3 border-t border-[var(--dg-border)]">
|
|
{/* Action type filter */}
|
|
<select
|
|
value={filterAction}
|
|
onChange={e => { setFilterAction(e.target.value); setPage(1); }}
|
|
className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
|
|
>
|
|
<option value="">全部操作</option>
|
|
{Object.entries(ACTION_LABELS).map(([key, label]) => <option key={key} value={key}>{label}</option>)}
|
|
</select>
|
|
|
|
{/* Target type filter */}
|
|
<select
|
|
value={filterTarget}
|
|
onChange={e => { setFilterTarget(e.target.value); setPage(1); }}
|
|
className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
|
|
>
|
|
<option value="">全部目标</option>
|
|
<option value="ticket">工单</option>
|
|
<option value="instance">实例</option>
|
|
<option value="user">用户</option>
|
|
<option value="query">查询</option>
|
|
<option value="system">系统</option>
|
|
</select>
|
|
|
|
{/* Status filter */}
|
|
<select
|
|
value={filterStatus}
|
|
onChange={e => { setFilterStatus(e.target.value); setPage(1); }}
|
|
className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
|
|
>
|
|
<option value="">全部结果</option>
|
|
<option value="success">成功</option>
|
|
<option value="failed">失败</option>
|
|
<option value="warning">警告</option>
|
|
</select>
|
|
|
|
{/* Date range */}
|
|
<select
|
|
value={filterDateRange}
|
|
onChange={e => { setFilterDateRange(e.target.value); setPage(1); }}
|
|
className="px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none"
|
|
>
|
|
<option value="">全部时间</option>
|
|
<option value="1d">最近1天</option>
|
|
<option value="7d">最近7天</option>
|
|
<option value="30d">最近30天</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Quick Action Filters */}
|
|
<div className="flex gap-2 flex-wrap">
|
|
{['', ...Object.keys(ACTION_LABELS)].map(action => (
|
|
<button
|
|
key={action || 'all'}
|
|
onClick={() => { setFilterAction(action); setPage(1); }}
|
|
className={`px-3 py-1.5 text-xs rounded-lg transition-colors font-medium ${
|
|
filterAction === action
|
|
? 'bg-blue-500 text-white'
|
|
: 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]'
|
|
}`}
|
|
>
|
|
{action ? ACTION_LABELS[action] || action : '全部'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<Card className="dg-card">
|
|
<CardContent className="p-0">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
|
|
<th className="text-left px-4 py-3 font-semibold w-8" />
|
|
<th className="text-left px-4 py-3 font-semibold">操作</th>
|
|
<th className="text-left px-4 py-3 font-semibold">操作人</th>
|
|
<th className="text-left px-4 py-3 font-semibold">目标</th>
|
|
<th className="text-left px-4 py-3 font-semibold">IP地址</th>
|
|
<th className="text-left px-4 py-3 font-semibold">结果</th>
|
|
<th className="text-left px-4 py-3 font-semibold">时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading ? (
|
|
<tr>
|
|
<td colSpan={7} className="px-4 py-10 text-center text-[var(--dg-text-muted)]">
|
|
<div className="w-6 h-6 border-2 border-blue-400 border-t-transparent rounded-full animate-spin mx-auto mb-3" />
|
|
加载中...
|
|
</td>
|
|
</tr>
|
|
) : paginatedLogs.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={7} className="px-4 py-10 text-center text-[var(--dg-text-muted)]">
|
|
<FileText className="w-10 h-10 mx-auto mb-3 opacity-30" />
|
|
<p className="text-sm">暂无审计日志</p>
|
|
{hasActiveFilters && (
|
|
<button onClick={clearFilters} className="text-xs text-blue-400 hover:text-blue-300 mt-2 transition-colors">
|
|
清除筛选条件
|
|
</button>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
paginatedLogs.map(log => {
|
|
const isExpanded = expandedId === log.id;
|
|
const statusConfig = STATUS_CONFIG[log.result_status] || STATUS_CONFIG.success;
|
|
const StatusIcon = statusConfig.icon;
|
|
const TargetIcon = TARGET_ICONS[log.target_type] || FileText;
|
|
return (
|
|
<>
|
|
<tr
|
|
key={log.id}
|
|
className={`border-b border-[var(--dg-border-light)] transition-colors cursor-pointer ${
|
|
isExpanded ? 'bg-blue-500/5' : 'hover:bg-[var(--dg-bg-hover)]'
|
|
}`}
|
|
onClick={() => setExpandedId(isExpanded ? null : log.id)}
|
|
>
|
|
<td className="px-4 py-3">
|
|
{isExpanded ? <ChevronDown className="w-4 h-4 text-[var(--dg-text-muted)]" /> : <ChevronRight className="w-4 h-4 text-[var(--dg-text-muted)]" />}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${ACTION_COLORS[log.action] || 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
|
|
{ACTION_LABELS[log.action] || log.action}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-6 h-6 rounded-full bg-blue-500/15 text-blue-400 flex items-center justify-center text-xs font-medium">
|
|
{(log.username || '?').charAt(0).toUpperCase()}
|
|
</div>
|
|
<span className="text-[var(--dg-text-primary)]">{log.username || '-'}</span>
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-1.5">
|
|
<TargetIcon className="w-3.5 h-3.5 text-[var(--dg-text-muted)]" />
|
|
<span className="text-[var(--dg-text-secondary)]">{log.target_type}</span>
|
|
{log.target_id && <span className="text-[var(--dg-text-muted)] text-xs">#{log.target_id}</span>}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-[var(--dg-text-secondary)] text-xs font-mono">
|
|
{log.ip_address || '-'}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`flex items-center gap-1 text-xs font-medium ${statusConfig.color}`}>
|
|
<StatusIcon className="w-3.5 h-3.5" />
|
|
{statusConfig.label}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-[var(--dg-text-muted)] text-xs whitespace-nowrap">
|
|
{formatDate(log.created_at)}
|
|
</td>
|
|
</tr>
|
|
|
|
{/* Expanded Detail */}
|
|
{isExpanded && (
|
|
<tr className="bg-[var(--dg-bg-tertiary)]/50">
|
|
<td colSpan={7} className="px-4 py-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<div className="text-xs text-[var(--dg-text-muted)] mb-1">操作详情</div>
|
|
<p className="text-sm text-[var(--dg-text-primary)]">{log.detail || '无详情'}</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<div className="text-xs text-[var(--dg-text-muted)] mb-1">日志ID</div>
|
|
<div className="text-sm font-mono">#{log.id}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-[var(--dg-text-muted)] mb-1">用户ID</div>
|
|
<div className="text-sm font-mono">#{log.user_id}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-[var(--dg-text-muted)] mb-1">目标ID</div>
|
|
<div className="text-sm font-mono">{log.target_id || 'N/A'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-[var(--dg-text-muted)] mb-1">时间</div>
|
|
<div className="text-sm">{formatDate(log.created_at)}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</>
|
|
);
|
|
})
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-between px-5 py-4 border-t border-[var(--dg-border)]">
|
|
<span className="text-xs text-[var(--dg-text-muted)]">
|
|
第 {page} / {totalPages} 页，共 {filteredLogs.length} 条
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
|
disabled={page <= 1}
|
|
className="px-3 py-1.5 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-sm text-[var(--dg-text-primary)] disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[var(--dg-bg-hover)] transition-colors"
|
|
>
|
|
上一页
|
|
</button>
|
|
<button
|
|
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
|
|
disabled={page >= totalPages}
|
|
className="px-3 py-1.5 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-sm text-[var(--dg-text-primary)] disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[var(--dg-bg-hover)] transition-colors"
|
|
>
|
|
下一页
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|