初步迁移状态完成，成功做到显示当前角色、聊天

frontend-react/src/components/RoleSelector/RoleSelector.jsx

@@ -1,55 +1,52 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
+import useRoleSelectorStore from '../../store/Slices/RoleSelectorSlice';
 import './RoleSelector.css';
 
 const RoleSelector = ({ onRoleChange, onChatChange }) => {
-  const [roleData, setRoleData] = useState({});
-  const [selectedRole, setSelectedRole] = useState(null);
-  const [selectedChat, setSelectedChat] = useState(null);
-  const [hoveredRole, setHoveredRole] = useState(null);
-  const [clickedRole, setClickedRole] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [editingRole, setEditingRole] = useState(null);
-  const [editingChat, setEditingChat] = useState(null);
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(null);
-  const [deleteType, setDeleteType] = useState(null);
   const panelRef = useRef(null);
 
-  // 获取角色和聊天数据
-  const fetchRoleData = async () => {
-    setIsLoading(true);
-    try {
-      const response = await fetch('/api/tool_bar/get_all_role_and_chat', {
-        method: 'GET',
-        headers: {
-          'Cache-Control': 'no-cache',
-          'Pragma': 'no-cache',
-          'Expires': '0'
-        }
-      });
-      const data = await response.json();
-      setRoleData(data);
-    } catch (error) {
-      console.error('获取角色数据失败:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  // 从 Zustand store 中获取状态和操作
+  const {
+    roleData,
+    selectedRole,
+    selectedChat,
+    hoveredRole,
+    clickedRole,
+    isLoading,
+    searchTerm,
+    editingRole,
+    editingChat,
+    showDeleteConfirm,
+    deleteType,
+    fetchRoleData,
+    setSelectedRole,
+    setSelectedChat,
+    setHoveredRole,
+    setClickedRole,
+    setSearchTerm,
+    setEditingRole,
+    setEditingChat,
+    setShowDeleteConfirm,
+    setDeleteType,
+    handleRenameRole,
+    handleRenameChat,
+    confirmDelete,
+    cancelDelete,
+    handleAddRole,
+    handleAddChat,
+    resetPanel
+  } = useRoleSelectorStore();
 
   // 组件挂载时获取数据
   useEffect(() => {
     fetchRoleData();
-  }, []);
+  }, [fetchRoleData]);
 
   // 点击外部关闭面板
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (panelRef.current && !panelRef.current.contains(event.target)) {
-        setHoveredRole(null);
-        setClickedRole(null);
-        setEditingRole(null);
-        setEditingChat(null);
-        setShowDeleteConfirm(null);
+        resetPanel();
       }
     };
 
@@ -57,7 +54,7 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, []);
+  }, [resetPanel]);
 
   // 处理角色选择
   const handleRoleSelect = (role) => {
@@ -110,24 +107,15 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
   };
 
   // 处理角色重命名
