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

frontend/src/components/TopBar/TopBar.jsx

@@ -1,14 +1,26 @@
 // frontend-react/src/components/TopBar/TopBar.jsx
-import React, {useState, useRef, useEffect} from 'react';
-import './TopBar.css';
-import ThemeToggle from './items/ThemeToggle';
+import React, { useState, useRef, useEffect } from 'react';
+import useAppLayoutStore from '../../Store/AppLayoutSlice'; // ✅ 新增
+import useUserStore from '../../Store/UserSlice'; // ✅ 新增 - 用户角色
 import useWorldBookStore from '../../Store/SideBarLeft/WorldBookSlice';
 import useApiConfigStore from '../../Store/SideBarLeft/ApiConfigSlice';
+import ThemeToggle from './items/ThemeToggle';
+import './TopBar.css';
 
-const Toolbar = ({ sidebarMode, colorTheme, onSidebarModeChange, onColorThemeChange }) => {
+const Toolbar = () => {
   const [activePanel, setActivePanel] = useState(null);
   const panelRef = useRef(null);
-  const [currentUserRole, setCurrentUserRole] = useState({ name: '', description: '' });
+  
+  // ✅ 直接从 AppLayoutStore 获取状态和方法
+  const {
+    sidebarMode,
+    colorTheme,
+    setSidebarMode,
+    setColorTheme
+  } = useAppLayoutStore();
+  
+  // ✅ 从 UserStore 获取用户角色
+  const { currentUserRole } = useUserStore();
   
   // 从 Store 获取全局世界书
   const { globalWorldBooks } = useWorldBookStore();
@@ -17,41 +29,6 @@ const Toolbar = ({ sidebarMode, colorTheme, onSidebarModeChange, onColorThemeCha
   const { activeMap, fetchProfile } = useApiConfigStore();
   const [coreModel, setCoreModel] = useState('未设置');
   const [assistModel, setAssistModel] = useState('未设置');
-  
-  // 加载核心和辅助 API 配置的模型名
-  useEffect(() => {
-    const loadApiModels = async () => {
-      // 加载核心配置
-      if (activeMap['core']) {
-        try {
-          const profile = await fetchProfile(activeMap['core']);
-          const coreApi = profile?.apis?.find(api => api.category === 'core');
-          setCoreModel(coreApi?.model || '未设置');
-        } catch (e) {
-          console.error('加载核心配置失败:', e);
-          setCoreModel('未设置');
-        }
-      } else {
-        setCoreModel('未设置');
-      }
-      
-      // 加载辅助配置
-      if (activeMap['assist']) {
-        try {
-          const profile = await fetchProfile(activeMap['assist']);
-          const assistApi = profile?.apis?.find(api => api.category === 'assist');
-          setAssistModel(assistApi?.model || '未设置');
-        } catch (e) {
-          console.error('加载辅助配置失败:', e);
-          setAssistModel('未设置');
-        }
-      } else {
-        setAssistModel('未设置');
-      }
-    };
-    
-    loadApiModels();
-  }, [activeMap, fetchProfile]);
 
   // 点击外部关闭面板 - 使用 useCallback 优化
   const handleClickOutside = React.useCallback((event) => {
@@ -67,17 +44,10 @@ const Toolbar = ({ sidebarMode, colorTheme, onSidebarModeChange, onColorThemeCha
     };
   }, [handleClickOutside]);
 
-  // 加载当前用户角色
-  useEffect(() => {
-    const savedRole = localStorage.getItem('currentUserRole');
-    if (savedRole) {
-      try {
-        setCurrentUserRole(JSON.parse(savedRole));
-      } catch (e) {
-        console.error('解析用户角色失败:', e);
-      }
-    }
-  }, []);
+  // ✅ 简化：直接调用 store 方法
+  const handleSidebarModeChange = (mode) => {
+    setSidebarMode(mode);
+  };
 
   // 处理面板切换
   const handlePanelToggle = (panelName) => {
@@ -218,7 +188,7 @@ const Toolbar = ({ sidebarMode, colorTheme, onSidebarModeChange, onColorThemeCha
                       name="sidebarMode" 
                       value="fixed"
                       checked={sidebarMode === 'fixed'}
-                      onChange={(e) => onSidebarModeChange(e.target.value)}
+                      onChange={(e) => handleSidebarModeChange(e.target.value)} // ✅ 使用 store 方法
                     />
                     <span>固定</span>
                   </label>
@@ -228,7 +198,7 @@ const Toolbar = ({ sidebarMode, colorTheme, onSidebarModeChange, onColorThemeCha
                       name="sidebarMode" 
                       value="smart"
                       checked={sidebarMode === 'smart'}
-                      onChange={(e) => onSidebarModeChange(e.target.value)}
+                      onChange={(e) => handleSidebarModeChange(e.target.value)} // ✅ 使用 store 方法
                     />
                     <span>智能</span>
                   </label>
@@ -238,7 +208,7 @@ const Toolbar = ({ sidebarMode, colorTheme, onSidebarModeChange, onColorThemeCha
                       name="sidebarMode" 
                       value="expanded"
                       checked={sidebarMode === 'expanded'}
-                      onChange={(e) => onSidebarModeChange(e.target.value)}
+                      onChange={(e) => handleSidebarModeChange(e.target.value)} // ✅ 使用 store 方法
                     />
                     <span>扩展</span>
                   </label>