237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 添加appReady状态控制应用显示时机
- 在checkLoginStatus完成后才显示主界面
- 添加加载占位符动画（云图标脉冲效果）
- 使用v-if/v-else确保UI状态一致性

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yuyx
2025-11-30 11:07:07 +08:00
parent 9f0f8f69af
commit c4d3c15403
2 changed files with 39 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/app.html
View File

@@ -245,6 +245,29 @@
/* 防止 Vue 初始化前显示原始模板 */ /* 防止 Vue 初始化前显示原始模板 */
[v-cloak] { display: none !important; } [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; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { body {
@@ -1009,6 +1032,15 @@
</head> </head>
<body> <body>
<div id="app" v-cloak> <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-container" v-if="!isLoggedIn">
<div class="auth-box"> <div class="auth-box">
<div class="auth-title"> <div class="auth-title">
@@ -2955,6 +2987,7 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
<style> <style>

6
frontend/app.js
View File

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