lzh
6b8626907e
- 新增全局 loading：自定义 apps/web-antd/loading.html 覆盖 inject-app-loading 的默认模板，Vue 挂载前就能播放品牌动画 - 新增 LottieLoading 组件，用于 SSO 回调等"白屏时间偏长"的运行时场景 - 换色方案：Lottie JSON 里原本 5 档硬编码绿色，按当前主题 colorPrimary 生成 5 档 HSL 亮度做指纹替换。挂载前从 localStorage preferences 读色， 挂载后读 CSS 变量 --primary，两条路径共用 public/lottie-theme-patch.js 一份 classic-JS 源，window.__LottieThemePatch__ 上暴露 - vite 插件：启动/构建时从 node_modules 把 lottie_light.min.js 拷到 public/ 供 loading.html <script> 加载；.gitignore 排除该产物 - LottieLoading 复用 loading.html 已经挂好的 window.lottie，不再把 ~170KB 播放器再打进 Vue 产物 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
90 lines
2.2 KiB
HTML
90 lines
2.2 KiB
HTML
<style data-app-loading="inject-css">
|
||
html {
|
||
/* same as ant-design-vue/dist/reset.css setting */
|
||
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;
|
||
}
|
||
|
||
.loading.hidden {
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: all 0.8s ease-out;
|
||
}
|
||
|
||
.dark .loading {
|
||
background: #0d0d10;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 24px;
|
||
font-family:
|
||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||
Arial, sans-serif !important;
|
||
font-size: 24px;
|
||
font-weight: 600 !important;
|
||
color: rgb(0 0 0 / 85%) !important;
|
||
}
|
||
|
||
.dark .title {
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* stylelint-disable-next-line selector-id-pattern -- 与 inject-app-loading 的 #__app-loading__ 保持相同命名风格 */
|
||
#__app-loading-lottie__ {
|
||
width: 220px;
|
||
height: 220px;
|
||
}
|
||
</style>
|
||
<div class="loading" id="__app-loading__">
|
||
<div id="__app-loading-lottie__"></div>
|
||
<div class="title"><%= VITE_APP_TITLE %></div>
|
||
</div>
|
||
<!--
|
||
换色逻辑与 src/components/lottie-loading/LottieLoading.vue 共用同一份
|
||
classic-JS 源（window.__LottieThemePatch__），避免两处硬编码漂移。
|
||
-->
|
||
<script src="/lottie-theme-patch.js"></script>
|
||
<script src="/lottie_light.min.js"></script>
|
||
<script>
|
||
(function () {
|
||
var tp = window.__LottieThemePatch__;
|
||
var container = document.getElementById('__app-loading-lottie__');
|
||
if (!tp || !container || typeof lottie === 'undefined') return;
|
||
fetch('/loading.json')
|
||
.then(function (r) {
|
||
return r.json();
|
||
})
|
||
.then(function (data) {
|
||
var hsl = tp.readPrimaryHslFromLocalStorage(
|
||
'<%= VITE_APP_NAMESPACE %>-',
|
||
);
|
||
tp.patchColors(data, tp.buildShades(hsl));
|
||
lottie.loadAnimation({
|
||
container: container,
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
animationData: data,
|
||
});
|
||
})
|
||
.catch(function (e) {
|
||
console.error('[app-loading] lottie error', e);
|
||
});
|
||
})();
|
||
</script>
|