feat: 实现前端管理后台（React + Vite + Ant Design + Zustand）

2026-06-29 17:46:41 +06:00
parent da06866360
commit c714ea95ac
21 changed files with 1193 additions and 0 deletions
@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { Table, Tag } from 'antd';
+import dayjs from 'dayjs';
+import { listLogs, OperationLog } from '../api/logs';
+
+const actionMap: Record<string, string> = {
+  BATCH_DELETE: '批量删除',
+  BATCH_DOWNLOAD: '批量下载',
+  BATCH_UPDATE: '批量更新',
+};
+
+const actionColor: Record<string, string> = {
+  BATCH_DELETE: 'red',
+  BATCH_DOWNLOAD: 'blue',
+  BATCH_UPDATE: 'green',
+};
+
+export default function LogsPage() {
+  const [logs, setLogs] = useState<OperationLog[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState(0);
+  const [pageNo, setPageNo] = useState(1);
+  const [pageSize, setPageSize] = useState(20);
+
+  const fetchLogs = async (page: number, size: number) => {
+    setLoading(true);
+    try {
+      const result = await listLogs({ pageNo: page, pageSize: size });
+      setLogs(result.logs);
+      setTotal(result.total);
+      setPageNo(result.pageNo);
+      setPageSize(result.pageSize);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs(1, 20);
+  }, []);
+
+  const columns = [
+    {
+      title: '时间',
+      dataIndex: 'createdAt',
+      width: 180,
+      render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
+    },
+    { title: '用户', dataIndex: 'username', width: 120 },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      width: 120,
+      render: (action: string) => <Tag color={actionColor[action] || 'default'}>{actionMap[action] || action}</Tag>,
+    },
+    { title: '目标类型', dataIndex: 'targetType', width: 100 },
+    {
+      title: '目标 ID',
+      dataIndex: 'targetIds',
+      ellipsis: true,
+      render: (ids: string | null) => ids || '-',
+    },
+    {
+      title: '详情',
+      dataIndex: 'details',
+      ellipsis: true,
+      render: (details: string | null) => (details ? JSON.stringify(JSON.parse(details)) : '-'),
+    },
+  ];
+
+  return (
+    <Table
+      rowKey="id"
+      columns={columns}
+      dataSource={logs}
+      loading={loading}
+      pagination={{
+        current: pageNo,
+        pageSize,
+        total,
+        showSizeChanger: true,
+        showTotal: (t) => `共 ${t} 条`,
+        onChange: (page, size) => fetchLogs(page, size || 20),
+      }}
+    />
+  );
+}