框架优化

src/components/Layout/ColorIcon.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useTheme } from '@/contexts/ThemeContext';
+
+export const ColorIcon = ({ icon: Icon, background }) => {
+  const { isDarkMode } = useTheme();
+
+  return (
+    <div 
+      className={`
+        inline-flex items-center justify-center
+        w-8 h-8 rounded-lg transition-all duration-300
+        ${isDarkMode ? 'bg-opacity-25' : 'bg-opacity-15'}
+        hover:${isDarkMode ? 'bg-opacity-35' : 'bg-opacity-25'}
+      `}
+      style={{ backgroundColor: background }}
+    >
+      <span 
+        className="text-base transition-colors duration-300"
+        style={{ color: background }}
+      >
+        {Icon}
+      </span>
+    </div>
+  );
+};
+

src/components/Layout/Header.jsx

@@ -3,8 +3,7 @@ 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';
-
+import { MenuTrigger } from '../Layout/MenuTrigger';
 const { Header: AntHeader } = Layout;
 
 const Header = ({ collapsed, setCollapsed }) => {

src/components/Layout/Logo.jsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import { RocketOutlined } from '@ant-design/icons';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
 
 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'
-        }}>
+        <Text className="text-lg font-semibold m-0" style={{ color: 'var(--primary-color)' }}>
           Uppeta
-        </h1>
+        </Text>
       )}
     </div>
   </div>

src/components/Layout/MenuTrigger.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+
+export const MenuTrigger = ({ collapsed, setCollapsed, isDarkMode }) => {
+  const Icon = collapsed ? MenuUnfoldOutlined : MenuFoldOutlined;
+  
+  return (
+    <Icon
+      className="trigger"
+      onClick={() => setCollapsed(!collapsed)}
+      style={{ 
+        fontSize: '18px', 
+        padding: '0 24px',
+        cursor: 'pointer',
+        color: isDarkMode ? '#fff' : '#000'
+      }}
+    />
+  );
+};

src/components/Layout/Sidebar.jsx

@@ -3,7 +3,7 @@ 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';
+import { Logo } from '@/components/Layout/Logo';
 
 const { Sider } = Layout;