优化 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>
+  );
+}
@@ -29,6 +29,7 @@ export default function LoginTasksPage() {
  const [loading, setLoading] = useState(false);
  const [batchId, setBatchId] = useState<string | null>(null);
  const [logs, setLogs] = useState<{ level: string; message: string }[]>([]);
+  const [wsConnected, setWsConnected] = useState(false);
  const wsRef = useRef<WebSocket | null>(null);
  const user = getUser();

@@ -75,13 +76,19 @@ export default function LoginTasksPage() {
      const wsUrl = `ws://${window.location.hostname}:8000/api/login/ws/login/${result.batch_id}`;
      const ws = new WebSocket(wsUrl);
      wsRef.current = ws;
+      setWsConnected(true);
      ws.onmessage = (event) => {
        const msg = JSON.parse(event.data);
        if (msg.level === 'heartbeat') return;
+        if (msg.level === 'result') return;
        setLogs((prev) => [...prev, msg]);
      };
      ws.onclose = () => {
        wsRef.current = null;
+        setWsConnected(false);
+      };
+      ws.onerror = () => {
+        setWsConnected(false);
      };
    } catch (e: any) {
      message.error(e.message);
@@ -183,7 +190,7 @@ export default function LoginTasksPage() {
            bodyStyle={{ maxHeight: 500, overflow: 'auto', fontFamily: 'monospace', fontSize: 12 }}
          >
            {logs.length === 0 ? (
-              <Spin spinning={!!batchId} size="small" />
+              <Spin spinning={wsConnected} size="small" />
            ) : (
              logs.map((log, i) => (
                <div
@@ -112,8 +112,8 @@ export default function ProxyPage() {
  };

  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 8 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexShrink: 0 }}>
        <h2 style={{ margin: 0 }}>代理配置</h2>
        <Button type="primary" onClick={handleSave} loading={loading}>保存配置</Button>
      </div>
@@ -122,6 +122,7 @@ export default function ProxyPage() {
        form={form}
        layout="vertical"
        disabled={!configLoaded}
+        size="small"
        initialValues={{
          enabled: false,
          whitelist_enabled: false,
@@ -131,37 +132,38 @@ export default function ProxyPage() {
          whitelist_uid: '',
          whitelist_ukey: '',
        }}
+        style={{ flexShrink: 0 }}
      >
-        <Row gutter={16}>
+        <Row gutter={12}>
          <Col span={12}>
-            <Card title="代理设置" size="small" style={{ marginBottom: 16 }}>
-              <Form.Item name="enabled" label="启用代理" valuePropName="checked">
+            <Card title="代理设置" size="small" styles={{ body: { paddingBottom: 8 } }}>
+              <Form.Item name="enabled" label="启用代理" valuePropName="checked" style={{ marginBottom: 8 }}>
                <Switch />
              </Form.Item>
-              <Form.Item name="api_url" label="代理API地址">
+              <Form.Item name="api_url" label="代理API地址" style={{ marginBottom: 8 }}>
                <Input placeholder="http://op.xiequ.cn/...?act=get" />
              </Form.Item>
-              <Form.Item name="http" label="静态HTTP代理">
+              <Form.Item name="http" label="静态HTTP代理" style={{ marginBottom: 8 }}>
                <Input placeholder="http://ip:port" />
              </Form.Item>
-              <Form.Item name="https" label="静态HTTPS代理">
+              <Form.Item name="https" label="静态HTTPS代理" style={{ marginBottom: 8 }}>
                <Input placeholder="http://ip:port" />
              </Form.Item>
-              <Button onClick={handleTestProxy} loading={testing}>测试代理</Button>
+              <Button size="small" onClick={handleTestProxy} loading={testing}>测试代理</Button>
            </Card>
          </Col>
          <Col span={12}>
-            <Card title="白名单管理" size="small" style={{ marginBottom: 16 }}>
-              <Form.Item name="whitelist_enabled" label="启用白名单自动管理" valuePropName="checked">
+            <Card title="白名单管理" size="small" styles={{ body: { paddingBottom: 8 } }}>
+              <Form.Item name="whitelist_enabled" label="启用白名单自动管理" valuePropName="checked" style={{ marginBottom: 8 }}>
                <Switch />
              </Form.Item>
-              <Form.Item name="whitelist_uid" label="协固UID">
+              <Form.Item name="whitelist_uid" label="协固UID" style={{ marginBottom: 8 }}>
                <Input placeholder="如: 99769" />
              </Form.Item>
-              <Form.Item name="whitelist_ukey" label="协固UKEY">
+              <Form.Item name="whitelist_ukey" label="协固UKEY" style={{ marginBottom: 8 }}>
                <Input placeholder="如: C99371082B965B70F46DCAA87A04618B" />
              </Form.Item>
-              <Button onClick={handleTestWhitelist} loading={testingWl}>测试白名单</Button>
+              <Button size="small" onClick={handleTestWhitelist} loading={testingWl}>测试白名单</Button>
            </Card>
          </Col>
        </Row>
@@ -170,8 +172,8 @@ export default function ProxyPage() {
      <Card
        title="实时日志"
        size="small"
-        style={{ flex: 1, minHeight: 200, overflow: 'auto' }}
-        styles={{ body: { maxHeight: 350, overflow: 'auto', fontFamily: 'monospace', fontSize: 12, padding: '8px 16px' } }}
+        style={{ flex: 1, overflow: 'hidden' }}
+        styles={{ body: { height: '100%', overflow: 'auto', fontFamily: 'monospace', fontSize: 12, padding: '8px 16px' } }}
      >
        {logs.length === 0 ? (
          <span style={{ color: '#999' }}>点击"测试代理"或"测试白名单"查看日志</span>