fix(admin): 启动 Loading 使用中性 Loading... 文案

避免刷新时展示构建期品牌名 DaxPay Admin;初始 title 同步为 Loading...,
进站后仍由站点配置 systemName 覆盖,无需 i18n。
This commit is contained in:
DaxPay Dev
2026-07-14 12:48:18 +08:00
parent 47c0209e3d
commit 7a8d5c55e9
2 changed files with 116 additions and 2 deletions

View File

@@ -11,8 +11,8 @@
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<!-- 由 vite 注入 VITE_APP_TITLE 变量,在 .env 文件内配置 -->
<title><%= VITE_APP_TITLE %></title>
<!-- 初始中性标题: 避免绑定构建期品牌名; 进站后由 bootstrap watchEffect 用站点配置 systemName 覆盖 -->
<title>Loading...</title>
<!-- id 固定, 由 init-website-config 受控更新; 禁止空 href -->
<link id="favicon" rel="icon" href="/favicon.ico" />
<script>

View File

@@ -0,0 +1,114 @@
<style data-app-loading="inject-css">
html {
/* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
line-height: 1.15;
}
.loading {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f4f7f9;
/* transition: all 0.8s ease-out; */
}
.loading.hidden {
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: all 0.8s ease-out;
}
.dark .loading {
background: #0d0d10;
}
.title {
margin-top: 66px;
font-size: 28px;
font-weight: 600;
color: rgb(0 0 0 / 85%);
}
.dark .title {
color: #fff;
}
.loader {
position: relative;
width: 48px;
height: 48px;
}
.loader::before {
position: absolute;
top: 60px;
left: 0;
width: 48px;
height: 5px;
content: '';
background: hsl(var(--primary, 210 100% 50%) / 50%);
border-radius: 50%;
animation: shadow-ani 0.5s linear infinite;
}
.loader::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background: hsl(var(--primary, 210 100% 50%));
border-radius: 4px;
animation: jump-ani 0.5s linear infinite;
}
@keyframes jump-ani {
15% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
border-bottom-right-radius: 40px;
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow-ani {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
</style>
<!-- 中性 Loading 文案: 避免绑定 VITE_APP_TITLE / 站点名, 无需 i18n -->
<div class="loading" id="__app-loading__">
<div class="loader"></div>
<div class="title">Loading...</div>
</div>