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

frontend/src/components/Mid/ChatBox/ChatBox.jsx

@@ -1,24 +1,38 @@
 // frontend-react/src/components/ChatBox/ChatBox.jsx
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import useChatBoxStore from '../../../Store/Mid/ChatBoxSlice';
+import useChatBoxUIStore from '../../../Store/Mid/ChatBoxUISlice'; // ✅ 新增
 import MarkdownRenderer from '../../shared/MarkdownRenderer';
 import './ChatBox.css';
 
 const ChatBox = () => {
-  const [editingId, setEditingId] = useState(null);
-  const [editContent, setEditContent] = useState('');
   const messagesEndRef = useRef(null);
-  const [inputValue, setInputValue] = useState('');
-  const [showOptions, setShowOptions] = useState(false);
   const optionsRef = useRef(null);
-  
-  // 聊天选择器相关状态
-  const [showChatSelector, setShowChatSelector] = useState(false);
-  const [characterChats, setCharacterChats] = useState([]);
   const chatSelectorRef = useRef(null);
 
-  // 新增：管理每条消息的当前显示的swipe版本
-  const [currentSwipeId, setCurrentSwipeId] = useState({});
+  // ✅ 从 ChatBoxUIStore 获取 UI 状态
+  const {
+    editingId,
+    editContent,
+    inputValue,
+    showOptions,
+    showChatSelector,
+    characterChats,
+    currentSwipeId,
+    inputHeight,
+    startEditing,
+    cancelEditing,
+    updateEditContent,
+    setInputValue,
+    clearInput,
+    toggleOptions,
+    setShowOptions,
+    toggleChatSelector,
+    setShowChatSelector,
+    setCharacterChats,
+    setCurrentSwipeId,
+    setInputHeight
+  } = useChatBoxUIStore();
 
   // 从 ChatBoxStore 获取状态和方法
   const {
@@ -35,8 +49,6 @@ const ChatBox = () => {
     toggleOption
   } = useChatBoxStore();
 
-  const [inputHeight, setInputHeight] = useState(42);
-
   // 点击外部关闭选项面板
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -88,8 +100,8 @@ const ChatBox = () => {
       stopGeneration();
     } else {
       sendMessage(inputValue);
-      setInputValue('');
-      setInputHeight(24); // 重置为一行高度
+      clearInput(); // ✅ 使用 store 方法
+      setInputHeight(42); // ✅ 重置为一行高度
     }
   };
 
@@ -112,22 +124,19 @@ const ChatBox = () => {
 
   // 处理编辑消息
   const handleEdit = (message) => {
-    setEditingId(message.floor);
-    setEditContent(message.mes);
+    startEditing(message.floor, message.mes); // ✅ 使用 store 方法
   };
 
   // 保存编辑
   const handleSaveEdit = (messageId) => {
     // 调用 store 中的 updateMessage 方法
     updateMessage(messageId, editContent);
-    setEditingId(null);
-    setEditContent('');
+    cancelEditing(); // ✅ 使用 store 方法
   };
 
   // 取消编辑
   const handleCancelEdit = () => {
-    setEditingId(null);
-    setEditContent('');
+    cancelEditing(); // ✅ 使用 store 方法
   };
 
   // 新增：处理swipe切换
@@ -140,17 +149,14 @@ const ChatBox = () => {
       const newIndex = currentIndex + direction;
 
       if (newIndex >= 0 && newIndex < message.swipes.length) {
-        setCurrentSwipeId(prev => ({
-          ...prev,
-          [messageId]: newIndex
-        }));
+        setCurrentSwipeId({ [messageId]: newIndex }); // ✅ 使用 store 方法
       }
     }
   };
 
   // 切换选项显示
   const toggleOptionsPanel = () => {
-    setShowOptions(!showOptions);
+    toggleOptions(); // ✅ 使用 store 方法
   };
   
   // 打开聊天选择器
@@ -169,10 +175,10 @@ const ChatBox = () => {
       if (!response.ok) throw new Error('获取聊天列表失败');
       
       const chats = await response.json();
-      setCharacterChats(chats);
+      setCharacterChats(chats); // ✅ 使用 store 方法
       
       // 显示聊天选择器弹窗，让用户手动选择
-      setShowChatSelector(true);
+      toggleChatSelector(); // ✅ 使用 store 方法
     } catch (error) {
       console.error('获取聊天列表失败:', error);
       alert('获取聊天列表失败: ' + error.message);
@@ -182,16 +188,13 @@ const ChatBox = () => {
   // 选择聊天并加载
   const handleSelectChat = async (chatName) => {
     try {
-      const { setChatBoxRoleAndChat, fetchChatHistory, currentRole } = useChatBoxStore.getState();
+      const { setChatBoxRoleAndChat, currentRole } = useChatBoxStore.getState();
       
-      // 设置当前角色和聊天
+      // 设置当前角色和聊天，这会触发 ChatBoxStore 的监听器自动加载聊天历史
       setChatBoxRoleAndChat(currentRole, chatName);
       
-      // 加载聊天历史
-      await fetchChatHistory(currentRole, chatName);
-      
       // 关闭选择器
-      setShowChatSelector(false);
+      setShowChatSelector(false); // ✅ 使用 store 方法
       
       console.log(`已切换到聊天: ${chatName}`);
     } catch (error) {
@@ -336,7 +339,7 @@ const ChatBox = () => {
             <button
               className={`options-toggle ${showOptions ? 'active' : ''}`}
               title="Toggle Options"
-              onClick={() => setShowOptions(!showOptions)}
+              onClick={toggleOptions} // ✅ 使用 store 方法
             >
               {showOptions ? '×' : '≡'}
             </button>