# Module Spec：vab-theme（主题系统入口与交互）

module:
  id: vab-theme
  name: VabTheme（主题配置入口/抽屉/设置面板）
  type: ui
  entrypoints:
    - library/components/VabTheme/index.vue
    - library/components/VabTheme/components/VabThemeDrawer.vue
    - library/components/VabTheme/components/VabThemeSetting.vue
    - library/components/VabTheme/components/

public_api:
  concept:
    - "VabTheme：一个刷子图标入口，用于触发打开主题抽屉（Drawer）"
    - "VabThemeDrawer：主题抽屉，监听事件总线打开/随机主题，并调用 settings store 的 saveTheme/resetTheme/updateTheme"
    - "VabThemeSetting：右侧固定设置入口（主题配置/随机换肤/购买源码/清理缓存），通过事件总线触发行为"

usage_examples:
  - "点击 VabTheme 触发 $pub('theme') 打开抽屉"
  - "点击 VabThemeSetting 的随机换肤触发 $pub('random-theme')"

dependency_closure:
  runtime:
    - "Pinia settings store：src/store/modules/settings（theme.showTheme、saveTheme/resetTheme/updateTheme 等）"
    - "事件总线/全局注入：library/plugins/vab.ts（$pub/$sub/$unsub/$baseLoading 等）"
    - "i18n translate：src/i18n/index.ts（组件内调用 translate）"
    - "Element Plus：Drawer/Radio/Select/Button 等"
  styles:
    - "主题变量：library/styles/variables/vab-*-variables.module.scss（updateTheme() 动态注入 CSS 变量）"

acceptance:
  - "页面渲染包含主题入口（刷子图标）"
  - "触发 $pub('theme') 时抽屉能打开；关闭时不报错"
  - "保存/重置主题后调用 updateTheme() 生效（CSS 变量与 body class 变化）"

pitfalls:
  - "Theme 依赖 $pub/$sub 注入；若未安装 vab 插件，事件不会触发"
  - "settings.updateTheme() 依赖 webpack 的 require 动态引入 scss module；迁移到非 webpack 环境需等效实现"
  - "移动端（<992）某些操作会触发 reload；抽取时需确认期望行为"