Web_Template_Vue3_Dev/AI-Coding/12-Settings-Store.md

12. Settings Store（主题/布局等全局配置）

目标：把 Theme/Layout 的“根依赖”讲清楚，避免 AI 抽取时只搬组件却漏掉主题变量注入与持久化逻辑。

入口

• src/store/modules/settings.ts（useSettingsStore）

管理的核心状态

• theme：包含 layout/themeName/background/menuWidth/showTheme/showThemeSetting/tabsBarStyle...
• device：desktop | mobile（布局响应式需要）
• collapse：侧边栏折叠状态
• language：国际化语言

关键动作

• saveTheme()：持久化 theme
• resetTheme()：恢复默认 theme，并调用 updateTheme()
• updateTheme()：
  • 通过 @vab/styles/variables/vab-*-variables.module.scss 读取变量
  • 将 vab- 前缀映射到 --el-，动态写入 Element Plus CSS 变量
  • 设置 body class：vab-theme-*，并按 background 追加 class
  • 设置 --el-left-menu-width

最小闭包（Theme/Layout 抽取必须带上）

• src/store/modules/settings.ts
• library/styles/variables/vab-*-variables.module.scss
• library/plugins/vab.ts（Theme 事件总线注入）

常见坑

• updateTheme() 使用 webpack 风格动态 require，迁移到非 webpack 构建器需要等效替代
• useCssVar 的导入方式依赖工程约定（自动导入 vs 显式 import）