feat: complete phase2 baseline cdr quality rbac

2026-06-24 18:40:21 +08:00
parent 7057fd3c42
commit a86de6545f
63 changed files with 7853 additions and 3678 deletions
@@ -0,0 +1,67 @@
+import { useMemo, useState } from 'react';
+import { Badge, Button, Field, Input, Select } from '../components/ui.jsx';
+import { Icon, PageTitle, Toolbar, Panel, ApiNotice, Drawer, SimpleTable, KeyValue } from '../components/layout.jsx';
+import { operationLogRows } from '../fixtures/devFixtures.js';
+
+export function OperationLogsPage({ logRows = operationLogRows, apiLoading, apiError, refreshApi }) {
+  const [keyword, setKeyword] = useState('');
+  const [moduleFilter, setModuleFilter] = useState('all');
+  const [resultFilter, setResultFilter] = useState('all');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [detailLog, setDetailLog] = useState(null);
+  const modules = useMemo(() => Array.from(new Set(logRows.map((log) => log.module))), [logRows]);
+  const visibleLogs = useMemo(() => {
+    const normalized = keyword.trim().toLowerCase();
+    return logRows.filter((log) => {
+      const matchesKeyword = !normalized || [log.user, log.username, log.action, log.object, log.ip].some((value) => value.toLowerCase().includes(normalized));
+      const logDate = log.time.slice(0, 10);
+      return matchesKeyword && (moduleFilter === 'all' || log.module === moduleFilter) && (resultFilter === 'all' || log.result === resultFilter) && (!startDate || logDate >= startDate) && (!endDate || logDate <= endDate);
+    });
+  }, [endDate, keyword, logRows, moduleFilter, resultFilter, startDate]);
+  const resetFilters = () => { setKeyword(''); setModuleFilter('all'); setResultFilter('all'); setStartDate(''); setEndDate(''); };
+
+  return (
+    <>
+      <PageTitle title="操作日志" desc="审计登录、配置变更、敏感操作及其执行结果。" actions={<Button variant="secondary" icon={<Icon type="export" />}>导出日志</Button>} />
+      <ApiNotice loading={apiLoading} error={apiError} onRetry={refreshApi} />
+      <Toolbar>
+        <Field label="关键词"><Input value={keyword} onChange={(event) => setKeyword(event.target.value)} placeholder="用户、操作对象或 IP" /></Field>
+        <Field label="功能模块"><Select value={moduleFilter} onChange={(event) => setModuleFilter(event.target.value)}><option value="all">全部模块</option>{modules.map((module) => <option key={module} value={module}>{module}</option>)}</Select></Field>
+        <Field label="执行结果"><Select value={resultFilter} onChange={(event) => setResultFilter(event.target.value)}><option value="all">全部结果</option><option value="成功">成功</option><option value="失败">失败</option></Select></Field>
+        <Field label="开始日期"><Input type="date" value={startDate} onChange={(event) => setStartDate(event.target.value)} /></Field>
+        <Field label="结束日期"><Input type="date" value={endDate} onChange={(event) => setEndDate(event.target.value)} /></Field>
+        <Button variant="outline" onClick={resetFilters}>重置</Button>
+      </Toolbar>
+      <Panel title="日志列表" aside={<Badge tone="neutral">共 {visibleLogs.length} 条</Badge>} className="wide-panel">
+        <SimpleTable rows={visibleLogs} columns={[
+          { key: 'time', label: '操作时间' },
+          { key: 'user', label: '操作用户' },
+          { key: 'module', label: '功能模块' },
+          { key: 'action', label: '操作类型' },
+          { key: 'object', label: '操作对象' },
+          { key: 'result', label: '结果', status: true },
+          { key: 'ip', label: '操作 IP' },
+          { key: 'actions', label: '操作', render: (row) => <Button size="sm" variant="outline" onClick={() => setDetailLog(row)}>查看详情</Button> },
+        ]} />
+      </Panel>
+      {detailLog ? (
+        <Drawer title="操作日志详情" aside={<Badge tone={toneForStatus(detailLog.result)}>{detailLog.result}</Badge>} onClose={() => setDetailLog(null)}>
+          <div className="detail-stack">
+            <KeyValue label="日志 ID" value={detailLog.id} />
+            <KeyValue label="操作时间" value={detailLog.time} />
+            <KeyValue label="操作用户" value={`${detailLog.user}（${detailLog.username}）`} />
+            <KeyValue label="功能模块" value={detailLog.module} />
+            <KeyValue label="操作类型" value={detailLog.action} />
+            <KeyValue label="操作对象" value={detailLog.object} />
+            <KeyValue label="执行结果" value={detailLog.result} />
+            <KeyValue label="操作 IP" value={detailLog.ip} />
+            <KeyValue label="客户端" value={detailLog.userAgent} />
+          </div>
+          <section className="log-summary"><strong>操作摘要</strong><p>{detailLog.summary}</p></section>
+        </Drawer>
+      ) : null}
+    </>
+  );
+}
+