-  const handleRenameRole = (e, oldName) => {
+  const handleRenameRoleWrapper = (e, oldName) => {
     e.stopPropagation();
     const newName = e.target.value;
-    if (newName && newName !== oldName) {
-      const newRoleData = { ...roleData };
-      const chats = newRoleData[oldName];
-      delete newRoleData[oldName];
-      newRoleData[newName] = chats;
-      setRoleData(newRoleData);
-
-      if (selectedRole === oldName) {
-        setSelectedRole(newName);
-        if (onRoleChange) {
-          onRoleChange(newName);
-        }
+    handleRenameRole(oldName, newName);
+    if (selectedRole === oldName && newName && newName !== oldName) {
+      if (onRoleChange) {
+        onRoleChange(newName);
       }
     }
-    setEditingRole(null);
   };
 
   // 处理聊天编辑
@@ -137,25 +125,15 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
   };
 
   // 处理聊天重命名
-  const handleRenameChat = (e, oldName) => {
+  const handleRenameChatWrapper = (e, oldName) => {
     e.stopPropagation();
     const newName = e.target.value;
-    if (newName && newName !== oldName) {
-      const newRoleData = { ...roleData };
-      const chatIndex = newRoleData[selectedRole].indexOf(oldName);
-      if (chatIndex !== -1) {
-        newRoleData[selectedRole][chatIndex] = newName;
-        setRoleData(newRoleData);
-
-        if (selectedChat === oldName) {
-          setSelectedChat(newName);
-          if (onChatChange) {
-            onChatChange(selectedRole, newName);
-          }
-        }
+    handleRenameChat(oldName, newName);
+    if (selectedChat === oldName && newName && newName !== oldName) {
+      if (onChatChange) {
+        onChatChange(selectedRole, newName);
       }
     }
-    setEditingChat(null);
   };
 
   // 处理删除确认
@@ -166,62 +144,17 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
   };
 
   // 确认删除
-  const confirmDelete = () => {
-    if (deleteType === 'role') {
-      const newRoleData = { ...roleData };
-      delete newRoleData[showDeleteConfirm];
-      setRoleData(newRoleData);
-
-      if (selectedRole === showDeleteConfirm) {
-        setSelectedRole(null);
-        setSelectedChat(null);
-        if (onRoleChange) {
-          onRoleChange(null);
-        }
+  const confirmDeleteWrapper = () => {
+    confirmDelete();
+    if (deleteType === 'role' && selectedRole === showDeleteConfirm) {
+      if (onRoleChange) {
+        onRoleChange(null);
       }
-    } else if (deleteType === 'chat') {
-      const newRoleData = { ...roleData };
-      const chatIndex = newRoleData[selectedRole].indexOf(showDeleteConfirm);
-      if (chatIndex !== -1) {
-        newRoleData[selectedRole].splice(chatIndex, 1);
-        setRoleData(newRoleData);
-
-        if (selectedChat === showDeleteConfirm) {
-          setSelectedChat(null);
-          if (onChatChange) {
-            onChatChange(selectedRole, null);
-          }
-        }
+    } else if (deleteType === 'chat' && selectedChat === showDeleteConfirm) {
+      if (onChatChange) {
+        onChatChange(selectedRole, null);
       }
     }
-    setShowDeleteConfirm(null);
-    setDeleteType(null);
-  };
-
-  // 取消删除
-  const cancelDelete = () => {
-    setShowDeleteConfirm(null);
-    setDeleteType(null);
-  };
-
-  // 处理新增角色
-  const handleAddRole = () => {
-    const newRole = '新角色';
-    const newRoleData = { ...roleData };
-    newRoleData[newRole] = [];
-    setRoleData(newRoleData);
-    setEditingRole(newRole);
-  };
-
-  // 处理新增聊天
-  const handleAddChat = () => {
-    if (!selectedRole) return;
-
-    const newChat = '新聊天';
-    const newRoleData = { ...roleData };
-    newRoleData[selectedRole].push(newChat);
-    setRoleData(newRoleData);
-    setEditingChat(newChat);
   };
 
   // 过滤角色
@@ -231,165 +164,144 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
 
   return (
     <div className="role-selector" ref={panelRef}>
-      <div className="role-panel">
-        <div className="panel-controls">
-          <div className="search-box">
-            <input
-              type="text"
-              placeholder="搜索角色..."
-              value={searchTerm}
-              onChange={handleSearchChange}
-            />
+      <div className="selected-role-display">
+        {selectedRole ? (
+          <div className="role-badge">
+            <span className="role-label">当前角色/聊天:</span>
+            <span className="role-name">{selectedRole}</span>
+            {selectedChat && <span className="chat-name">/ {selectedChat}</span>}
           </div>
-          <button className="add-button" onClick={handleAddRole}>
-            <span className="icon">+</span>
-            <span>新增角色</span>
-          </button>
-        </div>
+        ) : (
+          <div className="role-badge empty">
+            <span>未选择角色</span>
+          </div>
+        )}
+      </div>
 
-        <div className="panel-list-container">
-          {isLoading ? (
-            <div className="loading-container">
-              <div className="loading-spinner"></div>
-              <span>加载中...</span>
-            </div>
-          ) : filteredRoles.length === 0 ? (
-            <div className="empty-state">
-              <p>没有找到匹配的角色</p>
-            </div>
-          ) : (
-            <div className="role-cards-grid">
-              {filteredRoles.map(role => (
-                <div
-                  key={role}
-                  className={`role-card ${selectedRole === role ? 'selected' : ''} ${hoveredRole === role ? 'hovered' : ''} ${clickedRole === role ? 'clicked' : ''}`}
-                  onClick={() => handleRoleCardClick(role)}
-                  onMouseEnter={() => setHoveredRole(role)}
-                  onMouseLeave={() => setHoveredRole(null)}
-                >
-                  <div className="role-card-header">
-                    {editingRole === role ? (
-                      <input
-                        type="text"
-                        defaultValue={role}
-                        autoFocus
-                        onBlur={(e) => handleRenameRole(e, role)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') {
-                            handleRenameRole(e, role);
-                          }
-                        }}
-                        onClick={(e) => e.stopPropagation()}
-                      />
-                    ) : (
-                      <div className="role-name">{role}</div>
-                    )}
+      <div className="search-bar">
+        <input
+          type="text"
+          placeholder="搜索角色..."
+          value={searchTerm}
+          onChange={handleSearchChange}
+        />
+      </div>
 
-                    <div className="role-chat-count">
-                      {roleData[role] ? roleData[role].length : 0} 个聊天
-                    </div>
-                  </div>
+      <div className="role-list">
+        {isLoading ? (
+          <div className="loading">加载中...</div>
+        ) : filteredRoles.length === 0 ? (
+          <div className="empty-state">
+            <p>没有找到匹配的角色</p>
+          </div>
+        ) : (
+          filteredRoles.map(role => (
+            <div
+              key={role}
+              className={`role-item ${selectedRole === role ? 'active' : ''}`}
+              onClick={() => handleRoleCardClick(role)}
+              onMouseEnter={() => setHoveredRole(role)}
+              onMouseLeave={() => setHoveredRole(null)}
+            >
+              <div className="role-header">
+                {editingRole === role ? (
+                  <input
+                    type="text"
+                    defaultValue={role}
+                    autoFocus
+                    onBlur={(e) => handleRenameRoleWrapper(e, role)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleRenameRoleWrapper(e, role);
+                      }
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                ) : (
+                  <div className="role-name">{role}</div>
+                )}
 
-                  <div className="role-card-actions">
-                    {editingRole !== role && (
-                      <>
-                        <button
-                          className="action-button edit-button"
-                          title="编辑"
-                          onClick={(e) => handleEditRole(e, role)}
-                        >
-                          ✏️
-                        </button>
-                        <button
-                          className="action-button delete-button"
-                          title="删除"
-                          onClick={(e) => handleDeleteClick(e, 'role', role)}
-                        >
-                          🗑️
-                        </button>
-                      </>
-                    )}
-                  </div>
+                <div className="role-actions">
+                  <button
+                    className="icon-btn"
+                    title="编辑"
+                    onClick={(e) => handleEditRole(e, role)}
+                  >
+                    ✏️
+                  </button>
+                  <button
+                    className="icon-btn delete"
+                    title="删除"
+                    onClick={(e) => handleDeleteClick(e, 'role', role)}
+                  >
+                    🗑️
+                  </button>
+                </div>
+              </div>
 
-                  {/* 聊天列表 */}
-                  {(hoveredRole === role || clickedRole === role) && roleData[role] && roleData[role].length > 0 && (
-                    <div className="chat-list">
-                      <div className="chat-list-header">
-                        <span>聊天记录</span>
-                        <button
-                          className="add-chat-button"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleAddChat();
-                          }}
-                        >
-                          <span className="icon">+</span>
-                          <span>新建聊天</span>
-                        </button>
+              {/* 聊天列表 */}
+              {(hoveredRole === role || clickedRole === role) && roleData[role] && roleData[role].length > 0 && (
+                <div className="chat-list">
+                  {roleData[role].map(chat => (
+                    <div
+                      key={chat}
+                      className={`chat-item ${selectedChat === chat ? 'active' : ''}`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleChatSelect(chat);
+                      }}
+                    >
+                      <div className="chat-content">
+                        {editingChat === chat ? (
+                          <input
+                            type="text"
+                            defaultValue={chat}
+                            autoFocus
+                            onBlur={(e) => handleRenameChatWrapper(e, chat)}
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') {
+                                handleRenameChatWrapper(e, chat);
+                              }
+                            }}
+                            onClick={(e) => e.stopPropagation()}
+                          />
+                        ) : (
+                          <div className="chat-name">{chat}</div>
+                        )}
                       </div>
 
-                      {roleData[role].map(chat => (
-                        <div
-                          key={chat}
-                          className={`chat-item ${selectedChat === chat ? 'selected' : ''}`}
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleChatSelect(chat);
-                          }}
-                        >
-                          <div className="chat-content">
-                            {editingChat === chat ? (
-                              <input
-                                type="text"
-                                defaultValue={chat}
-                                autoFocus
-                                onBlur={(e) => handleRenameChat(e, chat)}
-                                onKeyDown={(e) => {
-                                  if (e.key === 'Enter') {
-                                    handleRenameChat(e, chat);
-                                  }
-                                }}
-                                onClick={(e) => e.stopPropagation()}
-                              />
-                            ) : (
-                              <div className="chat-name">{chat}</div>
-                            )}
-                          </div>
-
-                          <div className="chat-actions">
-                            {editingChat !== chat && (
-                              <>
-                                <button
-                                  className="action-button edit-button"
-                                  title="编辑"
-                                  onClick={(e) => handleEditChat(e, chat)}
-                                >
-                                  ✏️
-                                </button>
-                                <button
-                                  className="action-button delete-button"
-                                  title="删除"
-                                  onClick={(e) => handleDeleteClick(e, 'chat', chat)}
-                                >
-                                  🗑️
-                                </button>
-                              </>
-                            )}
-                          </div>
-                        </div>
-                      ))}
+                      <div className="chat-actions">
+                        {editingChat !== chat && (
+                          <>
+                            <button
+                              className="icon-btn"
+                              title="编辑"
+                              onClick={(e) => handleEditChat(e, chat)}
+                            >
+                              ✏️
+                            </button>
+                            <button
+                              className="icon-btn delete"
+                              title="删除"
+                              onClick={(e) => handleDeleteClick(e, 'chat', chat)}
+                            >
+                              🗑️
+                            </button>
+                          </>
+                        )}
+                      </div>
                     </div>
-                  )}
+                  ))}
                 </div>
-              ))}
+              )}
             </div>
-          )}
-        </div>
+          ))
+        )}
       </div>
 
       {/* 删除确认对话框 */}
       {showDeleteConfirm && (
-        <div className="modal-overlay">
+        <div className="delete-confirm-modal">
           <div className="modal-content">
             <h3>确认删除</h3>
             <p>确定要删除{deleteType === 'role' ? '角色' : '聊天'} "{showDeleteConfirm}" 吗？</p>
@@ -397,7 +309,7 @@ const RoleSelector = ({ onRoleChange, onChatChange }) => {
               <button className="modal-button cancel-button" onClick={cancelDelete}>
                 取消
               </button>
-              <button className="modal-button confirm-button" onClick={confirmDelete}>
+              <button className="modal-button danger" onClick={confirmDeleteWrapper}>
                 确认删除
               </button>
             </div>