技术调研选中GGEditor
- 首先这是一个2018启动的项目,当时像gg-editor这种功能较为完备的乐高式拼接任务流的这种库比较少.
- API可控度,UI契合度也比较符合当时的一个需求.
- 考虑到上线时间紧急以及人力短缺的原因,就采用gg-editor作为我们的设计器的基础.
- 让更多的时间能够投入到业务开发上去.
集成这样一个设计器,我们需要做的工作:
- 选中一个
状态管理机制来同一管理设计器. - 需要一个配套
表单设计器来支持我们批量生产任务节点. - 针对业务需求对
画布机制作出一些必要的约束和优化. - 以
流程设计器为核心,打通与其他功能模块的连接渠道.
1. 状态管理机制
本地状态
| 问题 | 方案 |
|---|---|
| 副作用 | 采用内联state维护设计器根组件状态,避免与其他模块混淆,以及影响下一次编辑 |
| 共享 | 采用react context API将设计器根组件状态,分享给组组件 |
远程状态
| 问题 | 方案 |
|---|---|
| 状态同步 | 采用websocket协议 |
| 编辑碰撞 | 1. 为每个版本标记唯一的hash,作为是否可覆盖的标准 2. 编辑时提示协作人 |
2. 表单设计器
- 基于
ant-design封装: 能够通过拖拽动态生成表单的轻量级表单设计器.- 再通过表单配置出
任务节点.
3. 画布机制
约束
- 画布必须有同一的根节点
- 节点关系流向必须单一
- 支持只读和编辑两种模式
优化
- 支持只读和编辑两种模式
- 从节点树中拖拽到画布中时,节点能够自动连线到最近的节点上
- 实时更新任务状态
4. 模块关联
- 关联模块我们分为两类: 上游的
供应模块,下游的消费模块. - 供应模块: 节点管理,特征管理,样本管理,模型管理等等.
- 消费模块: 运行历史,运行日志以及其他相关看板平台.
