补充css修改

frontend-react/src/App.jsx

@@ -14,9 +14,7 @@ function App() {
       {/* 主内容容器 */}
       <div className="main-container">
         {/* 左侧栏 - 预设面板 */}
-        <div className="sidebar-left">
           <SideBarLeft />
-        </div>
 
         {/* 中间栏：聊天框 */}
         <div className="chat-area">
@@ -24,11 +22,9 @@ function App() {
         </div>
 
         {/* 右侧栏 */}
-        <div className="sidebar-right">
           <SideBarRight />
       </div>
     </div>
-    </div>
   );
 }
 

frontend-react/src/Store/Slices/SideBarLeftSlice.jsx

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+const useSideBarLeftStore = create((set) => ({
+  activeTab: 'gallery',
+
+  tabs: [
+    { id: 'gallery', label: '🖼️ 画廊' },
+    { id: 'api', label: '🔌 API' },
+    { id: 'presets', label: '📋 预设' },
+    { id: 'worldbook', label: '🌍 世界书' }
+  ],
+
+  setActiveTab: (tab) => set({ activeTab: tab })
+}));
+
+export default useSideBarLeftStore;

frontend-react/src/Store/Slices/SideBarRightSlice.jsx

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+
+const useSideBarRightStore = create((set) => ({
+  selectedTabs: ['dice', 'macros'],
+
+  allTabs: [
+    { id: 'dice', label: '🎲 骰子与工具', component: null },
+    { id: 'debug', label: '🔍 上下文调试', component: null },
+    { id: 'macros', label: '🔧 快捷宏', component: null },
+    { id: 'table', label: '📊 动态表格', component: null }
+  ],
+
+  handleTabClick: (tabId) => set((state) => {
+    if (state.selectedTabs.includes(tabId)) {
+      // 如果已选中，则取消选中
+      return { selectedTabs: state.selectedTabs.filter(id => id !== tabId) };
+    } else if (state.selectedTabs.length < 2) {
+      // 如果未选中且少于2个，则添加
+      return { selectedTabs: [...state.selectedTabs, tabId] };
+    } else {
+      // 如果已有2个，则替换最早选中的
+      return { selectedTabs: [...state.selectedTabs.slice(1), tabId] };
+    }
+  }),
+
+  // 设置特定标签的组件
+  setTabComponent: (tabId, component) => set((state) => ({
+    allTabs: state.allTabs.map(tab =>
+      tab.id === tabId ? { ...tab, component } : tab
+    )
+  }))
+}));
+
+export default useSideBarRightStore;

frontend-react/src/Store/indexStore.jsx

@@ -1,2 +1,5 @@
 // frontend-react/src/store/index.js
-export { default as useRoleSelectorStore } from './roleSelectorStore';
+export { default as useRoleSelectorStore } from './Slices/RoleSelectorSlice';
+export { default as useSideBarLeftStore } from './Slices/SideBarLeftSlice';
+export { default as useSideBarRightStore } from './Slices/SideBarRightSlice';
+export { default as useChatBoxStore } from './Slices/ChatBoxSlice';

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

@@ -145,7 +145,7 @@
   flex-direction: column;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   overflow: hidden;
-  min-height: 140px;
+  height: 200px; /* 设置固定高度 */
   position: relative;
   /* 添加微妙的边框效果 */
   border: 1px solid rgba(0, 0, 0, 0.05);
@@ -167,7 +167,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex: 1;
+  flex: 0 0 auto; /* 不再自动伸缩，使用固定高度 */
+  height: 60px; /* 设置固定高度 */
 }
 
 .role-header .role-name {
@@ -177,12 +178,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 80%; /* 限制名称最大宽度 */
 }
 
+
 .role-item.active .role-header .role-name {
   color: #667eea;
+  font-size: 16px; /* 激活状态时字体稍大 */
 }
 
