@microi.net/cli 5.8.5 → 5.8.7

package/skills/ui-design/references/product-flow-recipes.md

@@ -1,94 +1,94 @@
-# Microi 产品流程配方
-
-本文件用于登录、注册、订阅、支付、预约、权限、搜索、设置和敏感信息采集等真实产品流程。所有流程先保证任务闭环，再做视觉装饰。
-
-## 目录
-
-1. 登录与注册
-2. 首次引导
-3. 权限申请
-4. 订阅与付费
-5. 结算与支付
-6. 搜索、筛选与列表
-7. 创建与编辑
-8. 设置与个人中心
-9. 敏感资料采集
-10. 通用验收
-
-## 登录与注册
-
-- 默认只突出一种主登录方式，其他方式收进次级入口，避免并排两个完整登录系统。
-- 登录页保留返回首页、帮助和协议入口；输入错误时不清空账号，密码错误不暴露账号是否存在。
-- 验证码必须同时有图片、刷新、过期状态和请求中状态；后端未开启验证码时不渲染占位框。
-- “记住密码”明确作用范围；公共设备提供退出全部设备或不记住提示。
-- 登录成功直接进入目标页，禁止先闪过中间成功页。
-- 注册按账号 -> 验证 -> 必要资料 -> 完成分段；非必要资料延后到首次使用。
-
-## 首次引导
-
-- 开始前说明预计步骤、需要的资料、用途和能否稍后完成。
-- 每一步只问同一类信息；显示当前步骤和总步骤，但不要伪造进度百分比。
-- 支持保存草稿和恢复；关闭前说明哪些内容已保存。
-- 完成页给出下一项具体任务，不只显示庆祝插画。
-
-## 权限申请
-
-- 在系统权限弹窗前展示预说明：为什么需要、将获得什么、拒绝后还能做什么。
-- 一次只申请当前动作需要的权限；相机、定位、通知、通讯录不能在首屏批量索取。
-- 拒绝后提供设置入口和不授权替代路径，不循环弹窗。
-- 权限状态变化后立即刷新页面状态，不能要求用户重启应用。
-
-## 订阅与付费
-
-- 价值在价格之前；3-6 条图标化权益即可，避免长列表。
-- 价格写清周期、续费、试用结束、税费和取消条件；这些信息放在 CTA 附近。
-- 推荐方案用轻量边框/底色和说明强化，不用夸张倒计时或羞辱式拒绝按钮。
-- 只有一个方案时不制造无意义选择；多个方案按典型用户目标命名。
-- 购买后显示生效能力、订单入口、管理订阅和下一步。
-
-## 结算与支付
-
-- 结构顺序：商品/服务摘要 -> 地址/时间 -> 优惠 -> 支付方式 -> 金额明细 -> 提交。
-- 总金额和主按钮固定可见，但不能遮挡最后一项；金额变化时说明原因。
-- 提交后锁定重复支付并显示处理中；未知结果进入“正在确认”，不能直接当失败。
-- 支付失败保留订单和输入，提供更换方式、重试和联系客服。
-- 成功页展示订单号、核心信息、查看订单和继续使用。
-
-## 搜索、筛选与列表
-
-- 搜索框说明可搜字段；输入后提供清除、历史或建议，但不自动提交破坏输入。
-- 高频筛选放在页面表层，低频筛选进入抽屉；已选条件用可移除标签展示。
-- 排序和筛选结果数及时反馈；切换条件时保持列表容器高度并用骨架避免跳动。
-- 每个卡片/行都要有对象身份、状态、关键元数据、时间和明确点击结果。
-- 空结果区分“没有数据”和“筛选无匹配”，后者提供清除条件。
-
-## 创建与编辑
-
-- 字段按任务分组；必填项最少化，帮助文字靠近字段。
-- 实时校验只用于格式和明确约束；服务端校验在提交后映射到对应字段和顶部摘要。
-- 提交按钮具备默认、loading、成功、失败、disabled；失败不丢输入。
-- 离开脏表单前提示；自动保存要显示最后保存时间和失败状态。
-- 删除、归档、停用语义分开；不可逆操作二次确认并说明影响对象。
-
-## 设置与个人中心
-
-- 身份信息、账户安全、通知、隐私、外观、数据与帮助分组。
-- 当前值比入口名更重要时在右侧展示，例如手机号尾号、语言、主题。
-- 危险操作单独放在底部区域，不和普通设置混排。
-- 修改手机号、密码、密钥和付款方式时重新验证身份。
-- 注销前展示数据影响、冷静期、恢复方式和进度，不能只有一个红色按钮。
-
-## 敏感资料采集
-
-- 开始前说明采集内容、用途、存储方式、预计时间和所需环境。
-- 先选择证件/资料类型，再打开相机或上传；提供手工录入备选。
-- 相机界面使用深色背景、清晰取景框、实时成功边界和大触控按钮。
-- 上传中显示进度、取消、失败重试；识别后让用户核对关键字段。
-- 页面内嵌隐私和安全信号，但不使用无法验证的“绝对安全”宣传。
-
-## 通用验收
-
-- 键盘顺序、焦点环、错误关联、屏幕阅读标签和 44px 触摸目标可用。
-- 刷新、后退、重复提交、弱网、超时、服务端 4xx/5xx 都有确定结果。
-- 个人数据只在需要位置显示；日志、Toast 和错误信息不得泄露 token、SQL 或内部表名。
-- 390px 移动端不横向滚动，键盘弹起不遮挡当前字段和主按钮。
+# Microi 产品流程配方
+
+本文件用于登录、注册、订阅、支付、预约、权限、搜索、设置和敏感信息采集等真实产品流程。所有流程先保证任务闭环，再做视觉装饰。
+
+## 目录
+
+1. 登录与注册
+2. 首次引导
+3. 权限申请
+4. 订阅与付费
+5. 结算与支付
+6. 搜索、筛选与列表
+7. 创建与编辑
+8. 设置与个人中心
+9. 敏感资料采集
+10. 通用验收
+
+## 登录与注册
+
+- 默认只突出一种主登录方式，其他方式收进次级入口，避免并排两个完整登录系统。
+- 登录页保留返回首页、帮助和协议入口；输入错误时不清空账号，密码错误不暴露账号是否存在。
+- 验证码必须同时有图片、刷新、过期状态和请求中状态；后端未开启验证码时不渲染占位框。
+- “记住密码”明确作用范围；公共设备提供退出全部设备或不记住提示。
+- 登录成功直接进入目标页，禁止先闪过中间成功页。
+- 注册按账号 -> 验证 -> 必要资料 -> 完成分段；非必要资料延后到首次使用。
+
+## 首次引导
+
+- 开始前说明预计步骤、需要的资料、用途和能否稍后完成。
+- 每一步只问同一类信息；显示当前步骤和总步骤，但不要伪造进度百分比。
+- 支持保存草稿和恢复；关闭前说明哪些内容已保存。
+- 完成页给出下一项具体任务，不只显示庆祝插画。
+
+## 权限申请
+
+- 在系统权限弹窗前展示预说明：为什么需要、将获得什么、拒绝后还能做什么。
+- 一次只申请当前动作需要的权限；相机、定位、通知、通讯录不能在首屏批量索取。
+- 拒绝后提供设置入口和不授权替代路径，不循环弹窗。
+- 权限状态变化后立即刷新页面状态，不能要求用户重启应用。
+
+## 订阅与付费
+
+- 价值在价格之前；3-6 条图标化权益即可，避免长列表。
+- 价格写清周期、续费、试用结束、税费和取消条件；这些信息放在 CTA 附近。
+- 推荐方案用轻量边框/底色和说明强化，不用夸张倒计时或羞辱式拒绝按钮。
+- 只有一个方案时不制造无意义选择；多个方案按典型用户目标命名。
+- 购买后显示生效能力、订单入口、管理订阅和下一步。
+
+## 结算与支付
+
+- 结构顺序：商品/服务摘要 -> 地址/时间 -> 优惠 -> 支付方式 -> 金额明细 -> 提交。
+- 总金额和主按钮固定可见，但不能遮挡最后一项；金额变化时说明原因。
+- 提交后锁定重复支付并显示处理中；未知结果进入“正在确认”，不能直接当失败。
+- 支付失败保留订单和输入，提供更换方式、重试和联系客服。
+- 成功页展示订单号、核心信息、查看订单和继续使用。
+
+## 搜索、筛选与列表
+
+- 搜索框说明可搜字段；输入后提供清除、历史或建议，但不自动提交破坏输入。
+- 高频筛选放在页面表层，低频筛选进入抽屉；已选条件用可移除标签展示。
+- 排序和筛选结果数及时反馈；切换条件时保持列表容器高度并用骨架避免跳动。
+- 每个卡片/行都要有对象身份、状态、关键元数据、时间和明确点击结果。
+- 空结果区分“没有数据”和“筛选无匹配”，后者提供清除条件。
+
+## 创建与编辑
+
+- 字段按任务分组；必填项最少化，帮助文字靠近字段。
+- 实时校验只用于格式和明确约束；服务端校验在提交后映射到对应字段和顶部摘要。
+- 提交按钮具备默认、loading、成功、失败、disabled；失败不丢输入。
+- 离开脏表单前提示；自动保存要显示最后保存时间和失败状态。
+- 删除、归档、停用语义分开；不可逆操作二次确认并说明影响对象。
+
+## 设置与个人中心
+
+- 身份信息、账户安全、通知、隐私、外观、数据与帮助分组。
+- 当前值比入口名更重要时在右侧展示，例如手机号尾号、语言、主题。
+- 危险操作单独放在底部区域，不和普通设置混排。
+- 修改手机号、密码、密钥和付款方式时重新验证身份。
+- 注销前展示数据影响、冷静期、恢复方式和进度，不能只有一个红色按钮。
+
+## 敏感资料采集
+
+- 开始前说明采集内容、用途、存储方式、预计时间和所需环境。
+- 先选择证件/资料类型，再打开相机或上传；提供手工录入备选。
+- 相机界面使用深色背景、清晰取景框、实时成功边界和大触控按钮。
+- 上传中显示进度、取消、失败重试；识别后让用户核对关键字段。
+- 页面内嵌隐私和安全信号，但不使用无法验证的“绝对安全”宣传。
+
+## 通用验收
+
+- 键盘顺序、焦点环、错误关联、屏幕阅读标签和 44px 触摸目标可用。
+- 刷新、后退、重复提交、弱网、超时、服务端 4xx/5xx 都有确定结果。
+- 个人数据只在需要位置显示；日志、Toast 和错误信息不得泄露 token、SQL 或内部表名。
+- 390px 移动端不横向滚动，键盘弹起不遮挡当前字段和主按钮。

