From b2938ffe2c1fe473935193b2b0ab79df6112585c Mon Sep 17 00:00:00 2001
From: "1808837298@qq.com" <1808837298@qq.com>
Date: Mon, 10 Mar 2025 15:49:32 +0800
Subject: [PATCH] refactor: Improve mobile responsiveness and scrolling
 behavior in UI layout

---
 web/src/components/PageLayout.js | 14 +++++++++++---
 web/src/components/SiderBar.js   |  4 +++-
 web/src/context/Style/index.js   | 30 ++++++++++++++++++------------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/web/src/components/PageLayout.js b/web/src/components/PageLayout.js
index c6e6dc2f..62b4a413 100644
--- a/web/src/components/PageLayout.js
+++ b/web/src/components/PageLayout.js
@@ -84,7 +84,11 @@ const PageLayout = () => {
       }}>
         <HeaderBar />
       </Header>
-      <Layout style={{ marginTop: '56px', height: 'calc(100vh - 56px)', overflow: 'hidden' }}>
+      <Layout style={{ 
+        marginTop: '56px', 
+        height: 'calc(100vh - 56px)', 
+        overflow: styleState.isMobile ? 'auto' : 'hidden' 
+      }}>
         {styleState.showSider && (
           <Sider style={{ 
             height: 'calc(100vh - 56px)', 
@@ -105,13 +109,17 @@ const PageLayout = () => {
         )}
         <Layout style={{ 
           marginLeft: styleState.showSider ? (isSidebarCollapsed ? '60px' : '200px') : '0', 
-          transition: 'margin-left 0.3s ease'
+          transition: 'margin-left 0.3s ease',
+          height: '100%',
+          overflow: 'auto'
         }}>
           <Content
             style={{ 
               height: '100%',
               overflowY: 'auto', 
-              padding: styleState.shouldInnerPadding? '24px': '0' 
+              WebkitOverflowScrolling: 'touch',
+              padding: styleState.shouldInnerPadding? '24px': '0',
+              position: 'relative'
             }}
           >
             <App />
diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js
index 4424f0b0..aadd8c80 100644
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -305,7 +305,9 @@ const SiderBar = () => {
           borderRadius: '0 8px 8px 0',
           transition: 'all 0.3s ease',
           position: 'relative',
-          zIndex: 95
+          zIndex: 95,
+          overflowY: 'auto',
+          WebkitOverflowScrolling: 'touch' // Improve scrolling on iOS devices
         }}
         defaultIsCollapsed={
           localStorage.getItem('default_collapse_sidebar') === 'true'
diff --git a/web/src/context/Style/index.js b/web/src/context/Style/index.js
index c3f28e62..175d464d 100644
--- a/web/src/context/Style/index.js
+++ b/web/src/context/Style/index.js
@@ -9,7 +9,7 @@ export const StyleContext = React.createContext({
 
 export const StyleProvider = ({ children }) => {
   const [state, setState] = useState({
-    isMobile: false,
+    isMobile: isMobile(),
     showSider: false,
     shouldInnerPadding: false,
   });
@@ -39,7 +39,13 @@ export const StyleProvider = ({ children }) => {
 
   useEffect(() => {
     const updateIsMobile = () => {
-      dispatch({ type: 'SET_MOBILE', payload: isMobile() });
+      const mobileDetected = isMobile();
+      dispatch({ type: 'SET_MOBILE', payload: mobileDetected });
+      
+      // If on mobile, we might want to auto-hide the sidebar
+      if (mobileDetected && state.showSider) {
+        dispatch({ type: 'SET_SIDER', payload: false });
+      }
     };
 
     updateIsMobile();
@@ -51,24 +57,24 @@ export const StyleProvider = ({ children }) => {
         dispatch({ type: 'SET_SIDER', payload: false });
         dispatch({ type: 'SET_INNER_PADDING', payload: false });
       } else {
-        dispatch({ type: 'SET_SIDER', payload: true });
+        // Only show sidebar on non-mobile devices by default
+        dispatch({ type: 'SET_SIDER', payload: !isMobile() });
         dispatch({ type: 'SET_INNER_PADDING', payload: true });
       }
-
-      if (isMobile()) {
-        dispatch({ type: 'SET_SIDER', payload: false });
-      }
     };
 
-    updateShowSider()
+    updateShowSider();
 
-
-    // Optionally, add event listeners to handle window resize
-    window.addEventListener('resize', updateIsMobile);
+    // Add event listeners to handle window resize
+    const handleResize = () => {
+      updateIsMobile();
+    };
+    
+    window.addEventListener('resize', handleResize);
 
     // Cleanup event listener on component unmount
     return () => {
-      window.removeEventListener('resize', updateIsMobile);
+      window.removeEventListener('resize', handleResize);
     };
   }, []);