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:
@@ -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': {
|
||||
|
||||
Reference in New Issue
Block a user