@microi.net/cli 4.9.5 → 4.9.7

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

@@ -0,0 +1,218 @@
+# ui-design 详细参考 1
+
+> 按需读取；本文件由 SKILL.md 的原章节无损拆分。
+
+<!-- microi-progressive:chunk id=ui-design-007 sha256=b32dac5c75835929c6c55607807cad0cd14a013ddc1a41e307263549f2047867 -->
+## 颜色体系（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=80df5bdb440dea278d96692425780d40232b8ab4bbb604ee1b3f9727679ea65a -->
+## 阴影体系（层次与质感）
+
+阴影是塑造层次感、可点击性和高级质感的关键。采用多层阴影叠加，但不要做脏、糊、重的阴影。
+
+```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 -->

package/skills/ui-design/references/progressive-02-/345/255/227/344/275/223.md

@@ -0,0 +1,155 @@
+# ui-design 详细参考 2
+
+> 按需读取；本文件由 SKILL.md 的原章节无损拆分。
+
+<!-- microi-progressive:chunk id=ui-design-009 sha256=3e553809ea501d359553ba0e78a1cf83c9fccc0cdc06a5d562d73af7ebc0c09d -->
+## 字体
+
+```css
+:root {
+  --mci-font-family: 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
+  --mci-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
+
+  /* 字号 — PC */
+  --mci-text-xs: 12px;
+  --mci-text-sm: 13px;
+  --mci-text-base: 14px;
+  --mci-text-lg: 16px;
+  --mci-text-xl: 20px;
+  --mci-text-2xl: 24px;
+  --mci-text-3xl: 32px;
+  --mci-text-4xl: 40px;
+
+  /* 字重 */
+  --mci-font-normal: 400;
+  --mci-font-medium: 500;
+  --mci-font-semibold: 600;
+  --mci-font-bold: 700;
+  --mci-font-black: 900;
+}
+
+/* 移动端字号略大，更适合小屏阅读 */
+@media (max-width: 768px) {
+  :root {
+    --mci-text-xs: 11px;
+    --mci-text-sm: 13px;
+    --mci-text-base: 15px;
+    --mci-text-lg: 17px;
+    --mci-text-xl: 20px;
+    --mci-text-2xl: 24px;
+    --mci-text-3xl: 28px;
+    --mci-text-4xl: 34px;
+  }
+}
+```
+
+### 字体规则
+
+- **大标题**：`--mci-text-3xl` + `--mci-font-black`，可配合渐变色文字
+- **小标题**：`--mci-text-xl` + `--mci-font-semibold`
+- **正文**：`--mci-text-base` + `--mci-font-normal`
+- **辅助文字**：`--mci-text-sm` + `--mci-text-secondary`
+- **数据/价格**：`--mci-text-2xl` + `--mci-font-bold` + 渐变色
+
+渐变文字写法：
+```css
+.mci-text-gradient {
+  background: var(--mci-gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+```
+
+> ⚠️ **渐变文字低对比陷阱（已反复踩坑）**：`background-clip:text + color/-webkit-text-fill-color:transparent` 在部分 H5 webview / 安卓内核下渲染会失败，导致文字**透明不可见**。
+> 对**关键标题/品牌名/重要文案**优先使用实色高对比文字（如 `color:#8E0613`），或用 `@supports` 做降级：
+> ```scss
+> .mci-text-gradient { color: var(--mci-color-primary); -webkit-text-fill-color: var(--mci-color-primary); }
+> @supports ((-webkit-background-clip:text) or (background-clip:text)) {
+>   .mci-text-gradient { background: var(--mci-gradient-primary); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
+> }
+> ```
+
+---
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=ui-design-010 sha256=06dccf8f187ce38d807057735f6b6acbf9a9037f37f64544fb933f16f28e58f0 -->
+## 间距与触摸目标
+
+### 界面引擎仪表盘密度与对齐
+
+- 界面引擎首页和仪表盘默认采用单一外层滚动。单个卡片容器尽量完整展示内容，不设置独立纵向滚动条；固定高度不足时应压缩卡片、工具栏、表格行高与间距，或让容器自然增高。
+- 同一层级的卡片必须统一外边距、内边距、圆角、标题高度和内容起始线；同排卡片应使用相同最小高度，左右边缘及底部视觉对齐。
+- 表格容器以默认 15 条数据、表头、工具栏和分页全部可见为桌面端验收基准；日历与公告同样要完整显示头部操作、主体和底部区域。
+- 页面编辑、快捷操作等悬浮按钮必须脱离文档流，不能通过额外空白行或页面顶部内边距占位；半透明悬浮元素需保证文字对比度和 hover 可识别性。
+- 避免组件底部出现大片无信息空白。优先调整组件内部纵向分布、最小高度和网格密度；不得用内部滚动条或隐藏分页来伪装紧凑。
+- 界面引擎移动端必须按真实视口自动改为单列容器；卡片内高频指标和短快捷入口可以采用两列紧凑网格，不能把桌面 4 列机械改成 4 个超高单列卡片。嵌入式列表的返回栏、全局 FAB、固定操作条必须降级为容器内操作，不能覆盖前后兄弟组件。
+- 容器标题右侧存在“更多/进入/刷新/界面设计”等多个动作时，必须放入同一个 `display:flex; align-items:center` 操作区；窄屏允许整体换行并右对齐，禁止依赖 float 或绝对定位造成文字上下错位、互相遮挡。
+
+```css
+:root {
+  --mci-space-1: 4px;
+  --mci-space-2: 8px;
+  --mci-space-3: 12px;
+  --mci-space-4: 16px;
+  --mci-space-5: 20px;
+  --mci-space-6: 24px;
+  --mci-space-8: 32px;
+  --mci-space-10: 40px;
+  --mci-space-12: 48px;
+
+  /* 移动端最小触摸目标 — Apple HIG 44pt / Material 48dp */
+  --mci-touch-target: 44px;
+
+  /* 安全区域（移动端刘海/底部 home indicator） */
+  --mci-safe-top: env(safe-area-inset-top, 0);
+  --mci-safe-bottom: env(safe-area-inset-bottom, 0);
+  --mci-safe-left: env(safe-area-inset-left, 0);
+  --mci-safe-right: env(safe-area-inset-right, 0);
+}
+```
+
+### 移动端规则
+- 所有可点击元素（按钮、tab、列表项）**最小尺寸 44×44px**
+- 顶部导航栏、沉浸式 header、返回按钮区域必须包含 `var(--mci-safe-top)`，不能假设状态栏固定 20px 或 44px。
+- 底部 tab bar、底部固定操作栏、悬浮购买按钮必须包含 `var(--mci-safe-bottom)`，不能贴住 iPhone home indicator 或 Android 手势条。
+- 左右全屏容器、横屏弹窗、沉浸式背景必须兼容 `var(--mci-safe-left/right)`，避免刘海横屏遮挡。
+- 列表项之间最小间距 8px，避免误触
+
+---
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=ui-design-011 sha256=1d31f1333c8853380d4e624d3798fddecf7bc26c861afc2dce9df82c566ffa25 -->
+## 骨架屏 Loading 设计规范
+
+所有依赖接口、数据库、远程资源或异步计算的数据区域，首屏加载态必须使用骨架屏（Skeleton Screen），不能只显示 spinner、进度圈、空图标或“数据加载中...”文案。骨架屏属于基础体验规范，适用于 PC、移动端 H5、uni-app、小程序和 WebView。
+
+- 骨架屏形态必须接近最终内容版式：列表用行骨架，表格用表头+行骨架，卡片/商品用网格骨架，详情页用大图区+标题/段落骨架，仪表盘用指标卡骨架。
+- 加载期间不能提前显示“暂无数据/暂无明细/空空如也”；空态只能在请求完成且确认无数据后出现。
+- 骨架颜色使用主题变量或中性色阶，不要使用高饱和主色大面积闪烁；亮色主题推荐 `rgba(255,255,255,.72)` 与 `rgba(232,221,205,.9)`，暗色主题推荐低对比深灰阶。
+- 动画只允许使用 `background-position`、`opacity` 或 `transform`，节奏控制在 1.0s 到 1.4s；必须支持 `prefers-reduced-motion` 关闭或弱化动画。
+- 分页加载下一页时，只在列表底部追加紧凑骨架，不覆盖已有内容；切换筛选/分类重载第一页时才显示首屏骨架。
+- 骨架块必须有稳定尺寸、圆角和间距，加载前后不能造成明显布局跳动。
+
+参考样式：
+
+```scss
+.mci-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(232,221,205,.9), rgba(255,255,255,.72));
+  background-size: 240% 100%;
+  animation: mciSkeleton 1.15s ease-in-out infinite;
+}
+@keyframes mciSkeleton {
+  0% { background-position: 120% 0; }
+  100% { background-position: -120% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mci-skeleton { animation: none; }
+}
+```
+
+---
+
+<!-- /microi-progressive:chunk -->

package/skills/ui-design/references/progressive-03-/345/212/250/346/225/210/350/247/204/350/214/203-/344/270/260/345/257/214/344/275/206/344/270/215/345/215/241.md

@@ -0,0 +1,235 @@
+# ui-design 详细参考 3
+
+> 按需读取；本文件由 SKILL.md 的原章节无损拆分。
+
+<!-- microi-progressive:chunk id=ui-design-012 sha256=d59ae14c3991bb27949dcdcc0df3114ecbd1e627d6a69f5f78d1247ea2e02cd6 -->
+## 动效规范（丰富但不卡）
+
+### 性能铁律
+
+1. **只用 `transform` 和 `opacity` 做动画** — 走 GPU 合成层，不触发重排重绘
+2. **禁止动画 `width/height/top/left/margin/padding`** — 会触发 Layout，导致卡顿
+3. **禁止动画 `box-shadow`** — 改用伪元素 `::after` 的 `opacity` 切换预设阴影
+4. **`will-change` 不要滥用** — 只在动画激活时添加，静态元素禁止使用
+5. **动画时长控制**：微交互 150-250ms，转场 300-400ms，装饰动效 600ms-2s
+6. **使用 `prefers-reduced-motion` 媒体查询**提供无动画回退
+7. **移动端额外限制**：禁用 `backdrop-filter: blur()` 大面积使用（中低端机型严重掉帧），最多用于小型胶囊/标签
+8. **移动端装饰背景**：优先使用结构化渐变、网格、细线、扫光和内容图片；禁用 Canvas 装饰点、密集散点、离散光球、模糊色块堆叠。
+
+### Timing Functions
+
+```css
+:root {
+  --mci-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --mci-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --mci-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --mci-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  --mci-duration-fast: 150ms;
+  --mci-duration-base: 250ms;
+  --mci-duration-slow: 400ms;
+  --mci-duration-decorative: 800ms;
+}
+```
+
+### 标准动效库
+
+#### 1. 卡片悬浮 / 按下（高性能阴影切换）
+
+```scss
+.mci-card {
+  position: relative;
+  border-radius: var(--mci-radius-xl);
+  background: var(--mci-bg-card);
+  box-shadow: var(--mci-shadow-card);
+  transition: transform var(--mci-duration-base) var(--mci-ease-out);
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: var(--mci-shadow-card-hover);
+    opacity: 0;
+    transition: opacity var(--mci-duration-base) var(--mci-ease-out);
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  /* PC: hover */
+  @media (hover: hover) {
+    &:hover {
+      transform: translateY(-4px) scale(1.01);
+      &::after { opacity: 1; }
+    }
+  }
+
+  /* 移动端：active 按压反馈 */
+  &:active {
+    transform: scale(0.98);
+    transition-duration: var(--mci-duration-fast);
+  }
+}
+```
+
+#### 2. 淡入上浮（列表/卡片进入）
+
+```scss
+.mci-fade-up-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+.mci-fade-up-enter-active {
+  animation: mciFadeUp var(--mci-duration-slow) var(--mci-ease-out) forwards;
+}
+
+@keyframes mciFadeUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 列表交错进入 */
+.mci-stagger-item {
+  opacity: 0;
+  transform: translateY(16px);
+  animation: mciFadeUp var(--mci-duration-slow) var(--mci-ease-out) forwards;
+  animation-delay: calc(var(--mci-index, 0) * 60ms);
+}
+```
+
+#### 3. 按钮渐变扫光
+
+```scss
+.mci-btn-glow {
+  position: relative;
+  overflow: hidden;
+  background: var(--mci-gradient-primary);
+  border: none;
+  border-radius: var(--mci-radius-md);
+  color: var(--mci-text-on-primary);
+  box-shadow: var(--mci-shadow-button);
+  transition: transform var(--mci-duration-fast) var(--mci-ease-out);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.2),
+      transparent
+    );
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      transform: translateY(-2px);
+      &::before {
+        left: 100%;
+        transition: left 0.5s var(--mci-ease-smooth);
+      }
+    }
+  }
+
+  &:active { transform: scale(0.97); }
+}
+```
+
+#### 4. 焦点边框扫光
+
+```scss
+.mci-focus-border {
+  position: relative;
+  border: 1px solid var(--mci-border-glow);
+  border-radius: var(--mci-radius-lg);
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
+    transform: translateX(-110%) skewX(-18deg);
+    animation: mciFocusSweep 3.6s ease-in-out infinite;
+    pointer-events: none;
+  }
+}
+
+@keyframes mciFocusSweep {
+  0%, 42% { transform: translateX(-110%) skewX(-18deg); opacity: 0; }
+  58% { opacity: .85; }
+  100% { transform: translateX(120%) skewX(-18deg); opacity: 0; }
+}
+```
+
+#### 5. 玻璃拟态容器（PC 用，移动端慎用）
+
+```scss
+.mci-glass {
+  background: var(--mci-bg-glass);
+  backdrop-filter: blur(12px) saturate(1.5);
+  -webkit-backdrop-filter: blur(12px) saturate(1.5);
+  border: 1px solid var(--mci-bg-glass-border);
+  border-radius: var(--mci-radius-xl);
+  box-shadow: var(--mci-shadow-md);
+}
+
+/* 移动端降级：用半透明色块代替模糊 */
+@media (max-width: 768px) {
+  .mci-glass {
+    background: var(--mci-bg-elevated);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+```
+
+#### 6. 无障碍动效回退
+
+```scss
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=ui-design-013 sha256=385528713388a28e0182e2df9e2ed828ddb7cccaf7a3a5e78354f46a588f6f1c -->
+## Vue 3 过渡动画
+
+```scss
+/* 淡入上浮 */
+.mci-up-enter-active { transition: all var(--mci-duration-slow) var(--mci-ease-out); }
+.mci-up-leave-active { transition: all var(--mci-duration-base) var(--mci-ease-smooth); }
+.mci-up-enter-from { opacity: 0; transform: translateY(20px); }
+.mci-up-leave-to { opacity: 0; transform: translateY(-10px); }
+
+/* 缩放弹出 */
+.mci-scale-enter-active { transition: all var(--mci-duration-base) var(--mci-ease-spring); }
+.mci-scale-leave-active { transition: all var(--mci-duration-fast) var(--mci-ease-smooth); }
+.mci-scale-enter-from { opacity: 0; transform: scale(0.92); }
+.mci-scale-leave-to { opacity: 0; transform: scale(0.95); }
+
+/* 列表交错 */
+.mci-list-move,
+.mci-list-enter-active { transition: all var(--mci-duration-slow) var(--mci-ease-out); }
+.mci-list-leave-active { transition: all var(--mci-duration-base) var(--mci-ease-smooth); position: absolute; }
+.mci-list-enter-from { opacity: 0; transform: translateX(-20px); }
+.mci-list-leave-to { opacity: 0; transform: translateX(20px); }
+```
+
+---
+
+<!-- /microi-progressive:chunk -->