todo

Web/src/App.vue

@@ -4,7 +4,17 @@
     class="app-provider"
   >
     <div class="app-root">
-      <RouterView />
+      <router-view v-slot="{ Component }">
+        <keep-alive
+          :include="cachedViews"
+          :max="8"
+        >
+          <component
+            :is="Component"
+            :key="route.name"
+          />
+        </keep-alive>
+      </router-view>
       <van-tabbar
         v-show="showTabbar"
         v-model="active"
@@ -79,6 +89,15 @@ import '@/styles/common.css'
 
 const messageStore = useMessageStore()
 
+// 定义需要缓存的页面组件名称
+const cachedViews = ref([
+  'CalendarV2', // 日历V2页面
+  'CalendarView', // 日历V1页面
+  'StatisticsView', // 统计页面
+  'BalanceView', // 账单页面
+  'BudgetView' // 预算页面
+])
+
 const updateVh = () => {
   const vh = window.innerHeight
   document.documentElement.style.setProperty('--vh', `${vh}px`)
@@ -122,6 +141,7 @@ const showTabbar = computed(() => {
   return (
     route.path === '/' ||
     route.path === '/calendar' ||
+    route.path === '/calendar-v2' ||
     route.path === '/message' ||
     route.path === '/setting' ||
     route.path === '/balance' ||
@@ -136,6 +156,8 @@ const theme = ref('light')
 const updateTheme = () => {
   const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
   theme.value = isDark ? 'dark' : 'light'
+  // 在文档根元素上设置 data-theme 属性，使 CSS 变量生效
+  document.documentElement.setAttribute('data-theme', theme.value)
 }
 
 // 监听系统主题变化
@@ -165,6 +187,7 @@ const setActive = (path) => {
   active.value = (() => {
     switch (path) {
       case '/calendar':
+      case '/calendar-v2':
         return 'ccalendar'
       case '/balance':
       case '/message':
@@ -180,7 +203,7 @@ const setActive = (path) => {
 }
 
 const isShowAddBill = computed(() => {
-  return route.path === '/' || route.path === '/balance' || route.path === '/message' || route.path === '/calendar'
+  return route.path === '/' || route.path === '/balance' || route.path === '/message' || route.path === '/calendar' || route.path === '/calendar-v2'
 })
 
 onUnmounted(() => {