完成前端初步重构、实现显示选中角色功能

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

@@ -1,10 +1,14 @@
-import React, { useState, useRef } from 'react';
+// frontend-react/src/components/ToolBar/ToolBar.jsx
+import React, { useState, useRef, useEffect } from 'react';
 import RoleSelector from '../RoleSelector/RoleSelector';
+import useRoleSelectorStore from '../../Store/Slices/RoleSelectorSlice';
 import './ToolBar.css';
 
 const Toolbar = () => {
   const [activePanel, setActivePanel] = useState(null);
   const panelRef = useRef(null);
+  const selectedRole = useRoleSelectorStore((state) => state.selectedRole);
+  const selectedChat = useRoleSelectorStore((state) => state.selectedChat);
 
   // 点击外部关闭面板
   React.useEffect(() => {
@@ -20,6 +24,13 @@ const Toolbar = () => {
     };
   }, []);
 
+  // 监听selectedRole和selectedChat的变化
+  useEffect(() => {
+    console.log('当前选中的角色:', selectedRole);
+    console.log('当前选中的聊天:', selectedChat);
+    // 这里可以添加其他需要响应角色变化的逻辑
+  }, [selectedRole, selectedChat]);
+
   // 处理面板切换
   const handlePanelToggle = (panelName) => {
     if (activePanel === panelName) {
@@ -34,38 +45,73 @@ const Toolbar = () => {
     setActivePanel(null);
   };
 
+  // 截断文本
+  const truncateText = (text, maxLength = 20) => {
+    if (!text) return '未选择';
+    return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+  };
+
+  // 构建显示文本
+  const getDisplayText = () => {
+    if (!selectedRole) return '未选择';
+    return selectedChat ? `${selectedRole} / ${selectedChat}` : selectedRole;
+  };
+
   return (
     <>
       <div className="toolbar">
-        {/* 左侧工具栏图标 */}
+        {/* 左侧：当前角色 */}
         <div className="toolbar-section">
           <div className="toolbar-icons">
-            {/* Logo图标 */}
             <div
               className="toolbar-icon"
-              title="首页"
-              onClick={() => handlePanelToggle(null)}
+              title="当前角色"
+              onClick={() => handlePanelToggle('currentRole')}
             >
-              🤖
+              👤
+              <span className="icon-label">当前角色</span>
+            </div>
+            <div className="toolbar-display-box">
+              {truncateText(getDisplayText())}
             </div>
           </div>
         </div>
 
-        {/* 中间操作图标 */}
+        {/* 中间：角色管理 */}
         <div className="toolbar-section">
           <div className="toolbar-icons">
-            {/* 角色选择图标 */}
             <div
               className={`toolbar-icon ${activePanel === 'role' ? 'active' : ''}`}
               title="角色管理"
               onClick={() => handlePanelToggle('role')}
             >
-              👤
+              🎭
+              <span className="icon-label">全局世界书</span>
+            </div>
+            <div className="toolbar-display-box">
+              {truncateText(getDisplayText())}
             </div>
           </div>
         </div>
 
-        {/* 右侧工具栏图标 */}
+        {/* 全局世界书 */}
+        <div className="toolbar-section">
+          <div className="toolbar-icons">
+            <div
+              className="toolbar-icon"
+              title="全局世界书"
+              onClick={() => handlePanelToggle('worldBook')}
+            >
+              📚
+              <span className="icon-label">全局世界书</span>
+            </div>
+            <div className="toolbar-display-box">
+              全局世界书
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧：设置和拓展 */}
         <div className="toolbar-section">
           <div className="toolbar-icons" style={{ justifyContent: 'flex-end' }}>
             <div
@@ -77,10 +123,10 @@ const Toolbar = () => {
             </div>
             <div
               className="toolbar-icon"
-              title="帮助"
-              onClick={() => handlePanelToggle('help')}
+              title="拓展"
+              onClick={() => handlePanelToggle('extensions')}
             >
-              ❓
+              ➕
             </div>
           </div>
         </div>
@@ -91,7 +137,7 @@ const Toolbar = () => {
         <div className="panel-overlay" ref={panelRef}>
           <div className="panel-content">
             <div className="panel-header">
-              <h3>角色管理</h3>
+              <h3>用户角色管理</h3>
               <button className="close-panel-button" onClick={handleClosePanel} title="关闭">
                 ✕
               </button>
@@ -103,33 +149,69 @@ const Toolbar = () => {
         </div>
       )}
 
-      {activePanel === 'settings' && (
+      {/* 当前角色面板（暂时留空） */}
+      {activePanel === 'currentRole' && (
         <div className="panel-overlay" ref={panelRef}>
           <div className="panel-content">
             <div className="panel-header">
-              <h3>设置</h3>
+              <h3>当前ai角色</h3>
               <button className="close-panel-button" onClick={handleClosePanel} title="关闭">
                 ✕
               </button>
             </div>
             <div className="panel-body">
-              <p>设置内容...</p>
+              <p>当前角色详情...</p>
             </div>
           </div>
         </div>
       )}
 
-      {activePanel === 'help' && (
+      {/* 全局世界书面板 */}
+      {activePanel === 'worldBook' && (
         <div className="panel-overlay" ref={panelRef}>
           <div className="panel-content">
             <div className="panel-header">
-              <h3>帮助</h3>
+              <h3>全局世界书</h3>
               <button className="close-panel-button" onClick={handleClosePanel} title="关闭">
                 ✕
               </button>
             </div>
             <div className="panel-body">
-              <p>帮助内容...</p>
+              <p>全局世界书内容...</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 设置面板 */}
+      {activePanel === 'settings' && (
+        <div className="panel-overlay" ref={panelRef}>
+          <div className="panel-content">
+            <div className="panel-header">
+              <h3>系统设置</h3>
+              <button className="close-panel-button" onClick={handleClosePanel} title="关闭">
+                ✕
+              </button>
+            </div>
+            <div className="panel-body">
+              <p>系统设置内容...</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 拓展面板 */}
+      {activePanel === 'extensions' && (
+        <div className="panel-overlay" ref={panelRef}>
+          <div className="panel-content">
+            <div className="panel-header">
+              <h3>功能拓展</h3>
+              <button className="close-panel-button" onClick={handleClosePanel} title="关闭">
+                ✕
+              </button>
+            </div>
+            <div className="panel-body">
+              <p>功能拓展内容...</p>
             </div>
           </div>
         </div>
@@ -138,4 +220,4 @@ const Toolbar = () => {
   );
 };
 
-export default Toolbar;
+export default Toolbar;