@microi.net/cli 4.6.2 → 4.6.7

package/dist/microi.skills/ui-design/assets/templates/MCI-DESIGN.md

@@ -1,98 +1,199 @@
-# MCI-DESIGN
-
-## 1. 产品目标
-
-- 页面服务的用户：
-- 用户进入页面后的首要任务：
-- 首屏必须回答的问题：
-- 成功衡量方式：
-
-## 2. 设计模式
-
-- 主模式：品牌叙事 / 真实产品流程 / 趋势构图 / 沉浸互动 / 动态首屏 / 数据工作台
-- 辅助能力（最多两项）：
-- 明确不采用的视觉手法：
-
-## 3. 信息架构
-
-1. 首屏：
-2. 核心任务：
-3. 证据或数据：
-4. 辅助内容：
-5. 最终行动：
-
-## 4. Design Tokens
-
-```yaml
-color:
-  background: var(--mci-bg)
-  surface: var(--mci-surface)
-  text: var(--mci-text)
-  muted: var(--mci-text-muted)
-  primary: var(--mci-primary)
-  success: var(--mci-success)
-  warning: var(--mci-warning)
-  danger: var(--mci-danger)
-spacing: [4, 8, 12, 16, 24, 32, 48, 64]
-radius:
-  input: var(--mci-shape-input)
-  panel: var(--mci-shape-panel)
-  card: var(--mci-shape-card)
-  button: var(--mci-shape-button)
-shadow:
-  card: var(--mci-shadow-card)
-  float: var(--mci-shadow-float)
-```
-
-## 5. 字体层级
-
-| 用途 | 桌面 | 移动 | 字重 | 行高 |
-| --- | ---: | ---: | ---: | ---: |
-| Display | 64 | 40 | 700 | 1.05 |
-| H1 | 40 | 32 | 700 | 1.15 |
-| H2 | 28 | 24 | 650 | 1.25 |
-| Body | 16 | 15 | 400 | 1.7 |
-| Meta | 13 | 12 | 500 | 1.5 |
-
-## 6. 组件与状态
-
-| 组件 | 默认 | Hover / Pressed | Loading | Empty | Error | Disabled | Success |
-| --- | --- | --- | --- | --- | --- | --- | --- |
-| 主按钮 |  |  |  | - |  |  |  |
-| 搜索 / 筛选 |  |  |  |  |  |  |  |
-| 列表 / 卡片 |  |  |  |  |  | - |  |
-| 表单 |  |  |  | - |  |  |  |
-
-## 7. 动效时间线
-
-- 0—120ms：
-- 120—360ms：
-- 360—800ms：
-- 循环动效：
-- `prefers-reduced-motion` 降级：
-
-## 8. 响应式
-
-| 宽度 | 栅格 | 导航 | 主操作 | 内容重排 |
-| --- | --- | --- | --- | --- |
-| 390 | 4 列 |  |  |  |
-| 768 | 8 列 |  |  |  |
-| 1440 | 12 列 |  |  |  |
-
-## 9. 媒体与性能
-
-- 图片格式、尺寸与 `object-fit`：
-- 视频 / Canvas / WebGL 的存在理由：
-- 静态降级资源：
-- 首屏资源预算：
-- 失败与超时处理：
-
-## 10. 验收清单
-
-- [ ] 首屏在 3 秒内说清产品、对象和主操作。
-- [ ] 默认、加载、空、错误、禁用、权限、成功状态可验证。
-- [ ] 390 / 768 / 1440 无横向滚动、遮挡和错位。
-- [ ] 明亮、暗黑主题均有足够对比度。
-- [ ] 所有可点击元素有 hover/focus/pressed 和真实结果。
-- [ ] 动效尊重 `prefers-reduced-motion`。
-- [ ] 所有图片、字体、模型和代码资产来源合法且可离线构建。
+# MCI-DESIGN
+
+> 本文件同时保存精确 token 与设计理由。实现前先读完整文件；修改视觉结构时同步更新本文件、源码和验收截图。
+
+```yaml
+contract:
+  version: 1
+  project:
+  mode: data-workspace
+  intent:
+
+tokens:
+  color:
+    canvas: var(--mci-bg-base)
+    surface: var(--mci-bg-card)
+    surfaceElevated: var(--mci-bg-elevated)
+    textPrimary: var(--mci-text-primary)
+    textSecondary: var(--mci-text-secondary)
+    primary: var(--mci-color-primary)
+    success: var(--mci-color-success)
+    warning: var(--mci-color-warning)
+    danger: var(--mci-color-danger)
+  typography:
+    display: { size: 48px, lineHeight: 1.1, weight: 800 }
+    h1: { size: 32px, lineHeight: 1.2, weight: 750 }
+    h2: { size: 24px, lineHeight: 1.3, weight: 700 }
+    body: { size: 16px, lineHeight: 1.7, weight: 400 }
+    meta: { size: 13px, lineHeight: 1.5, weight: 500 }
+  spacing:
+    micro: 4px
+    compact: 8px
+    control: 12px
+    card: 16px
+    section: 24px
+    page: 32px
+  shape:
+    input: var(--mci-shape-input)
+    panel: var(--mci-shape-panel)
+    card: var(--mci-shape-card)
+    button: var(--mci-shape-button)
+  elevation:
+    card: var(--mci-shadow-card)
+    cardHover: var(--mci-shadow-card-hover)
+    float: var(--mci-shadow-float)
+
+components:
+  primaryButton:
+    height: 44px
+    states:
+      default: { background: "{tokens.color.primary}" }
+      hover: { lift: -1px }
+      focus: { outline: "{tokens.color.primary}" }
+      pressed: { scale: 0.98 }
+      loading: { preserveWidth: true }
+      disabled: { opacity: 0.56 }
+  dataCard:
+    background: "{tokens.color.surface}"
+    radius: "{tokens.shape.card}"
+    padding: "{tokens.spacing.card}"
+    states:
+      default: { elevation: "{tokens.elevation.card}" }
+      hover: { elevation: "{tokens.elevation.cardHover}", lift: -2px }
+      focus: { outline: "{tokens.color.primary}" }
+      selected: { border: "{tokens.color.primary}" }
+
+omissions: []
+```
+
+## 1. 产品概览与目标用户
+
+- 首要用户：
+- 首要任务：
+- 用户进入后第一眼必须理解：
+- 成功结果与衡量方式：
+- 关键设备与使用环境：
+
+## 2. 视觉性格与情绪目标
+
+- 主情绪（只选一个）：
+- 具体视觉隐喻：
+- 辅助气质（最多两项）：
+- 选择理由：
+- 明确不采用的视觉语言：
+
+## 3. 颜色
+
+- 页面底色与表面关系：
+- 主色只用于：
+- 成功 / 警告 / 危险 / 信息色语义：
+- 明亮与暗黑主题的对比策略：
+- 透明表面的叠加底色：
+
+## 4. 字体
+
+| 角色 | 字号 / 行高 / 字重 | 用途 | 禁止 |
+| --- | --- | --- | --- |
+| Display |  |  |  |
+| H1 |  |  |  |
+| H2 |  |  |  |
+| Body |  |  |  |
+| Meta |  |  |  |
+
+## 5. 布局与间距
+
+- Desktop：12 列，最大宽度：
+- Tablet：8 列，重排规则：
+- Mobile：4 列，左右安全间距：
+- 内部紧凑间距：
+- 区域与页面留白：
+
+## 6. 层级、材质与形状
+
+- 深度来自：色调层 / 细边框 / 环境阴影 / 透明材质 / 实体投影
+- 圆角或切角表达的性格：
+- 页面 / 卡片 / 浮层的层级关系：
+- 低性能与不支持透明效果时的降级：
+
+## 7. 组件与状态
+
+| 组件 | Default | Hover / Focus / Pressed | Loading | Empty / Error | Disabled | Selected / Success |
+| --- | --- | --- | --- | --- | --- | --- |
+| 主按钮 |  |  |  | - |  |  |
+| 搜索 / 筛选 |  |  |  |  |  |  |
+| 列表 / 数据卡片 |  |  |  |  | - |  |
+| 表单 |  |  |  |  |  |  |
+| 弹层 |  |  |  |  |  |  |
+
+### 数据卡片
+
+- 信息顺序：身份 → 标题/状态 → 关键字段 → 时间/辅助标签 → 操作。
+- 缺图：40—44px 紧凑标记，不渲染大面积装饰占位图。
+- 默认列数：桌面 4，平板 2—3，移动 1；显式业务配置优先。
+- 操作：一个主动作、一至两个次动作，其余进入“更多”；危险动作降权。
+
+## 8. 页面模式与信息架构
+
+1. 首屏：
+2. 核心任务：
+3. 证据或数据：
+4. 辅助内容：
+5. 最终行动：
+
+- 主模式：品牌叙事 / 真实产品流程 / 趋势构图 / 沉浸互动 / 动态首屏 / 数据工作台
+- 辅助能力（最多两项）：
+
+## 9. 动效与媒体
+
+- 0—120ms：
+- 120—360ms：
+- 360—800ms：
+- 循环动效存在理由：
+- 图片比例与 `object-fit`：
+- `prefers-reduced-motion` 与静态降级：
+
+## 10. 响应式与安全区
+
+| 宽度 | 栅格 | 导航 | 主操作 | 内容重排 |
+| --- | --- | --- | --- | --- |
+| 390 | 4 列 |  |  |  |
+| 768 | 8 列 |  |  |  |
+| 1440 | 12 列 |  |  |  |
+
+## 11. 可访问性、性能与降级
+
+- 键盘顺序与可见焦点：
+- 正文、状态与交互对比度：
+- 触控目标：移动端不小于 44px
+- 首屏资源预算：
+- 网络失败、媒体失败与离线策略：
+- 骨架屏、空态、错误态与恢复路径：
+
+## 12. 应当与禁止
+
+### 应当
+
+-
+
+### 禁止
+
+-
+
+## 有意省略
+
+| 规则 | 省略理由 | 替代方案 |
+| --- | --- | --- |
+|  |  |  |
+
+## 验收清单
+
+- [ ] 机器块能解析，核心章节顺序正确，无重复或近似拼写章节。
+- [ ] 所有 `{路径}` 引用存在且无循环；无未说明的孤立 token。
+- [ ] 首屏在 3 秒内说清产品、对象和主操作。
+- [ ] 默认、加载、空、错误、禁用、权限、成功状态可验证。
+- [ ] 390 / 768 / 1440 无横向滚动、遮挡和错位。
+- [ ] 明亮、暗黑主题均有足够对比度。
+- [ ] 所有可点击元素有 hover、focus、pressed 和真实结果。
+- [ ] 动效尊重 `prefers-reduced-motion`。
+- [ ] 契约差异与实现差异同时评审，没有意外删除或语义漂移。
+- [ ] 所有图片、字体、模型和代码资产来源合法且可离线构建。