组件状态矩阵生成器
设计评审总漏状态？把组件清单 × 状态集合交给工具：选默认、悬停、焦点、按下、禁用、加载、错误、空态，一键生成可交付的矩阵表，每格给出背景/边框/光标/ARIA 的 token 建议，右侧还能实时预览按钮各状态，可直接复制进 Figma 备注或导出 CSV 给前端。
1定义组件与状态
矩阵与预览将按主色推导各状态 token
2状态实时预览
* 预览为示意效果：focus 环、禁用透明度、加载转圈、错误红边、空态虚线框，均按下方矩阵规则渲染。
3组件 × 状态交付矩阵
412 组件预设 · 状态迁移图 · 覆盖审计
点选任一组件预设，自动带入该组件的推荐状态组合并刷新上方矩阵；下方审计区实时标出八个状态是否已覆盖，可逐项勾选「已验收」跟踪进度。
当前 0 个组件
状态覆盖审计 0 / 8 已覆盖
验收进度 0 / 8
状态迁移图 · 自绘 SVG
focus-visible 焦点环适用于全部可聚焦态，不单独成为流程节点。
状态 → 选择器 / ARIA 对照
| 状态 | CSS 选择器 | ARIA / 属性 | 键盘行为 |
|---|---|---|---|
| default 默认 | .btn | 无（优先用原生元素） | Tab 可聚焦，Enter/空格触发 |
| hover 悬停 | :hover | 无 | 触屏无悬停，不作为唯一提示 |
| focus 焦点 | :focus-visible | 无（勿移除 outline） | Tab 到达，焦点环清晰可见 |
| active 按下 | :active | aria-pressed（切换按钮） | 按住触发，反馈不晚于 100ms |
| disabled 禁用 | [disabled] | aria-disabled="true" | 不响应点击，需在页面说明原因 |
| loading 加载 | [aria-busy="true"] | aria-busy="true" | 保留焦点，阻断重复触发 |
| error 错误 | [aria-invalid="true"] | aria-invalid + aria-describedby | 焦点移入错误字段，读屏播报 |
| empty 空态 | [data-empty] | role="status" | 说明空原因并提供下一步操作 |
方案管理 · 数值对比 · 导出
调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。
还没有留言，来抢沙发吧！