feat(shared,web-admin,desktop-client,build): beUI 动效层与两端深色主题,全项目图标改用设计导出的新图标
动效层:把 beUI 的动效语言移植到两端,令牌放在 packages/shared/src/motion.ts(纯常量,后端也引用得到)。弹簧用数值积分生成 CSS linear(),纯 CSS 即可驱动,不必每组件一个 rAF 循环;两端各一份 composables/motion.ts 负责 DOM 部分,在 app.mount() 之前注入 :root。含 reduced-motion 全局降级与 hover 能力探测;灵动岛只移植单调曲线。
深色主题:Web 管理端补齐,机制与桌面客户端一致;语义色令牌只覆盖颜色,不动圆角与动效令牌。默认跟随系统,用户手动点过之后以用户为准。
图标:build/classhelper.{png,ico} 成为全项目唯一图形源,pnpm icons 从它派生各端图标与界面内品牌标。版本号统一到 1.1.2。
This commit is contained in:
1 parent
82c85b59c1
commit
ce9bed73f4
59 files changed
+2974
-336
No files matched your search
@@ -3,18 +3,23 @@ import { createPinia } from 'pinia';
|
||||
import ElementPlus from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
import 'element-plus/dist/index.css';
|
||||
// 深色主题:html.dark 下的 --el-* 变量(品牌侧的语义色覆盖在 styles/index.css 的 html.dark 块)
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css';
|
||||
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { registerAppIcons } from './icons';
|
||||
import { applyMotionTokens } from './composables/motion';
|
||||
import { useUiStore } from './stores/ui';
|
||||
import '@/styles/index.css';
|
||||
|
||||
const app = createApp(App);
|
||||
const pinia = createPinia();
|
||||
|
||||
// 按需注册图标(见 icons.ts:只注册用到的那些,而不是全量 293 个)
|
||||
registerAppIcons(app);
|
||||
|
||||
app.use(createPinia());
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.use(ElementPlus, { locale: zhCn });
|
||||
|
||||
@@ -31,6 +36,19 @@ app.config.errorHandler = (error, _instance, info) => {
|
||||
console.error(`[web-admin] 未处理的异常(${info})`, error);
|
||||
};
|
||||
|
||||
/**
|
||||
* 动效令牌(beUI 那套缓动与弹簧,见 packages/shared/src/motion.ts)写进 :root。
|
||||
* 必须在 mount 之前:CSS 里引用的 `var(--ch-spring-*)` 要在首帧之前就已就位,
|
||||
* 否则第一帧会按"变量不存在"渲染一遍(表现为入场动画闪一下)。
|
||||
*/
|
||||
applyMotionTokens();
|
||||
|
||||
/**
|
||||
* 主题也要在 mount **之前**落好:深色用户首帧才不会看到"先白后黑"闪一下。
|
||||
* 顺序放在动效令牌之后没有讲究,两者互不相干 —— 但都要早于 mount。
|
||||
*/
|
||||
useUiStore(pinia).init();
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
/**
|
||||
|
||||
Reference in new issue
Block a user