fix

Web/src/App.vue

@@ -16,51 +16,6 @@
           />
         </keep-alive>
       </router-view>
-      <van-tabbar
-        v-show="showTabbar"
-        v-model="active"
-        style="position: fixed !important; bottom: 0 !important; left: 0; right: 0;"
-      >
-        <van-tabbar-item
-          name="ccalendar"
-          icon="notes"
-          to="/calendar"
-        >
-          日历
-        </van-tabbar-item>
-        <van-tabbar-item
-          name="statistics"
-          icon="chart-trending-o"
-          to="/"
-          @click="handleTabClick('/statistics')"
-        >
-          统计
-        </van-tabbar-item>
-        <van-tabbar-item
-          name="balance"
-          icon="balance-list"
-          :to="messageStore.unreadCount > 0 ? '/balance?tab=message' : '/balance'"
-          :badge="messageStore.unreadCount || null"
-          @click="handleTabClick('/balance')"
-        >
-          账单
-        </van-tabbar-item>
-        <van-tabbar-item
-          name="budget"
-          icon="bill-o"
-          to="/budget"
-          @click="handleTabClick('/budget')"
-        >
-          预算
-        </van-tabbar-item>
-        <van-tabbar-item
-          name="setting"
-          icon="setting"
-          to="/setting"
-        >
-          设置
-        </van-tabbar-item>
-      </van-tabbar>
       <GlobalAddBill
         v-if="isShowAddBill"
         @success="handleAddTransactionSuccess"
@@ -78,84 +33,95 @@
         <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">
-            TabBar 存在性检查
+            容器检查 (.glass-nav-container)
           </div>
           <div
             class="debug-item"
-            :style="{ color: debugInfo.tabbarExists ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
+            :style="{ color: debugInfo.containerExists ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
           >
-            TabBar 元素存在: {{ debugInfo.tabbarExists ? '✓ 是' : '✗ 否' }}
+            元素存在: {{ debugInfo.containerExists ? '✓ 是' : '✗ 否' }}
-          </div>
-          <div
-            class="debug-item"
-            :style="{ color: debugInfo.tabbarVisible ? '#81c784' : '#ff4d4f', fontWeight: 'bold' }"
-          >
-            TabBar 可见: {{ debugInfo.tabbarVisible ? '✓ 是' : '✗ 否' }}
           </div>
           <div class="debug-item">
-            display: {{ debugInfo.tabbarDisplay }}
+            position: {{ debugInfo.containerPosition }}
           </div>
           <div class="debug-item">
-            opacity: {{ debugInfo.tabbarOpacity }}
+            bottom (CSS): {{ debugInfo.containerBottomStyle }}
-          </div>
-        </div>
-        <div class="debug-section">
-          <div class="debug-subtitle">
-            TabBar 位置样式
-          </div>
-          <div class="debug-item">
-            position: {{ debugInfo.tabbarPosition }}
-          </div>
-          <div class="debug-item">
-            top (CSS): {{ debugInfo.tabbarTopStyle }}
-          </div>
-          <div class="debug-item">
-            bottom (CSS): {{ debugInfo.tabbarBottomStyle }}
-          </div>
-          <div class="debug-item">
-            left (实际): {{ debugInfo.tabbarLeft }}px
-          </div>
-          <div class="debug-item">
-            right (实际): {{ debugInfo.tabbarRight }}px
           </div>
           <div
             class="debug-item"
             :style="{ fontWeight: 'bold', color: '#ff9800' }"
           >
-            top (实际): {{ debugInfo.tabbarTop }}px
+            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.tabbarBottom }}px
+            bottom (实际): {{ debugInfo.pillRectBottom }}px
           </div>
         </div>
         <div class="debug-section">
           <div class="debug-subtitle">
-            TabBar 尺寸
+            父容器 (.app-root)
           </div>
           <div class="debug-item">
-            width: {{ debugInfo.tabbarWidth }}px
+            overflow: {{ debugInfo.appRootOverflow }}
           </div>
           <div class="debug-item">
