suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加调试信息面板，显示容器高度、TabBar 位置和尺寸等信息
Some checks failed
Docker Build & Deploy / Build Docker Image (push) Failing after 4m6s
Details
Docker Build & Deploy / Deploy to Production (push) Has been skipped
Details
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Details
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
Details

Browse Source
This commit is contained in:
SunCheng
2026-02-11 14:53:49 +08:00
parent dfa2c405c5
commit 02d7727ae6
1 changed files with 167 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
Web/src/App.vue
View File

@@ -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>