修复后台首屏无样式闪烁并保留空白页兜底

变更项:

- 恢复 app-container 初始 opacity 为 0,避免页面在样式未就绪时先渲染无样式内容

- 新增 DOMContentLoaded 延迟兜底脚本:若 Vue mounted 未执行则自动补加 loaded,避免整页空白

- 保持现有导航与业务逻辑不变,仅修复页面首屏加载体验
This commit is contained in:
liuwei
2026-04-23 16:09:25 +08:00
parent 5d67bf8795
commit c208dcb2fb

View File

@@ -63,7 +63,7 @@
.app-container {
min-height: 100vh;
opacity: 1;
opacity: 0;
transition: opacity .24s ease;
}
@@ -1203,6 +1203,20 @@
};
</script>
<script>
// 页面显示兜底逻辑:
// 1) 正常情况下由 Vue mounted 时给 .app-container 增加 loaded页面平滑显示
// 2) 若脚本中途报错导致 mounted 未执行,这里在 DOM 就绪后做一次延迟兜底,避免“整页空白”。
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
var app = document.querySelector('.app-container');
if (app && !app.classList.contains('loaded')) {
app.classList.add('loaded');
}
}, 1200);
});
</script>
{% block scripts %}{% endblock %}
</body>
</html>