update

web/src/apps/muse/index.tsx

@@ -1,12 +1,13 @@
 import { ToastContainer, toast } from 'react-toastify';
 import { AuthProvider } from '../login/AuthProvider';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
-import { useState, useRef } from 'react';
+import { useRef } from 'react';
 
 import { App as Voice } from './voice/index.tsx';
 import { ChatInterface } from './prompts/index.tsx';
 import { BaseApp } from './base/index.tsx';
 import { exampleUsage, markService } from './modules/mark-service.ts';
+import { useMuseSetting } from './store/museSetting.ts';
 
 const LeftPanel = () => {
   return (
@@ -44,9 +45,14 @@ const RightPanel = ({ isVisible }: { isVisible: boolean }) => {
 };
 
 export const MuseApp = () => {
-  const [showRightPanel, setShowRightPanel] = useState(true);
-  const [showLeftPanel, setShowLeftPanel] = useState(true);
-  const [showCenterPanel, setShowCenterPanel] = useState(true);
+  const {
+    showRightPanel,
+    showLeftPanel,
+    showCenterPanel,
+    toggleRightPanel,
+    toggleLeftPanel,
+    toggleCenterPanel,
+  } = useMuseSetting();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   // 导出数据库
@@ -112,7 +118,7 @@ export const MuseApp = () => {
       <div className="bg-white border-b border-gray-200 p-2 z-10">
         <div className="flex gap-2">
           <button
-            onClick={() => setShowLeftPanel(!showLeftPanel)}
+            onClick={toggleLeftPanel}
             className={`px-3 py-1 rounded text-sm ${showLeftPanel
               ? 'bg-blue-500 text-white'
               : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
@@ -121,7 +127,7 @@ export const MuseApp = () => {
             资料库
           </button>
           <button
-            onClick={() => setShowCenterPanel(!showCenterPanel)}
+            onClick={toggleCenterPanel}
             className={`px-3 py-1 rounded text-sm ${showCenterPanel
               ? 'bg-blue-500 text-white'
               : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
@@ -130,7 +136,7 @@ export const MuseApp = () => {
             智能工作台
           </button>
           <button
-            onClick={() => setShowRightPanel(!showRightPanel)}
+            onClick={toggleRightPanel}
             className={`px-3 py-1 rounded text-sm ${showRightPanel
               ? 'bg-blue-500 text-white'
               : 'bg-gray-200 text-gray-700 hover:bg-gray-300'

web/src/apps/muse/store/museSetting.ts

@@ -0,0 +1,55 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface MuseSettingState {
+  // 面板显示状态
+  showRightPanel: boolean;
+  showLeftPanel: boolean;
+  showCenterPanel: boolean;
+  
+  // 切换面板显示状态的方法
+  toggleRightPanel: () => void;
+  toggleLeftPanel: () => void;
+  toggleCenterPanel: () => void;
+  
+  // 设置面板状态的方法
+  setShowRightPanel: (show: boolean) => void;
+  setShowLeftPanel: (show: boolean) => void;
+  setShowCenterPanel: (show: boolean) => void;
+}
+
+export const useMuseSetting = create<MuseSettingState>()(
+  persist(
+    (set) => ({
+      // 默认状态 - 所有面板都显示
+      showRightPanel: true,
+      showLeftPanel: true,
+      showCenterPanel: true,
+      
+      // 切换方法
+      toggleRightPanel: () => 
+        set((state) => ({ showRightPanel: !state.showRightPanel })),
+      toggleLeftPanel: () => 
+        set((state) => ({ showLeftPanel: !state.showLeftPanel })),
+      toggleCenterPanel: () => 
+        set((state) => ({ showCenterPanel: !state.showCenterPanel })),
+      
+      // 设置方法
+      setShowRightPanel: (show: boolean) => 
+        set({ showRightPanel: show }),
+      setShowLeftPanel: (show: boolean) => 
+        set({ showLeftPanel: show }),
+      setShowCenterPanel: (show: boolean) => 
+        set({ showCenterPanel: show }),
+    }),
+    {
+      name: 'muse-settings', // localStorage 中的 key
+      // 可选：指定要持久化的字段
+      partialize: (state) => ({
+        showRightPanel: state.showRightPanel,
+        showLeftPanel: state.showLeftPanel,
+        showCenterPanel: state.showCenterPanel,
+      }),
+    }
+  )
+);