feat(@vben/web-antd): Lottie 品牌加载动画(主题色自适应)
- 新增全局 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>
This commit is contained in:
89
apps/web-antd/loading.html
Normal file
89
apps/web-antd/loading.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user