优化 ui

web/backend/main.py

@@ -6,7 +6,7 @@ from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
 
 from .database import init_db
-from .routers import auth, users, accounts, login, proxy
+from .routers import auth, users, accounts, login, proxy, cookies
 
 
 @asynccontextmanager
@@ -36,6 +36,7 @@ app.include_router(users.router)
 app.include_router(accounts.router)
 app.include_router(login.router)
 app.include_router(proxy.router)
+app.include_router(cookies.router)
 
 
 @app.get("/api/health")

web/backend/routers/cookies.py

@@ -0,0 +1,95 @@
+"""Cookie 管理路由"""
+
+from fastapi import APIRouter, Depends, HTTPException
+from fastapi.responses import StreamingResponse
+from sqlalchemy.orm import Session
+import io
+import csv
+
+from ..database import get_db
+from ..models import User, LoginTask, Account
+from ..deps import get_current_user, require_permission
+from ..permissions import has_permission
+
+router = APIRouter(prefix="/api/cookies", tags=["Cookie管理"])
+
+
+@router.get("")
+def list_cookies(
+    db: Session = Depends(get_db),
+    current: User = Depends(get_current_user),
+):
+    """查看登录成功的 Cookie 列表。"""
+    query = db.query(LoginTask).filter(LoginTask.status == "success")
+
+    # 客服只能看自己账号的
+    if not has_permission(current.role, "login:view_all"):
+        query = query.join(Account, LoginTask.account_id == Account.id).filter(
+            Account.assigned_to == current.id
+        )
+
+    tasks = query.order_by(LoginTask.finished_at.desc()).all()
+    result = []
+    for t in tasks:
+        acc = db.query(Account).filter(Account.id == t.account_id).first()
+        item = {
+            "id": t.id,
+            "batch_id": t.batch_id,
+            "account_id": t.account_id,
+            "account_username": acc.username if acc else "",
+            "created_at": t.finished_at.isoformat() if t.finished_at else None,
+        }
+        # 只有有 cookie:view 权限才返回 cookie 内容
+        if has_permission(current.role, "cookie:view"):
+            cookie = t.cookie or ""
+            item["cookie"] = cookie
+            item["cookie_preview"] = cookie[:50] + "..." if len(cookie) > 50 else cookie
+        else:
+            item["cookie"] = ""
+            item["cookie_preview"] = "***"
+        result.append(item)
+    return result
+
+
+@router.get("/export")
+def export_cookies(
+    db: Session = Depends(get_db),
+    current: User = Depends(require_permission("cookie:export")),
+):
+    """导出 Cookie 为 CSV。"""
+    tasks = db.query(LoginTask).filter(
+        LoginTask.status == "success"
+    ).order_by(LoginTask.finished_at.desc()).all()
+
+    output = io.StringIO()
+    writer = csv.writer(output)
+    writer.writerow(["账号", "Cookie", "时间"])
+
+    for t in tasks:
+        acc = db.query(Account).filter(Account.id == t.account_id).first()
+        username = acc.username if acc else ""
+        writer.writerow([username, t.cookie or "", t.finished_at.isoformat() if t.finished_at else ""])
+
+    output.seek(0)
+    return StreamingResponse(
+        iter([output.getvalue()]),
+        media_type="text/csv",
+        headers={"Content-Disposition": "attachment; filename=cookies.csv"},
+    )
+
+
+@router.delete("/{task_id}")
+def delete_cookie(
+    task_id: int,
+    db: Session = Depends(get_db),
+    current: User = Depends(require_permission("cookie:export")),
+):
+    """删除一条 Cookie 记录。"""
+    task = db.query(LoginTask).filter(LoginTask.id == task_id).first()
+    if not task:
+        raise HTTPException(status_code=404, detail="记录不存在")
+    task.cookie = ""
+    task.status = "failed"
+    task.message = "Cookie已清除"
+    db.commit()
+    return {"message": "已删除", "success": True}

web/backend/routers/login.py

@@ -15,12 +15,12 @@ from ..services.login_service import LoginBatchRunner
 
 router = APIRouter(prefix="/api/login", tags=["登录任务"])
 
-# 运行中的批次: batch_id -> {runner, log_queue, loop}
+# 运行中的批次: batch_id -> {log_queue, loop, runner}
 _active_batches: dict[str, dict] = {}
 
 
 @router.post("/batch")