-            height: {{ debugInfo.tabbarHeight }}px
+            height: {{ debugInfo.appRootHeight }}px
           </div>
           <div class="debug-item">
-            padding-bottom: {{ debugInfo.tabbarPaddingBottom }}
+            position: {{ debugInfo.appRootPosition }}
+          </div>
+        </div>
+        <div class="debug-section">
+          <div class="debug-subtitle">
+            视口信息
           </div>
           <div class="debug-item">
-            box-sizing: {{ debugInfo.tabbarBoxSizing }}
+            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">
@@ -164,9 +130,10 @@
           </div>
           <div
             class="debug-item"
-            :style="{ color: debugInfo.distanceFromBottom === '0.00' ? '#81c784' : '#ff4d4f', fontWeight: 'bold', fontSize: '12px' }"
+            :style="{ color: parseFloat(debugInfo.distanceFromBottom) < 2 ? '#81c784' : '#ff4d4f', fontWeight: 'bold', fontSize: '12px' }"
           >
-            距离底部: {{ debugInfo.distanceFromBottom }}px {{ debugInfo.distanceFromBottom === '0.00' ? '✓ 已贴底' : '✗ 未贴底' }}
+            距离底部: {{ debugInfo.distanceFromBottom }}px
+            {{ parseFloat(debugInfo.distanceFromBottom) < 2 ? '✓ 已贴底' : '✗ 未贴底' }}
           </div>
         </div>
         <button
@@ -176,19 +143,6 @@
           关闭
         </button>
       </div>
-      
-      <!-- 视觉调试辅助线 - 标记屏幕底部 -->
-      <div
-        v-if="showDebug"
-        class="debug-bottom-line"
-      />
-      
-      <!-- 视觉调试辅助线 - 标记 TabBar 顶部 -->
-      <div
-        v-if="showDebug"
-        class="debug-tabbar-top-line"
-        :style="{ top: debugInfo.tabbarTop + 'px' }"
-      />
     </div>
   </van-config-provider>
 </template>
@@ -198,8 +152,8 @@ import { RouterView, useRoute } from 'vue-router'
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useMessageStore } from '@/stores/message'
 import GlobalAddBill from '@/components/Global/GlobalAddBill.vue'
-import { needRefresh, updateServiceWorker } from './registerServiceWorker'
 import '@/styles/common.css'
+import { needRefresh, updateServiceWorker } from './registerServiceWorker'
 
 const messageStore = useMessageStore()
 
@@ -251,20 +205,6 @@ onUnmounted(() => {
 })
 
 const route = useRoute()
-// 根据路由判断是否显示Tabbar
-const showTabbar = computed(() => {
-  return (
-    route.path === '/' ||
-    route.path === '/calendar' ||
-    route.path === '/calendar-v2' ||
-    route.path === '/message' ||
-    route.path === '/setting' ||
-    route.path === '/balance' ||
-    route.path === '/budget'
-  )
-})
-
-const active = ref('')
 const theme = ref('light')
 
 // Vant UI 主题变量映射
