交互时序图

类型: 前端工程 | 标签: 时序分析 执行链路 事件追踪 SVG

提示词

md

针对项目中的核心功能【功能名，例如：用户登录/大文件上传】，通过全局检索真实代码，还原其完整的执行链路。

## 链路覆盖
- 从用户触发操作开始，完整追踪：UI 组件事件 → API 请求调用 → Store/全局状态更新 → 视图响应式渲染

## 标注规范
- 清晰标注每一步涉及的组件名称、方法名/Hook 名、以及传递的核心数据

## 输出
- 保存为 ./docs/sequence-【功能名】.svg

适用场景

排查异步 bug：事件发出去没人接，或者接了不更新——时序图让断掉的链一目了然
性能优化：哪一步耗时太长、哪一步做了不必要的重复请求
新人理解核心流程：登录、支付、导出等关键链路的全貌
接口联调：前端调了哪个 API、传了什么参数、返回值去了哪

最佳实践

选择核心链路：先挑 2~3 个最高频的功能（登录、列表加载、表单提交）跑，不要贪多
关注数据流动：时序图的价值在于追踪"数据长什么样、经过谁、变成什么"
标注返回数据：不仅是调用方向，返回值也从 API → Store → View 完整标注
结合状态机图：时序图管横向链路（谁调谁），状态机图管纵向状态（idle → loading → success）
保存多份：每个核心功能一张图，放到 docs/ 下命名清晰，方便搜索