feat: 提交多个新UI组件模块spec和相关属性设定，包括卡片封装、渐变卡片、列式布局组件等，重写了readme.md，用于AI Coding

AI-Coding/12-Settings-Store.md

@@ -0,0 +1,35 @@
+# 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）