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

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>