XuJiacheng
9a387f3eec
添加前后端基础项目结构，包括.gitignore、package.json等配置文件 实现前端基础功能模块，包括路由、状态管理、API请求封装等 添加前端UI组件库和样式体系 配置开发环境Mock系统和构建工具链
1.3 KiB
1.3 KiB
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()：持久化 themeresetTheme()：恢复默认 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.tslibrary/styles/variables/vab-*-variables.module.scsslibrary/plugins/vab.ts（Theme 事件总线注入）
常见坑
updateTheme()使用 webpack 风格动态require，迁移到非 webpack 构建器需要等效替代useCssVar的导入方式依赖工程约定（自动导入 vs 显式 import）