优化 ui

2026-06-22 14:21:39 +08:00
parent b08f0a647d
commit 627f06d0a0
14 changed files with 322 additions and 61 deletions
@@ -9,6 +9,7 @@ import AccountsPage from './pages/AccountsPage';
 import LoginTasksPage from './pages/LoginTasksPage';
 import ProxyPage from './pages/ProxyPage';
 import UsersPage from './pages/UsersPage';
+import CookiePage from './pages/CookiePage';
 import { getToken } from './store/auth';

 function App() {
@@ -29,6 +30,7 @@ function App() {
            <Route index element={<DashboardPage />} />
            <Route path="accounts" element={<AccountsPage />} />
            <Route path="login-tasks" element={<LoginTasksPage />} />
+            <Route path="cookies" element={<CookiePage />} />
            <Route path="proxy" element={<ProxyPage />} />
            <Route path="users" element={<UsersPage />} />
          </Route>
@@ -52,6 +52,12 @@ export const loginApi = {
  stop: (batch_id: string) => api.post<any, any>(`/login/stop/${batch_id}`),
 };

+export const cookieApi = {
+  list: () => api.get<any, any[]>('/cookies'),
+  exportCsv: () => api.get('/cookies/export', { responseType: 'blob' }),
+  delete: (id: number) => api.delete<any, any>(`/cookies/${id}`),
+};
+
 export const proxyApi = {
  get: () => api.get<any, any>('/proxy'),
  update: (data: any) => api.put<any, any>('/proxy', data),
@@ -1,14 +1,15 @@
 import { useEffect, useState } from 'react';
-import { Layout, Menu, Dropdown, Avatar, Space, Typography } from 'antd';
+import { Layout, Menu, Avatar, Space, Typography, Button } from 'antd';
 import {
  DashboardOutlined, UserOutlined, LogoutOutlined,
-  CloudServerOutlined, TeamOutlined, ApiOutlined,
+  CloudServerOutlined, TeamOutlined, ApiOutlined, KeyOutlined,
+  MenuFoldOutlined, MenuUnfoldOutlined,
 } from '@ant-design/icons';
 import { useNavigate, useLocation, Outlet } from 'react-router-dom';
 import { getUser, clearAuth, hasPerm, type AuthUser } from '../store/auth';
 import { authApi } from '../api/modules';

-const { Header, Sider, Content } = Layout;
+const { Sider, Content } = Layout;
 const { Text } = Typography;

 const ROLE_LABELS: Record<string, string> = {
@@ -44,6 +45,11 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
    menuItems.push({ key: '/login-tasks', label: '登录任务', icon: <ApiOutlined /> });
  }

+  // Cookie 管理
+  if (hasPerm(user, 'cookie:view')) {
+    menuItems.push({ key: '/cookies', label: 'Cookie 管理', icon: <KeyOutlined /> });
+  }
+
  // 代理配置
  if (hasPerm(user, 'proxy:manage')) {
    menuItems.push({ key: '/proxy', label: '代理配置', icon: <CloudServerOutlined /> });
@@ -59,30 +65,30 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
      await authApi.logout();
    } catch {}
    clearAuth();
-    onLogout?.();       // 触发 App 重渲染
+    onLogout?.();
    navigate('/login', { replace: true });
  };

-  const userMenu = {
-    items: [
-      {
-        key: 'logout',
-        label: '退出登录',
-        icon: <LogoutOutlined />,
-        onClick: handleLogout,
-      },
-    ],
-  };
-
  return (
-    <Layout style={{ minHeight: '100vh' }}>
-      <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
+    <Layout style={{ height: '100vh', overflow: 'hidden' }}>
+      <Sider trigger={null} collapsed={collapsed} onCollapse={setCollapsed}
+        style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{
-          height: 48, margin: 12, color: '#fff', fontSize: 16,
+          height: 48, margin: '12px 12px 0', color: '#fff', fontSize: 16,
          textAlign: 'center', lineHeight: '48px', fontWeight: 'bold',
-          whiteSpace: 'nowrap', overflow: 'hidden',
+          whiteSpace: 'nowrap', overflow: 'hidden', flexShrink: 0,
+          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
-          {collapsed ? '鱼' : '斗鱼登录后台'}
+          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {collapsed ? '鱼' : '斗鱼登录后台'}
+          </span>
+          <Button
+            type="text"
+            size="small"
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={() => setCollapsed(!collapsed)}
+            style={{ color: '#fff', flexShrink: 0 }}
+          />
        </div>
        <Menu
          theme="dark"
@@ -90,22 +96,39 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
          selectedKeys={[location.pathname]}
          items={menuItems}
          onClick={({ key }) => navigate(key)}
+          style={{ flex: 1, overflow: 'auto', marginTop: 8 }}
        />
+        <div style={{
+          borderTop: '1px solid rgba(255,255,255,0.1)',
+          padding: '12px',
+          flexShrink: 0,
+        }}>
+          <Space style={{ color: '#fff', width: '100%', marginBottom: collapsed ? 0 : 8 }}>
+            <Avatar icon={<UserOutlined />} size="small" />
+            {!collapsed && (
+              <>
+                <Text style={{ color: '#fff' }}>{user.username}</Text>
+                <Text style={{ color: 'rgba(255,255,255,0.65)', fontSize: 12 }}>
+                  ({ROLE_LABELS[user.role] || user.role})
+                </Text>
+              </>
+            )}
+          </Space>
+          {!collapsed && (
+            <Button
+              block
+              size="small"
+              icon={<LogoutOutlined />}
+              onClick={handleLogout}
+              style={{ textAlign: 'left' }}
+            >
+              退出登录
+            </Button>
+          )}
+        </div>
      </Sider>
      <Layout>
-        <Header style={{
-          background: '#fff', padding: '0 24px',
-          display: 'flex', justifyContent: 'flex-end', alignItems: 'center',
-        }}>
-          <Dropdown menu={userMenu} placement="bottomRight">
-            <Space style={{ cursor: 'pointer' }}>
-              <Avatar icon={<UserOutlined />} />
-              <Text>{user.username}</Text>
-              <Text type="secondary">({ROLE_LABELS[user.role] || user.role})</Text>
-            </Space>
-          </Dropdown>
-        </Header>
-        <Content style={{ margin: 16, padding: 24, background: '#fff', borderRadius: 8 }}>
+        <Content style={{ margin: 16, padding: 24, background: '#fff', borderRadius: 8, overflow: 'auto' }}>
          <Outlet />
        </Content>
      </Layout>
@@ -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>