feat: 添加调试信息面板，显示容器高度、TabBar 位置和尺寸等信息

Web/src/App.vue

@@ -85,6 +85,23 @@
         <div class="debug-title">
           底部导航栏调试信息
         </div>
+        <div class="debug-section">
+          <div class="debug-subtitle">
+            容器高度
+          </div>
+          <div class="debug-item">
+            HTML 高度: {{ debugInfo.htmlHeight }}px
+          </div>
+          <div class="debug-item">
+            Body 高度: {{ debugInfo.bodyHeight }}px
+          </div>
+          <div class="debug-item">
+            App Root 高度: {{ debugInfo.appRootHeight }}px
+          </div>
+          <div class="debug-item">
+            App Root bottom: {{ debugInfo.appRootBottom }}px
+          </div>
+        </div>
         <div class="debug-section">
           <div class="debug-subtitle">
             视口尺寸
@@ -95,9 +112,114 @@
           <div class="debug-item">
             视口高度: {{ debugInfo.viewportHeight }}px
           </div>
+        </div>
+        <div class="debug-section">
+          <div class="debug-subtitle">
+            TabBar 位置
+          </div>
+          <div class="debug-item">
+            position: {{ debugInfo.tabbarPosition }}
+          </div>
+          <div class="debug-item">
+            bottom (CSS): {{ debugInfo.tabbarBottomStyle }}
+          </div>
+          <div class="debug-item">
+            top (实际): {{ debugInfo.tabbarTop }}px
+          </div>
+          <div class="debug-item">
+            bottom (实际): {{ debugInfo.tabbarBottom }}px
+          </div>
+        </div>
+        <div class="debug-section">
+          <div class="debug-subtitle">
+            TabBar 尺寸
+          </div>
+          <div class="debug-item">
+            height (实际): {{ debugInfo.tabbarHeight }}px
+          </div>
+          <div class="debug-item">
+            min-height: {{ debugInfo.tabbarMinHeight }}
+          </div>
+          <div class="debug-item">
+            padding-bottom: {{ debugInfo.tabbarPaddingBottom }}
+          </div>
+          <div class="debug-item">
+            box-sizing: {{ debugInfo.tabbarBoxSizing }}
+          </div>
+          <div class="debug-item">
+            安全区域底部: {{ debugInfo.safeAreaBottom }}
+          </div>
+        </div>
+        <div class="debug-section">
+          <div class="debug-subtitle">
+            TabBar 定位检查
+          </div>
+          <div class="debug-item">
+            z-index: {{ debugInfo.tabbarZIndex }}
+          </div>
+          <div class="debug-item">
+            transform: {{ debugInfo.tabbarTransform }}
+          </div>
+          <div
+            class="debug-item"
+            :style="{ color: debugInfo.distanceFromBottom === '0.00' ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
+          >
+            距离底部: {{ debugInfo.distanceFromBottom }}px {{ debugInfo.distanceFromBottom === '0.00' ? '✓ 已贴底' : '✗ 未贴底' }}
+          </div>
+        </div>
+        <button
+          class="debug-close"
+          @click="showDebug = false"
+        >
+          关闭
+        </button>
+      </div>
+      
+      <!-- 视觉调试辅助线 - 标记屏幕底部 -->
+      <div
+        v-if="showDebug"
+        class="debug-bottom-line"
+      />
+      
+      <!-- 视觉调试辅助线 - 标记 TabBar 顶部 -->
+      <div
+        v-if="showDebug"
+        class="debug-tabbar-top-line"
+        :style="{ top: debugInfo.tabbarTop + 'px' }"
+      />
+        <div class="debug-section">
+          <div class="debug-subtitle">
+            容器高度
+          </div>
+          <div class="debug-item">
+            HTML 高度: {{ debugInfo.htmlHeight }}px
+          </div>
+          <div class="debug-item">
+            Body 高度: {{ debugInfo.bodyHeight }}px
+          </div>
           <div class="debug-item">
             App Root 高度: {{ debugInfo.appRootHeight }}px
           </div>
+          <div class="debug-item">
+            App Root bottom: {{ debugInfo.appRootBottom }}px
+          </div>
+        </div>
+        <div class="debug-section">
+          <div class="debug-subtitle">
+            TabBar 定位检查
+          </div>
+          <div class="debug-item">
+            z-index: {{ debugInfo.tabbarZIndex }}
+          </div>
+          <div class="debug-item">
+            transform: {{ debugInfo.tabbarTransform }}
+          </div>
+          <div
+            class="debug-item"
+            :style="{ color: debugInfo.distanceFromBottom === '0.00' ? '#81c784' : '#ff4d4f' }"
+          >
+            距离底部: {{ debugInfo.distanceFromBottom }}px {{ debugInfo.distanceFromBottom === '0.00' ? '✓' : '✗' }}
+          </div>
         </div>
         <div class="debug-section">
           <div class="debug-subtitle">
@@ -325,7 +447,13 @@ const debugInfo = ref({
   tabbarBottomStyle: '',
   tabbarMinHeight: '',
   tabbarBoxSizing: '',
-  appRootHeight: 0
+  appRootHeight: 0,
+  appRootBottom: 0,
+  bodyHeight: 0,
+  htmlHeight: 0,
+  tabbarTransform: '',
+  tabbarZIndex: '',
+  distanceFromBottom: 0
 })
 
 // 更新调试信息
@@ -361,7 +489,22 @@ const updateDebugInfo = () => {
   if (appRoot) {
     const rect = appRoot.getBoundingClientRect()
     debugInfo.value.appRootHeight = rect.height.toFixed(2)
+    debugInfo.value.appRootBottom = rect.bottom.toFixed(2)
   }
+  
+  // 获取 body 和 html 的高度
+  debugInfo.value.bodyHeight = document.body.getBoundingClientRect().height.toFixed(2)
+  debugInfo.value.htmlHeight = document.documentElement.getBoundingClientRect().height.toFixed(2)
+  
+  // 检查是否有 transform 或其他可能影响定位的样式
+  if (tabbar) {
+    const styles = window.getComputedStyle(tabbar)
+    debugInfo.value.tabbarTransform = styles.transform
+    debugInfo.value.tabbarZIndex = styles.zIndex
+  }
+  
+  // 计算 TabBar 距离屏幕底部的实际距离
+  debugInfo.value.distanceFromBottom = (window.innerHeight - debugInfo.value.tabbarBottom).toFixed(2)
 }
 
 onMounted(() => {
@@ -526,4 +669,27 @@ onMounted(() => {
   opacity: 0.8;
   transform: scale(0.98);
 }
+
+/* 调试辅助线 - 屏幕底部红线 */
+.debug-bottom-line {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: red;
+  z-index: 10000;
+  pointer-events: none;
+}
+
+/* 调试辅助线 - TabBar 顶部蓝线 */
+.debug-tabbar-top-line {
+  position: fixed;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: blue;
+  z-index: 10000;
+  pointer-events: none;
+}
 </style>