39 lines
1.6 KiB
Markdown
39 lines
1.6 KiB
Markdown
|
# 10. Theme 系统（VabTheme + settings）
|
|||
|
|
|
|||
|
|
> 目标：让 AI 在抽取/复用 Layout 时，不会漏掉主题抽屉、事件总线与 settings 的主题变量闭包。
|
|||
|
|
|
|||
|
|
## 入口与组成
|
|||
|
|
|
|||
|
|
- 主题入口组件：`library/components/VabTheme/index.vue`
|
|||
|
|
- 主题抽屉：`library/components/VabTheme/components/VabThemeDrawer.vue`
|
|||
|
|
- 主题设置入口：`library/components/VabTheme/components/VabThemeSetting.vue`
|
|||
|
|
- 主题状态与持久化：`src/store/modules/settings.ts`
|
|||
|
|
|
|||
|
|
## 关键机制
|
|||
|
|
|
|||
|
|
- 事件总线：通过 `library/plugins/vab.ts` 注入 `$pub/$sub/$unsub`
|
|||
|
|
- 打开抽屉：`$pub('theme')`
|
|||
|
|
- 随机换肤：`$pub('random-theme')`
|
|||
|
|
- 主题应用：`useSettingsStore().updateTheme()`
|
|||
|
|
- 动态 `require(@vab/styles/variables/vab-*-variables.module.scss)`
|
|||
|
|
- 将 `vab-` 前缀变量映射到 `--el-` CSS 变量
|
|||
|
|
- 设置 `body` class（`vab-theme-*`）与背景类
|
|||
|
|
|
|||
|
|
## 最小依赖闭包（抽取时必须带上）
|
|||
|
|
|
|||
|
|
- `library/components/VabTheme/`
|
|||
|
|
- `src/store/modules/settings.ts`（至少 theme/showTheme/saveTheme/resetTheme/updateTheme）
|
|||
|
|
- `library/plugins/vab.ts`（提供 `$pub/$sub` 与 `$baseLoading`）
|
|||
|
|
- `library/styles/variables/`（所有 `vab-*-variables.module.scss`）
|
|||
|
|
- Element Plus + i18n（组件内有 `translate()` 与 el-* 组件）
|
|||
|
|
|
|||
|
|
## 验收点（smoke）
|
|||
|
|
|
|||
|
|
- 触发 `$pub('theme')` 抽屉能打开/关闭
|
|||
|
|
- 保存/重置主题后，刷新页面主题能持久化且变量生效
|
|||
|
|
|
|||
|
|
## 常见坑
|
|||
|
|
|
|||
|
|
- `updateTheme()` 使用 webpack 风格的动态 `require`：迁移到非 webpack 构建（如部分 Vite 场景）需要等效实现
|
|||
|
|
- 主题抽屉/设置依赖事件总线注入：未安装 `vab` 插件时会“看起来渲染了但不工作”
|