181 lines
7.7 KiB
TypeScript
181 lines
7.7 KiB
TypeScript
import { useCallback, useEffect, useState } from 'react';
|
|
import { Button, Card, Descriptions, Drawer, Input, Select, Space, Table, Tag, Typography } from 'antd';
|
|
import type { ColumnsType } from 'antd/es/table';
|
|
import { ReloadOutlined } from '@ant-design/icons';
|
|
import { auditApi, type AuditLogEntry, type AuditLogQuery } from '../api/modules';
|
|
import { getErrorMessage } from '../utils/error';
|
|
import { message } from '../utils/antdMessage';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const ACTION_OPTIONS = [
|
|
{ value: 'recharge:yyb:create', label: '应用宝创建任务' },
|
|
{ value: 'recharge:yyb:login', label: '应用宝发起登录' },
|
|
{ value: 'recharge:yyb:selection', label: '应用宝选择商品角色' },
|
|
{ value: 'recharge:yyb:payment', label: '应用宝生成付款码' },
|
|
{ value: 'recharge:yyb:payment_check', label: '应用宝检测到账' },
|
|
{ value: 'recharge:yyb:stop', label: '应用宝停止任务' },
|
|
{ value: 'recharge:douyu:create', label: '斗鱼创建充值批次' },
|
|
{ value: 'recharge:douyu:callback', label: '斗鱼供应商回调' },
|
|
{ value: 'recharge:douyu:stop', label: '斗鱼停止直充批次' },
|
|
{ value: 'recharge:douyu:config', label: '斗鱼直充配置' },
|
|
{ value: 'recharge:huya:create', label: '虎牙创建充值批次' },
|
|
{ value: 'recharge:huya:stop', label: '虎牙停止充值批次' },
|
|
{ value: 'recharge:huya:config', label: '虎牙充值配置' },
|
|
{ value: 'cookie:check', label: '检测账号 CK' },
|
|
{ value: 'cookie:relogin', label: '创建 CK 重登批次' },
|
|
{ value: 'cookie:relogin_invalid', label: '批量重登失效 CK' },
|
|
{ value: 'cookie:relogin_stop', label: '停止 CK 重登批次' },
|
|
];
|
|
|
|
const ACTION_LABELS = new Map(ACTION_OPTIONS.map((item) => [item.value, item.label]));
|
|
|
|
function formatTime(value: string): string {
|
|
return new Date(value).toLocaleString('zh-CN', { hour12: false });
|
|
}
|
|
|
|
function actionLabel(action: string): string {
|
|
return ACTION_LABELS.get(action) || action;
|
|
}
|
|
|
|
function paymentMethod(detail: string): string {
|
|
try {
|
|
const data = JSON.parse(detail) as Record<string, unknown>;
|
|
return typeof data.payment_method === 'string' ? data.payment_method : '-';
|
|
} catch {
|
|
return '-';
|
|
}
|
|
}
|
|
|
|
function detailSummary(detail: string): string {
|
|
try {
|
|
const data = JSON.parse(detail) as Record<string, unknown>;
|
|
const rechargeAccounts = Array.isArray(data.recharge_accounts) ? data.recharge_accounts : [];
|
|
if (rechargeAccounts.length > 0) {
|
|
const names = rechargeAccounts.slice(0, 3).map((item) => {
|
|
const account = item as Record<string, unknown>;
|
|
return String(account.douyu_nickname || account.username || account.douyu_uid || '-');
|
|
});
|
|
return `充值账号: ${names.join('、')}${rechargeAccounts.length > 3 ? ' 等' : ''}`;
|
|
}
|
|
return Object.entries(data)
|
|
.filter(([key]) => key !== 'message')
|
|
.slice(0, 4)
|
|
.map(([key, value]) => `${key}: ${String(value)}`)
|
|
.join(' | ') || String(data.message || '');
|
|
} catch {
|
|
return detail;
|
|
}
|
|
}
|
|
|
|
function formatDetail(detail: string): string {
|
|
try {
|
|
return JSON.stringify(JSON.parse(detail), null, 2);
|
|
} catch {
|
|
return detail || '-';
|
|
}
|
|
}
|
|
|
|
export default function AuditLogsPage() {
|
|
const [rows, setRows] = useState<AuditLogEntry[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
const [query, setQuery] = useState<AuditLogQuery>({ page: 1, page_size: 50 });
|
|
const [selected, setSelected] = useState<AuditLogEntry | null>(null);
|
|
|
|
const load = useCallback(async (nextQuery = query) => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await auditApi.list(nextQuery);
|
|
setRows(data.items);
|
|
setTotal(data.total);
|
|
} catch (error: unknown) {
|
|
message.error(getErrorMessage(error));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [query]);
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, [load]);
|
|
|
|
const updateFilter = (changes: Partial<AuditLogQuery>) => {
|
|
const next = { ...query, ...changes, page: 1 };
|
|
setQuery(next);
|
|
void load(next);
|
|
};
|
|
|
|
const columns: ColumnsType<AuditLogEntry> = [
|
|
{ title: '时间', dataIndex: 'created_at', width: 180, render: formatTime },
|
|
{ title: '操作者', dataIndex: 'username', width: 120, render: (value) => value || '-' },
|
|
{ title: '操作', dataIndex: 'action', width: 180, render: actionLabel },
|
|
{ title: '目标', dataIndex: 'target', width: 210, ellipsis: true },
|
|
{
|
|
title: '充值方式', dataIndex: 'detail', width: 130,
|
|
render: (detail: string) => paymentMethod(detail),
|
|
},
|
|
{
|
|
title: '结果', dataIndex: 'success', width: 88,
|
|
render: (value: boolean | null) => (
|
|
value === null ? <Tag>历史记录</Tag> : <Tag color={value ? 'success' : 'error'}>{value ? '成功' : '失败'}</Tag>
|
|
),
|
|
},
|
|
{
|
|
title: '摘要', dataIndex: 'detail', ellipsis: true,
|
|
render: (value: string) => <Text ellipsis style={{ maxWidth: 460 }}>{detailSummary(value)}</Text>,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Card title="审计日志" extra={<Button icon={<ReloadOutlined />} onClick={() => void load()} loading={loading}>刷新</Button>}>
|
|
<Space wrap style={{ marginBottom: 16 }}>
|
|
<Input
|
|
allowClear placeholder="操作者" style={{ width: 150 }}
|
|
onPressEnter={(event) => updateFilter({ username: event.currentTarget.value || undefined })}
|
|
onBlur={(event) => updateFilter({ username: event.currentTarget.value || undefined })}
|
|
/>
|
|
<Select
|
|
allowClear placeholder="操作类型" options={ACTION_OPTIONS} style={{ width: 210 }}
|
|
onChange={(value) => updateFilter({ action: value || undefined })}
|
|
/>
|
|
<Select
|
|
allowClear placeholder="结果" style={{ width: 120 }}
|
|
options={[{ value: 'true', label: '成功' }, { value: 'false', label: '失败' }]}
|
|
onChange={(value) => updateFilter({ success: value === undefined ? undefined : value === 'true' })}
|
|
/>
|
|
<Input.Search
|
|
allowClear placeholder="目标或摘要" style={{ width: 220 }}
|
|
onSearch={(value) => updateFilter({ keyword: value || undefined })}
|
|
/>
|
|
</Space>
|
|
<Table
|
|
rowKey="id" columns={columns} dataSource={rows} loading={loading} size="middle"
|
|
onRow={(record) => ({ onClick: () => setSelected(record), style: { cursor: 'pointer' } })}
|
|
pagination={{
|
|
current: query.page, pageSize: query.page_size, total, showSizeChanger: true,
|
|
showTotal: (count) => `共 ${count} 条`,
|
|
onChange: (page, pageSize) => {
|
|
const next = { ...query, page, page_size: pageSize };
|
|
setQuery(next);
|
|
void load(next);
|
|
},
|
|
}}
|
|
/>
|
|
<Drawer title="审计详情" open={!!selected} onClose={() => setSelected(null)} width={560}>
|
|
{selected && (
|
|
<Descriptions column={1} size="small" bordered>
|
|
<Descriptions.Item label="时间">{formatTime(selected.created_at)}</Descriptions.Item>
|
|
<Descriptions.Item label="操作者">{selected.username || '-'}</Descriptions.Item>
|
|
<Descriptions.Item label="操作">{actionLabel(selected.action)}</Descriptions.Item>
|
|
<Descriptions.Item label="目标">{selected.target || '-'}</Descriptions.Item>
|
|
<Descriptions.Item label="充值方式">{paymentMethod(selected.detail)}</Descriptions.Item>
|
|
<Descriptions.Item label="结果">{selected.success === null ? '历史记录' : selected.success ? '成功' : '失败'}</Descriptions.Item>
|
|
<Descriptions.Item label="详情"><pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{formatDetail(selected.detail)}</pre></Descriptions.Item>
|
|
</Descriptions>
|
|
)}
|
|
</Drawer>
|
|
</Card>
|
|
);
|
|
}
|