管理后台初始化，登录，团队管理，报价单管理 完成

src/components/Layout/Header.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Layout, Switch, Button, Dropdown } from 'antd';
+import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
+import { useTheme } from '@/contexts/ThemeContext';
+import { useAuth } from '@/contexts/AuthContext';
+import { MenuTrigger } from '../common/MenuTrigger';
+
+const { Header: AntHeader } = Layout;
+
+const Header = ({ collapsed, setCollapsed }) => {
+  const { isDarkMode, toggleTheme } = useTheme();
+  const { user, logout } = useAuth();
+
+  const handleLogout = async () => {
+    try {
+      await logout();
+    } catch (error) {
+      console.error('Logout error:', error);
+    }
+  };
+
+  const userMenuItems = [
+    {
+      key: 'profile',
+      icon: <UserOutlined />,
+      label: '个人信息',
+    },
+    {
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: '退出登录',
+      onClick: handleLogout,
+    },
+  ];
+
+  return (
+    <AntHeader 
+      style={{ 
+        padding: 0, 
+        background: isDarkMode ? '#141414' : '#fff',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      }}
+    >
+      <div className="flex items-center">
+        <MenuTrigger 
+          collapsed={collapsed} 
+          setCollapsed={setCollapsed}
+          isDarkMode={isDarkMode}
+        />
+      </div>
+      
+      <div className="flex items-center gap-4 mr-6">
+        <Switch
+          checked={isDarkMode}
+          onChange={toggleTheme}
+          checkedChildren="🌙"
+          unCheckedChildren="☀️"
+        />
+        
+        <Dropdown 
+          menu={{ items: userMenuItems }} 
+          placement="bottomRight"
+          trigger={['click']}
+        >
+          <Button 
+            type="text" 
+            icon={<UserOutlined />}
+            className="flex items-center"
+          >
+            {user?.email}
+          </Button>
+        </Dropdown>
+      </div>
+    </AntHeader>
+  );
+};
+
+export default Header;

src/components/Layout/Logo.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { RocketOutlined } from '@ant-design/icons';
+
+export const Logo = ({ collapsed, isDarkMode }) => (
+  <div className="logo">
+    <div className="flex items-center justify-center gap-2">
+      <RocketOutlined className="text-2xl text-primary-500" />
+      {!collapsed && (
+        <h1 className="text-lg font-semibold m-0" style={{ 
+          background: 'var(--primary-gradient)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent'
+        }}>
+          Uppeta
+        </h1>
+      )}
+    </div>
+  </div>
+);

src/components/Layout/MainLayout.jsx

@@ -0,0 +1,36 @@
+import React, { useState, Suspense } from 'react';
+import { Layout, Spin } from 'antd';
+import { Outlet } from 'react-router-dom';
+import Header from './Header';
+import Sidebar from './Sidebar';
+import { useTheme } from '@/contexts/ThemeContext';
+
+const { Content } = Layout;
+
+const MainLayout = () => {
+  const [collapsed, setCollapsed] = useState(false);
+  const { isDarkMode } = useTheme();
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sidebar collapsed={collapsed} />
+      <Layout>
+        <Header collapsed={collapsed} setCollapsed={setCollapsed} />
+        <Content
+          style={{
+            margin: '24px 16px',
+            padding: 24,
+            background: isDarkMode ? '#141414' : '#fff',
+            borderRadius: '4px',
+          }}
+        >
+          <Suspense fallback={<Spin size="large" />}>
+            <Outlet />
+          </Suspense>
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default MainLayout;

src/components/Layout/Sidebar.jsx

@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { Layout, Menu } from 'antd';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useTheme } from '@/contexts/ThemeContext';
+import { getMenuItems } from '@/utils/menuUtils';
+import { Logo } from '@/components/common/Logo';
+
+const { Sider } = Layout;
+
+const Sidebar = ({ collapsed }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { isDarkMode } = useTheme();
+
+  const menuItems = useMemo(() => getMenuItems(), []);
+
+  const defaultOpenKeys = useMemo(() => {
+    const pathSegments = location.pathname.split('/').filter(Boolean);
+    return pathSegments.reduce((acc, _, index) => {
+      const path = `/${pathSegments.slice(0, index + 1).join('/')}`;
+      acc.push(path);
+      return acc;
+    }, []);
+  }, [location.pathname]);
+
+  // Handle menu item click
+  const handleMenuClick = ({ key }) => {
+    navigate(key);
+  };
+
+  return (
+    <Sider 
+      trigger={null} 
+      collapsible 
+      collapsed={collapsed}
+      theme={isDarkMode ? 'dark' : 'light'}
+      width={256}
+      collapsedWidth={80} // 添加这个属性
+       className={`app-sidebar ${collapsed ? 'collapsed' : ''}`} // 添加collapsed类名
+    >
+      <Logo collapsed={collapsed} isDarkMode={isDarkMode} />
+      <Menu
+        theme={isDarkMode ? 'dark' : 'light'}
+        mode="inline"
+        selectedKeys={[location.pathname]}
+        defaultOpenKeys={defaultOpenKeys}
+        items={menuItems}
+        onClick={handleMenuClick}
+      />
+    </Sider>
+  );
+};
+
+export default React.memo(Sidebar);