feat: 添加管理端前端 (HMS 基座 React 管理面板)
- 从 HMS 基座复制 apps/web/ (React + Ant Design + Vite + TypeScript) - 管理端自动代理 API 到 localhost:3000 (vite.config.ts) - 更新 scripts/dev.sh 支持三端启动: backend/admin/app - 登录验证通过, 用户管理/角色权限/审计日志等页面正常 - 添加 .gitignore 排除 node_modules/dist
This commit is contained in:
iven
147
apps/web/src/pages/settings/AuditLogViewer.tsx
Normal file
147
apps/web/src/pages/settings/AuditLogViewer.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Table, Select, Input, Tag } from 'antd';
|
||||
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
|
||||
import { listAuditLogs, type AuditLogItem, type AuditLogQuery } from '../../api/auditLogs';
|
||||
import { listUsers } from '../../api/users';
|
||||
import { useThemeMode } from '../../hooks/useThemeMode';
|
||||
import { usePaginatedData } from '../../hooks/usePaginatedData';
|
||||
|
||||
const RESOURCE_TYPE_OPTIONS = [
|
||||
{ value: 'user', label: '用户' }, { value: 'role', label: '角色' },
|
||||
{ value: 'position', label: '岗位' }, { value: 'organization', label: '组织' },
|
||||
{ value: 'department', label: '部门' }, { value: 'process_instance', label: '流程实例' },
|
||||
{ value: 'process_definition', label: '流程定义' }, { value: 'task', label: '流程任务' },
|
||||
{ value: 'dictionary', label: '字典' }, { value: 'menu', label: '菜单' },
|
||||
{ value: 'setting', label: '设置' }, { value: 'numbering_rule', label: '编号规则' },
|
||||
{ value: 'patient', label: '患者' }, { value: 'patient_tag', label: '患者标签' },
|
||||
{ value: 'patient_family_member', label: '家庭成员' }, { value: 'patient_doctor_relation', label: '医患关系' },
|
||||
{ value: 'points_transaction', label: '积分流水' }, { value: 'points_product', label: '积分商品' },
|
||||
{ value: 'points_order', label: '积分订单' }, { value: 'points_rule', label: '积分规则' },
|
||||
{ value: 'offline_event', label: '线下活动' }, { value: 'offline_event_registration', label: '活动签到' },
|
||||
];
|
||||
|
||||
const ACTION_STYLES: Record<string, { bg: string; color: string; text: string }> = {
|
||||
create: { bg: '#ECFDF5', color: '#059669', text: '创建' },
|
||||
update: { bg: '#eff6ff', color: '#2563eb', text: '更新' },
|
||||
delete: { bg: '#FEF2F2', color: '#dc2626', text: '删除' },
|
||||
};
|
||||
|
||||
function formatDateTime(value: string): string {
|
||||
return new Date(value).toLocaleString('zh-CN', {
|
||||
year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit', second: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
export default function AuditLogViewer() {
|
||||
const isDark = useThemeMode();
|
||||
const userNameCache = useRef<Record<string, string>>({});
|
||||
const cacheLoaded = useRef(false);
|
||||
|
||||
const { data: logs, total, page, loading, filters, setFilters, refresh } = usePaginatedData<AuditLogItem, AuditLogQuery>(
|
||||
async (p, pageSize, query) => {
|
||||
const result = await listAuditLogs({ ...query, page: p, page_size: pageSize });
|
||||
return { data: result.data, total: result.total };
|
||||
},
|
||||
{ pageSize: 20, defaultFilters: { page: 1, page_size: 20 } as unknown as AuditLogQuery, autoFetch: false },
|
||||
);
|
||||
|
||||
// Load user name cache
|
||||
useEffect(() => {
|
||||
if (cacheLoaded.current) return;
|
||||
let cancelled = false;
|
||||
const loadAllUsers = async () => {
|
||||
try {
|
||||
let currentPage = 1;
|
||||
const pageSize = 100;
|
||||
let hasMore = true;
|
||||
while (hasMore && !cancelled) {
|
||||
const result = await listUsers(currentPage, pageSize);
|
||||
for (const user of result.data) {
|
||||
userNameCache.current[user.id] = user.display_name || user.username;
|
||||
}
|
||||
hasMore = result.data.length >= pageSize;
|
||||
currentPage += 1;
|
||||
}
|
||||
if (!cancelled) cacheLoaded.current = true;
|
||||
} catch { /* silent */ }
|
||||
};
|
||||
loadAllUsers();
|
||||
return () => { cancelled = true; };
|
||||
}, []);
|
||||
|
||||
useEffect(() => { refresh(1); }, []);
|
||||
|
||||
const handleFilterChange = (field: keyof AuditLogQuery, value: string | undefined) => {
|
||||
setFilters((prev) => ({ ...prev, [field]: value || undefined, page: 1 }));
|
||||
};
|
||||
|
||||
const columns: ColumnsType<AuditLogItem> = [
|
||||
{
|
||||
title: '操作', dataIndex: 'action', key: 'action', width: 100,
|
||||
render: (action: string) => {
|
||||
const info = ACTION_STYLES[action] || { bg: '#f8fafc', color: '#475569', text: action };
|
||||
return <Tag style={{ background: info.bg, border: 'none', color: info.color, fontWeight: 500 }}>{info.text}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '资源类型', dataIndex: 'resource_type', key: 'resource_type', width: 120,
|
||||
render: (v: string) => <Tag style={{ background: isDark ? '#0f172a' : '#f8fafc', border: 'none', color: isDark ? '#CBD5E1' : '#475569' }}>{v}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '资源 ID', dataIndex: 'resource_id', key: 'resource_id', width: 200, ellipsis: true,
|
||||
render: (v: string) => <span style={{ fontFamily: 'monospace', fontSize: 12, color: isDark ? '#94a3b8' : '#475569' }}>{v}</span>,
|
||||
},
|
||||
{
|
||||
title: '操作用户', dataIndex: 'user_id', key: 'user_id', width: 200, ellipsis: true,
|
||||
render: (v: string) => {
|
||||
const name = userNameCache.current[v];
|
||||
return <span title={v} style={{ fontSize: 13, color: isDark ? '#CBD5E1' : '#334155' }}>{name || v}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '时间', dataIndex: 'created_at', key: 'created_at', width: 180,
|
||||
render: (value: string) => <span style={{ color: isDark ? '#475569' : '#94a3b8', fontSize: 13 }}>{formatDateTime(value)}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 筛选工具栏 */}
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, padding: 12,
|
||||
background: isDark ? '#111827' : '#FFFFFF', borderRadius: 10,
|
||||
border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`,
|
||||
}}>
|
||||
<Select
|
||||
allowClear placeholder="资源类型" style={{ width: 160 }}
|
||||
options={RESOURCE_TYPE_OPTIONS}
|
||||
value={filters.resource_type}
|
||||
onChange={(value) => handleFilterChange('resource_type', value)}
|
||||
/>
|
||||
<Input
|
||||
allowClear placeholder="操作用户 ID" style={{ width: 240 }}
|
||||
value={filters.user_id ?? ''}
|
||||
onChange={(e) => handleFilterChange('user_id', e.target.value)}
|
||||
/>
|
||||
<span style={{ fontSize: 13, color: isDark ? '#475569' : '#94a3b8', marginLeft: 'auto' }}>共 {total} 条日志</span>
|
||||
</div>
|
||||
|
||||
{/* 表格 */}
|
||||
<div style={{
|
||||
background: isDark ? '#111827' : '#FFFFFF', borderRadius: 12,
|
||||
border: `1px solid ${isDark ? '#0f172a' : '#f8fafc'}`, overflow: 'hidden',
|
||||
}}>
|
||||
<Table
|
||||
rowKey="id" columns={columns} dataSource={logs} loading={loading}
|
||||
onChange={(pagination: TablePaginationConfig) => refresh(pagination.current)}
|
||||
pagination={{
|
||||
current: page, pageSize: 20, total,
|
||||
showSizeChanger: true, showTotal: (t) => `共 ${t} 条`,
|
||||
}}
|
||||
scroll={{ x: 900 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user