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:
lzh
2026-04-23 20:26:48 +08:00
parent 348e40e9c2
commit 6b8626907e
11 changed files with 403 additions and 10 deletions

View 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>