@@ -298,7 +238,6 @@ onMounted(() => {
   updateTheme()
   mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
   mediaQuery.addEventListener('change', updateTheme)
-  setActive(route.path)
 })
 
 setInterval(() => {
@@ -308,32 +247,11 @@ setInterval(() => {
 // 监听路由变化调整
 watch(
   () => route.path,
-  (newPath) => {
+  () => {
-    setActive(newPath)
-
     messageStore.updateUnreadCount()
   }
 )
 
-const setActive = (path) => {
-  active.value = (() => {
-    switch (path) {
-      case '/calendar':
-      case '/calendar-v2':
-        return 'ccalendar'
-      case '/balance':
-      case '/message':
-        return 'balance'
-      case '/setting':
-        return 'setting'
-      case '/budget':
-        return 'budget'
-      default:
-        return 'statistics'
-    }
-  })()
-}
-
 const isShowAddBill = computed(() => {
   return route.path === '/' || route.path === '/balance' || route.path === '/message' || route.path === '/calendar' || route.path === '/calendar-v2'
 })
@@ -344,116 +262,92 @@ onUnmounted(() => {
   }
 })
 
-// 处理tab点击，如果点击当前页面则滚动到顶部
-const handleTabClick = (path) => {
-  if (route.path === path) {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-}
-
 const handleAddTransactionSuccess = () => {
   // 当添加交易成功时，通知当前页面刷新数据
   const event = new Event('transactions-changed')
   window.dispatchEvent(event)
 }
 
-// 调试信息
+// ===== 调试信息 =====
-const showDebug = ref(true) // 默认显示调试面板
+const showDebug = ref(true)
 const debugInfo = ref({
-  windowHeight: 0,
+  containerExists: false,
-  viewportHeight: 0,
+  containerPosition: '',
-  safeAreaBottom: '0',
+  containerBottomStyle: '',
-  tabbarExists: false,
+  containerRectBottom: 0,
-  tabbarVisible: false,
+  containerWidth: 0,
-  tabbarHeight: 0,
+  containerHeight: 0,
-  tabbarWidth: 0,
+  containerZIndex: '',
-  tabbarBottom: 0,
+  pillExists: false,
-  tabbarTop: 0,
+  pillWidth: 0,
-  tabbarLeft: 0,
+  pillHeight: 0,
-  tabbarRight: 0,
+  pillRectBottom: 0,
-  tabbarPaddingBottom: '0',
+  appRootOverflow: '',
-  tabbarPosition: '',
-  tabbarBottomStyle: '',
-  tabbarTopStyle: '',
-  tabbarMinHeight: '',
-  tabbarBoxSizing: '',
-  tabbarDisplay: '',
-  tabbarOpacity: '',
   appRootHeight: 0,
-  appRootBottom: 0,
+  appRootPosition: '',
-  bodyHeight: 0,
+  windowHeight: 0,
-  htmlHeight: 0,
+  vhVar: '',
-  tabbarTransform: '',
+  safeAreaBottom: '',
-  tabbarZIndex: '',
+  distanceFromBottom: '0'
-  distanceFromBottom: 0
 })
 
-// 更新调试信息
 const updateDebugInfo = () => {
   debugInfo.value.windowHeight = window.innerHeight
-  debugInfo.value.viewportHeight = window.visualViewport?.height || 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)
-  const computed = window.getComputedStyle(testDiv)
+  debugInfo.value.safeAreaBottom = getComputedStyle(testDiv).paddingBottom
-  debugInfo.value.safeAreaBottom = computed.paddingBottom
   document.body.removeChild(testDiv)
 
-  // 获取 TabBar 的实际尺寸和位置
+  // .glass-nav-container
-  const tabbar = document.querySelector('.van-tabbar')
+  const container = document.querySelector('.glass-nav-container')
-  debugInfo.value.tabbarExists = !!tabbar
+  debugInfo.value.containerExists = !!container
-  debugInfo.value.tabbarVisible = tabbar ? window.getComputedStyle(tabbar).display !== 'none' : false
+  if (container) {
-  
+    const rect = container.getBoundingClientRect()
-  if (tabbar) {
+    const styles = getComputedStyle(container)
-    const rect = tabbar.getBoundingClientRect()
+    debugInfo.value.containerPosition = styles.position
-    const styles = window.getComputedStyle(tabbar)
+    debugInfo.value.containerBottomStyle = styles.bottom
-    debugInfo.value.tabbarHeight = rect.height.toFixed(2)
+    debugInfo.value.containerRectBottom = rect.bottom.toFixed(2)
-    debugInfo.value.tabbarWidth = rect.width.toFixed(2)
+    debugInfo.value.containerWidth = rect.width.toFixed(2)
-    debugInfo.value.tabbarBottom = rect.bottom.toFixed(2)
+    debugInfo.value.containerHeight = rect.height.toFixed(2)
-    debugInfo.value.tabbarPaddingBottom = styles.paddingBottom
+    debugInfo.value.containerZIndex = styles.zIndex
-    debugInfo.value.tabbarTop = rect.top.toFixed(2)
-    debugInfo.value.tabbarLeft = rect.left.toFixed(2)
-    debugInfo.value.tabbarRight = rect.right.toFixed(2)
-    debugInfo.value.tabbarPosition = styles.position
-    debugInfo.value.tabbarBottomStyle = styles.bottom
-    debugInfo.value.tabbarTopStyle = styles.top
-    debugInfo.value.tabbarMinHeight = styles.minHeight
-    debugInfo.value.tabbarBoxSizing = styles.boxSizing
-    debugInfo.value.tabbarDisplay = styles.display
-    debugInfo.value.tabbarOpacity = styles.opacity
-    
-    // 检查是否有 transform 或其他可能影响定位的样式
-    debugInfo.value.tabbarTransform = styles.transform
-    debugInfo.value.tabbarZIndex = styles.zIndex
   }
 
-  // 获取 app-root 的高度
+  // .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.appRootBottom = rect.bottom.toFixed(2)
+    debugInfo.value.appRootPosition = styles.position
   }
 
-  // 获取 body 和 html 的高度
+  // 距底部距离（取 container 或 pill 中更大的 bottom 值）
-  debugInfo.value.bodyHeight = document.body.getBoundingClientRect().height.toFixed(2)
+  const bottom = Math.max(
-  debugInfo.value.htmlHeight = document.documentElement.getBoundingClientRect().height.toFixed(2)
+    parseFloat(debugInfo.value.containerRectBottom || 0),
-  
+    parseFloat(debugInfo.value.pillRectBottom || 0)
-  // 计算 TabBar 距离屏幕底部的实际距离
+  )
-  debugInfo.value.distanceFromBottom = (window.innerHeight - parseFloat(debugInfo.value.tabbarBottom || 0)).toFixed(2)
+  debugInfo.value.distanceFromBottom = (window.innerHeight - bottom).toFixed(2)
 }
 
 onMounted(() => {
-  // 延迟获取调试信息，确保 DOM 已渲染
   setTimeout(updateDebugInfo, 500)
-  // 每秒更新一次调试信息
   const debugInterval = setInterval(updateDebugInfo, 1000)
-  
+  onUnmounted(() => clearInterval(debugInterval))
-  onUnmounted(() => {
-    clearInterval(debugInterval)
-  })
 })
 </script>
 
@@ -471,48 +365,10 @@ onMounted(() => {
   position: relative;
   padding-top: max(0px, calc(env(safe-area-inset-top, 0px) * 0.75));
   box-sizing: border-box;
-  overflow: clip;
+  overflow: hidden;
   background-color: var(--van-background);
 }
 
-/* TabBar 固定在底部 */
-:deep(.van-tabbar) {
-  position: fixed !important;
-  bottom: 0 !important;
-  left: 0;
-  right: 0;
-  /* 重置所有 padding，然后只添加安全区域 */
-  padding: 0 !important;
-  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
-  height: calc(50px + env(safe-area-inset-bottom, 0px)) !important;
-  box-sizing: border-box !important;
-  background: var(--bg-primary) !important;
-  border-top: 1px solid var(--bg-tertiary);
-}
-
-/* 确保 TabBar 项目居中 */
-:deep(.van-tabbar-item) {
-  padding: 0 !important;
-  height: 50px !important;
-  color: var(--text-secondary);
-}
-
-:deep(.van-tabbar-item--active) {
-  color: var(--color-primary);
-}
-
-.debug-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 10px;
-  font-size: 12px;
-  pointer-events: auto;
-}
-
 .update-toast {
   position: fixed;
   bottom: 80px;
@@ -607,27 +463,4 @@ onMounted(() => {
   opacity: 0.8;
   transform: scale(0.98);
 }
-
-/* 调试辅助线 - 屏幕底部红线 */
-.debug-bottom-line {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: red;
-  z-index: 10000;
-  pointer-events: none;
-}
-
-/* 调试辅助线 - TabBar 顶部蓝线 */
-.debug-tabbar-top-line {
-  position: fixed;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: blue;
-  z-index: 10000;
-  pointer-events: none;
-}
 </style>