feat(screen): 为路由初始化添加加载指示器

添加加载旋转器以防止路由加载期间出现白屏。确保路由器准备就绪后再显示内容，并包含错误处理以避免永久白屏。包含旋转器动画的CSS。

packages/screen/src/App.vue

@@ -6,20 +6,35 @@
       </template>
       <router-view v-else></router-view>
     </template>
+    <!-- 路由加载中的指示器，避免白屏 -->
+    <div v-else class="loading-container">
+      <div class="loading-spinner"></div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import Index from "./views/index.vue";
 import { onMounted } from 'vue';
+
 const route = useRoute()
+const router = useRouter()
 const pageLoaded = ref(false)
-onMounted(() => {
-  setTimeout(()=>{
+
+onMounted(async () => {
+  try {
+    // 等待路由完全准备好，确保 route.meta 已正确加载
+    // 这样可以避免大组件懒加载时的竞态条件问题
+    await router.isReady()
+  } catch (error) {
+    // 即使路由加载失败，也要显示页面，避免永久白屏
+    console.error('路由初始化失败:', error)
+  } finally {
+    // 无论成功或失败，都设置 pageLoaded 为 true
     pageLoaded.value = true
-  }, 50)
+  }
 })
 </script>
 
@@ -29,4 +44,28 @@ onMounted(() => {
   height: 100vh;
   overflow: hidden;
 }
+
+.loading-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #0a0e27;
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(255, 255, 255, 0.1);
+  border-top-color: #409eff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>