111
This commit is contained in:
戚辰先生
parent
d782bfd294
commit
48a6e36d83
@ -93,10 +93,240 @@
|
||||
3. executors中的configSchema定义具体执行器的配置结构
|
||||
4. 实际节点配置时，executorConfig需要符合选定执行器的configSchema
|
||||
|
||||
## 5. 设计优点
|
||||
## 5. 前端实现指南
|
||||
|
||||
1. 配置灵活可扩展
|
||||
2. 前端可以动态生成表单
|
||||
3. 后端可以严格验证配置
|
||||
4. 支持不同类型节点的差异化配置
|
||||
5. 便于新增节点类型和执行器
|
||||
### 5.1 工作流设计器组件架构
|
||||
|
||||
推荐使用组件化设计，主要包含以下组件：
|
||||
|
||||
1. **WorkflowDesigner（工作流设计器）**
|
||||
- 整体容器组件
|
||||
- 负责状态管理
|
||||
- 处理快捷键
|
||||
- 工具栏集成
|
||||
|
||||
2. **NodePanel（节点面板）**
|
||||
- 显示可用节点类型
|
||||
- 支持拖拽创建节点
|
||||
- 节点分类展示
|
||||
|
||||
3. **Canvas（画布）**
|
||||
- 节点和连线的可视化
|
||||
- 处理拖拽和连线
|
||||
- 网格背景
|
||||
- 缩放和平移
|
||||
|
||||
4. **NodeConfig（节点配置）**
|
||||
- 动态表单生成
|
||||
- 配置验证
|
||||
- 实时预览
|
||||
|
||||
### 5.2 接口说明
|
||||
|
||||
#### 5.2.1 节点类型接口
|
||||
```typescript
|
||||
// 获取节点类型列表
|
||||
GET /api/v1/node-types
|
||||
Response: {
|
||||
code: number;
|
||||
data: NodeType[];
|
||||
message: string;
|
||||
}
|
||||
|
||||
// 获取单个节点类型详情
|
||||
GET /api/v1/node-types/{id}
|
||||
Response: {
|
||||
code: number;
|
||||
data: NodeType;
|
||||
message: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.2.2 工作流设计接口
|
||||
```typescript
|
||||
// 保存工作流设计
|
||||
POST /api/v1/workflows/{id}/design
|
||||
Request: {
|
||||
nodes: Node[];
|
||||
edges: Edge[];
|
||||
}
|
||||
Response: {
|
||||
code: number;
|
||||
data: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
// 获取工作流设计
|
||||
GET /api/v1/workflows/{id}/design
|
||||
Response: {
|
||||
code: number;
|
||||
data: {
|
||||
nodes: Node[];
|
||||
edges: Edge[];
|
||||
};
|
||||
message: string;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.3 节点连线实现
|
||||
|
||||
#### 5.3.1 连接点（Anchors）
|
||||
每种类型节点的连接点定义：
|
||||
```typescript
|
||||
interface NodeAnchor {
|
||||
id: string;
|
||||
type: 'input' | 'output';
|
||||
position: 'top' | 'right' | 'bottom' | 'left';
|
||||
allowMultiple?: boolean; // 是否允许多条连线
|
||||
}
|
||||
|
||||
const nodeAnchors = {
|
||||
START: [
|
||||
{ id: 'output', type: 'output', position: 'bottom', allowMultiple: true }
|
||||
],
|
||||
END: [
|
||||
{ id: 'input', type: 'input', position: 'top', allowMultiple: false }
|
||||
],
|
||||
TASK: [
|
||||
{ id: 'input', type: 'input', position: 'top', allowMultiple: false },
|
||||
{ id: 'output', type: 'output', position: 'bottom', allowMultiple: true }
|
||||
],
|
||||
GATEWAY: [
|
||||
{ id: 'input', type: 'input', position: 'top', allowMultiple: false },
|
||||
{ id: 'output', type: 'output', position: 'bottom', allowMultiple: true }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
#### 5.3.2 连线验证规则
|
||||
```typescript
|
||||
interface ConnectionValidation {
|
||||
sourceNode: Node;
|
||||
targetNode: Node;
|
||||
sourceAnchor: NodeAnchor;
|
||||
targetAnchor: NodeAnchor;
|
||||
}
|
||||
|
||||
function validateConnection({
|
||||
sourceNode,
|
||||
targetNode,
|
||||
sourceAnchor,
|
||||
targetAnchor
|
||||
}: ConnectionValidation): boolean {
|
||||
// 1. 检查源节点和目标节点是否有效
|
||||
if (!sourceNode || !targetNode) return false;
|
||||
|
||||
// 2. 检查是否形成循环
|
||||
if (wouldCreateCycle(sourceNode, targetNode)) return false;
|
||||
|
||||
// 3. 检查锚点类型匹配
|
||||
if (sourceAnchor.type !== 'output' || targetAnchor.type !== 'input') return false;
|
||||
|
||||
// 4. 检查目标锚点是否已被占用（如果不允许多重连接）
|
||||
if (!targetAnchor.allowMultiple && hasExistingConnection(targetNode, targetAnchor)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.3.3 连线样式配置
|
||||
```typescript
|
||||
const edgeStyles = {
|
||||
default: {
|
||||
type: 'smoothstep', // 平滑阶梯线
|
||||
animated: false,
|
||||
style: {
|
||||
stroke: '#b1b1b7',
|
||||
strokeWidth: 2
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
style: {
|
||||
stroke: '#1890ff',
|
||||
strokeWidth: 2
|
||||
}
|
||||
},
|
||||
conditional: {
|
||||
type: 'smoothstep',
|
||||
animated: true,
|
||||
style: {
|
||||
stroke: '#722ed1',
|
||||
strokeWidth: 2,
|
||||
strokeDasharray: '5,5'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 5.4 状态管理建议
|
||||
|
||||
推荐使用状态管理库（如Redux或MobX）管理以下状态：
|
||||
|
||||
1. **全局状态**
|
||||
- 当前工作流设计
|
||||
- 可用节点类型
|
||||
- 画布缩放级别
|
||||
- 选中的节点/连线
|
||||
|
||||
2. **节点状态**
|
||||
- 位置信息
|
||||
- 配置数据
|
||||
- 验证状态
|
||||
|
||||
3. **连线状态**
|
||||
- 连接关系
|
||||
- 条件配置
|
||||
- 样式信息
|
||||
|
||||
### 5.5 性能优化建议
|
||||
|
||||
1. **渲染优化**
|
||||
- 使用React.memo()优化节点渲染
|
||||
- 实现虚拟滚动
|
||||
- 大量节点时使用分层渲染
|
||||
|
||||
2. **状态更新优化**
|
||||
- 批量更新状态
|
||||
- 使用不可变数据结构
|
||||
- 实现节点位置的防抖
|
||||
|
||||
3. **交互优化**
|
||||
- 拖拽时使用节点预览
|
||||
- 连线时显示对齐参考线
|
||||
- 支持快捷键操作
|
||||
|
||||
### 5.6 错误处理
|
||||
|
||||
1. **前端验证**
|
||||
- 节点配置验证
|
||||
- 连线规则验证
|
||||
- 数据完整性检查
|
||||
|
||||
2. **错误提示**
|
||||
- 友好的错误信息
|
||||
- 错误定位高亮
|
||||
- 操作建议提示
|
||||
|
||||
3. **异常恢复**
|
||||
- 自动保存
|
||||
- 操作撤销/重做
|
||||
- 状态恢复机制
|
||||
|
||||
## 6. 最佳实践建议
|
||||
|
||||
1. **代码组织**
|
||||
- 使用TypeScript确保类型安全
|
||||
- 遵循组件设计原则
|
||||
- 实现完整的测试覆盖
|
||||
|
||||
2. **用户体验**
|
||||
- 实现撤销/重做功能
|
||||
- 支持键盘快捷键
|
||||
- 添加操作引导
|
||||
|
||||
3. **可扩展性**
|
||||
- 支持自定义节点
|
||||
- 支持自定义连线样式
|
||||
- 预留扩展接口
|
||||
@ -1,512 +1,332 @@
|
||||
# 工作流平台前端开发指南
|
||||
# 工作流数据格式说明
|
||||
|
||||
## 一、项目概述
|
||||
## 1. 节点类型数据示例
|
||||
|
||||
### 1.1 技术栈
|
||||
- 框架：Ant Design Pro
|
||||
- 语言：TypeScript
|
||||
- HTTP请求：Umi Request
|
||||
- 流程设计器：LogicFlow
|
||||
- 表单设计器：FormRender
|
||||
- 图表库：ECharts
|
||||
|
||||
### 1.2 开发环境
|
||||
- Node.js >= 16
|
||||
- yarn >= 1.22
|
||||
- TypeScript >= 4.x
|
||||
|
||||
## 二、接口定义
|
||||
|
||||
### 2.1 工作流定义管理
|
||||
```typescript
|
||||
// 工作流定义相关接口
|
||||
interface WorkflowDefinitionAPI {
|
||||
// 基础CRUD接口
|
||||
page: '/api/v1/workflow-definitions/page' // GET 分页查询，支持条件筛选
|
||||
list: '/api/v1/workflow-definitions/list' // GET 查询所有（不分页）
|
||||
create: '/api/v1/workflow-definitions' // POST 创建
|
||||
update: '/api/v1/workflow-definitions/{id}' // PUT 更新
|
||||
delete: '/api/v1/workflow-definitions/{id}' // DELETE 删除
|
||||
get: '/api/v1/workflow-definitions/{id}' // GET 获取详情
|
||||
|
||||
// 特殊操作接口
|
||||
publish: '/api/v1/workflow-definitions/{id}/publish' // POST 发布
|
||||
disable: '/api/v1/workflow-definitions/{id}/disable' // POST 禁用
|
||||
enable: '/api/v1/workflow-definitions/{id}/enable' // POST 启用
|
||||
versions: '/api/v1/workflow-definitions/{code}/versions' // GET 查询所有版本（不分页）
|
||||
```json
|
||||
{
|
||||
"id": 2003,
|
||||
"createTime": "2024-12-05 12:40:03",
|
||||
"createBy": "system",
|
||||
"updateTime": "2024-12-05 12:40:03",
|
||||
"updateBy": "system",
|
||||
"version": 1,
|
||||
"deleted": false,
|
||||
"extraData": null,
|
||||
"code": "SHELL",
|
||||
"name": "Shell脚本节点",
|
||||
"description": "执行Shell脚本的任务节点",
|
||||
"category": "TASK",
|
||||
"icon": "code",
|
||||
"color": "#1890ff",
|
||||
"executors": [
|
||||
{
|
||||
"code": "SHELL",
|
||||
"name": "Shell脚本执行器",
|
||||
"description": "执行Shell脚本，支持配置超时时间和工作目录",
|
||||
"configSchema": "{\"type\":\"object\",\"required\":[\"script\"],\"properties\":{\"script\":{\"type\":\"string\",\"title\":\"脚本内容\",\"format\":\"shell\",\"description\":\"需要执行的Shell脚本内容\"},\"timeout\":{\"type\":\"number\",\"title\":\"超时时间\",\"description\":\"脚本执行的最大时间(秒)\",\"minimum\":1,\"maximum\":3600,\"default\":300},\"workingDir\":{\"type\":\"string\",\"title\":\"工作目录\",\"description\":\"脚本执行的工作目录\",\"default\":\"/tmp\"}}}",
|
||||
"defaultConfig": null
|
||||
}
|
||||
],
|
||||
"configSchema": "{\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\",\n \"title\": \"节点名称\",\n \"minLength\": 1,\n \"maxLength\": 50\n },\n \"description\": {\n \"type\": \"string\",\n \"title\": \"节点描述\",\n \"maxLength\": 200\n },\n \"executor\": {\n \"type\": \"string\",\n \"title\": \"执行器\",\n \"enum\": [\"SHELL\"],\n \"enumNames\": [\"Shell脚本执行器\"]\n },\n \"retryTimes\": {\n \"type\": \"number\",\n \"title\": \"重试次数\",\n \"minimum\": 0,\n \"maximum\": 3,\n \"default\": 0\n },\n \"retryInterval\": {\n \"type\": \"number\",\n \"title\": \"重试间隔(秒)\",\n \"minimum\": 1,\n \"maximum\": 300,\n \"default\": 60\n }\n },\n \"required\": [\"name\", \"executor\"]\n}",
|
||||
"defaultConfig": "{\"name\": \"Shell脚本\", \"executor\": \"SHELL\", \"retryTimes\": 0, \"retryInterval\": 60}",
|
||||
"enabled": true
|
||||
}
|
||||
```
|
||||
|
||||
// 节点类型相关接口
|
||||
interface NodeTypeAPI {
|
||||
// 查询接口
|
||||
list: '/api/v1/node-types' // GET 获取所有可用的节点类型列表（不分页）
|
||||
getExecutors: '/api/v1/node-types/{type}/executors' // GET 获取指定节点类型支持的执行器列表
|
||||
}
|
||||
## 2. 流程设计数据示例
|
||||
|
||||
// 分页请求参数
|
||||
interface PageQuery {
|
||||
pageNum: number // 页码，从1开始
|
||||
pageSize: number // 每页大小
|
||||
sortField?: string // 排序字段
|
||||
sortOrder?: 'ascend' | 'descend' // 排序方向
|
||||
}
|
||||
|
||||
// 分页响应结构
|
||||
interface PageResponse<T> {
|
||||
records: T[] // 数据列表
|
||||
total: number // 总记录数
|
||||
pages: number // 总页数
|
||||
pageNum: number // 当前页码
|
||||
pageSize: number // 每页大小
|
||||
}
|
||||
|
||||
// 工作流定义数据结构
|
||||
interface WorkflowDefinitionDTO {
|
||||
id: number
|
||||
code: string // 工作流编码
|
||||
name: string // 工作流名称
|
||||
description: string // 描述
|
||||
status: 'DRAFT' | 'PUBLISHED' | 'DISABLED' // 状态
|
||||
version: number // 版本号
|
||||
nodeConfig: string // 节点配置(JSON)，包含节点的基本信息和执行配置
|
||||
transitionConfig: string // 流转配置(JSON)，定义节点间的连接和条件
|
||||
formDefinition: string // 表单定义(JSON)，定义工作流的表单字段和验证规则
|
||||
graphDefinition: string // 图形信息(JSON)，定义节点的位置和连线的样式
|
||||
enabled: boolean // 是否启用
|
||||
remark: string // 备注
|
||||
nodes: NodeDefinitionDTO[] // 节点定义列表
|
||||
}
|
||||
|
||||
// 节点定义数据结构
|
||||
interface NodeDefinitionDTO {
|
||||
id: number
|
||||
nodeId: string // 节点ID
|
||||
name: string // 节点名称
|
||||
type: 'START' | 'END' | 'TASK' | 'GATEWAY' | 'SUB_PROCESS' | 'SHELL' // 节点类型
|
||||
config: string // 节点配置(JSON)
|
||||
description: string // 节点描述
|
||||
workflowDefinitionId: number // 工作流定义ID
|
||||
orderNum: number // 排序号
|
||||
}
|
||||
|
||||
// 节点配置示例
|
||||
interface NodeConfig {
|
||||
startNode: {
|
||||
type: 'START'
|
||||
name: string
|
||||
}
|
||||
endNode: {
|
||||
type: 'END'
|
||||
name: string
|
||||
}
|
||||
taskNodes: Array<{
|
||||
id: string
|
||||
type: 'TASK'
|
||||
name: string
|
||||
executor?: string // 执行器类型
|
||||
config?: any // 执行器配置
|
||||
}>
|
||||
}
|
||||
|
||||
// 流转配置示例
|
||||
interface TransitionConfig {
|
||||
transitions: Array<{
|
||||
from: string // 源节点ID
|
||||
to: string // 目标节点ID
|
||||
condition?: string // 流转条件
|
||||
}>
|
||||
}
|
||||
|
||||
// 表单定义示例
|
||||
interface FormDefinition {
|
||||
fields: Array<{
|
||||
name: string // 字段名
|
||||
label: string // 字段标签
|
||||
type: 'input' | 'select' | 'date' | 'number' // 字段类型
|
||||
required?: boolean // 是否必填
|
||||
options?: Array<{ // 选项（用于select类型）
|
||||
label: string
|
||||
value: any
|
||||
}>
|
||||
rules?: Array<{ // 验证规则
|
||||
type: string
|
||||
message: string
|
||||
}>
|
||||
}>
|
||||
}
|
||||
|
||||
// 图形定义示例
|
||||
interface GraphDefinition {
|
||||
nodes: Array<{
|
||||
id: string
|
||||
type: string
|
||||
x: number // 节点X坐标
|
||||
y: number // 节点Y坐标
|
||||
properties?: any // 节点属性
|
||||
}>
|
||||
edges: Array<{
|
||||
source: string // 源节点ID
|
||||
target: string // 目标节点ID
|
||||
properties?: any // 连线属性
|
||||
}>
|
||||
}
|
||||
|
||||
// 节点类型数据结构
|
||||
interface NodeTypeDTO {
|
||||
code: string // 节点类型编码
|
||||
name: string // 节点类型名称
|
||||
description: string // 节点类型描述
|
||||
category: 'BASIC' | 'TASK' | 'GATEWAY' | 'EVENT' // 节点类型分类
|
||||
icon: string // 节点图标
|
||||
color: string // 节点颜色
|
||||
executors?: Array<{ // 支持的执行器列表
|
||||
code: string // 执行器编码
|
||||
name: string // 执行器名称
|
||||
description: string // 执行器描述
|
||||
configSchema: any // 执行器配置模式
|
||||
}>
|
||||
configSchema?: any // 节点配置模式
|
||||
defaultConfig?: any // 默认配置
|
||||
}
|
||||
|
||||
// 节点类型示例数据
|
||||
const nodeTypes = [
|
||||
{
|
||||
code: 'START',
|
||||
name: '开始节点',
|
||||
description: '工作流的开始节点',
|
||||
category: 'BASIC',
|
||||
icon: 'play-circle',
|
||||
color: '#52c41a'
|
||||
},
|
||||
{
|
||||
code: 'END',
|
||||
name: '结束节点',
|
||||
description: '工作流的结束节点',
|
||||
category: 'BASIC',
|
||||
icon: 'stop',
|
||||
color: '#ff4d4f'
|
||||
},
|
||||
{
|
||||
code: 'TASK',
|
||||
name: '任务节点',
|
||||
description: '执行具体任务的节点',
|
||||
category: 'TASK',
|
||||
icon: 'code',
|
||||
color: '#1890ff',
|
||||
executors: [
|
||||
{
|
||||
code: 'SHELL',
|
||||
name: 'Shell脚本',
|
||||
description: '执行Shell脚本',
|
||||
configSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
script: {
|
||||
type: 'string',
|
||||
title: '脚本内容',
|
||||
format: 'shell'
|
||||
},
|
||||
timeout: {
|
||||
type: 'number',
|
||||
title: '超时时间(秒)',
|
||||
default: 300
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
code: 'JENKINS',
|
||||
name: 'Jenkins任务',
|
||||
description: '触发Jenkins构建任务',
|
||||
configSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
job: {
|
||||
type: 'string',
|
||||
title: 'Job名称'
|
||||
},
|
||||
parameters: {
|
||||
type: 'object',
|
||||
title: '构建参数'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
code: 'GATEWAY',
|
||||
name: '网关节点',
|
||||
description: '控制流程流转的节点',
|
||||
category: 'GATEWAY',
|
||||
icon: 'fork',
|
||||
color: '#faad14',
|
||||
configSchema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
type: {
|
||||
type: 'string',
|
||||
title: '网关类型',
|
||||
enum: ['PARALLEL', 'EXCLUSIVE', 'INCLUSIVE'],
|
||||
enumNames: ['并行网关', '排他网关', '包容网关']
|
||||
```json
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"id": "node_1",
|
||||
"type": "START",
|
||||
"position": { "x": 100, "y": 100 },
|
||||
"data": {
|
||||
"name": "开始",
|
||||
"description": "流程开始节点",
|
||||
"config": {
|
||||
"name": "开始",
|
||||
"description": "这是一个开始节点"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"edges": [
|
||||
{
|
||||
"id": "edge_1",
|
||||
"source": "node_1",
|
||||
"target": "node_2",
|
||||
"type": "default",
|
||||
"data": {
|
||||
"condition": null
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 3. 关键字段说明
|
||||
|
||||
### configSchema（节点配置模式）
|
||||
**用途**：
|
||||
1. 前端动态生成配置表单
|
||||
2. 后端验证配置数据的合法性
|
||||
3. 提供配置项的约束和验证规则
|
||||
|
||||
### defaultConfig（默认配置）
|
||||
**用途**：
|
||||
1. 新建节点时的默认值
|
||||
2. 重置配置时的参考值
|
||||
3. 必须符合configSchema定义的格式
|
||||
|
||||
### executors（执行器定义）
|
||||
**用途**：
|
||||
1. 定义节点支持的执行器类型
|
||||
2. 每个执行器的配置要求
|
||||
3. 用于任务节点的具体执行逻辑
|
||||
|
||||
## 4. 字段关系说明
|
||||
|
||||
1. configSchema定义节点的整体配置结构
|
||||
2. defaultConfig提供符合configSchema的默认值
|
||||
3. executors中的configSchema定义具体执行器的配置结构
|
||||
4. 实际节点配置时，executorConfig需要符合选定执行器的configSchema
|
||||
|
||||
## 5. 前端实现指南
|
||||
|
||||
### 5.1 工作流设计器组件架构
|
||||
|
||||
推荐使用组件化设计，主要包含以下组件：
|
||||
|
||||
1. **WorkflowDesigner（工作流设计器）**
|
||||
- 整体容器组件
|
||||
- 负责状态管理
|
||||
- 处理快捷键
|
||||
- 工具栏集成
|
||||
|
||||
2. **NodePanel（节点面板）**
|
||||
- 显示可用节点类型
|
||||
- 支持拖拽创建节点
|
||||
- 节点分类展示
|
||||
|
||||
3. **Canvas（画布）**
|
||||
- 节点和连线的可视化
|
||||
- 处理拖拽和连线
|
||||
- 网格背景
|
||||
- 缩放和平移
|
||||
|
||||
4. **NodeConfig（节点配置）**
|
||||
- 动态表单生成
|
||||
- 配置验证
|
||||
- 实时预览
|
||||
|
||||
### 5.2 接口说明
|
||||
|
||||
#### 5.2.1 节点类型接口
|
||||
```typescript
|
||||
// 获取节点类型列表
|
||||
GET /api/v1/node-types
|
||||
Response: {
|
||||
code: number;
|
||||
data: NodeType[];
|
||||
message: string;
|
||||
}
|
||||
|
||||
// 获取单个节点类型详情
|
||||
GET /api/v1/node-types/{id}
|
||||
Response: {
|
||||
code: number;
|
||||
data: NodeType;
|
||||
message: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.2.2 工作流设计接口
|
||||
```typescript
|
||||
// 保存工作流设计
|
||||
POST /api/v1/workflows/{id}/design
|
||||
Request: {
|
||||
nodes: Node[];
|
||||
edges: Edge[];
|
||||
}
|
||||
Response: {
|
||||
code: number;
|
||||
data: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
// 获取工作流设计
|
||||
GET /api/v1/workflows/{id}/design
|
||||
Response: {
|
||||
code: number;
|
||||
data: {
|
||||
nodes: Node[];
|
||||
edges: Edge[];
|
||||
};
|
||||
message: string;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.3 节点连线实现
|
||||
|
||||
#### 5.3.1 连接点（Anchors）
|
||||
每种类型节点的连接点定义：
|
||||
```typescript
|
||||
interface NodeAnchor {
|
||||
id: string;
|
||||
type: 'input' | 'output';
|
||||
position: 'top' | 'right' | 'bottom' | 'left';
|
||||
allowMultiple?: boolean; // 是否允许多条连线
|
||||
}
|
||||
|
||||
const nodeAnchors = {
|
||||
START: [
|
||||
{ id: 'output', type: 'output', position: 'bottom', allowMultiple: true }
|
||||
],
|
||||
END: [
|
||||
{ id: 'input', type: 'input', position: 'top', allowMultiple: false }
|
||||
],
|
||||
TASK: [
|
||||
{ id: 'input', type: 'input', position: 'top', allowMultiple: false },
|
||||
{ id: 'output', type: 'output', position: 'bottom', allowMultiple: true }
|
||||
],
|
||||
GATEWAY: [
|
||||
{ id: 'input', type: 'input', position: 'top', allowMultiple: false },
|
||||
{ id: 'output', type: 'output', position: 'bottom', allowMultiple: true }
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
#### 5.3.2 连线验证规则
|
||||
```typescript
|
||||
interface ConnectionValidation {
|
||||
sourceNode: Node;
|
||||
targetNode: Node;
|
||||
sourceAnchor: NodeAnchor;
|
||||
targetAnchor: NodeAnchor;
|
||||
}
|
||||
|
||||
function validateConnection({
|
||||
sourceNode,
|
||||
targetNode,
|
||||
sourceAnchor,
|
||||
targetAnchor
|
||||
}: ConnectionValidation): boolean {
|
||||
// 1. 检查源节点和目标节点是否有效
|
||||
if (!sourceNode || !targetNode) return false;
|
||||
|
||||
// 2. 检查是否形成循环
|
||||
if (wouldCreateCycle(sourceNode, targetNode)) return false;
|
||||
|
||||
// 3. 检查锚点类型匹配
|
||||
if (sourceAnchor.type !== 'output' || targetAnchor.type !== 'input') return false;
|
||||
|
||||
// 4. 检查目标锚点是否已被占用（如果不允许多重连接）
|
||||
if (!targetAnchor.allowMultiple && hasExistingConnection(targetNode, targetAnchor)) {
|
||||
return false;
|
||||
}
|
||||
];
|
||||
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
### 2.2 工作流实例管理
|
||||
#### 5.3.3 连线样式配置
|
||||
```typescript
|
||||
// 工作流实例相关接口
|
||||
interface WorkflowInstanceAPI {
|
||||
// 基础CRUD接口
|
||||
page: '/api/v1/workflow-instance/page' // GET 分页查询，支持条件筛选
|
||||
list: '/api/v1/workflow-instance/list' // GET 查询所有（不分页）
|
||||
get: '/api/v1/workflow-instance/{id}' // GET 获取详情
|
||||
|
||||
// 实例操作接口
|
||||
create: '/api/v1/workflow-instance' // POST 创建实例
|
||||
start: '/api/v1/workflow-instance/{id}/start' // POST 启动
|
||||
cancel: '/api/v1/workflow-instance/{id}/cancel' // POST 取消
|
||||
pause: '/api/v1/workflow-instance/{id}/pause' // POST 暂停
|
||||
resume: '/api/v1/workflow-instance/{id}/resume' // POST 恢复
|
||||
}
|
||||
|
||||
// 工作流实例数据结构
|
||||
interface WorkflowInstanceDTO {
|
||||
id: number
|
||||
definitionId: number // 工作流定义ID
|
||||
businessKey: string // 业务标识
|
||||
status: 'RUNNING' | 'COMPLETED' | 'FAILED' | 'CANCELLED' | 'PAUSED' // 状态
|
||||
startTime: string // 开始时间
|
||||
endTime: string // 结束时间
|
||||
variables: string // 工作流变量(JSON)
|
||||
error: string // 错误信息
|
||||
}
|
||||
const edgeStyles = {
|
||||
default: {
|
||||
type: 'smoothstep', // 平滑阶梯线
|
||||
animated: false,
|
||||
style: {
|
||||
stroke: '#b1b1b7',
|
||||
strokeWidth: 2
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
style: {
|
||||
stroke: '#1890ff',
|
||||
strokeWidth: 2
|
||||
}
|
||||
},
|
||||
conditional: {
|
||||
type: 'smoothstep',
|
||||
animated: true,
|
||||
style: {
|
||||
stroke: '#722ed1',
|
||||
strokeWidth: 2,
|
||||
strokeDasharray: '5,5'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 2.3 节点实例管理
|
||||
```typescript
|
||||
// 节点实例相关接口
|
||||
interface NodeInstanceAPI {
|
||||
// 查询接口
|
||||
page: '/api/v1/node-instance/page' // GET 分页查询，支持条件筛选
|
||||
list: '/api/v1/node-instance/list' // GET 查询所有（不分页）
|
||||
get: '/api/v1/node-instance/{id}' // GET 获取详情
|
||||
findByWorkflow: '/api/v1/node-instance/workflow/{workflowInstanceId}' // GET 查询工作流下的节点（不分页）
|
||||
findByStatus: '/api/v1/node-instance/workflow/{workflowInstanceId}/status/{status}' // GET 查询指定状态的节点（不分页）
|
||||
### 5.4 状态管理建议
|
||||
|
||||
// 节点操作
|
||||
updateStatus: '/api/v1/node-instance/{id}/status' // PUT 更新状态
|
||||
}
|
||||
推荐使用状态管理库（如Redux或MobX）管理以下状态：
|
||||
|
||||
// 节点实例数据结构
|
||||
interface NodeInstanceDTO {
|
||||
id: number
|
||||
workflowInstanceId: number // 工作流实例ID
|
||||
nodeId: string // 节点ID
|
||||
nodeType: 'START' | 'END' | 'TASK' | 'GATEWAY' | 'SUB_PROCESS' | 'SHELL' // 节点类型
|
||||
name: string // 节点名称
|
||||
status: 'PENDING' | 'RUNNING' | 'COMPLETED' | 'FAILED' | 'CANCELLED' | 'PAUSED' | 'SKIPPED' // 状态
|
||||
startTime: string // 开始时间
|
||||
endTime: string // 结束时间
|
||||
config: string // 节点配置(JSON)
|
||||
input: string // 输入参数(JSON)
|
||||
output: string // 输出结果(JSON)
|
||||
error: string // 错误信息
|
||||
preNodeId: string // 前置节点ID
|
||||
}
|
||||
```
|
||||
1. **全局状态**
|
||||
- 当前工作流设计
|
||||
- 可用节点类型
|
||||
- 画布缩放级别
|
||||
- 选中的节点/连线
|
||||
|
||||
### 2.4 工作流日志管理
|
||||
```typescript
|
||||
// 日志相关接口
|
||||
interface WorkflowLogAPI {
|
||||
// 基础CRUD接口
|
||||
page: '/api/v1/workflow-logs/page' // GET 分页查询，支持条件筛选
|
||||
list: '/api/v1/workflow-logs/list' // GET 查询所有（不分页）
|
||||
create: '/api/v1/workflow-logs' // POST 创建
|
||||
2. **节点状态**
|
||||
- 位置信息
|
||||
- 配置数据
|
||||
- 验证状态
|
||||
|
||||
// 特殊查询接口
|
||||
getWorkflowLogs: '/api/v1/workflow-logs/workflow/{workflowInstanceId}' // GET 查询工作流日志（不分页）
|
||||
getNodeLogs: '/api/v1/workflow-logs/node/{workflowInstanceId}/{nodeId}' // GET 查询节点日志（不分页）
|
||||
record: '/api/v1/workflow-logs/record' // POST 记录日志
|
||||
}
|
||||
3. **连线状态**
|
||||
- 连接关系
|
||||
- 条件配置
|
||||
- 样式信息
|
||||
|
||||
// 日志数据结构
|
||||
interface WorkflowLogDTO {
|
||||
id: number
|
||||
workflowInstanceId: number // 工作流实例ID
|
||||
nodeId: string // 节点ID
|
||||
message: string // 日志内容
|
||||
level: 'INFO' | 'WARN' | 'ERROR' // 日志级别
|
||||
detail: string // 详细信息
|
||||
createTime: string // 创建时间
|
||||
}
|
||||
```
|
||||
### 5.5 性能优化建议
|
||||
|
||||
## 三、页面功能
|
||||
1. **渲染优化**
|
||||
- 使用React.memo()优化节点渲染
|
||||
- 实现虚拟滚动
|
||||
- 大量节点时使用分层渲染
|
||||
|
||||
### 3.1 工作流定义管理(/workflow/definition)
|
||||
2. **状态更新优化**
|
||||
- 批量更新状态
|
||||
- 使用不可变数据结构
|
||||
- 实现节点位置的防抖
|
||||
|
||||
#### 3.1.1 列表页(/workflow/definition/list)
|
||||
- 功能点：
|
||||
- 工作流定义列表展示
|
||||
- 支持按名称、编码、状态搜索
|
||||
- 支持创建、编辑、删除操作
|
||||
- 支持发布、禁用操作
|
||||
- 支持查看历史版本
|
||||
- 列表字段：
|
||||
- 工作流编码
|
||||
- 工作流名称
|
||||
- 版本号
|
||||
- 状态
|
||||
- 创建时间
|
||||
- 更新时间
|
||||
- 操作按钮
|
||||
3. **交互优化**
|
||||
- 拖拽时使用节点预览
|
||||
- 连线时显示对齐参考线
|
||||
- 支持快捷键操作
|
||||
|
||||
#### 3.1.2 编辑页(/workflow/definition/edit)
|
||||
- 功能点：
|
||||
1. 基本信息编辑
|
||||
- 工作流编码
|
||||
- 工作流名称
|
||||
- 描述
|
||||
- 备注
|
||||
2. 流程设计器
|
||||
- 节点拖拽和布局
|
||||
- 连线绘制和调整
|
||||
- 节点配置（nodeConfig）
|
||||
- 基本信息配置
|
||||
- 执行器类型选择
|
||||
- 执行器参数配置
|
||||
- 流转配置（transitionConfig）
|
||||
- 连线条件配置
|
||||
- 优先级设置
|
||||
- 条件表达式编辑
|
||||
- 流程校验
|
||||
3. 表单设计器（formDefinition）
|
||||
- 表单字段配置
|
||||
- 字段类型选择
|
||||
- 字段属性设置
|
||||
- 选项配置（针对select类型）
|
||||
- 字段验证规则
|
||||
- 必填验证
|
||||
- 格式验证
|
||||
- 自定义验证
|
||||
- 表单布局设计
|
||||
- 表单预览
|
||||
4. 图形布局（graphDefinition）
|
||||
- 节点位置调整
|
||||
- 连线样式设置
|
||||
- 自动布局
|
||||
- 缩放和居中
|
||||
5. 版本管理
|
||||
- 版本历史查看
|
||||
- 版本对比
|
||||
- 版本回滚
|
||||
- 创建新版本
|
||||
### 5.6 错误处理
|
||||
|
||||
### 3.2 工作流实例管理(/workflow/instance)
|
||||
1. **前端验证**
|
||||
- 节点配置验证
|
||||
- 连线规则验证
|
||||
- 数据完整性检查
|
||||
|
||||
#### 3.2.1 列表页(/workflow/instance/list)
|
||||
- 功能点：
|
||||
- 工作流实例列表展示
|
||||
- 支持按工作流名称、状态、时间搜索
|
||||
- 支持启动、暂停、恢复、取消操作
|
||||
- 列表字段：
|
||||
- 实例ID
|
||||
- 工作流名称
|
||||
- 业务标识
|
||||
- 状态
|
||||
- 开始时间
|
||||
- 结束时间
|
||||
- 操作按钮
|
||||
2. **错误提示**
|
||||
- 友好的错误信息
|
||||
- 错误定位高亮
|
||||
- 操作建议提示
|
||||
|
||||
#### 3.2.2 详情页(/workflow/instance/detail)
|
||||
- 功能点：
|
||||
1. 基本信息展示
|
||||
- 实例ID
|
||||
- 工作流名称
|
||||
- 状态
|
||||
- 时间信息
|
||||
2. 流程图展示
|
||||
- 显示当前节点
|
||||
- 节点状态标识
|
||||
- 流程进度展示
|
||||
3. 变量信息
|
||||
- 变量列表
|
||||
- 变量历史值
|
||||
4. 日志信息
|
||||
- 操作日志
|
||||
- 执行日志
|
||||
- 错误日志
|
||||
3. **异常恢复**
|
||||
- 自动保存
|
||||
- 操作撤销/重做
|
||||
- 状态恢复机制
|
||||
|
||||
### 3.3 监控大盘(/workflow/monitor)
|
||||
- 功能点：
|
||||
1. 统计信息
|
||||
- 总工作流数
|
||||
- 运行中实例数
|
||||
- 完成实例数
|
||||
- 失败实例数
|
||||
2. 状态分布
|
||||
- 饼图展示各状态占比
|
||||
- 支持时间范围筛选
|
||||
3. 执行时长统计
|
||||
- 平均执行时长
|
||||
- 最长执行时长
|
||||
- 执行时长分布
|
||||
4. 异常情况统计
|
||||
- 异常类型分布
|
||||
- 异常趋势图
|
||||
- 异常节点TOP5
|
||||
## 6. 最佳实践建议
|
||||
|
||||
## 四、开发规范
|
||||
1. **代码组织**
|
||||
- 使用TypeScript确保类型安全
|
||||
- 遵循组件设计原则
|
||||
- 实现完整的测试覆盖
|
||||
|
||||
### 4.1 项目结构
|
||||
```
|
||||
src/
|
||||
├── components/ # 公共组件
|
||||
│ ├── FlowDesigner/ # 流程设计器组件
|
||||
│ ├── FormDesigner/ # 表单设计器组件
|
||||
│ └── NodeConfig/ # 节点配置组件
|
||||
├── pages/ # 页面组件
|
||||
│ └── workflow/ # 工作流相关页面
|
||||
├── services/ # API服务
|
||||
│ └── workflow/ # 工作流相关API
|
||||
├── models/ # 数据模型
|
||||
├── utils/ # 工具函数
|
||||
├── constants/ # 常量定义
|
||||
├── types/ # TypeScript类型
|
||||
└── locales/ # 国际化资源
|
||||
```
|
||||
2. **用户体验**
|
||||
- 实现撤销/重做功能
|
||||
- 支持键盘快捷键
|
||||
- 添加操作引导
|
||||
|
||||
### 4.2 命名规范
|
||||
- 文件命名：使用 PascalCase
|
||||
- 组件文件：`FlowDesigner.tsx`
|
||||
- 类型文件：`WorkflowTypes.ts`
|
||||
- 工具文件：`FlowUtils.ts`
|
||||
- 变量命名：使用 camelCase
|
||||
- 普通变量：`flowInstance`
|
||||
- 布尔值：`isRunning`、`hasError`
|
||||
- 常量命名：使用 UPPER_CASE
|
||||
- `MAX_NODE_COUNT`
|
||||
- `DEFAULT_CONFIG`
|
||||
|
||||
### 4.3 组件开发规范
|
||||
1. 使用函数组件和 Hooks
|
||||
2. 使用 TypeScript 类型声明
|
||||
3. 添加必要的注释
|
||||
4. 实现错误处理
|
||||
5. 添加加载状态
|
||||
6. 做好性能优化
|
||||
|
||||
### 4.4 代码提交规范
|
||||
- feat: 新功能
|
||||
- fix: 修复bug
|
||||
- docs: 文档更新
|
||||
- style: 代码格式
|
||||
- refactor: 重构
|
||||
- test: 测试
|
||||
- chore: 构建过程或辅助工具的变动
|
||||
3. **可扩展性**
|
||||
- 支持自定义节点
|
||||
- 支持自定义连线样式
|
||||
- 预留扩展接口
|
||||
Loading…
Reference in New Issue
Block a user