数据模型图

类型: 前端工程 | 标签: 数据模型 Store Context 状态管理 SVG

提示词

md

深度解析项目中状态管理或上下文定义文件（如 src/stores 或 src/contexts），分析并梳理核心数据模型。

## 图表内容
- 绘制数据模型关系图，清晰标注每个 Model/Store 的状态字段、核心 Actions 及其数据类型

## 关系映射
- 用线条标出各 Model/Store 之间的引用、组合或派生依赖关系

## 输出
- 保存为 ./docs/data-model.svg

适用场景

状态管理重构：当前用的 Redux/Zustand/Context 是否合理，哪些数据应该合并或拆分
新人识路：不看代码，一张图告诉新人"数据源头在哪、谁在生产数据、谁在消费"
排查状态污染：多个页面共用一个 Store 时，一个页面改了数据会影响哪里
类型审核：所有字段有没有正确的 TS 类型，会不会出现 any 烂大街

最佳实践

区分数据来源：Server State（服务端）vs Client State（本地 UI）分开标记颜色
标注数据类型：每个字段标注 TS 类型，没类型的就是隐患
关注 Actions 副作用：Action 里面有没有直接改别人数据的动作——跨 Model 写操作是红灯
结合模块依赖图：数据模型图告诉你"数据是什么"，模块依赖图告诉你"谁在用它"
定期做数据审计：项目迭代久了，死数据比活数据多——图能帮你发现没人用的状态字段