feat: 添加调试信息面板，优化主题色彩和底部导航栏布局

Web/src/App.vue

@@ -76,6 +76,73 @@
         />
         <span>新版本可用，点击刷新</span>
       </div>
+
+      <!-- 调试信息面板 -->
+      <div
+        v-if="showDebug"
+        class="debug-panel"
+      >
+        <div class="debug-title">
+          底部导航栏调试信息
+        </div>
+        <div class="debug-section">
+          <div class="debug-subtitle">
+            视口尺寸
+          </div>
+          <div class="debug-item">
+            窗口高度: {{ debugInfo.windowHeight }}px
+          </div>
+          <div class="debug-item">
+            视口高度: {{ debugInfo.viewportHeight }}px
+          </div>
+          <div class="debug-item">
+            App Root 高度: {{ debugInfo.appRootHeight }}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>
+        <button
+          class="debug-close"
+          @click="showDebug = false"
+        >
+          关闭
+        </button>
+      </div>
     </div>
   </van-config-provider>
 </template>
@@ -243,6 +310,70 @@ const handleAddTransactionSuccess = () => {
   const event = new Event('transactions-changed')
   window.dispatchEvent(event)
 }
+
+// 调试信息
+const showDebug = ref(true) // 默认显示调试面板
+const debugInfo = ref({
+  windowHeight: 0,
+  viewportHeight: 0,
+  safeAreaBottom: '0',
+  tabbarHeight: 0,
+  tabbarBottom: 0,
+  tabbarTop: 0,
+  tabbarPaddingBottom: '0',
+  tabbarPosition: '',
+  tabbarBottomStyle: '',
+  tabbarMinHeight: '',
+  tabbarBoxSizing: '',
+  appRootHeight: 0
+})
+
+// 更新调试信息
+const updateDebugInfo = () => {
+  debugInfo.value.windowHeight = window.innerHeight
+  debugInfo.value.viewportHeight = window.visualViewport?.height || window.innerHeight
+  
+  // 获取安全区域底部值
+  const testDiv = document.createElement('div')
+  testDiv.style.paddingBottom = 'env(safe-area-inset-bottom, 0px)'
+  document.body.appendChild(testDiv)
+  const computed = window.getComputedStyle(testDiv)
+  debugInfo.value.safeAreaBottom = computed.paddingBottom
+  document.body.removeChild(testDiv)
+  
+  // 获取 TabBar 的实际尺寸和位置
+  const tabbar = document.querySelector('.van-tabbar')
+  if (tabbar) {
+    const rect = tabbar.getBoundingClientRect()
+    const styles = window.getComputedStyle(tabbar)
+    debugInfo.value.tabbarHeight = rect.height.toFixed(2)
+    debugInfo.value.tabbarBottom = rect.bottom.toFixed(2)
+    debugInfo.value.tabbarPaddingBottom = styles.paddingBottom
+    debugInfo.value.tabbarTop = rect.top.toFixed(2)
+    debugInfo.value.tabbarPosition = styles.position
+    debugInfo.value.tabbarBottomStyle = styles.bottom
+    debugInfo.value.tabbarMinHeight = styles.minHeight
+    debugInfo.value.tabbarBoxSizing = styles.boxSizing
+  }
+  
+  // 获取 app-root 的高度
+  const appRoot = document.querySelector('.app-root')
+  if (appRoot) {
+    const rect = appRoot.getBoundingClientRect()
+    debugInfo.value.appRootHeight = rect.height.toFixed(2)
+  }
+}
+
+onMounted(() => {
+  // 延迟获取调试信息，确保 DOM 已渲染
+  setTimeout(updateDebugInfo, 500)
+  // 每秒更新一次调试信息
+  const debugInterval = setInterval(updateDebugInfo, 1000)
+  
+  onUnmounted(() => {
+    clearInterval(debugInterval)
+  })
+})
 </script>
 
 <style scoped>
@@ -328,4 +459,72 @@ const handleAddTransactionSuccess = () => {
 .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>