first commot

Web/src/App.vue

@@ -0,0 +1,58 @@
+<template>
+  <van-config-provider :theme="theme">
+    <RouterView />
+    <van-tabbar v-model="active">
+      <van-tabbar-item icon="notes-o" to="/calendar">
+        日历
+      </van-tabbar-item>
+      <van-tabbar-item icon="balance-list-o" to="/" @click="handleTabClick('/')">
+        账单
+      </van-tabbar-item>
+      <van-tabbar-item icon="records-o" to="/email" @click="handleTabClick('/email')">
+        邮件
+      </van-tabbar-item>
+      <van-tabbar-item icon="setting-o" to="/setting">
+        设置
+      </van-tabbar-item>
+    </van-tabbar>
+  </van-config-provider>
+</template>
+
+<script setup>
+import { RouterView, useRoute } from 'vue-router'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const route = useRoute()
+
+const active = ref(0)
+const theme = ref('light')
+
+// 检测系统深色模式
+const updateTheme = () => {
+  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  theme.value = isDark ? 'dark' : 'light'
+}
+
+// 监听系统主题变化
+let mediaQuery
+onMounted(() => {
+  updateTheme()
+  mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+  mediaQuery.addEventListener('change', updateTheme)
+})
+
+onUnmounted(() => {
+  if (mediaQuery) {
+    mediaQuery.removeEventListener('change', updateTheme)
+  }
+})
+
+// 处理tab点击，如果点击当前页面则滚动到顶部
+const handleTabClick = (path) => {
+  if (route.path === path) {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+}
+
+</script>
+