+
 .role-actions {
   display: flex;
   gap: 4px;
@@ -191,8 +196,10 @@
   right: 12px;
   opacity: 0;
   transition: opacity 0.2s ease;
+  z-index: 10; /* 确保操作按钮在最上层 */
 }
 
+
 .role-item:hover .role-actions {
   opacity: 1;
 }
@@ -227,13 +234,17 @@
   border-top: 1px solid #f0f0f0;
   padding: 8px 0;
   background-color: #fafbfc;
-  max-height: 140px;
+  height: 120px; /* 设置固定高度 */
   overflow-y: auto;
   /* 自定义滚动条样式 */
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 transparent;
+  flex: 1; /* 让聊天列表占据剩余空间 */
+  display: flex;
+  flex-direction: column;
 }
 
+
 /* Webkit浏览器滚动条样式 */
 .chat-list::-webkit-scrollbar {
   width: 4px;

frontend-react/src/components/SideBarLeft/SideBarLeft.css

@@ -1,42 +1,91 @@
-/* frontend-react/src/components/SideBarLeft/SideBarLeft.css */
 .sidebar-left {
   width: 250px;
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background-color: #ffffff;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+  border-right: 1px solid #e8e8e8;
+  transition: width 0.3s ease;
 }
 
 .sidebar-tabs {
   display: flex;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e8e8e8;
+  background-color: #fafafa;
+  padding: 0 10px;
 }
 
 .tab-button {
   flex: 1;
-  padding: 10px 5px;
+  padding: 12px 5px;
   background: none;
   border: none;
   cursor: pointer;
-  transition: background-color 0.3s;
+  transition: all 0.3s ease;
   font-size: 14px;
+  color: #555;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 }
 
 .tab-button:hover {
-  background-color: #f5f5f5;
+  background-color: #f0f0f0;
+  color: #333;
 }
 
 .tab-button.active {
-  border-bottom: 2px solid #4a90e2;
+  color: #4a90e2;
-  font-weight: bold;
+  font-weight: 600;
+}
+
+.tab-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: #4a90e2;
+  border-radius: 3px 3px 0 0;
 }
 
 .sidebar-content {
   flex: 1;
   overflow-y: auto;
-  padding: 10px;
+  padding: 15px;
 }
 
 .tab-content {
-  height: 100%;
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+
+/* 自定义滚动条样式 */
+.sidebar-content::-webkit-scrollbar,
+.tab-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-content::-webkit-scrollbar-track,
+.tab-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb,
+.tab-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb:hover,
+.tab-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }

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

@@ -1,40 +1,30 @@
 // frontend-react/src/components/SideBarLeft/SideBarLeft.jsx
-import React, { useState } from 'react';
+import React from 'react';
 import './SideBarLeft.css';
+import { useSideBarLeftStore } from '../../Store/indexStore';
+import useSideBarRightStore from '../../Store/Slices/SideBarLeftSlice';
 
 const SideBarLeft = () => {
-  const [activeTab, setActiveTab] = useState('gallery');
+  const { activeTab, tabs, setActiveTab } = useSideBarLeftStore();
-
-  const handleTabChange = (tab) => {
-    setActiveTab(tab);
-  };
 
   return (
     <div className="sidebar-left">
       <div className="sidebar-tabs">
+        {tabs.map(tab => (
           <button
-          className={`tab-button ${activeTab === 'gallery' ? 'active' : ''}`}
+            key={tab.id}
-          onClick={() => handleTabChange('gallery')}
+            className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.id)}
           >
-          🖼️ 画廊
+            {tab.label}
-        </button>
-        <button
-          className={`tab-button ${activeTab === 'config' ? 'active' : ''}`}
-          onClick={() => handleTabChange('config')}
-        >
-          ⚙️ 配置
-        </button>
-        <button
-          className={`tab-button ${activeTab === 'worldbook' ? 'active' : ''}`}
-          onClick={() => handleTabChange('worldbook')}
-        >
-          🌍 世界书
           </button>
+        ))}
       </div>
 
       <div className="sidebar-content">
         {activeTab === 'gallery' && <div className="tab-content">画廊内容</div>}
-        {activeTab === 'config' && <div className="tab-content">配置内容</div>}
+        {activeTab === 'api' && <div className="tab-content">API配置内容</div>}
+        {activeTab === 'presets' && <div className="tab-content">预设配置内容</div>}
         {activeTab === 'worldbook' && <div className="tab-content">世界书内容</div>}
       </div>
     </div>

frontend-react/src/components/SideBarRight/SideBarRight.css

@@ -1,56 +1,102 @@
-/* frontend-react/src/components/SideBarRight/SideBarRight.css */
 .sidebar-right {
   width: 300px;
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-}
+  background-color: #ffffff;
-
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.05);
-.right-top, .right-bottom {
+  border-left: 1px solid #e8e8e8;
-  display: flex;
+  transition: width 0.3s ease;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.right-top {
-  flex: 1;
-}
-
-.right-bottom {
-  height: 200px;
 }
 
 .sidebar-tabs {
   display: flex;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e8e8e8;
+  flex-shrink: 0;
+  background-color: #fafafa;
+  padding: 0 10px;
 }
 
 .tab-button {
   flex: 1;
-  padding: 10px 5px;
+  padding: 12px 5px;
   background: none;
   border: none;
   cursor: pointer;
-  transition: background-color 0.3s;
+  transition: all 0.3s ease;
   font-size: 14px;
+  color: #555;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
 }
 
 .tab-button:hover {
-  background-color: #f5f5f5;
+  background-color: #f0f0f0;
+  color: #333;
 }
 
 .tab-button.active {
-  border-bottom: 2px solid #4a90e2;
+  color: #4a90e2;
-  font-weight: bold;
+  font-weight: 600;
+}
+
+.tab-button.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: #4a90e2;
+  border-radius: 3px 3px 0 0;
 }
 
 .sidebar-content {
   flex: 1;
   overflow-y: auto;
-  padding: 10px;
+  display: flex;
+  flex-direction: column;
 }
 
 .tab-content {
-  height: 100%;
+  flex: 1;
+  overflow-y: auto;
+  padding: 15px;
+  border-bottom: 1px solid #f0f0f0;
 }
