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

@@ -1,9 +1,39 @@
import type { Plugin } from 'vite';
import { copyFileSync, mkdirSync } from 'node:fs';
import { createRequire } from 'node:module';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from '@vben/vite-config';
/**
* 启动/构建时把 lottie-web 的 light 播放器从 node_modules 拷到 public/
* 供 loading.html 以 <script src="/lottie_light.min.js"> 方式加载。
* 直接覆盖拷贝(~170KB<1ms避免 mtime 粒度在部分 FS 上漏拷。
*/
function copyLottiePlayer(): Plugin {
const require = createRequire(import.meta.url);
const src = require.resolve('lottie-web/build/player/lottie_light.min.js');
const dest = resolve(
dirname(fileURLToPath(import.meta.url)),
'public/lottie_light.min.js',
);
return {
name: 'web-antd:copy-lottie-player',
configResolved() {
mkdirSync(dirname(dest), { recursive: true });
copyFileSync(src, dest);
},
};
}
export default defineConfig(async () => {
return {
application: {},
vite: {
plugins: [copyLottiePlayer()],
server: {
proxy: {
'/admin-api': {