完成大量美化，zustand迁移，动态表格修复

frontend/src/App.jsx

@@ -1,43 +1,28 @@
 // frontend-react/src/App.jsx
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react'; // ✅ 移除 useState
 import TopBar from './components/TopBar';
 import { ChatBox } from './components/Mid';
 import SideBarLeft from './components/SideBarLeft';
 import SideBarRight from './components/SideBarRight';
+import useAppLayoutStore from './Store/AppLayoutSlice'; // ✅ 新增
 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);
-  
+  // ✅ 从 AppLayoutStore 获取状态和方法
+  const {
+    layoutMode,
+    sidebarMode,
+    isSidebarHovered,
+    colorTheme,
+    setLayoutMode,
+    setSidebarMode,
+    setSidebarHovered,
+    setColorTheme
+  } = useAppLayoutStore();
+
   // 防抖定时器引用
   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(() => {
@@ -49,11 +34,11 @@ function App() {
       
       // 设置防抖延迟后展开
       hoverTimeoutRef.current = setTimeout(() => {
-        setIsSidebarHovered(true);
+        setSidebarHovered(true); // ✅ 使用 store 方法
         setLayoutMode('edit');
       }, 400); // 400ms 防抖
     }
-  }, [sidebarMode]);
+  }, [sidebarMode, setSidebarHovered, setLayoutMode]);
 
   // 处理鼠标离开左侧栏 - 使用 useCallback 优化
   const handleMouseLeave = useCallback(() => {
@@ -65,11 +50,11 @@ function App() {
       
       // 设置延迟收起，给用户反应时间
       leaveTimeoutRef.current = setTimeout(() => {
-        setIsSidebarHovered(false);
+        setSidebarHovered(false); // ✅ 使用 store 方法
         setLayoutMode('chat');
       }, 250); // 250ms 延迟
     }
-  }, [sidebarMode]);
+  }, [sidebarMode, setSidebarHovered, setLayoutMode]);
 
   // 清理定时器
   useEffect(() => {
@@ -79,34 +64,10 @@ function App() {
     };
   }, []);
 
-  // 更新左侧栏模式（从设置面板调用）
-  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 ${layoutMode}-mode`}>
-      <TopBar 
-        sidebarMode={sidebarMode}
-        colorTheme={colorTheme}
-        onSidebarModeChange={updateSidebarMode}
-        onColorThemeChange={updateColorTheme}
-      />
+      {/* ✅ TopBar 不再需要 props，直接从 Store 读取状态 */}
+      <TopBar />
 
       {/* 主内容容器 */}
       <div className="main-container">