Web_Template_Vue3_Dev/AI-Coding/10-Theme-System.md

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