Explorar el Código

🐛fix(sidebar): Ensure sidebar displays correctly on desktop devices

When resizing from medium screens to desktop view in the console section,
the sidebar previously failed to appear automatically. This commit fixes
the issue by simplifying the logic to always show the sidebar when in
desktop mode and in console pages, regardless of previous screen size.
Apple\Apple hace 7 meses
padre
commit
c6d7cc7c25
Se han modificado 2 ficheros con 32 adiciones y 10 borrados
  1. 2 2
      web/src/components/HeaderBar.js
  2. 30 8
      web/src/context/Style/index.js

+ 2 - 2
web/src/components/HeaderBar.js

@@ -373,8 +373,8 @@ const HeaderBar = () => {
                     : (mobileMenuOpen ? t('关闭菜单') : t('打开菜单'))
                     : (mobileMenuOpen ? t('关闭菜单') : t('打开菜单'))
                 }
                 }
                 onClick={() => {
                 onClick={() => {
-                  if (isConsoleRoute && styleState.isMobile) {
-                    // 控制侧边栏的显示/隐藏
+                  if (isConsoleRoute) {
+                    // 控制侧边栏的显示/隐藏,无论是否移动设备
                     styleDispatch({ type: 'TOGGLE_SIDER' });
                     styleDispatch({ type: 'TOGGLE_SIDER' });
                   } else {
                   } else {
                     // 控制HeaderBar自己的移动菜单
                     // 控制HeaderBar自己的移动菜单

+ 30 - 8
web/src/context/Style/index.js

@@ -26,16 +26,25 @@ export const StyleProvider = ({ children }) => {
     showSider: initialShowSiderValue,
     showSider: initialShowSiderValue,
     siderCollapsed: false,
     siderCollapsed: false,
     shouldInnerPadding: initialInnerPaddingValue,
     shouldInnerPadding: initialInnerPaddingValue,
+    manualSiderControl: false,
   });
   });
 
 
   const dispatch = useCallback((action) => {
   const dispatch = useCallback((action) => {
     if ('type' in action) {
     if ('type' in action) {
       switch (action.type) {
       switch (action.type) {
         case 'TOGGLE_SIDER':
         case 'TOGGLE_SIDER':
-          setState((prev) => ({ ...prev, showSider: !prev.showSider }));
+          setState((prev) => ({
+            ...prev,
+            showSider: !prev.showSider,
+            manualSiderControl: true
+          }));
           break;
           break;
         case 'SET_SIDER':
         case 'SET_SIDER':
-          setState((prev) => ({ ...prev, showSider: action.payload }));
+          setState((prev) => ({
+            ...prev,
+            showSider: action.payload,
+            manualSiderControl: action.manual || false
+          }));
           break;
           break;
         case 'SET_MOBILE':
         case 'SET_MOBILE':
           setState((prev) => ({ ...prev, isMobile: action.payload }));
           setState((prev) => ({ ...prev, isMobile: action.payload }));
@@ -56,27 +65,40 @@ export const StyleProvider = ({ children }) => {
 
 
   useEffect(() => {
   useEffect(() => {
     const updateMobileStatus = () => {
     const updateMobileStatus = () => {
-      dispatch({ type: 'SET_MOBILE', payload: getIsMobile() });
+      const currentIsMobile = getIsMobile();
+      if (!currentIsMobile &&
+        (location.pathname === '/console' || location.pathname.startsWith('/console/'))) {
+        dispatch({ type: 'SET_SIDER', payload: true, manual: false });
+      }
+      dispatch({ type: 'SET_MOBILE', payload: currentIsMobile });
     };
     };
     window.addEventListener('resize', updateMobileStatus);
     window.addEventListener('resize', updateMobileStatus);
     return () => window.removeEventListener('resize', updateMobileStatus);
     return () => window.removeEventListener('resize', updateMobileStatus);
-  }, [dispatch]);
+  }, [dispatch, location.pathname]);
 
 
   useEffect(() => {
   useEffect(() => {
-    if (state.isMobile && state.showSider) {
+    if (state.isMobile && state.showSider && !state.manualSiderControl) {
       dispatch({ type: 'SET_SIDER', payload: false });
       dispatch({ type: 'SET_SIDER', payload: false });
     }
     }
-  }, [state.isMobile, state.showSider, dispatch]);
+  }, [state.isMobile, state.showSider, state.manualSiderControl, dispatch]);
 
 
   useEffect(() => {
   useEffect(() => {
     const currentPathname = location.pathname;
     const currentPathname = location.pathname;
     const currentlyMobile = getIsMobile();
     const currentlyMobile = getIsMobile();
 
 
     if (currentPathname === '/console' || currentPathname.startsWith('/console/')) {
     if (currentPathname === '/console' || currentPathname.startsWith('/console/')) {
-      dispatch({ type: 'SET_SIDER', payload: !currentlyMobile });
+      dispatch({
+        type: 'SET_SIDER',
+        payload: !currentlyMobile,
+        manual: false
+      });
       dispatch({ type: 'SET_INNER_PADDING', payload: true });
       dispatch({ type: 'SET_INNER_PADDING', payload: true });
     } else {
     } else {
-      dispatch({ type: 'SET_SIDER', payload: false });
+      dispatch({
+        type: 'SET_SIDER',
+        payload: false,
+        manual: false
+      });
       dispatch({ type: 'SET_INNER_PADDING', payload: false });
       dispatch({ type: 'SET_INNER_PADDING', payload: false });
     }
     }
   }, [location.pathname, dispatch]);
   }, [location.pathname, dispatch]);