wecom_it_smart_desk/frontend-h5/src/App.vue

<!-- =============================================================================
// 企微IT智能服务台 — H5用户端根组件
// =============================================================================
// 说明：Vue3 应用的根组件，所有页面都渲染在这个组件内
// 使用 Vant4 ConfigProvider 支持暗黑模式
// ============================================================================= -->

<template>
  <!-- Vant4 主题配置：根据 themeStore 切换浅色/深色 -->
  <van-config-provider :theme="themeStore.currentTheme">
    <!-- v0.5.2 优化:用 v-if 控制路由视图,未挂载时显示 loading 占位 -->
    <router-view v-if="appReady" v-slot="{ Component }">
      <Suspense>
        <component :is="Component" />
        <template #fallback>
          <div class="app-loading">
            <van-loading type="spinner" color="#1989fa" size="36" />
            <div class="app-loading__text">正在加载...</div>
          </div>
        </template>
      </Suspense>
    </router-view>
    <!-- 首屏 fallback,Vue 还没 mount 完成时显示 -->
    <div v-else class="app-loading">
      <van-loading type="spinner" color="#1989fa" size="36" />
      <div class="app-loading__text">正在加载...</div>
    </div>
  </van-config-provider>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useThemeStore } from '@/stores/theme'

/** 主题 Store */
const themeStore = useThemeStore()

/** v0.5.2 优化:appReady 控制路由视图是否渲染,避免空白闪烁 */
const appReady = ref(false)

// 应用挂载时初始化主题（从 localStorage 读取偏好并应用）
onMounted(() => {
  themeStore.initTheme()
  // 标记 app 已就绪,触发 router-view 渲染
  appReady.value = true
})
</script>

<style>
/* v0.5.2 新增:全局 loading 样式 */
.app-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f7f8fa;
}
.app-loading__text {
  margin-top: 12px;
  font-size: 14px;
  color: #969799;
}
/* 根组件样式已在 global.css 中定义 */
</style>