diff --git a/Web/src/App.vue b/Web/src/App.vue index 297079c..36f0eeb 100644 --- a/Web/src/App.vue +++ b/Web/src/App.vue @@ -36,117 +36,6 @@ /> 新版本可用，点击刷新 - - -
-
- GlassBottomNav 调试信息 -
-
-
- 容器检查 (.glass-nav-container) -
-
- 元素存在: {{ debugInfo.containerExists ? '✓ 是' : '✗ 否' }} -
-
- position: {{ debugInfo.containerPosition }} -
-
- bottom (CSS): {{ debugInfo.containerBottomStyle }} -
-
- bottom (实际): {{ debugInfo.containerRectBottom }}px -
-
- width: {{ debugInfo.containerWidth }}px -
-
- height: {{ debugInfo.containerHeight }}px -
-
- z-index: {{ debugInfo.containerZIndex }} -
-
-
-
- 药丸导航 (.nav-pill) -
-
- 元素存在: {{ debugInfo.pillExists ? '✓ 是' : '✗ 否' }} -
-
- width: {{ debugInfo.pillWidth }}px -
-
- height: {{ debugInfo.pillHeight }}px -
-
- bottom (实际): {{ debugInfo.pillRectBottom }}px -
-
-
-
- 父容器 (.app-root) -
-
- overflow: {{ debugInfo.appRootOverflow }} -
-
- height: {{ debugInfo.appRootHeight }}px -
-
- position: {{ debugInfo.appRootPosition }} -
-
-
-
- 视口信息 -
-
- window.innerHeight: {{ debugInfo.windowHeight }}px -
-
- --vh: {{ debugInfo.vhVar }} -
-
- safe-area-bottom: {{ debugInfo.safeAreaBottom }} -
-
-
-
- 结果 -
-
- 距离底部: {{ debugInfo.distanceFromBottom }}px - {{ parseFloat(debugInfo.distanceFromBottom) < 2 ? '✓ 已贴底' : '✗ 未贴底' }} -
-
- -
@@ -282,88 +171,6 @@ const handleAddTransactionSuccess = () => { const event = new Event('transactions-changed') window.dispatchEvent(event) } - -// ===== 调试信息 ===== -const showDebug = ref(true) -const debugInfo = ref({ - containerExists: false, - containerPosition: '', - containerBottomStyle: '', - containerRectBottom: 0, - containerWidth: 0, - containerHeight: 0, - containerZIndex: '', - pillExists: false, - pillWidth: 0, - pillHeight: 0, - pillRectBottom: 0, - appRootOverflow: '', - appRootHeight: 0, - appRootPosition: '', - windowHeight: 0, - vhVar: '', - safeAreaBottom: '', - distanceFromBottom: '0' -}) - -const updateDebugInfo = () => { - debugInfo.value.windowHeight = window.innerHeight - debugInfo.value.vhVar = getComputedStyle(document.documentElement).getPropertyValue('--vh') || 'unset' - - // 安全区域 - const testDiv = document.createElement('div') - testDiv.style.paddingBottom = 'env(safe-area-inset-bottom, 0px)' - document.body.appendChild(testDiv) - debugInfo.value.safeAreaBottom = getComputedStyle(testDiv).paddingBottom - document.body.removeChild(testDiv) - - // .glass-nav-container - const container = document.querySelector('.glass-nav-container') - debugInfo.value.containerExists = !!container - if (container) { - const rect = container.getBoundingClientRect() - const styles = getComputedStyle(container) - debugInfo.value.containerPosition = styles.position - debugInfo.value.containerBottomStyle = styles.bottom - debugInfo.value.containerRectBottom = rect.bottom.toFixed(2) - debugInfo.value.containerWidth = rect.width.toFixed(2) - debugInfo.value.containerHeight = rect.height.toFixed(2) - debugInfo.value.containerZIndex = styles.zIndex - } - - // .nav-pill - const pill = document.querySelector('.nav-pill') - debugInfo.value.pillExists = !!pill - if (pill) { - const rect = pill.getBoundingClientRect() - debugInfo.value.pillWidth = rect.width.toFixed(2) - debugInfo.value.pillHeight = rect.height.toFixed(2) - debugInfo.value.pillRectBottom = rect.bottom.toFixed(2) - } - - // .app-root - const appRoot = document.querySelector('.app-root') - if (appRoot) { - const styles = getComputedStyle(appRoot) - const rect = appRoot.getBoundingClientRect() - debugInfo.value.appRootOverflow = styles.overflow - debugInfo.value.appRootHeight = rect.height.toFixed(2) - debugInfo.value.appRootPosition = styles.position - } - - // 距底部距离（取 container 或 pill 中更大的 bottom 值） - const bottom = Math.max( - parseFloat(debugInfo.value.containerRectBottom || 0), - parseFloat(debugInfo.value.pillRectBottom || 0) - ) - debugInfo.value.distanceFromBottom = (window.innerHeight - bottom).toFixed(2) -} - -onMounted(() => { - setTimeout(updateDebugInfo, 500) - const debugInterval = setInterval(updateDebugInfo, 1000) - onUnmounted(() => clearInterval(debugInterval)) -})