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

refactor: 移除调试代码，优化底部导航样式
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 20s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Details
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Details
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
Details

Browse Source
This commit is contained in:
SunCheng
2026-02-11 17:30:13 +08:00
parent d439beb32d
commit aff0cbb55e
1 changed files with 0 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
Web/src/App.vue
View File

@@ -36,117 +36,6 @@
/>
<span>新版本可用，点击刷新</span>
</div>
<!-- 调试信息面板（检测 GlassBottomNav） -->
<div
v-if="showDebug"
class="debug-panel"
>
<div class="debug-title">
GlassBottomNav 调试信息
</div>
<div class="debug-section">
<div class="debug-subtitle">
容器检查 (.glass-nav-container)
</div>
<div
class="debug-item"
:style="{ color: debugInfo.containerExists ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
>
元素存在: {{ debugInfo.containerExists ? '✓ 是' : '✗ 否' }}
</div>
<div class="debug-item">
position: {{ debugInfo.containerPosition }}
</div>
<div class="debug-item">
bottom (CSS): {{ debugInfo.containerBottomStyle }}
</div>
<div
class="debug-item"
:style="{ fontWeight: 'bold', color: '#ff9800' }"
>
bottom (实际): {{ debugInfo.containerRectBottom }}px
</div>
<div class="debug-item">
width: {{ debugInfo.containerWidth }}px
</div>
<div class="debug-item">
height: {{ debugInfo.containerHeight }}px
</div>
<div class="debug-item">
z-index: {{ debugInfo.containerZIndex }}
</div>
</div>
<div class="debug-section">
<div class="debug-subtitle">
药丸导航 (.nav-pill)
</div>
<div
class="debug-item"
:style="{ color: debugInfo.pillExists ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
>
元素存在: {{ debugInfo.pillExists ? '✓ 是' : '✗ 否' }}
</div>
<div class="debug-item">
width: {{ debugInfo.pillWidth }}px
</div>
<div class="debug-item">
height: {{ debugInfo.pillHeight }}px
</div>
<div
class="debug-item"
:style="{ fontWeight: 'bold', color: '#ff9800' }"
>
bottom (实际): {{ debugInfo.pillRectBottom }}px
</div>
</div>
<div class="debug-section">
<div class="debug-subtitle">
父容器 (.app-root)
</div>
<div class="debug-item">
overflow: {{ debugInfo.appRootOverflow }}
</div>
<div class="debug-item">
height: {{ debugInfo.appRootHeight }}px
</div>
<div class="debug-item">
position: {{ debugInfo.appRootPosition }}
</div>
</div>
<div class="debug-section">
<div class="debug-subtitle">
视口信息
</div>
<div class="debug-item">
window.innerHeight: {{ debugInfo.windowHeight }}px
</div>
<div class="debug-item">
--vh: {{ debugInfo.vhVar }}
</div>
<div class="debug-item">
safe-area-bottom: {{ debugInfo.safeAreaBottom }}
</div>
</div>
<div class="debug-section">
<div class="debug-subtitle">
结果
</div>
<div
class="debug-item"
:style="{ color: parseFloat(debugInfo.distanceFromBottom) < 2 ? '#81c784' : '#ff4d4f', fontWeight: 'bold', fontSize: '12px' }"
>
距离底部: {{ debugInfo.distanceFromBottom }}px
{{ parseFloat(debugInfo.distanceFromBottom) < 2 ? '✓ 已贴底' : '✗ 未贴底' }}
</div>
</div>
<button
class="debug-close"
@click="showDebug = false"
>
关闭
</button>
</div>
</div>
</van-config-provider>
</template>
@@ -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))
})
</script>
<style scoped>
@@ -410,72 +217,4 @@ onMounted(() => {
.update-icon {
font-size: 18px;
}
/* 调试面板样式 */
.debug-panel {
position: fixed;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 12px;
border-radius: 8px;
font-size: 10px;
z-index: 9999;
min-width: 240px;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
font-family: 'Courier New', monospace;
}
.debug-title {
font-weight: bold;
margin-bottom: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
padding-bottom: 6px;
font-size: 11px;
color: #4fc3f7;
}
.debug-section {
margin: 8px 0;
padding: 6px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
border-left: 3px solid #4fc3f7;
}
.debug-subtitle {
font-weight: bold;
margin-bottom: 4px;
font-size: 10px;
color: #81c784;
}
.debug-item {
margin: 3px 0;
line-height: 1.5;
padding-left: 8px;
}
.debug-close {
margin-top: 10px;
padding: 6px 12px;
background: linear-gradient(135deg, #ff4d4f, #ff7875);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
width: 100%;
font-weight: bold;
box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
}
.debug-close:active {
opacity: 0.8;
transform: scale(0.98);
}
</style>