package/skills/ui-design/references/progressive-01-/351/242/234/350/211/262/344/275/223/347/263/273-css-variables-/346/224/257/346/214/201/344/270/273/351/242/230/345/210/207/346/215/242.md

@@ -1,218 +1,218 @@
-# ui-design 详细参考 1
-
-> 按需读取；本文件由 SKILL.md 的原章节无损拆分。
-
-<!-- microi-progressive:chunk id=ui-design-007 sha256=bd9e24e1cdc0017a1bffccbe48505ad8d0a274d65f28f4e6a80e591dec813407 -->
-## 颜色体系（CSS Variables — 支持主题切换）
-
-所有颜色必须通过 CSS 变量引用，禁止硬编码色值。变量定义放在全局样式入口（PC 端 `src/styles/mci-design.scss`，移动端 `<style>` 内或独立 CSS 文件）。
-
-### 暗黑主题（可选切换 — `data-theme="dark"`）
-
-```css
-:root[data-theme="dark"] {
-  /* 主色 — 科技紫蓝 */
-  --mci-color-primary: #722BFF;
-  --mci-color-primary-light: #9B5FFF;
-  --mci-color-primary-dark: #5A1FCC;
-  --mci-color-primary-glow: rgba(114, 43, 255, 0.35);
-
-  /* 辅助色 */
-  --mci-color-accent-red: #FF2E63;
-  --mci-color-accent-blue: #29B8FF;
-  --mci-color-accent-gold: #FFD100;
-  --mci-color-accent-cyan: #00F5D4;
-  --mci-color-accent-pink: #FF6EC7;
-
-  /* 语义色（成功/警告/错误/信息） */
-  --mci-color-success: #00F5D4;
-  --mci-color-warning: #FFD100;
-  --mci-color-danger: #FF2E63;
-  --mci-color-info: #29B8FF;
-
-  /* 背景 */
-  --mci-bg-base: #0A0A0F;
-  --mci-bg-elevated: #121218;
-  --mci-bg-surface: #1A1A24;
-  --mci-bg-card: rgba(255, 255, 255, 0.04);
-  --mci-bg-card-hover: rgba(255, 255, 255, 0.08);
-  --mci-bg-glass: rgba(255, 255, 255, 0.06);
-  --mci-bg-glass-border: rgba(255, 255, 255, 0.1);
-  --mci-bg-mask: rgba(0, 0, 0, 0.6);
-
-  /* 文字 */
-  --mci-text-primary: #FFFFFF;
-  --mci-text-secondary: #A0A0B8;
-  --mci-text-tertiary: #6B6B80;
-  --mci-text-disabled: #4A4A5A;
-  --mci-text-on-primary: #FFFFFF;
-
-  /* 边框 */
-  --mci-border-color: rgba(255, 255, 255, 0.08);
-  --mci-border-color-hover: rgba(255, 255, 255, 0.15);
-  --mci-border-glow: rgba(114, 43, 255, 0.3);
-
-  /* 渐变 */
-  --mci-gradient-primary: linear-gradient(135deg, #722BFF 0%, #29B8FF 100%);
-  --mci-gradient-hot: linear-gradient(135deg, #FF2E63 0%, #FF6EC7 100%);
-  --mci-gradient-gold: linear-gradient(135deg, #FFD100 0%, #FF8C00 100%);
-  --mci-gradient-cyber: linear-gradient(135deg, #00F5D4 0%, #722BFF 50%, #FF2E63 100%);
-  --mci-gradient-bg: radial-gradient(ellipse at 20% 50%, rgba(114, 43, 255, 0.08) 0%, transparent 60%);
-}
-```
-
-### 亮色主题（默认）
-
-```css
-:root[data-theme="light"], :root {
-  --mci-color-primary: #6C2BD9;
-  --mci-color-primary-light: #8B5CF6;
-  --mci-color-primary-dark: #5521B5;
-  --mci-color-primary-glow: rgba(108, 43, 217, 0.15);
-
-  --mci-color-accent-red: #E8294A;
-  --mci-color-accent-blue: #2196F3;
-  --mci-color-accent-gold: #F59E0B;
-  --mci-color-accent-cyan: #06B6D4;
-  --mci-color-accent-pink: #EC4899;
-
-  --mci-color-success: #06B6D4;
-  --mci-color-warning: #F59E0B;
-  --mci-color-danger: #E8294A;
-  --mci-color-info: #2196F3;
-
-  --mci-bg-base: #F5F5FA;
-  --mci-bg-elevated: #FFFFFF;
-  --mci-bg-surface: #F0F0F8;
-  --mci-bg-card: rgba(255, 255, 255, 0.9);
-  --mci-bg-card-hover: rgba(255, 255, 255, 1);
-  --mci-bg-glass: rgba(255, 255, 255, 0.7);
-  --mci-bg-glass-border: rgba(0, 0, 0, 0.08);
-  --mci-bg-mask: rgba(0, 0, 0, 0.4);
-
-  --mci-text-primary: #1A1A2E;
-  --mci-text-secondary: #64648C;
-  --mci-text-tertiary: #9898B0;
-  --mci-text-disabled: #C0C0D0;
-  --mci-text-on-primary: #FFFFFF;
-
-  --mci-border-color: rgba(0, 0, 0, 0.06);
-  --mci-border-color-hover: rgba(0, 0, 0, 0.12);
-  --mci-border-glow: rgba(108, 43, 217, 0.2);
-
-  --mci-gradient-primary: linear-gradient(135deg, #6C2BD9 0%, #2196F3 100%);
-  --mci-gradient-hot: linear-gradient(135deg, #E8294A 0%, #EC4899 100%);
-  --mci-gradient-gold: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
-  --mci-gradient-cyber: linear-gradient(135deg, #06B6D4 0%, #6C2BD9 50%, #E8294A 100%);
-  --mci-gradient-bg: radial-gradient(ellipse at 20% 50%, rgba(108, 43, 217, 0.04) 0%, transparent 60%);
-}
-```
-
-### 颜色使用规则
-
-- **主题模型分两层**：`data-theme="light|dark"` 控制明暗底色，`data-mci-palette="black|white|red|orange|yellow|green|cyan|blue|purple"` 控制品牌主色。
-- **所有移动端与 PC 网站项目必须支持主流主色切换**：黑、白、红、橙、黄、绿、青、蓝、紫至少 9 个 palette。后台管理系统可由 Element Plus 主题承载，但也必须映射到 `--mci-*` token。
-- **palette 不得只换按钮底色**：必须同步覆盖 `--mci-color-primary`、`--mci-color-primary-strong`、`--mci-text-on-primary`、`--mci-border-glow`、`--mci-gradient-primary`、`--mci-shadow-button`、`--mci-shadow-button-hover`。
-- **白色/黄色主题必须单独处理文字颜色**：主按钮文字使用 `--mci-text-on-primary`，白色主题用深色字，黄色主题用深棕/深灰字，禁止固定白字。
-- **主色**用于核心交互元素（按钮、链接、选中态）
-- **Accent Red / Danger** 用于危险操作、错误、热门标记
-- **Accent Blue / Info** 用于信息提示、次要按钮
-- **Accent Gold / Warning** 用于重要强调、VIP 标签、价格、警告
-- **Accent Cyan / Success** 用于成功状态、在线标识
-- 默认主题为亮色 + 红色 palette；暗黑主题和主色 palette 都作为用户可选项。
-- 用户主题偏好持久化到 `mci-theme`、`mci-palette`、`mci-shape`，初次访问可跟随系统 `prefers-color-scheme`。
-
-### 主色 Palette 必备定义
-
-```css
-:root[data-mci-palette="black"]  { --mci-color-primary:#111827; --mci-text-on-primary:#fff; }
-:root[data-mci-palette="white"]  { --mci-color-primary:#F8FAFC; --mci-text-on-primary:#111827; }
-:root[data-mci-palette="red"]    { --mci-color-primary:#B51220; --mci-text-on-primary:#fff; }
-:root[data-mci-palette="orange"] { --mci-color-primary:#EA580C; --mci-text-on-primary:#fff; }
-:root[data-mci-palette="yellow"] { --mci-color-primary:#D9A23A; --mci-text-on-primary:#3A2500; }
-:root[data-mci-palette="green"]  { --mci-color-primary:#16A34A; --mci-text-on-primary:#fff; }
-:root[data-mci-palette="cyan"]   { --mci-color-primary:#0891B2; --mci-text-on-primary:#fff; }
-:root[data-mci-palette="blue"]   { --mci-color-primary:#2563EB; --mci-text-on-primary:#fff; }
-:root[data-mci-palette="purple"] { --mci-color-primary:#7C3AED; --mci-text-on-primary:#fff; }
-```
-
-实际项目优先直接使用 `Microi.UI/src/theme/tokens.css`，不要复制这段最小示例；新增 palette 时必须补充悬浮阴影、边框高光和渐变。
-
-### 移动端可读性底线
-
-- 移动端首页、商城、分享海报、资产页必须优先保证阅读清楚。浅色背景上的正文、占位文字、标签、金额、按钮文字不得使用低透明度浅灰或低对比金色。
-- 移动端底部导航、首页快捷入口、个人中心快捷入口的图标对比度与文字同等重要。彩色圆底图标必须显式设定内部图标色，并在每个主题截图确认可见。
-- 关键正文与背景对比度建议不低于 4.5:1；大标题、海报大字、促销卡标题不低于 3:1。金色渐变按钮默认使用深红/深棕文字，不使用白字。
-- 在渐变、图片、红金背景上放文字时，文字必须是实色且有足够字重；不要依赖 `opacity: .6` 这类弱化文字承载业务信息。
-- 完成移动端风格改造后，必须配合 Playwright、浏览器 DevTools、微信开发者工具自动化或项目已有 E2E 工具进行截图和关键文字对比度检查，复核首页第一屏、列表页、登录页、分享海报、空态/未登录态和关键按钮。
-- 用户要求“全自动化测试”“自动化验收”“跑完整测试”等时，如果本次涉及 UI/前端改动，自动化链路必须包含截图验证或视觉断言；只运行构建、lint、静态检查不能宣称已完成全自动化 UI 验收。若当前环境无法启动浏览器/小程序开发者工具，必须明确说明未完成截图验证。
-
----
-
-<!-- /microi-progressive:chunk -->
-<!-- microi-progressive:chunk id=ui-design-008 sha256=01af2cebf85683f180693fd76cf6c5f1db4380274a9924acf5542b7b5f868ebc -->
-## 阴影体系（层次与质感）
-
-阴影是塑造层次感、可点击性和高级质感的关键。采用多层阴影叠加，但不要做脏、糊、重的阴影。
-
-```css
-:root {
-  /* 基础层级阴影 */
-  --mci-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
-  --mci-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3),
-                   0 0 12px var(--mci-color-primary-glow);
-  --mci-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.35),
-                   0 0 20px var(--mci-color-primary-glow);
-  --mci-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5),
-                   0 0 40px var(--mci-color-primary-glow);
-
-  /* 专用阴影 */
-  --mci-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3),
-                     0 0 15px rgba(114, 43, 255, 0.08);
-  --mci-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.4),
-                           0 0 25px rgba(114, 43, 255, 0.15),
-                           0 0 60px rgba(114, 43, 255, 0.05);
-  --mci-shadow-button: 0 4px 15px var(--mci-color-primary-glow);
-  --mci-shadow-button-hover: 0 8px 25px var(--mci-color-primary-glow);
-  --mci-shadow-dialog: 0 25px 80px rgba(0, 0, 0, 0.6),
-                       0 0 50px rgba(114, 43, 255, 0.1);
-  --mci-shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.45),
-                         0 0 20px rgba(114, 43, 255, 0.08);
-
-  /* 强调发光 */
-  --mci-glow-primary: 0 0 15px var(--mci-color-primary-glow),
-                      0 0 45px rgba(114, 43, 255, 0.1);
-  --mci-glow-red: 0 0 15px rgba(255, 46, 99, 0.3),
-                  0 0 45px rgba(255, 46, 99, 0.1);
-  --mci-glow-cyan: 0 0 15px rgba(0, 245, 212, 0.3),
-                   0 0 45px rgba(0, 245, 212, 0.1);
-}
-
-/* 移动端阴影减半 — 移动端 GPU 较弱，且小屏幕不需要过强阴影 */
-@media (max-width: 768px) {
-  :root {
-    --mci-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3),
-                       0 0 8px rgba(114, 43, 255, 0.06);
-    --mci-shadow-card-hover: 0 4px 18px rgba(0, 0, 0, 0.4),
-                             0 0 12px rgba(114, 43, 255, 0.1);
-    --mci-shadow-button: 0 2px 10px var(--mci-color-primary-glow);
-    --mci-shadow-dialog: 0 12px 40px rgba(0, 0, 0, 0.6);
-  }
-}
-```
-
-### 阴影使用规则
-
-| 场景 | 使用阴影 |
-|------|---------|
-| 卡片默认态 | `--mci-shadow-card` |
-| 卡片悬浮态（PC） | `--mci-shadow-card-hover` |
-| 按钮默认态 | `--mci-shadow-button` |
-| 按钮按下态 | `--mci-shadow-button-hover`（移动端无 hover，只用按下/默认） |
-| 弹窗/抽屉 | `--mci-shadow-dialog` |
-| 下拉菜单 | `--mci-shadow-dropdown` |
-| 强调元素 | `--mci-glow-*` |
-
----
-
-<!-- /microi-progressive:chunk -->
+# ui-design 详细参考 1
+
+> 按需读取；本文件由 SKILL.md 的原章节无损拆分。
+
+<!-- microi-progressive:chunk id=ui-design-007 sha256=bd9e24e1cdc0017a1bffccbe48505ad8d0a274d65f28f4e6a80e591dec813407 -->
+## 颜色体系（CSS Variables — 支持主题切换）
+
+所有颜色必须通过 CSS 变量引用，禁止硬编码色值。变量定义放在全局样式入口（PC 端 `src/styles/mci-design.scss`，移动端 `<style>` 内或独立 CSS 文件）。
+
+### 暗黑主题（可选切换 — `data-theme="dark"`）
+
+```css
+:root[data-theme="dark"] {
+  /* 主色 — 科技紫蓝 */
+  --mci-color-primary: #722BFF;
+  --mci-color-primary-light: #9B5FFF;
+  --mci-color-primary-dark: #5A1FCC;
+  --mci-color-primary-glow: rgba(114, 43, 255, 0.35);
+
+  /* 辅助色 */
+  --mci-color-accent-red: #FF2E63;
+  --mci-color-accent-blue: #29B8FF;
+  --mci-color-accent-gold: #FFD100;
+  --mci-color-accent-cyan: #00F5D4;
+  --mci-color-accent-pink: #FF6EC7;
+
+  /* 语义色（成功/警告/错误/信息） */
+  --mci-color-success: #00F5D4;
+  --mci-color-warning: #FFD100;
+  --mci-color-danger: #FF2E63;
+  --mci-color-info: #29B8FF;
+
+  /* 背景 */
+  --mci-bg-base: #0A0A0F;
+  --mci-bg-elevated: #121218;
+  --mci-bg-surface: #1A1A24;
+  --mci-bg-card: rgba(255, 255, 255, 0.04);
+  --mci-bg-card-hover: rgba(255, 255, 255, 0.08);
+  --mci-bg-glass: rgba(255, 255, 255, 0.06);
+  --mci-bg-glass-border: rgba(255, 255, 255, 0.1);
+  --mci-bg-mask: rgba(0, 0, 0, 0.6);
+
+  /* 文字 */
+  --mci-text-primary: #FFFFFF;
+  --mci-text-secondary: #A0A0B8;
+  --mci-text-tertiary: #6B6B80;
+  --mci-text-disabled: #4A4A5A;
+  --mci-text-on-primary: #FFFFFF;
+
+  /* 边框 */
+  --mci-border-color: rgba(255, 255, 255, 0.08);
+  --mci-border-color-hover: rgba(255, 255, 255, 0.15);
+  --mci-border-glow: rgba(114, 43, 255, 0.3);
+
+  /* 渐变 */
+  --mci-gradient-primary: linear-gradient(135deg, #722BFF 0%, #29B8FF 100%);
+  --mci-gradient-hot: linear-gradient(135deg, #FF2E63 0%, #FF6EC7 100%);
+  --mci-gradient-gold: linear-gradient(135deg, #FFD100 0%, #FF8C00 100%);
+  --mci-gradient-cyber: linear-gradient(135deg, #00F5D4 0%, #722BFF 50%, #FF2E63 100%);
+  --mci-gradient-bg: radial-gradient(ellipse at 20% 50%, rgba(114, 43, 255, 0.08) 0%, transparent 60%);
+}
+```
+
+### 亮色主题（默认）
+
+```css
+:root[data-theme="light"], :root {
+  --mci-color-primary: #6C2BD9;
+  --mci-color-primary-light: #8B5CF6;
+  --mci-color-primary-dark: #5521B5;
+  --mci-color-primary-glow: rgba(108, 43, 217, 0.15);
+
+  --mci-color-accent-red: #E8294A;
+  --mci-color-accent-blue: #2196F3;
+  --mci-color-accent-gold: #F59E0B;
+  --mci-color-accent-cyan: #06B6D4;
+  --mci-color-accent-pink: #EC4899;
+
+  --mci-color-success: #06B6D4;
+  --mci-color-warning: #F59E0B;
+  --mci-color-danger: #E8294A;
+  --mci-color-info: #2196F3;
+
+  --mci-bg-base: #F5F5FA;
+  --mci-bg-elevated: #FFFFFF;
+  --mci-bg-surface: #F0F0F8;
+  --mci-bg-card: rgba(255, 255, 255, 0.9);
+  --mci-bg-card-hover: rgba(255, 255, 255, 1);
+  --mci-bg-glass: rgba(255, 255, 255, 0.7);
+  --mci-bg-glass-border: rgba(0, 0, 0, 0.08);
+  --mci-bg-mask: rgba(0, 0, 0, 0.4);
+
+  --mci-text-primary: #1A1A2E;
+  --mci-text-secondary: #64648C;
+  --mci-text-tertiary: #9898B0;
+  --mci-text-disabled: #C0C0D0;
+  --mci-text-on-primary: #FFFFFF;
+
+  --mci-border-color: rgba(0, 0, 0, 0.06);
+  --mci-border-color-hover: rgba(0, 0, 0, 0.12);
+  --mci-border-glow: rgba(108, 43, 217, 0.2);
+
+  --mci-gradient-primary: linear-gradient(135deg, #6C2BD9 0%, #2196F3 100%);
+  --mci-gradient-hot: linear-gradient(135deg, #E8294A 0%, #EC4899 100%);
+  --mci-gradient-gold: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
+  --mci-gradient-cyber: linear-gradient(135deg, #06B6D4 0%, #6C2BD9 50%, #E8294A 100%);
+  --mci-gradient-bg: radial-gradient(ellipse at 20% 50%, rgba(108, 43, 217, 0.04) 0%, transparent 60%);
+}
+```
+
+### 颜色使用规则
+
+- **主题模型分两层**：`data-theme="light|dark"` 控制明暗底色，`data-mci-palette="black|white|red|orange|yellow|green|cyan|blue|purple"` 控制品牌主色。
+- **所有移动端与 PC 网站项目必须支持主流主色切换**：黑、白、红、橙、黄、绿、青、蓝、紫至少 9 个 palette。后台管理系统可由 Element Plus 主题承载，但也必须映射到 `--mci-*` token。
+- **palette 不得只换按钮底色**：必须同步覆盖 `--mci-color-primary`、`--mci-color-primary-strong`、`--mci-text-on-primary`、`--mci-border-glow`、`--mci-gradient-primary`、`--mci-shadow-button`、`--mci-shadow-button-hover`。
+- **白色/黄色主题必须单独处理文字颜色**：主按钮文字使用 `--mci-text-on-primary`，白色主题用深色字，黄色主题用深棕/深灰字，禁止固定白字。
+- **主色**用于核心交互元素（按钮、链接、选中态）
+- **Accent Red / Danger** 用于危险操作、错误、热门标记
+- **Accent Blue / Info** 用于信息提示、次要按钮
+- **Accent Gold / Warning** 用于重要强调、VIP 标签、价格、警告
+- **Accent Cyan / Success** 用于成功状态、在线标识
+- 默认主题为亮色 + 红色 palette；暗黑主题和主色 palette 都作为用户可选项。
+- 用户主题偏好持久化到 `mci-theme`、`mci-palette`、`mci-shape`，初次访问可跟随系统 `prefers-color-scheme`。
+
+### 主色 Palette 必备定义
+
+```css
+:root[data-mci-palette="black"]  { --mci-color-primary:#111827; --mci-text-on-primary:#fff; }
+:root[data-mci-palette="white"]  { --mci-color-primary:#F8FAFC; --mci-text-on-primary:#111827; }
+:root[data-mci-palette="red"]    { --mci-color-primary:#B51220; --mci-text-on-primary:#fff; }
+:root[data-mci-palette="orange"] { --mci-color-primary:#EA580C; --mci-text-on-primary:#fff; }
+:root[data-mci-palette="yellow"] { --mci-color-primary:#D9A23A; --mci-text-on-primary:#3A2500; }
+:root[data-mci-palette="green"]  { --mci-color-primary:#16A34A; --mci-text-on-primary:#fff; }
+:root[data-mci-palette="cyan"]   { --mci-color-primary:#0891B2; --mci-text-on-primary:#fff; }
+:root[data-mci-palette="blue"]   { --mci-color-primary:#2563EB; --mci-text-on-primary:#fff; }
+:root[data-mci-palette="purple"] { --mci-color-primary:#7C3AED; --mci-text-on-primary:#fff; }
+```
+
+实际项目优先直接使用 `Microi.UI/src/theme/tokens.css`，不要复制这段最小示例；新增 palette 时必须补充悬浮阴影、边框高光和渐变。
+
+### 移动端可读性底线
+
+- 移动端首页、商城、分享海报、资产页必须优先保证阅读清楚。浅色背景上的正文、占位文字、标签、金额、按钮文字不得使用低透明度浅灰或低对比金色。
+- 移动端底部导航、首页快捷入口、个人中心快捷入口的图标对比度与文字同等重要。彩色圆底图标必须显式设定内部图标色，并在每个主题截图确认可见。
+- 关键正文与背景对比度建议不低于 4.5:1；大标题、海报大字、促销卡标题不低于 3:1。金色渐变按钮默认使用深红/深棕文字，不使用白字。
+- 在渐变、图片、红金背景上放文字时，文字必须是实色且有足够字重；不要依赖 `opacity: .6` 这类弱化文字承载业务信息。
+- 完成移动端风格改造后，必须配合 Playwright、浏览器 DevTools、微信开发者工具自动化或项目已有 E2E 工具进行截图和关键文字对比度检查，复核首页第一屏、列表页、登录页、分享海报、空态/未登录态和关键按钮。
+- 用户要求“全自动化测试”“自动化验收”“跑完整测试”等时，如果本次涉及 UI/前端改动，自动化链路必须包含截图验证或视觉断言；只运行构建、lint、静态检查不能宣称已完成全自动化 UI 验收。若当前环境无法启动浏览器/小程序开发者工具，必须明确说明未完成截图验证。
+
+---
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=ui-design-008 sha256=01af2cebf85683f180693fd76cf6c5f1db4380274a9924acf5542b7b5f868ebc -->
+## 阴影体系（层次与质感）
+
+阴影是塑造层次感、可点击性和高级质感的关键。采用多层阴影叠加，但不要做脏、糊、重的阴影。
+
+```css
+:root {
+  /* 基础层级阴影 */
+  --mci-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
+  --mci-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3),
+                   0 0 12px var(--mci-color-primary-glow);
+  --mci-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.35),
+                   0 0 20px var(--mci-color-primary-glow);
+  --mci-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5),
+                   0 0 40px var(--mci-color-primary-glow);
+
+  /* 专用阴影 */
+  --mci-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3),
+                     0 0 15px rgba(114, 43, 255, 0.08);
+  --mci-shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.4),
+                           0 0 25px rgba(114, 43, 255, 0.15),
+                           0 0 60px rgba(114, 43, 255, 0.05);
+  --mci-shadow-button: 0 4px 15px var(--mci-color-primary-glow);
+  --mci-shadow-button-hover: 0 8px 25px var(--mci-color-primary-glow);
+  --mci-shadow-dialog: 0 25px 80px rgba(0, 0, 0, 0.6),
+                       0 0 50px rgba(114, 43, 255, 0.1);
+  --mci-shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.45),
+                         0 0 20px rgba(114, 43, 255, 0.08);
+
+  /* 强调发光 */
+  --mci-glow-primary: 0 0 15px var(--mci-color-primary-glow),
+                      0 0 45px rgba(114, 43, 255, 0.1);
+  --mci-glow-red: 0 0 15px rgba(255, 46, 99, 0.3),
+                  0 0 45px rgba(255, 46, 99, 0.1);
+  --mci-glow-cyan: 0 0 15px rgba(0, 245, 212, 0.3),
+                   0 0 45px rgba(0, 245, 212, 0.1);
+}
+
+/* 移动端阴影减半 — 移动端 GPU 较弱，且小屏幕不需要过强阴影 */
+@media (max-width: 768px) {
+  :root {
+    --mci-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3),
+                       0 0 8px rgba(114, 43, 255, 0.06);
+    --mci-shadow-card-hover: 0 4px 18px rgba(0, 0, 0, 0.4),
+                             0 0 12px rgba(114, 43, 255, 0.1);
+    --mci-shadow-button: 0 2px 10px var(--mci-color-primary-glow);
+    --mci-shadow-dialog: 0 12px 40px rgba(0, 0, 0, 0.6);
+  }
+}
+```
+
+### 阴影使用规则
+
+| 场景 | 使用阴影 |
+|------|---------|
+| 卡片默认态 | `--mci-shadow-card` |
+| 卡片悬浮态（PC） | `--mci-shadow-card-hover` |
+| 按钮默认态 | `--mci-shadow-button` |
+| 按钮按下态 | `--mci-shadow-button-hover`（移动端无 hover，只用按下/默认） |
+| 弹窗/抽屉 | `--mci-shadow-dialog` |
+| 下拉菜单 | `--mci-shadow-dropdown` |
+| 强调元素 | `--mci-glow-*` |
+
+---
+
+<!-- /microi-progressive:chunk -->