优化 ui

2026-06-22 14:21:39 +08:00
parent b08f0a647d
commit 627f06d0a0
14 changed files with 322 additions and 61 deletions
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { Table, Button, Card, Row, Col, Statistic, message, Tag, Popconfirm } from 'antd';
+import { DownloadOutlined, DeleteOutlined } from '@ant-design/icons';
+import { cookieApi } from '../api/modules';
+import { getUser, hasPerm } from '../store/auth';
+
+export default function CookiePage() {
+  const [cookies, setCookies] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const user = getUser();
+
+  const canView = hasPerm(user, 'cookie:view');
+  const canExport = hasPerm(user, 'cookie:export');
+
+  const loadCookies = async () => {
+    setLoading(true);
+    try {
+      const data = await cookieApi.list();
+      setCookies(data);
+    } catch (e: any) {
+      message.error(e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadCookies();
+  }, []);
+
+  const handleExport = async () => {
+    try {
+      const res = await cookieApi.exportCsv();
+      const url = URL.createObjectURL(new Blob([res.data]));
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'cookies.csv';
+      a.click();
+      URL.revokeObjectURL(url);
+      message.success('已导出');
+    } catch (e: any) {
+      message.error(e.message);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    try {
+      await cookieApi.delete(id);
+      message.success('已删除');
+      loadCookies();
+    } catch (e: any) {
+      message.error(e.message);
+    }
+  };
+
+  const columns: any[] = [
+    { title: 'ID', dataIndex: 'id', width: 60 },
+    { title: '账号', dataIndex: 'account_username' },
+    {
+      title: 'Cookie',
+      dataIndex: 'cookie_preview',
+      ellipsis: true,
+      render: (val: string) => {
+        if (!canView) return <Tag>***</Tag>;
+        return <span style={{ fontFamily: 'monospace', fontSize: 12 }}>{val}</span>;
+      },
+    },
+    { title: '时间', dataIndex: 'created_at', width: 180 },
+  ];
+
+  if (canExport) {
+    columns.push({
+      title: '操作',
+      width: 80,
+      render: (_: any, record: any) => (
+        <Popconfirm title="确认删除？" onConfirm={() => handleDelete(record.id)}>
+          <Button danger size="small" icon={<DeleteOutlined />}>删除</Button>
+        </Popconfirm>
+      ),
+    });
+  }
+
+  return (
+    <div>
+      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between' }}>
+        <h2>Cookie 管理</h2>
+        {canExport && (
+          <Button type="primary" icon={<DownloadOutlined />} onClick={handleExport}>
+            导出 CSV
+          </Button>
+        )}
+      </div>
+      <Row gutter={16} style={{ marginBottom: 16 }}>
+        <Col span={6}>
+          <Card size="small"><Statistic title="Cookie 总数" value={cookies.length} /></Card>
+        </Col>
+      </Row>
+      <Table
+        columns={columns}
+        dataSource={cookies}
+        rowKey="id"
+        loading={loading}
+        size="small"
+        pagination={{ pageSize: 20 }}
+      />
+    </div>
+  );
+}