v0.5.5: 应急页 v0.5.4 + 移除IT设备升级 + admin登录修复 + 内容审核架构 + 知识库

frontend-h5/src/App.vue

@@ -8,23 +8,58 @@
 <template>
   <!-- Vant4 主题配置：根据 themeStore 切换浅色/深色 -->
   <van-config-provider :theme="themeStore.currentTheme">
-    <router-view />
+    <!-- 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 { onMounted } from 'vue'
+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>