-def create_batch(
+async def create_batch(
     req: LoginBatchRequest,
     db: Session = Depends(get_db),
     current: User = Depends(require_permission("login:batch")),
@@ -46,6 +46,10 @@ def create_batch(
     if not valid_ids:
         raise HTTPException(status_code=403, detail="没有可登录的账号")
 
+    # 在主事件循环中创建 log_queue，传给后台线程
+    log_queue = asyncio.Queue()
+    loop = asyncio.get_running_loop()
+
     # 创建执行器（用独立的 DB 会话，因为在线程中运行）
     thread_db = SessionLocal()
     runner = LoginBatchRunner(
@@ -55,10 +59,19 @@ def create_batch(
         creator_role=current.role,
         max_geetest_retries=req.max_geetest_retries,
         proxy_config=proxy,
+        log_queue=log_queue,
+        loop=loop,
     )
 
     batch_id = runner.batch_id
 
+    # 先注册到全局，再启动线程，确保 WebSocket 连接时能找到
+    _active_batches[batch_id] = {
+        "log_queue": log_queue,
+        "loop": loop,
+        "runner": runner,
+    }
+
     # 启动线程
     thread = threading.Thread(target=runner.run, daemon=True)
     thread.start()
@@ -114,21 +127,24 @@ async def ws_login_logs(websocket: WebSocket, batch_id: str):
     """WebSocket 推送登录实时日志。"""
     await websocket.accept()
 
-    log_queue = asyncio.Queue()
+    # 从已注册的批次中获取 log_queue（由 create_batch 创建）
-    loop = asyncio.get_running_loop()
+    batch = _active_batches.get(batch_id)
+    if not batch:
+        await websocket.send_json({"level": "error", "message": "批次不存在或已结束"})
+        await websocket.close()
+        return
 
-    # 查找已运行的批次，或等待新批次
+    log_queue: asyncio.Queue = batch["log_queue"]
-    # 简化：直接把 log_queue 注册到全局，前端创建批次后连 ws
-    _active_batches[batch_id] = {
-        "log_queue": log_queue,
-        "loop": loop,
-    }
 
     try:
         while True:
             try:
                 msg = await asyncio.wait_for(log_queue.get(), timeout=30)
                 await websocket.send_json(msg)
+                # 收到 result 表示任务结束
+                if msg.get("level") == "result":
+                    await asyncio.sleep(0.1)
+                    break
             except asyncio.TimeoutError:
                 await websocket.send_json({"level": "heartbeat", "message": ""})
     except WebSocketDisconnect:

web/backend/services/login_service.py

@@ -175,3 +175,4 @@ class LoginBatchRunner:
             self.db.commit()
 
         self._push_log("info", f"批量登录任务 {batch_id} 完成")
+        self._push_log("result", "")

web/frontend/src/App.tsx

@@ -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>

web/frontend/src/api/modules.ts

@@ -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),

web/frontend/src/layouts/MainLayout.tsx

@@ -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' }}>
+    <Layout style={{ height: '100vh', overflow: 'hidden' }}>
-      <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
+      <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={{
+        <Content style={{ margin: 16, padding: 24, background: '#fff', borderRadius: 8, overflow: 'auto' }}>
-          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 }}>
           <Outlet />
         </Content>
       </Layout>

web/frontend/src/pages/CookiePage.tsx

@@ -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>
+  );
+}

web/frontend/src/pages/LoginTasksPage.tsx

@@ -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

web/frontend/src/pages/ProxyPage.tsx

@@ -112,8 +112,8 @@ export default function ProxyPage() {
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 8 }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+      <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 }}>
+            <Card title="代理设置" size="small" styles={{ body: { paddingBottom: 8 } }}>
-              <Form.Item name="enabled" label="启用代理" valuePropName="checked">
+              <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 }}>
+            <Card title="白名单管理" size="small" styles={{ body: { paddingBottom: 8 } }}>
-              <Form.Item name="whitelist_enabled" label="启用白名单自动管理" valuePropName="checked">
+              <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' }}
+        style={{ flex: 1, overflow: 'hidden' }}
-        styles={{ body: { maxHeight: 350, overflow: 'auto', fontFamily: 'monospace', fontSize: 12, padding: '8px 16px' } }}
+        styles={{ body: { height: '100%', overflow: 'auto', fontFamily: 'monospace', fontSize: 12, padding: '8px 16px' } }}
       >
         {logs.length === 0 ? (
           <span style={{ color: '#999' }}>点击"测试代理"或"测试白名单"查看日志</span>