添加调试信息覆盖层，更新视口高度信息，调整样式以防止滚动链传播

Web/src/App.vue

@@ -19,20 +19,47 @@
           设置
         </van-tabbar-item>
       </van-tabbar>
+      
+      <!-- 调试信息覆盖层 -->
+      <div v-if="showDebug" class="debug-overlay" @click="showDebug = false">
+        <div>VH: {{ debugInfo.vh }}</div>
+        <div>InnerHeight: {{ debugInfo.innerHeight }}</div>
+        <div>ClientHeight: {{ debugInfo.clientHeight }}</div>
+        <div>BodyHeight: {{ debugInfo.bodyHeight }}</div>
+        <div>SafeAreaBottom: {{ debugInfo.safeAreaBottom }}</div>
+      </div>
     </div>
   </van-config-provider>
 </template>
 
 <script setup>
 import { RouterView, useRoute } from 'vue-router'
-import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch, reactive } from 'vue'
 import '@/styles/common.css'
 
+const showDebug = ref(false) // 默认关闭，可以通过特定操作开启，或者先开启让用户看
+const debugInfo = reactive({
+  vh: 0,
+  innerHeight: 0,
+  clientHeight: 0,
+  bodyHeight: 0,
+  safeAreaBottom: 'unknown'
+})
+
+const updateDebugInfo = () => {
+  debugInfo.vh = window.innerHeight
+  debugInfo.innerHeight = window.innerHeight
+  debugInfo.clientHeight = document.documentElement.clientHeight
+  debugInfo.bodyHeight = document.body.clientHeight
+  debugInfo.safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom') || 'env(safe-area-inset-bottom)'
+}
+
 const updateVh = () => {
   // 获取真实的视口高度（PWA 模式下准确）
   const vh = window.innerHeight
   // 设置 CSS 变量，让所有组件使用准确的视口高度
   document.documentElement.style.setProperty('--vh', `${vh}px`)
+  updateDebugInfo()
 }
 
 onMounted(() => {
@@ -152,4 +179,16 @@ const handleTabClick = (path) => {
   padding: 0 !important;
   height: 50px !important;
 }
+
+.debug-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 10px;
+  font-size: 12px;
+  pointer-events: auto;
+}
 </style>

Web/src/assets/main.css

@@ -11,9 +11,7 @@ html, body {
   margin: 0;
   padding: 0;
   overflow: hidden; /* 禁止 body 滚动 */
-  position: fixed; /* 强制固定 body，防止 iOS 回弹 */
-  left: 0;
-  top: 0;
+  /* 移除 position: fixed，因为它会导致 PWA 底部出现空白 */
 }
 
 body {

Web/src/styles/common.css

@@ -3,6 +3,7 @@
   height: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain; /* 防止滚动链传播到 body */
   background: #f7f8fa;
   padding-bottom: env(safe-area-inset-bottom, 0px);
 }
@@ -166,6 +167,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
 }
 
 /* ===== 页面容器布局（Flex布局） ===== */
@@ -191,6 +193,7 @@
   flex: 1;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
 }
 
 /* ===== 可滚动内容区域 ===== */
@@ -198,6 +201,7 @@
   flex: 1;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
   padding: 0 0 0 0;
 }