36 lines
1.3 KiB
Markdown
36 lines
1.3 KiB
Markdown
|
# 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）
|