EmailBill/Web/src/App.vue

<template>
  <van-config-provider :theme="theme" class="app-root">
<pre
  style="position:fixed; left:0; top:0; z-index:9999;
         background:rgba(0,0,0,0.7); color:#0f0;
         font-size:10px; max-height:50vh; overflow:auto;">
  {{ log }}
</pre>

    <div class="app-main">
      <RouterView />
    </div>
    <van-tabbar v-model="active" v-show="showTabbar">
      <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, computed } from 'vue'

const log = ref('')

const updateInfo = () => {
  log.value = JSON.stringify({
    innerHeight: window.innerHeight,
    outerHeight: window.outerHeight,
    documentElementClientHeight: document.documentElement.clientHeight,
    viewport: window.visualViewport
      ? {
          height: window.visualViewport.height,
          offsetTop: window.visualViewport.offsetTop,
        }
      : null,
  }, null, 2)
}

onMounted(() => {
  updateInfo()
  window.addEventListener('resize', updateInfo)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateInfo)
})

const route = useRoute()
// 根据路由判断是否显示Tabbar
const showTabbar = computed(() => {
  return route.path === '/' ||
    route.path === '/calendar' ||
    route.path === '/email' ||
    route.path === '/setting'
})

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>

<style scoped>
.app-root {
  /* 用前面的 JS 动态高度方案，或至少用 100% 而不是 100vh */
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 主体内容自己撑开，给 Tabbar 留出空间 */
.app-main {
  flex: 1;
  overflow-y: auto;
}
</style>