EmailBill/Web/src/App.vue

<template>
  <van-config-provider
    :theme="theme"
    :theme-vars="themeVars"
    class="app-provider"
  >
    <div class="app-root">
      <router-view v-slot="{ Component }">
        <keep-alive
          :include="cachedViews"
          :max="8"
        >
          <component
            :is="Component"
            :key="route.name"
          />
        </keep-alive>
      </router-view>

      <!-- 底部导航栏（全局统一） -->
      <GlassBottomNav v-if="showNav" />

      <GlobalAddBill
        v-if="isShowAddBill"
        @success="handleAddTransactionSuccess"
      />

      <div
        v-if="needRefresh"
        class="update-toast"
        @click="updateServiceWorker"
      >
        <van-icon
          name="upgrade"
          class="update-icon"
        />
        <span>新版本可用，点击刷新</span>
      </div>
    </div>
  </van-config-provider>
</template>

<script setup>
import { RouterView, useRoute } from 'vue-router'
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { useMessageStore } from '@/stores/message'
import GlobalAddBill from '@/components/Global/GlobalAddBill.vue'
import GlassBottomNav from '@/components/GlassBottomNav.vue'
import '@/styles/common.css'
import { needRefresh, updateServiceWorker } from './registerServiceWorker'

const messageStore = useMessageStore()

// 定义需要缓存的页面组件名称
const cachedViews = ref([
  'CalendarV2', // 日历V2页面
  'StatisticsView', // 统计页面
  'StatisticsV2View', // 统计V2页面
  'BalanceView', // 账单页面
  'BudgetV2View' // 预算V2页面
])

const updateVh = () => {
  const vh = window.innerHeight
  document.documentElement.style.setProperty('--vh', `${vh}px`)
}

// 修复 PWA 模式下键盘收起页面不回弹的问题
const handleFocusOut = () => {
  if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
    // 延迟一小段时间执行，确保键盘收起动作已开始
    setTimeout(() => {
      // 强制回到顶部
      window.scrollTo(0, 0)
      // 同时也触发一次高度更新
      updateVh()
    }, 100)
  }
}

onMounted(() => {
  updateVh()
  window.addEventListener('resize', updateVh)
  if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', updateVh)
  }
  // 注册全局失去焦点监听
  document.addEventListener('focusout', handleFocusOut)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateVh)
  if (window.visualViewport) {
    window.visualViewport.removeEventListener('resize', updateVh)
  }
  // 销毁监听
  document.removeEventListener('focusout', handleFocusOut)
})

const route = useRoute()
const theme = ref('light')

// Vant UI 主题变量映射
const themeVars = computed(() => {
  const vars = {
    navBarBackground: 'var(--bg-primary)',
    navBarTextColor: 'var(--text-primary)',
    cardBackground: 'var(--bg-secondary)',
    cellBackground: 'var(--bg-secondary)',
    background: 'var(--bg-primary)',
    background2: 'var(--bg-secondary)',
    textColor: 'var(--text-primary)',
    textColor2: 'var(--text-secondary)',
    borderColor: 'var(--bg-tertiary)',
    tabbarBackground: 'var(--bg-primary)'
  }
  return vars
})

// 检测系统深色模式
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)
}

// 监听系统主题变化
let mediaQuery
onMounted(() => {
  updateTheme()
  mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
  mediaQuery.addEventListener('change', updateTheme)
})

setInterval(() => {
  messageStore.updateUnreadCount()
}, 60 * 1000) // 每60秒更新一次未读消息数

// 监听路由变化调整
watch(
  () => route.path,
  () => {
    messageStore.updateUnreadCount()
  }
)

const isShowAddBill = computed(() => {
  return route.path === '/' || route.path === '/balance' || route.path === '/message' || route.path === '/calendar-v2'
})

// 需要显示底部导航栏的路由
const showNav = computed(() => {
  return [
    '/', '/statistics-v2',
    '/calendar-v2',
    '/balance', '/message',
    '/budget-v2', '/setting'
  ].includes(route.path)
})

onUnmounted(() => {
  if (mediaQuery) {
    mediaQuery.removeEventListener('change', updateTheme)
  }
})

const handleAddTransactionSuccess = () => {
  // 当添加交易成功时，通知当前页面刷新数据
  const event = new Event('transactions-changed')
  window.dispatchEvent(event)
}
</script>

<style scoped>
.app-provider {
  /* 使用准确的视口高度 CSS 变量 */
  height: var(--vh, 100vh);
  width: 100%;
  background-color: var(--van-background);
}

.app-root {
  height: 100%;
  width: 100%;
  position: relative;
  padding-top: max(0px, calc(env(safe-area-inset-top, 0px) * 0.75));
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--van-background);
}

.update-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--van-primary-color);
  color: white;
  padding: 10px 20px;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.update-toast:active {
  transform: translateX(-50%) scale(0.95);
}

.update-icon {
  font-size: 18px;
}
</style>