# 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）