From 8b99eec440c061fe3993b801698f77d4112d3be9 Mon Sep 17 00:00:00 2001
From: "1808837298@qq.com" <1808837298@qq.com>
Date: Mon, 10 Mar 2025 19:48:17 +0800
Subject: [PATCH] refactor: Improve sidebar state management and layout
 responsiveness

---
 web/src/components/PageLayout.js |  2 +-
 web/src/components/SiderBar.js   | 10 +++++-----
 web/src/context/Style/index.js   | 11 +++++++++++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/web/src/components/PageLayout.js b/web/src/components/PageLayout.js
index c6c6759f..4c16fba8 100644
--- a/web/src/components/PageLayout.js
+++ b/web/src/components/PageLayout.js
@@ -113,7 +113,7 @@ const PageLayout = () => {
           </Sider>
         )}
         <Layout style={{ 
-          marginLeft: styleState.isMobile ? '0' : (styleState.showSider ? (isSidebarCollapsed ? '60px' : '200px') : '0'), 
+          marginLeft: styleState.isMobile ? '0' : (styleState.showSider ? (styleState.siderCollapsed ? '60px' : '200px') : '0'),
           transition: 'margin-left 0.3s ease',
           flex: '1 1 auto',
           display: 'flex',
diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js
index d827ba80..4cf943a2 100644
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -316,10 +316,10 @@ const SiderBar = () => {
         isCollapsed={isCollapsed}
         onCollapseChange={(collapsed) => {
           setIsCollapsed(collapsed);
+          // styleDispatch({ type: 'SET_SIDER', payload: true });
+          styleDispatch({ type: 'SET_SIDER_COLLAPSED', payload: collapsed });
           localStorage.setItem('default_collapse_sidebar', collapsed);
-          // 始终保持侧边栏显示，只是宽度不同
-          styleDispatch({ type: 'SET_SIDER', payload: true });
-          
+
           // 确保在收起侧边栏时有选中的项目，避免不必要的计算
           if (selectedKeys.length === 0) {
             const currentPath = location.pathname;
@@ -330,7 +330,7 @@ const SiderBar = () => {
             } else if (currentPath.startsWith('/chat/')) {
               setSelectedKeys(['chat']);
             } else {
-              setSelectedKeys(['home']); // 默认选中首页
+              setSelectedKeys(['detail']); // 默认选中首页
             }
           }
         }}
@@ -467,7 +467,7 @@ const SiderBar = () => {
 
         <Nav.Footer
           style={{
-            paddingBottom: styleState?.isMobile ? '112px' : '0',
+            paddingBottom: styleState?.isMobile ? '112px' : '20px',
           }}
           collapseButton={true}
           collapseText={(collapsed)=>
diff --git a/web/src/context/Style/index.js b/web/src/context/Style/index.js
index 175d464d..e91fc72d 100644
--- a/web/src/context/Style/index.js
+++ b/web/src/context/Style/index.js
@@ -11,6 +11,7 @@ export const StyleProvider = ({ children }) => {
   const [state, setState] = useState({
     isMobile: isMobile(),
     showSider: false,
+    siderCollapsed: false,
     shouldInnerPadding: false,
   });
 
@@ -26,6 +27,9 @@ export const StyleProvider = ({ children }) => {
         case 'SET_MOBILE':
           setState(prev => ({ ...prev, isMobile: action.payload }));
           break;
+        case 'SET_SIDER_COLLAPSED':
+          setState(prev => ({ ...prev, siderCollapsed: action.payload }));
+          break
         case 'SET_INNER_PADDING':
           setState(prev => ({ ...prev, shouldInnerPadding: action.payload }));
           break;
@@ -65,6 +69,13 @@ export const StyleProvider = ({ children }) => {
 
     updateShowSider();
 
+    const updateSiderCollapsed = () => {
+      const isCollapsed = localStorage.getItem('default_collapse_sidebar') === 'true';
+      dispatch({ type: 'SET_SIDER_COLLAPSED', payload: isCollapsed });
+    };
+
+    updateSiderCollapsed();
+
     // Add event listeners to handle window resize
     const handleResize = () => {
       updateIsMobile();