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

apps/web/src/layouts/AuthLayout.css

@@ -5,22 +5,12 @@
     justify-content: center;
     padding: 24px;
     background:
-<<<<<<< HEAD
-        radial-gradient(1000px 500px at 15% -10%, rgba(139, 92, 246, 0.14), transparent 60%),
+        <<<<<<< HEAD
+            radial-gradient(1000px 500px at 15% -10%, rgba(139, 92, 246, 0.14), transparent 60%),
         radial-gradient(900px 480px at 95% 110%, rgba(109, 40, 217, 0.1), transparent 55%),
-=======
-        radial-gradient(
-            1000px 500px at 15% -10%,
-            rgba(139, 92, 246, 0.14),
-            transparent 60%
-        ),
-        radial-gradient(
-            900px 480px at 95% 110%,
-            rgba(109, 40, 217, 0.1),
-            transparent 55%
-        ),
->>>>>>> feat-0.2.0
-        var(--bg-color);
+        ======= radial-gradient(1000px 500px at 15% -10%, rgba(139, 92, 246, 0.14), transparent 60%),
+        radial-gradient(900px 480px at 95% 110%, rgba(109, 40, 217, 0.1), transparent 55%),
+        >>>>>>> feat-0.2.0 var(--bg-color);
 }
 
 .auth-panel {

apps/web/src/layouts/MainLayout.css

@@ -96,6 +96,30 @@
     gap: 12px;
 }
 
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.header-user {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    line-height: 1.25;
+}
+
+.header-user-workspace {
+    font-size: 13px;
+    font-weight: 600;
+    color: #1f2937;
+}
+
+.header-user-email {
+    font-size: 12px;
+    color: #6b7280;
+}
+
 .collapse-trigger,
 .mobile-menu-trigger {
     font-size: 16px;

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