From 74d4a54120403e2594dc515e4699a4802ba65979 Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Tue, 20 May 2025 12:59:47 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9Bfix(sidebar):=20Ensure=20sidebar=20?=
 =?UTF-8?q?displays=20correctly=20on=20desktop=20devices?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/src/components/HeaderBar.js |  4 ++--
 web/src/context/Style/index.js  | 38 ++++++++++++++++++++++++++-------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index 57d42a7537..d2c437a2a3 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -373,8 +373,8 @@ const HeaderBar = () => {
                     : (mobileMenuOpen ? t('关闭菜单') : t('打开菜单'))
                 }
                 onClick={() => {
-                  if (isConsoleRoute && styleState.isMobile) {
-                    // 控制侧边栏的显示/隐藏
+                  if (isConsoleRoute) {
+                    // 控制侧边栏的显示/隐藏，无论是否移动设备
                     styleDispatch({ type: 'TOGGLE_SIDER' });
                   } else {
                     // 控制HeaderBar自己的移动菜单
diff --git a/web/src/context/Style/index.js b/web/src/context/Style/index.js
index cb6d2339d7..a280ab5224 100644
--- a/web/src/context/Style/index.js
+++ b/web/src/context/Style/index.js
@@ -26,16 +26,25 @@ export const StyleProvider = ({ children }) => {
     showSider: initialShowSiderValue,
     siderCollapsed: false,
     shouldInnerPadding: initialInnerPaddingValue,
+    manualSiderControl: false,
   });
 
   const dispatch = useCallback((action) => {
     if ('type' in action) {
       switch (action.type) {
         case 'TOGGLE_SIDER':
-          setState((prev) => ({ ...prev, showSider: !prev.showSider }));
+          setState((prev) => ({
+            ...prev,
+            showSider: !prev.showSider,
+            manualSiderControl: true
+          }));
           break;
         case 'SET_SIDER':
-          setState((prev) => ({ ...prev, showSider: action.payload }));
+          setState((prev) => ({
+            ...prev,
+            showSider: action.payload,
+            manualSiderControl: action.manual || false
+          }));
           break;
         case 'SET_MOBILE':
           setState((prev) => ({ ...prev, isMobile: action.payload }));
@@ -56,27 +65,40 @@ export const StyleProvider = ({ children }) => {
 
   useEffect(() => {
     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);
     return () => window.removeEventListener('resize', updateMobileStatus);
-  }, [dispatch]);
+  }, [dispatch, location.pathname]);
 
   useEffect(() => {
-    if (state.isMobile && state.showSider) {
+    if (state.isMobile && state.showSider && !state.manualSiderControl) {
       dispatch({ type: 'SET_SIDER', payload: false });
     }
-  }, [state.isMobile, state.showSider, dispatch]);
+  }, [state.isMobile, state.showSider, state.manualSiderControl, dispatch]);
 
   useEffect(() => {
     const currentPathname = location.pathname;
     const currentlyMobile = getIsMobile();
 
     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 });
     } else {
-      dispatch({ type: 'SET_SIDER', payload: false });
+      dispatch({
+        type: 'SET_SIDER',
+        payload: false,
+        manual: false
+      });
       dispatch({ type: 'SET_INNER_PADDING', payload: false });
     }
   }, [location.pathname, dispatch]);