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

🐛 修复页面刷新时短暂显示混乱UI的问题

Browse Source 
使用 Vue 的 v-cloak 指令，在 Vue 初始化完成前隐藏页面内容，
避免用户看到原始模板标记（FOUC问题）

- app.html: 添加 v-cloak
- share.html: 添加 v-cloak

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yuyx
2025-11-25 10:30:50 +08:00
parent 76f4b772a9
commit d7a0e8cb9f
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/app.html
View File

@@ -107,6 +107,9 @@
<script src="libs/axios.min.js"></script> <script src="libs/axios.min.js"></script>
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css"> <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
<style> <style>
/* 防止 Vue 初始化前显示原始模板 */
[v-cloak] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@@ -654,7 +657,7 @@
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app" v-cloak>
<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">

5
frontend/share.html
View File

@@ -8,6 +8,9 @@
<script src="libs/axios.min.js"></script> <script src="libs/axios.min.js"></script>
<link rel="stylesheet" href="libs/fontawesome/css/all.min.css"> <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
<style> <style>
/* 防止 Vue 初始化前显示原始模板 */
[v-cloak] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@@ -478,7 +481,7 @@
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app" v-cloak>
<div class="container"> <div class="container">
<div class="card"> <div class="card">
<div class="title"> <div class="title">