fix

Web/src/App.vue

@@ -3,19 +3,19 @@
     <div class="app-root">
       <RouterView />
       <van-tabbar v-model="active" v-show="showTabbar">
-        <van-tabbar-item icon="notes" to="/calendar">
+        <van-tabbar-item name="ccalendar" icon="notes" to="/calendar">
           日历
         </van-tabbar-item>
-        <van-tabbar-item icon="chart-trending-o" to="/statistics">
+        <van-tabbar-item name="statistics" icon="chart-trending-o" to="/statistics">
           统计
         </van-tabbar-item>
-        <van-tabbar-item icon="balance-list" to="/" @click="handleTabClick('/')">
+        <van-tabbar-item name="balance" icon="balance-list" to="/" @click="handleTabClick('/')">
           账单
         </van-tabbar-item>
-        <van-tabbar-item icon="records" to="/email" @click="handleTabClick('/email')">
+        <van-tabbar-item name="email" icon="records" to="/email" @click="handleTabClick('/email')">
           邮件
         </van-tabbar-item>
-        <van-tabbar-item icon="setting" to="/setting">
+        <van-tabbar-item name="setting" icon="setting" to="/setting">
           设置
         </van-tabbar-item>
       </van-tabbar>
@@ -25,7 +25,7 @@
 
 <script setup>
 import { RouterView, useRoute } from 'vue-router'
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import '@/styles/common.css'
 
 const updateVh = () => {
@@ -61,7 +61,7 @@ const showTabbar = computed(() => {
     route.path === '/statistics'
 })
 
-const active = ref(0)
+const active = ref('')
 const theme = ref('light')
 
 // 检测系统深色模式
@@ -76,8 +76,32 @@ onMounted(() => {
   updateTheme()
   mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
   mediaQuery.addEventListener('change', updateTheme)
+  setActive(route.path)
 })
 
+// 监听路由变化调整
+watch(() => route.path, (newPath) => {
+  setActive(newPath)
+})
+
+const setActive = (path) => {
+  active.value = (() => {
+    switch (path) {
+      case '/calendar':
+        return 'ccalendar'
+      case '/statistics':
+        return 'statistics'
+      case '/email':
+        return 'email'
+      case '/setting':
+        return 'setting'
+      default:
+        return 'balance'
+    }
+  })()
+  console.log(active.value, path)
+}
+
 onUnmounted(() => {
   if (mediaQuery) {
     mediaQuery.removeEventListener('change', updateTheme)