状态机图

类型: 前端工程  |  标签: 状态流转 UI 状态 状态机 SVG

提示词

深度解析组件【组件名/页面名】的源码，提取其中控制核心交互的所有状态变量。

## 覆盖流转
- 完整绘制状态流转图，必须覆盖 idle、loading、success、error 等核心状态及边缘异常分支

## 触发条件
- 在每一次状态转换的连线上，明确标注触发该流转的动作或事件名称

## 输出
- 保存为 ./docs/state-【组件名】.svg

适用场景

• 复杂交互组件：多步骤表单、文件上传、支付流程等状态多的组件
• 遗漏分支检查：只写了成功路径没写 error 态？空态、loading 态、超时态呢？
• 组件测试用例设计：每个状态转换都是一条测试用例，图出来用例也出来了
• 重构评估：重构一个组件前先画状态机，确保所有分支都被覆盖

最佳实践

1. 穷举六态：不要只画 idle → loading → success，把 error、empty、timeout 都画上
2. 标注触发事件：连线上的文字不要只写"点击按钮"，要写 handleSubmit() 这样的实际方法名
3. 识别隐含状态：有些状态藏在 boolean 组合里（isLoading && !isError），把它展开成显式状态节点
4. 对照实际 UI：画完图和实际界面逐节点对照——有没有状态在 UI 上没对应视觉反馈
5. 和时序图配合使用：状态机管"有哪些状态"，时序图管"怎么在这些状态间流转"