优化 ui

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' }}>
-      <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>