优化退出登录, cookie 可以复制

web/frontend/src/layouts/MainLayout.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Layout, Menu, Avatar, Space, Typography, Button } from 'antd';
+import { Layout, Menu, Avatar, Space, Typography, Button, Modal } from 'antd';
 import {
   DashboardOutlined, UserOutlined, LogoutOutlined,
   CloudServerOutlined, TeamOutlined, ApiOutlined, KeyOutlined,
@@ -60,71 +60,94 @@ export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
     menuItems.push({ key: '/users', label: '用户管理', icon: <TeamOutlined /> });
   }
 
-  const handleLogout = async () => {
-    try {
-      await authApi.logout();
-    } catch {}
-    clearAuth();
-    onLogout?.();
-    navigate('/login', { replace: true });
+  const handleLogout = () => {
+    Modal.confirm({
+      title: '确认退出',
+      content: '确定要退出登录吗？',
+      okText: '退出',
+      cancelText: '取消',
+      okButtonProps: { type: 'primary' },
+      centered: true,
+      onOk: async () => {
+        try {
+          await authApi.logout();
+        } catch {}
+        clearAuth();
+        onLogout?.();
+        navigate('/login', { replace: true });
+      },
+    });
   };
 
   return (
     <Layout style={{ height: '100vh', overflow: 'hidden' }}>
-      <Sider trigger={null} collapsed={collapsed} onCollapse={setCollapsed}
-        style={{ display: 'flex', flexDirection: 'column' }}>
+      <Sider trigger={null} collapsed={collapsed} onCollapse={setCollapsed}>
         <div style={{
-          height: 48, margin: '12px 12px 0', color: '#fff', fontSize: 16,
-          textAlign: 'center', lineHeight: '48px', fontWeight: 'bold',
-          whiteSpace: 'nowrap', overflow: 'hidden', flexShrink: 0,
-          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+          display: 'flex', flexDirection: 'column', height: '100%',
         }}>
-          <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"
-          mode="inline"
-          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 && (
+          <div style={{
+            height: 48, margin: '12px 12px 0', color: '#fff', fontSize: 16,
+            textAlign: 'center', lineHeight: '48px', fontWeight: 'bold',
+            whiteSpace: 'nowrap', overflow: 'hidden', flexShrink: 0,
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
+          }}>
+            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+              {collapsed ? '鱼' : '斗鱼登录后台'}
+            </span>
             <Button
-              block
+              type="text"
               size="small"
-              icon={<LogoutOutlined />}
-              onClick={handleLogout}
-              style={{ textAlign: 'left' }}
-            >
-              退出登录
-            </Button>
-          )}
+              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+              onClick={() => setCollapsed(!collapsed)}
+              style={{ color: '#fff', flexShrink: 0 }}
+            />
+          </div>
+          <Menu
+            theme="dark"
+            mode="inline"
+            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
+                type="text"
+                size="small"
+                icon={<LogoutOutlined />}
+                onClick={handleLogout}
+                style={{ color: 'rgba(255,255,255,0.65)' }}
+              />
+            ) : (
+              <Button
+                block
+                type="text"
+                size="small"
+                icon={<LogoutOutlined />}
+                onClick={handleLogout}
+                style={{ color: 'rgba(255,255,255,0.65)', justifyContent: 'flex-start' }}
+              >
+                退出登录
+              </Button>
+            )}
+          </div>
         </div>
       </Sider>
       <Layout>