From e613c887703defd7b7ab4e7640bebeec3bce221f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E8=AF=9A?= <cheng2.sun@ly.com>
Date: Mon, 29 Dec 2025 11:30:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B0=83=E8=AF=95=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E8=A6=86=E7=9B=96=E5=B1=82=EF=BC=8C=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E8=A7=86=E5=8F=A3=E9=AB=98=E5=BA=A6=E4=BF=A1=E6=81=AF=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=BB=A5=E9=98=B2=E6=AD=A2?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E9=93=BE=E4=BC=A0=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Web/src/App.vue           | 41 ++++++++++++++++++++++++++++++++++++++-
 Web/src/assets/main.css   |  4 +---
 Web/src/styles/common.css |  4 ++++
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/Web/src/App.vue b/Web/src/App.vue
index db9c522..b5c752a 100644
--- a/Web/src/App.vue
+++ b/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>
diff --git a/Web/src/assets/main.css b/Web/src/assets/main.css
index 1b19094..f06675c 100644
--- a/Web/src/assets/main.css
+++ b/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 {
diff --git a/Web/src/styles/common.css b/Web/src/styles/common.css
index 4a81dea..a78cf41 100644
--- a/Web/src/styles/common.css
+++ b/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;
 }