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

AI-Coding/10-Theme-System.md

@@ -0,0 +1,38 @@
+# 10. Theme 系统（VabTheme + settings）
+
+> 目标：让 AI 在抽取/复用 Layout 时，不会漏掉主题抽屉、事件总线与 settings 的主题变量闭包。
+
+## 入口与组成
+
+- 主题入口组件：`library/components/VabTheme/index.vue`
+- 主题抽屉：`library/components/VabTheme/components/VabThemeDrawer.vue`
+- 主题设置入口：`library/components/VabTheme/components/VabThemeSetting.vue`
+- 主题状态与持久化：`src/store/modules/settings.ts`
+
+## 关键机制
+
+- 事件总线：通过 `library/plugins/vab.ts` 注入 `$pub/$sub/$unsub`
+  - 打开抽屉：`$pub('theme')`
+  - 随机换肤：`$pub('random-theme')`
+- 主题应用：`useSettingsStore().updateTheme()`
+  - 动态 `require(@vab/styles/variables/vab-*-variables.module.scss)`
+  - 将 `vab-` 前缀变量映射到 `--el-` CSS 变量
+  - 设置 `body` class（`vab-theme-*`）与背景类
+
+## 最小依赖闭包（抽取时必须带上）
+
+- `library/components/VabTheme/`
+- `src/store/modules/settings.ts`（至少 theme/showTheme/saveTheme/resetTheme/updateTheme）
+- `library/plugins/vab.ts`（提供 `$pub/$sub` 与 `$baseLoading`）
+- `library/styles/variables/`（所有 `vab-*-variables.module.scss`）
+- Element Plus + i18n（组件内有 `translate()` 与 el-* 组件）
+
+## 验收点（smoke）
+
+- 触发 `$pub('theme')` 抽屉能打开/关闭
+- 保存/重置主题后，刷新页面主题能持久化且变量生效
+
+## 常见坑
+
+- `updateTheme()` 使用 webpack 风格的动态 `require`：迁移到非 webpack 构建（如部分 Vite 场景）需要等效实现
+- 主题抽屉/设置依赖事件总线注入：未安装 `vab` 插件时会“看起来渲染了但不工作”