fix: Improve mobile layout and scrolling behavior

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

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',
+        marginTop: styleState.isMobile ? '0' : '56px',
-        height: 'calc(100vh - 56px)',
+        height: styleState.isMobile ? 'auto' : 'calc(100vh - 56px)',
-        overflow: 'auto',
+        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 />

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,6 +86,21 @@ 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;
   }
   
   /* 隐藏在移动设备上 */