# 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` 插件时会“看起来渲染了但不工作”