59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
|
<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>
|
|||
|
|
|