From 02d7727ae6cc22b7fdf03e6ca002a995af58047f Mon Sep 17 00:00:00 2001 From: SunCheng Date: Wed, 11 Feb 2026 14:53:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=B0=83=E8=AF=95?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E9=9D=A2=E6=9D=BF=EF=BC=8C=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E9=AB=98=E5=BA=A6=E3=80=81TabBar=20=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E5=92=8C=E5=B0=BA=E5=AF=B8=E7=AD=89=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Web/src/App.vue | 168 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 167 insertions(+), 1 deletion(-) 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; +}