+
+
+.tab-content:last-child {
+  border-bottom: none;
+}
+
+.tab-content.full-height {
+  flex: 1;
+}
+
+/* 自定义滚动条样式 */
+.sidebar-content::-webkit-scrollbar,
+.tab-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-content::-webkit-scrollbar-track,
+.tab-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb,
+.tab-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.sidebar-content::-webkit-scrollbar-thumb:hover,
+.tab-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+

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

@@ -1,65 +1,41 @@
-// frontend-react/src/components/SideBarRight/SideBarRight.jsx
+import React, { useEffect } from 'react';
-import React, { useState } from 'react';
 import './SideBarRight.css';
 import DicePanel from '../DicePanel/DicePanel';
 import ImageDisplay from '../ImageDisplay/ImageDisplay';
+import useSideBarRightStore from '../../Store/Slices/SideBarRightSlice';
 
 const SideBarRight = () => {
-  const [topActiveTab, setTopActiveTab] = useState('dice');
+  const { selectedTabs, allTabs, handleTabClick, setTabComponent } = useSideBarRightStore();
-  const [bottomActiveTab, setBottomActiveTab] = useState('macros');
 
-  const handleTopTabChange = (tab) => {
+  // 设置标签组件
-    setTopActiveTab(tab);
+  useEffect(() => {
-  };
+    setTabComponent('dice', DicePanel);
-
+    // 可以在这里设置其他标签的组件
-  const handleBottomTabChange = (tab) => {
+  }, [setTabComponent]);
-    setBottomActiveTab(tab);
-  };
 
   return (
     <div className="sidebar-right">
-      <div className="right-top">
       <div className="sidebar-tabs">
+        {allTabs.map(tab => (
           <button
-            className={`tab-button ${topActiveTab === 'dice' ? 'active' : ''}`}
+            key={tab.id}
-            onClick={() => handleTopTabChange('dice')}
+            className={`tab-button ${selectedTabs.includes(tab.id) ? 'active' : ''}`}
+            onClick={() => handleTabClick(tab.id)}
           >
-            🎲 骰子与工具
+            {tab.label}
-          </button>
-          <button
-            className={`tab-button ${topActiveTab === 'debug' ? 'active' : ''}`}
-            onClick={() => handleTopTabChange('debug')}
-          >
-            🔍 上下文调试
           </button>
+        ))}
       </div>
 
       <div className="sidebar-content">
-          {topActiveTab === 'dice' && <DicePanel />}
+        {selectedTabs.map(tabId => {
-          {topActiveTab === 'debug' && <div className="tab-content">上下文调试内容</div>}
+          const tab = allTabs.find(t => t.id === tabId);
-        </div>
+          return (
-      </div>
+            <div key={tabId} className={`tab-content ${selectedTabs.length === 1 ? 'full-height' : ''}`}>
-
+              {tab.component ? <tab.component /> : <div className="tab-content">{tab.label}内容</div>}
-      <div className="right-bottom">
-        <div className="sidebar-tabs">
-          <button
-            className={`tab-button ${bottomActiveTab === 'macros' ? 'active' : ''}`}
-            onClick={() => handleBottomTabChange('macros')}
-          >
-            🔧 快捷宏
-          </button>
-          <button
-            className={`tab-button ${bottomActiveTab === 'table' ? 'active' : ''}`}
-            onClick={() => handleBottomTabChange('table')}
-          >
-            📊 动态表格
-          </button>
-        </div>
-
-        <div className="sidebar-content">
-          {bottomActiveTab === 'macros' && <div className="tab-content">快捷宏内容</div>}
-          {bottomActiveTab === 'table' && <div className="tab-content">动态表格内容</div>}
             </div>
+          );
+        })}
       </div>
     </div>
   );

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

@@ -65,7 +65,7 @@ const Toolbar = () => {
           <div className="toolbar-icons">
             <div
               className="toolbar-icon"
-              title="当前角色"
+              title="玩家角色"
               onClick={() => handlePanelToggle('currentRole')}
             >
               👤
@@ -82,11 +82,11 @@ const Toolbar = () => {
           <div className="toolbar-icons">
             <div
               className={`toolbar-icon ${activePanel === 'role' ? 'active' : ''}`}
-              title="角色管理"
+              title="ai角色"
               onClick={() => handlePanelToggle('role')}
             >
               🎭
-              <span className="icon-label">全局世界书</span>
+              <span className="icon-label">角色管理</span>
             </div>
             <div className="toolbar-display-box">
               {truncateText(getDisplayText())}

frontend-react/src/index.css

@@ -1,76 +1,21 @@
-/* frontend-react/src/index.css */
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100vh;
-  width: 100%;
-}
-
-.app {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-#root {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 重置样式 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html, body, .app {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-/* 主内容区域 */
-.main-container {
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-}
-
 /* 左侧栏 */
 .sidebar-left {
-  width: 250px;
+  width: 22.5%;  /* 修改为30% */
   height: 100%;
   overflow: hidden;
 }
 
 /* 中间聊天区域 */
 .chat-area {
-  flex: 1;
+  flex: 55%;  /* 修改为0.4 */
   height: 100%;
   display: flex;
-  flex-direction: column;
   overflow: hidden;
 }
 
 /* 右侧栏 */
 .sidebar-right {
-  width: 300px;
+  width: 22.5%;  /* 修改为30% */
   height: 100%;
   overflow: hidden;
 }
-
-.toolbar {
-  height: 60px;
-  flex-shrink: 0;
-}