00 / Specification anatomy
一页组件文档,必须能回答设计、产品和研发的关键问题
统一模板让不同复杂度的组件都能被快速查找和评审。简单组件可以缩短篇幅,但结构、状态、配置和验收不能靠口头补充。
- 01Metadata名称、编号、分层、版本、Owner、依赖与适用终端。
- 02Purpose解决什么问题、适用与不适用场景、替代方案和业务价值。
- 03Anatomy区域、Slot、必选与可选模块、内容层级和嵌套限制。
- 04State matrix默认、悬停、焦点、选中、禁用、加载、错误、空状态与组合状态。
- 05Configuration样式、能力、数据、权限、默认行为,以及 Figma Properties 与前端 Props 对应。
- 06Interaction进入、操作、提交、取消、冲突、异常和恢复路径。
- 07Accessibility语义、可读名称、键盘路径、焦点、对比度、触控面积与动态反馈。
- 08Acceptance边界样例、响应式检查、测试步骤、版本变更和迁移说明。
01 / State & configuration
把隐性分支变成看得见、测得到的状态矩阵
属性不是为了“做更多变体”,而是把真实业务差异放进明确边界。每个属性都说明默认值、可组合范围、权限、输入输出和异常处理。
| 属性组 | 文档必须记录 | 验收方式 |
|---|---|---|
| Appearance | Size、Density、Hierarchy、Theme、Icon 与内容长度 | Light / Dark、多语言、长文本与高密度场景 |
| Capability | Selection、Sort、Filter、Drag、Zoom、Batch action | 可用、无权限、禁用、冲突和撤销路径 |
| Data | 对象字段、空值、加载、分页、刷新和实时更新 | 正常、空、部分失败、超时、离线与恢复 |
| State | Default、Hover、Focus、Selected、Error、Disabled、Loading | 鼠标、键盘、触控、屏幕阅读器和组合状态 |
02 / Pro component
Floor Map Layout:空间、状态和操作都进入配置契约

Configuration excerpt
核心配置与边界
- Layout mode:固定布局、自由布局和只读查看。
- Resource shape:矩形、圆形、自定义尺寸与旋转。
- Status mapping:可用、预留、使用中、等待、即将释放和不可用。
- Interaction:单选、多选、框选、缩放、平移与键盘移动。
- Edge cases:重叠资源、视口外对象、空地图、只读权限和实时状态更新。
- Acceptance:颜色外的第二状态线索、缩放后可读性、焦点顺序和触控命中区。
03 / Business component
Promotion Selector:优惠不是列表选择,而是一套规则引擎

Rule excerpt
资格、互斥与金额联动
- Eligibility:订单范围、客户身份、渠道、时间和最低金额。
- Priority:自动最优、手动选择、门店规则与客户权益的优先级。
- Conflict:互斥优惠、叠加上限、已使用权益和旧方案替换。
- Feedback:即时显示节省金额、不可用原因、冲突影响和替换结果。
- Recovery:取消、撤销、支付失败返回和订单变更后的重新计算。
- Acceptance:金额前后一致、跨端语义一致、失败后订单上下文保留。
04 / Access component
PIN / Code Sign In:把高频切换和安全恢复压缩成短路径

Interaction excerpt
身份、错误与权限
- Entry:员工选择、搜索、最近使用和直接输入员工号。
- Input:数字键盘、硬件键盘、删除、清空、提交和输入长度。
- Error:错误次数、锁定提示、剩余时间和管理员恢复。
- Permission:角色权限、门店范围、班次状态和敏感操作二次确认。
- Privacy:PIN 不明文展示,错误提示不暴露账户是否存在。
- Acceptance:完整键盘路径、焦点可见、提交防重复和离线恢复。
05 / Acceptance checklist
组件进入产品前,需要逐条通过这些检查
- 01语义名称、角色、对象和状态与产品模型一致,没有为了页面方便制造同义词。
- 02配置默认值、组合边界、权限、输入输出和设计代码映射都有记录。
- 03交互鼠标、键盘、触控和外接设备的进入、操作、取消与恢复路径完整。
- 04异常空、慢、失败、离线、并发更新、无权限和部分成功都保留上下文。
- 05响应式Web、POS、Pad、Kiosk 和 Mobile 调整密度与布局,但不改变核心语义。
- 06可访问性颜色、对比度、焦点、键盘、可读名称、目标尺寸和动态更新可验证。
- 07发布版本、影响范围、Story、测试样例、Changelog 与迁移说明同时更新。
06 / Official baseline

