feat(web): 登录、注册功能

apps/web/src/layouts/MainLayout.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
-import { Breadcrumb, Drawer, Layout } from 'antd';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Breadcrumb, Button, Drawer, Layout } from 'antd';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import SidebarMenu from './SidebarMenu';
 import { getBreadcrumbItems } from './menuConfig';
+import { useSession } from '@/services/session';
 import './MainLayout.css';
 
 const { Header, Sider, Content } = Layout;
@@ -12,7 +13,10 @@ const MainLayout = () => {
     const [collapsed, setCollapsed] = useState(false);
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
+    const [loggingOut, setLoggingOut] = useState(false);
     const location = useLocation();
+    const navigate = useNavigate();
+    const { session, logout } = useSession();
 
     const breadcrumbItems = useMemo(
         () =>
@@ -27,6 +31,16 @@ const MainLayout = () => {
         [location.pathname]
     );
 
+    const handleLogout = async () => {
+        setLoggingOut(true);
+        try {
+            await logout();
+        } finally {
+            setLoggingOut(false);
+            navigate('/login', { replace: true });
+        }
+    };
+
     useEffect(() => {
         const checkMobile = () => {
             setIsMobile(window.innerWidth < 768);
@@ -108,6 +122,19 @@ const MainLayout = () => {
                             items={breadcrumbItems}
                         />
                     </div>
+                    {session && (
+                        <div className="header-right">
+                            <div className="header-user">
+                                <span className="header-user-workspace">
+                                    {session.workspace.name}
+                                </span>
+                                <span className="header-user-email">{session.user.email}</span>
+                            </div>
+                            <Button size="small" loading={loggingOut} onClick={handleLogout}>
+                                退出登录
+                            </Button>
+                        </div>
+                    )}
                 </Header>
 
                 <Content className="main-content">