🐛 修复页面刷新时UI闪烁问题

- 添加appReady状态控制应用显示时机 - 在checkLoginStatus完成后才显示主界面 - 添加加载占位符动画（云图标脉冲效果） - 使用v-if/v-else确保UI状态一致性 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 11:07:07 +08:00
parent 9f0f8f69af
commit c4d3c15403
2 changed files with 39 additions and 0 deletions
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -245,6 +245,29 @@
    /* 防止 Vue 初始化前显示原始模板 */
    [v-cloak] { display: none !important; }

+    /* 应用加载占位符 */
+    .app-loading {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--bg-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    }
+    .app-loading .loading-spinner {
+      font-size: 48px;
+      color: var(--accent-primary);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 0.4; transform: scale(0.95); }
+      50% { opacity: 1; transform: scale(1.05); }
+    }
+
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
@@ -1009,6 +1032,15 @@
 </head>
 <body>
  <div id="app" v-cloak>
+    <!-- 应用加载占位符（防止UI闪烁） -->
+    <div v-if="!appReady" class="app-loading">
+      <div class="loading-spinner">
+        <i class="fas fa-cloud"></i>
+      </div>
+    </div>
+
+    <!-- 应用主体内容 -->
+    <template v-else>
    <div class="auth-container" v-if="!isLoggedIn">
      <div class="auth-box">
        <div class="auth-title">
@@ -2955,6 +2987,7 @@
        </div>
      </div>
    </div>
+    </template>
  </div>

  <style>
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -7,6 +7,9 @@ createApp({
      // API配置 - 通过nginx代理访问
      apiBase: window.location.protocol + '//' + window.location.host,

+      // 应用状态
+      appReady: false,  // 应用是否初始化完成（防止UI闪烁）
+
      // 用户状态
      isLoggedIn: false,
      user: null,
@@ -1087,6 +1090,9 @@ handleDragLeave(e) {
        }
        // 清理可能残留的用户信息
        localStorage.removeItem('user');
+      } finally {
+        // 无论登录验证成功还是失败，都标记应用已准备就绪
+        this.appReady = true;
      }
    },