完成大量美化

frontend/src/App.jsx

@@ -1,5 +1,5 @@
 // frontend-react/src/App.jsx
-import React from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import TopBar from './components/TopBar';
 import { ChatBox } from './components/Mid';
 import SideBarLeft from './components/SideBarLeft';
@@ -7,22 +7,129 @@ import SideBarRight from './components/SideBarRight';
 import './index.css';
 
 function App() {
+  // 布局模式：'chat'（聊天模式） | 'edit'（编辑模式）
+  const [layoutMode, setLayoutMode] = useState('chat');
+  
+  // 左侧栏模式：'fixed'（固定）| 'smart'（智能）| 'expanded'（扩展）
+  const [sidebarMode, setSidebarMode] = useState(() => {
+    return localStorage.getItem('sidebarMode') || 'smart';
+  });
+  
+  // 智能模式的悬停状态
+  const [isSidebarHovered, setIsSidebarHovered] = useState(false);
+  
+  // 防抖定时器引用
+  const hoverTimeoutRef = useRef(null);
+  const leaveTimeoutRef = useRef(null);
+  
+  // 配色主题
+  const [colorTheme, setColorTheme] = useState(() => {
+    return localStorage.getItem('colorTheme') || 'default';
+  });
+
+  // 保存左侧栏模式到 LocalStorage
+  useEffect(() => {
+    localStorage.setItem('sidebarMode', sidebarMode);
+  }, [sidebarMode]);
+  
+  // 保存配色主题到 LocalStorage
+  useEffect(() => {
+    localStorage.setItem('colorTheme', colorTheme);
+    // 应用主题到 document
+    document.documentElement.setAttribute('data-color-theme', colorTheme);
+  }, [colorTheme]);
+
+  // 处理鼠标进入左侧栏 - 使用 useCallback 优化
+  const handleMouseEnter = useCallback(() => {
+    if (sidebarMode === 'smart') {
+      // 清除之前的离开定时器
+      if (leaveTimeoutRef.current) {
+        clearTimeout(leaveTimeoutRef.current);
+      }
+      
+      // 设置防抖延迟后展开
+      hoverTimeoutRef.current = setTimeout(() => {
+        setIsSidebarHovered(true);
+        setLayoutMode('edit');
+      }, 400); // 400ms 防抖
+    }
+  }, [sidebarMode]);
+
+  // 处理鼠标离开左侧栏 - 使用 useCallback 优化
+  const handleMouseLeave = useCallback(() => {
+    if (sidebarMode === 'smart') {
+      // 清除之前的进入定时器
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      
+      // 设置延迟收起，给用户反应时间
+      leaveTimeoutRef.current = setTimeout(() => {
+        setIsSidebarHovered(false);
+        setLayoutMode('chat');
+      }, 250); // 250ms 延迟
+    }
+  }, [sidebarMode]);
+
+  // 清理定时器
+  useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+      if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    };
+  }, []);
+
+  // 更新左侧栏模式（从设置面板调用）
+  const updateSidebarMode = useCallback((mode) => {
+    setSidebarMode(mode);
+    // 切换模式时重置悬停状态
+    setIsSidebarHovered(false);
+    if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+    if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
+    
+    if (mode === 'expanded') {
+      setLayoutMode('edit');
+    } else {
+      setLayoutMode('chat');
+    }
+  }, []);
+  
+  // 更新配色主题（从设置面板调用）
+  const updateColorTheme = useCallback((theme) => {
+    setColorTheme(theme);
+  }, []);
+
   return (
-    <div className="app">
-      <TopBar />
+    <div className={`app ${layoutMode}-mode`}>
+      <TopBar 
+        sidebarMode={sidebarMode}
+        colorTheme={colorTheme}
+        onSidebarModeChange={updateSidebarMode}
+        onColorThemeChange={updateColorTheme}
+      />
 
       {/* 主内容容器 */}
       <div className="main-container">
-        {/* 左侧栏 - 预设面板 */}
+        {/* 左侧栏 - 智能模式下悬停展开 */}
+        <div 
+          className={`sidebar-left-wrapper sidebar-mode-${sidebarMode} ${sidebarMode === 'smart' && isSidebarHovered ? 'sidebar-expanded' : ''}`}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
           <SideBarLeft />
+        </div>
 
         {/* 中间栏：聊天框 */}
-        <div className="chat-area">
-          <ChatBox />
+        <div className="chat-area-wrapper">
+          <div className="chat-area">
+            <ChatBox />
+          </div>
         </div>
 
         {/* 右侧栏 */}
+        <div className="sidebar-right-wrapper">
           <SideBarRight />
+        </div>
       </div>
     </div>
   );