fix: 优化 TabBar 样式和调试信息展示，确保在 PWA 中正确贴底

Web/src/App.vue

@@ -19,6 +19,7 @@
       <van-tabbar
         v-show="showTabbar"
         v-model="active"
+        style="position: fixed !important; bottom: 0 !important; left: 0; right: 0;"
       >
         <van-tabbar-item
           name="ccalendar"
@@ -87,46 +88,56 @@
         </div>
         <div class="debug-section">
           <div class="debug-subtitle">
-            容器高度
+            TabBar 存在性检查
+          </div>
+          <div
+            class="debug-item"
+            :style="{ color: debugInfo.tabbarExists ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
+          >
+            TabBar 元素存在: {{ debugInfo.tabbarExists ? '✓ 是' : '✗ 否' }}
+          </div>
+          <div
+            class="debug-item"
+            :style="{ color: debugInfo.tabbarVisible ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
+          >
+            TabBar 可见: {{ debugInfo.tabbarVisible ? '✓ 是' : '✗ 否' }}
           </div>
           <div class="debug-item">
-            HTML 高度: {{ debugInfo.htmlHeight }}px
+            display: {{ debugInfo.tabbarDisplay }}
           </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
+            opacity: {{ debugInfo.tabbarOpacity }}
           </div>
         </div>
         <div class="debug-section">
           <div class="debug-subtitle">
-            视口尺寸
-          </div>
-          <div class="debug-item">
-            窗口高度: {{ debugInfo.windowHeight }}px
-          </div>
-          <div class="debug-item">
-            视口高度: {{ debugInfo.viewportHeight }}px
-          </div>
-        </div>
-        <div class="debug-section">
-          <div class="debug-subtitle">
-            TabBar 位置
+            TabBar 位置样式
           </div>
           <div class="debug-item">
             position: {{ debugInfo.tabbarPosition }}
           </div>
+          <div class="debug-item">
+            top (CSS): {{ debugInfo.tabbarTopStyle }}
+          </div>
           <div class="debug-item">
             bottom (CSS): {{ debugInfo.tabbarBottomStyle }}
           </div>
           <div class="debug-item">
-            top (实际): {{ debugInfo.tabbarTop }}px
+            left (实际): {{ debugInfo.tabbarLeft }}px
           </div>
           <div class="debug-item">
+            right (实际): {{ debugInfo.tabbarRight }}px
+          </div>
+          <div
+            class="debug-item"
+            :style="{ fontWeight: 'bold', color: '#ff9800' }"
+          >
+            top (实际): {{ debugInfo.tabbarTop }}px
+          </div>
+          <div
+            class="debug-item"
+            :style="{ fontWeight: 'bold', color: '#ff9800' }"
+          >
             bottom (实际): {{ debugInfo.tabbarBottom }}px
           </div>
         </div>
@@ -135,10 +146,10 @@
             TabBar 尺寸
           </div>
           <div class="debug-item">
-            height (实际): {{ debugInfo.tabbarHeight }}px
+            width: {{ debugInfo.tabbarWidth }}px
           </div>
           <div class="debug-item">
-            min-height: {{ debugInfo.tabbarMinHeight }}
+            height: {{ debugInfo.tabbarHeight }}px
           </div>
           <div class="debug-item">
             padding-bottom: {{ debugInfo.tabbarPaddingBottom }}
@@ -146,23 +157,14 @@
           <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' }"
+            :style="{ color: debugInfo.distanceFromBottom === '0.00' ? '#81c784' : '#ff4d4f', fontWeight: 'bold', fontSize: '12px' }"
           >
             距离底部: {{ debugInfo.distanceFromBottom }}px {{ debugInfo.distanceFromBottom === '0.00' ? '✓ 已贴底' : '✗ 未贴底' }}
           </div>
@@ -361,14 +363,22 @@ const debugInfo = ref({
   windowHeight: 0,
   viewportHeight: 0,
   safeAreaBottom: '0',
+  tabbarExists: false,
+  tabbarVisible: false,
   tabbarHeight: 0,
+  tabbarWidth: 0,
   tabbarBottom: 0,
   tabbarTop: 0,
+  tabbarLeft: 0,
+  tabbarRight: 0,
   tabbarPaddingBottom: '0',
   tabbarPosition: '',
   tabbarBottomStyle: '',
+  tabbarTopStyle: '',
   tabbarMinHeight: '',
   tabbarBoxSizing: '',
+  tabbarDisplay: '',
+  tabbarOpacity: '',
   appRootHeight: 0,
   appRootBottom: 0,
   bodyHeight: 0,
@@ -393,17 +403,30 @@ const updateDebugInfo = () => {
   
   // 获取 TabBar 的实际尺寸和位置
   const tabbar = document.querySelector('.van-tabbar')
+  debugInfo.value.tabbarExists = !!tabbar
+  debugInfo.value.tabbarVisible = tabbar ? window.getComputedStyle(tabbar).display !== 'none' : false
+  
   if (tabbar) {
     const rect = tabbar.getBoundingClientRect()
     const styles = window.getComputedStyle(tabbar)
     debugInfo.value.tabbarHeight = rect.height.toFixed(2)
+    debugInfo.value.tabbarWidth = rect.width.toFixed(2)
     debugInfo.value.tabbarBottom = rect.bottom.toFixed(2)
     debugInfo.value.tabbarPaddingBottom = styles.paddingBottom
     debugInfo.value.tabbarTop = rect.top.toFixed(2)
+    debugInfo.value.tabbarLeft = rect.left.toFixed(2)
+    debugInfo.value.tabbarRight = rect.right.toFixed(2)
     debugInfo.value.tabbarPosition = styles.position
     debugInfo.value.tabbarBottomStyle = styles.bottom
+    debugInfo.value.tabbarTopStyle = styles.top
     debugInfo.value.tabbarMinHeight = styles.minHeight
     debugInfo.value.tabbarBoxSizing = styles.boxSizing
+    debugInfo.value.tabbarDisplay = styles.display
+    debugInfo.value.tabbarOpacity = styles.opacity
+    
+    // 检查是否有 transform 或其他可能影响定位的样式
+    debugInfo.value.tabbarTransform = styles.transform
+    debugInfo.value.tabbarZIndex = styles.zIndex
   }
   
   // 获取 app-root 的高度
@@ -418,15 +441,8 @@ const updateDebugInfo = () => {
   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)
+  debugInfo.value.distanceFromBottom = (window.innerHeight - parseFloat(debugInfo.value.tabbarBottom || 0)).toFixed(2)
 }
 
 onMounted(() => {