refactor: 移除调试代码，优化底部导航样式
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 20s
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 20s
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
This commit is contained in:
SunCheng
261
Web/src/App.vue
261
Web/src/App.vue
@@ -36,117 +36,6 @@
|
|||||||
/>
|
/>
|
||||||
<span>新版本可用，点击刷新</span>
|
<span>新版本可用，点击刷新</span>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</van-config-provider>
|
</van-config-provider>
|
||||||
</template>
|
</template>
|
||||||
@@ -282,88 +171,6 @@ const handleAddTransactionSuccess = () => {
|
|||||||
const event = new Event('transactions-changed')
|
const event = new Event('transactions-changed')
|
||||||
window.dispatchEvent(event)
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -410,72 +217,4 @@ onMounted(() => {
|
|||||||
.update-icon {
|
.update-icon {
|
||||||
font-size: 18px;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user