From 3122b8a36a81b7d87767ab6c445df2473aaf34d2 Mon Sep 17 00:00:00 2001
From: "1808837298@qq.com" <1808837298@qq.com>
Date: Tue, 11 Mar 2025 15:05:23 +0800
Subject: [PATCH] fix: Improve mobile layout and scrolling behavior

---
 web/src/components/Footer.js     |  2 +-
 web/src/components/PageLayout.js | 13 +++++++------
 web/src/index.css                | 19 +++++++++++++++++--
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js
index cea3723a..7c2b0108 100644
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -61,7 +61,7 @@ const FooterBar = () => {
   return (
     <div style={{
       textAlign: 'center',
-      paddingBottom: styleState?.isMobile ? '112px' : '5px',
+      paddingBottom: '5px',
     }}>
       {footer ? (
         <div
diff --git a/web/src/components/PageLayout.js b/web/src/components/PageLayout.js
index a8f8250b..97f164c6 100644
--- a/web/src/components/PageLayout.js
+++ b/web/src/components/PageLayout.js
@@ -75,13 +75,13 @@ const PageLayout = () => {
       height: '100vh', 
       display: 'flex', 
       flexDirection: 'column',
-      overflow: 'hidden'
+      overflow: styleState.isMobile ? 'visible' : 'hidden'
     }}>
       <Header style={{ 
         padding: 0, 
         height: 'auto', 
         lineHeight: 'normal', 
-        position: 'fixed', 
+        position: styleState.isMobile ? 'sticky' : 'fixed',
         width: '100%', 
         top: 0, 
         zIndex: 100,
@@ -90,9 +90,9 @@ const PageLayout = () => {
         <HeaderBar />
       </Header>
       <Layout style={{ 
-        marginTop: '56px',
-        height: 'calc(100vh - 56px)',
-        overflow: 'auto',
+        marginTop: styleState.isMobile ? '0' : '56px',
+        height: styleState.isMobile ? 'auto' : 'calc(100vh - 56px)',
+        overflow: styleState.isMobile ? 'visible' : 'auto',
         display: 'flex',
         flexDirection: 'column'
       }}>
@@ -121,10 +121,11 @@ const PageLayout = () => {
           <Content
             style={{ 
               flex: '1 0 auto',
-              overflowY: 'auto',
+              overflowY: styleState.isMobile ? 'visible' : 'auto',
               WebkitOverflowScrolling: 'touch',
               padding: styleState.shouldInnerPadding? '24px': '0',
               position: 'relative',
+              marginTop: styleState.isMobile ? '2px' : '0',
             }}
           >
             <App />
diff --git a/web/src/index.css b/web/src/index.css
index b406e1ae..75745568 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,7 +1,6 @@
 body {
   margin: 0;
   padding-top: 0;
-  overflow: hidden;
   font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei',
     sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -13,7 +12,8 @@ body {
 }
 
 #root {
-  height: 100vh;
+  height: 100%;
+  display: flex;
   flex-direction: column;
   overflow: hidden;
 }
@@ -86,8 +86,23 @@ body {
   /* 确保移动端内容可滚动 */
   .semi-layout-content {
     -webkit-overflow-scrolling: touch !important;
+    overscroll-behavior-y: auto !important;
   }
 
+  /* 修复移动端下拉刷新 */
+  body {
+    overflow: visible !important;
+    overscroll-behavior-y: auto !important;
+    position: static !important;
+    height: 100% !important;
+  }
+  
+  /* 确保内容区域在移动端可以正常滚动 */
+  #root {
+    overflow: visible !important;
+    height: 100% !important;
+  }
+  
   /* 隐藏在移动设备上 */
   .hide-on-mobile {
     display: none !important;