feat: 项目加载优化

Yi.Ai.Vue3/src/main.ts

@@ -1,14 +1,14 @@
 // 引入ElementPlus所有图标
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
-import { ElMessage } from 'element-plus';
 import { createApp } from 'vue';
 import ElementPlusX from 'vue-element-plus-x';
+import 'element-plus/dist/index.css';
 import App from './App.vue';
+import { logBuildInfo } from './config/version';
 import router from './routers';
 import store from './stores';
 import './styles/index.scss';
 import 'virtual:uno.css';
-import 'element-plus/dist/index.css';
 import 'virtual:svg-icons-register';
 
 // 创建 Vue 应用
@@ -16,27 +16,78 @@ const app = createApp(App);
 
 // 安装插件
 app.use(router);
-app.use(ElMessage);
+app.use(store);
 app.use(ElementPlusX);
 
-// 注册图标
+// 注册所有 Element Plus 图标（临时方案，后续迁移到 fontawesome）
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }
 
-app.use(store);
+// 输出构建信息（使用统一版本配置）
+logBuildInfo();
 
-// 输出构建信息
-console.log(
-  `%c 意心AI 3.3 %c Build Info `,
-  'background:#35495e; padding: 4px; border-radius: 3px 0 0 3px; color: #fff',
-  'background:#41b883; padding: 4px; border-radius: 0 3px 3px 0; color: #fff',
-);
-// console.log(`🔹 Git Branch: ${__GIT_BRANCH__}`);
-console.log(`🔹 Git Commit: ${__GIT_HASH__}`);
-// console.log(`🔹 Commit Date: ${__GIT_DATE__}`);
-// console.log(`🔹 Build Time: ${__BUILD_TIME__}`);
+import { nextTick } from 'vue';
 
 // 挂载 Vue 应用
-// mount 完成说明应用初始化完毕，此时手动通知 loading 动画结束
 app.mount('#app');
+
+/**
+ * 检查页面是否真正渲染完成
+ * 改进策略：
+ * 1. 等待多个 requestAnimationFrame 确保浏览器完成绘制
+ * 2. 检查关键元素是否存在且有实际内容
+ * 3. 检查关键 CSS 是否已应用
+ * 4. 给予最小展示时间，避免闪烁
+ */
+function waitForPageRendered(): Promise<void> {
+  return new Promise((resolve) => {
+    const minDisplayTime = 800; // 最小展示时间 800ms，避免闪烁
+    const maxWaitTime = 8000;   // 最大等待时间 8 秒
+    const startTime = Date.now();
+
+    const checkRender = () => {
+      const elapsed = Date.now() - startTime;
+      const appElement = document.getElementById('app');
+
+      // 检查关键条件
+      const hasContent = appElement?.children.length > 0;
+      const hasVisibleHeight = (appElement?.offsetHeight || 0) > 200;
+      const hasRouterView = document.querySelector('.layout-container') !== null ||
+                           document.querySelector('.el-container') !== null ||
+                           document.querySelector('#app > div') !== null;
+
+      const isRendered = hasContent && hasVisibleHeight && hasRouterView;
+      const isMinTimeMet = elapsed >= minDisplayTime;
+      const isTimeout = elapsed >= maxWaitTime;
+
+      if ((isRendered && isMinTimeMet) || isTimeout) {
+        // 再多给一帧时间确保稳定
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => resolve());
+        });
+      } else {
+        requestAnimationFrame(checkRender);
+      }
+    };
+
+    // 等待 Vue 更新和浏览器绘制
+    nextTick(() => {
+      requestAnimationFrame(() => {
+        setTimeout(checkRender, 100);
+      });
+    });
+  });
+}
+
+// 第一阶段：Vue 应用已挂载
+if (typeof window.__hideAppLoader === 'function') {
+  window.__hideAppLoader('mounted');
+}
+
+// 等待页面真正渲染完成后再通知第二阶段
+waitForPageRendered().then(() => {
+  if (typeof window.__hideAppLoader === 'function') {
+    window.__hideAppLoader('rendered');
+  }
+});