diff --git a/Web/src/App.vue b/Web/src/App.vue
index e0e5901..88ae277 100644
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -85,6 +85,23 @@
底部导航栏调试信息
+
+
+ 容器高度
+
+
+ HTML 高度: {{ debugInfo.htmlHeight }}px
+
+
+ Body 高度: {{ debugInfo.bodyHeight }}px
+
+
+ App Root 高度: {{ debugInfo.appRootHeight }}px
+
+
+ App Root bottom: {{ debugInfo.appRootBottom }}px
+
+
视口尺寸
@@ -95,9 +112,114 @@
视口高度: {{ debugInfo.viewportHeight }}px
+
+
+
+ TabBar 位置
+
+
+ position: {{ debugInfo.tabbarPosition }}
+
+
+ bottom (CSS): {{ debugInfo.tabbarBottomStyle }}
+
+
+ top (实际): {{ debugInfo.tabbarTop }}px
+
+
+ bottom (实际): {{ debugInfo.tabbarBottom }}px
+
+
+
+
+ TabBar 尺寸
+
+
+ height (实际): {{ debugInfo.tabbarHeight }}px
+
+
+ min-height: {{ debugInfo.tabbarMinHeight }}
+
+
+ padding-bottom: {{ debugInfo.tabbarPaddingBottom }}
+
+
+ box-sizing: {{ debugInfo.tabbarBoxSizing }}
+
+
+ 安全区域底部: {{ debugInfo.safeAreaBottom }}
+
+
+
+
+ TabBar 定位检查
+
+
+ z-index: {{ debugInfo.tabbarZIndex }}
+
+
+ transform: {{ debugInfo.tabbarTransform }}
+
+
+ 距离底部: {{ debugInfo.distanceFromBottom }}px {{ debugInfo.distanceFromBottom === '0.00' ? '✓ 已贴底' : '✗ 未贴底' }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 容器高度
+
+
+ HTML 高度: {{ debugInfo.htmlHeight }}px
+
+
+ Body 高度: {{ debugInfo.bodyHeight }}px
+
App Root 高度: {{ debugInfo.appRootHeight }}px
+
+ App Root bottom: {{ debugInfo.appRootBottom }}px
+
+
+
+ TabBar 定位检查
+
+
+ z-index: {{ debugInfo.tabbarZIndex }}
+
+
+ transform: {{ debugInfo.tabbarTransform }}
+
+
+ 距离底部: {{ debugInfo.distanceFromBottom }}px {{ debugInfo.distanceFromBottom === '0.00' ? '✓' : '✗' }}
+
@@ -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;
+}