refactor: 移除调试代码，优化底部导航样式

Web/src/App.vue

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