refactor: Improve sidebar state management and layout responsiveness

web/src/components/PageLayout.js

@@ -113,7 +113,7 @@ const PageLayout = () => {
           </Sider>
           </Sider>
         )}
         )}
         <Layout style={{ 
         <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',
           transition: 'margin-left 0.3s ease',
           flex: '1 1 auto',
           flex: '1 1 auto',
           display: 'flex',
           display: 'flex',

web/src/components/SiderBar.js

@@ -316,10 +316,10 @@ const SiderBar = () => {
         isCollapsed={isCollapsed}
         isCollapsed={isCollapsed}
         onCollapseChange={(collapsed) => {
         onCollapseChange={(collapsed) => {
           setIsCollapsed(collapsed);
           setIsCollapsed(collapsed);
+          // styleDispatch({ type: 'SET_SIDER', payload: true });
+          styleDispatch({ type: 'SET_SIDER_COLLAPSED', payload: collapsed });
           localStorage.setItem('default_collapse_sidebar', collapsed);
           localStorage.setItem('default_collapse_sidebar', collapsed);
-          // 始终保持侧边栏显示，只是宽度不同
-          styleDispatch({ type: 'SET_SIDER', payload: true });
-          
+
           // 确保在收起侧边栏时有选中的项目，避免不必要的计算
           // 确保在收起侧边栏时有选中的项目，避免不必要的计算
           if (selectedKeys.length === 0) {
           if (selectedKeys.length === 0) {
             const currentPath = location.pathname;
             const currentPath = location.pathname;
@@ -330,7 +330,7 @@ const SiderBar = () => {
             } else if (currentPath.startsWith('/chat/')) {
             } else if (currentPath.startsWith('/chat/')) {
               setSelectedKeys(['chat']);
               setSelectedKeys(['chat']);
             } else {
             } else {
-              setSelectedKeys(['home']); // 默认选中首页
+              setSelectedKeys(['detail']); // 默认选中首页
             }
             }
           }
           }
         }}
         }}
@@ -467,7 +467,7 @@ const SiderBar = () => {
 
 
         <Nav.Footer
         <Nav.Footer
           style={{
           style={{
-            paddingBottom: styleState?.isMobile ? '112px' : '0',
+            paddingBottom: styleState?.isMobile ? '112px' : '20px',
           }}
           }}
           collapseButton={true}
           collapseButton={true}
           collapseText={(collapsed)=>
           collapseText={(collapsed)=>

web/src/context/Style/index.js

@@ -11,6 +11,7 @@ export const StyleProvider = ({ children }) => {
   const [state, setState] = useState({
   const [state, setState] = useState({
     isMobile: isMobile(),
     isMobile: isMobile(),
     showSider: false,
     showSider: false,
+    siderCollapsed: false,
     shouldInnerPadding: false,
     shouldInnerPadding: false,
   });
   });
 
 
@@ -26,6 +27,9 @@ export const StyleProvider = ({ children }) => {
         case 'SET_MOBILE':
         case 'SET_MOBILE':
           setState(prev => ({ ...prev, isMobile: action.payload }));
           setState(prev => ({ ...prev, isMobile: action.payload }));
           break;
           break;
+        case 'SET_SIDER_COLLAPSED':
+          setState(prev => ({ ...prev, siderCollapsed: action.payload }));
+          break
         case 'SET_INNER_PADDING':
         case 'SET_INNER_PADDING':
           setState(prev => ({ ...prev, shouldInnerPadding: action.payload }));
           setState(prev => ({ ...prev, shouldInnerPadding: action.payload }));
           break;
           break;
@@ -65,6 +69,13 @@ export const StyleProvider = ({ children }) => {
 
 
     updateShowSider();
     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
     // Add event listeners to handle window resize
     const handleResize = () => {
     const handleResize = () => {
       updateIsMobile();
       updateIsMobile();