diff --git a/backend/docs/workflow-data-format.md b/backend/docs/workflow-data-format.md index d4ca8541..6baf8cf6 100644 --- a/backend/docs/workflow-data-format.md +++ b/backend/docs/workflow-data-format.md @@ -93,10 +93,240 @@ 3. executors中的configSchema定义具体执行器的配置结构 4. 实际节点配置时，executorConfig需要符合选定执行器的configSchema -## 5. 设计优点 +## 5. 前端实现指南 -1. 配置灵活可扩展 -2. 前端可以动态生成表单 -3. 后端可以严格验证配置 -4. 支持不同类型节点的差异化配置 -5. 便于新增节点类型和执行器 \ No newline at end of file +### 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. **可扩展性** + - 支持自定义节点 + - 支持自定义连线样式 + - 预留扩展接口 \ No newline at end of file diff --git a/frontend/frontend-guide.md b/frontend/frontend-guide.md index 1c5cde77..6baf8cf6 100644 --- a/frontend/frontend-guide.md +++ b/frontend/frontend-guide.md @@ -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 { - 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 查询指定状态的节点（不分页） - - // 节点操作 - updateStatus: '/api/v1/node-instance/{id}/status' // PUT 更新状态 -} +### 5.4 状态管理建议 -// 节点实例数据结构 -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 -} -``` +推荐使用状态管理库（如Redux或MobX）管理以下状态： -### 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 创建 - - // 特殊查询接口 - getWorkflowLogs: '/api/v1/workflow-logs/workflow/{workflowInstanceId}' // GET 查询工作流日志（不分页） - getNodeLogs: '/api/v1/workflow-logs/node/{workflowInstanceId}/{nodeId}' // GET 查询节点日志（不分页） - record: '/api/v1/workflow-logs/record' // POST 记录日志 -} +1. **全局状态** + - 当前工作流设计 + - 可用节点类型 + - 画布缩放级别 + - 选中的节点/连线 -// 日志数据结构 -interface WorkflowLogDTO { - id: number - workflowInstanceId: number // 工作流实例ID - nodeId: string // 节点ID - message: string // 日志内容 - level: 'INFO' | 'WARN' | 'ERROR' // 日志级别 - detail: string // 详细信息 - createTime: string // 创建时间 -} -``` +2. **节点状态** + - 位置信息 + - 配置数据 + - 验证状态 -## 三、页面功能 +3. **连线状态** + - 连接关系 + - 条件配置 + - 样式信息 -### 3.1 工作流定义管理(/workflow/definition) +### 5.5 性能优化建议 -#### 3.1.1 列表页(/workflow/definition/list) -- 功能点： - - 工作流定义列表展示 - - 支持按名称、编码、状态搜索 - - 支持创建、编辑、删除操作 - - 支持发布、禁用操作 - - 支持查看历史版本 -- 列表字段： - - 工作流编码 - - 工作流名称 - - 版本号 - - 状态 - - 创建时间 - - 更新时间 - - 操作按钮 +1. **渲染优化** + - 使用React.memo()优化节点渲染 + - 实现虚拟滚动 + - 大量节点时使用分层渲染 -#### 3.1.2 编辑页(/workflow/definition/edit) -- 功能点： - 1. 基本信息编辑 - - 工作流编码 - - 工作流名称 - - 描述 - - 备注 - 2. 流程设计器 - - 节点拖拽和布局 - - 连线绘制和调整 - - 节点配置（nodeConfig） - - 基本信息配置 - - 执行器类型选择 - - 执行器参数配置 - - 流转配置（transitionConfig） - - 连线条件配置 - - 优先级设置 - - 条件表达式编辑 - - 流程校验 - 3. 表单设计器（formDefinition） - - 表单字段配置 - - 字段类型选择 - - 字段属性设置 - - 选项配置（针对select类型） - - 字段验证规则 - - 必填验证 - - 格式验证 - - 自定义验证 - - 表单布局设计 - - 表单预览 - 4. 图形布局（graphDefinition） - - 节点位置调整 - - 连线样式设置 - - 自动布局 - - 缩放和居中 - 5. 版本管理 - - 版本历史查看 - - 版本对比 - - 版本回滚 - - 创建新版本 +2. **状态更新优化** + - 批量更新状态 + - 使用不可变数据结构 + - 实现节点位置的防抖 -### 3.2 工作流实例管理(/workflow/instance) +3. **交互优化** + - 拖拽时使用节点预览 + - 连线时显示对齐参考线 + - 支持快捷键操作 -#### 3.2.1 列表页(/workflow/instance/list) -- 功能点： - - 工作流实例列表展示 - - 支持按工作流名称、状态、时间搜索 - - 支持启动、暂停、恢复、取消操作 -- 列表字段： - - 实例ID - - 工作流名称 - - 业务标识 - - 状态 - - 开始时间 - - 结束时间 - - 操作按钮 +### 5.6 错误处理 -#### 3.2.2 详情页(/workflow/instance/detail) -- 功能点： - 1. 基本信息展示 - - 实例ID - - 工作流名称 - - 状态 - - 时间信息 - 2. 流程图展示 - - 显示当前节点 - - 节点状态标识 - - 流程进度展示 - 3. 变量信息 - - 变量列表 - - 变量历史值 - 4. 日志信息 - - 操作日志 - - 执行日志 - - 错误日志 +1. **前端验证** + - 节点配置验证 + - 连线规则验证 + - 数据完整性检查 -### 3.3 监控大盘(/workflow/monitor) -- 功能点： - 1. 统计信息 - - 总工作流数 - - 运行中实例数 - - 完成实例数 - - 失败实例数 - 2. 状态分布 - - 饼图展示各状态占比 - - 支持时间范围筛选 - 3. 执行时长统计 - - 平均执行时长 - - 最长执行时长 - - 执行时长分布 - 4. 异常情况统计 - - 异常类型分布 - - 异常趋势图 - - 异常节点TOP5 +2. **错误提示** + - 友好的错误信息 + - 错误定位高亮 + - 操作建议提示 -## 四、开发规范 +3. **异常恢复** + - 自动保存 + - 操作撤销/重做 + - 状态恢复机制 -### 4.1 项目结构 -``` -src/ - ├── components/ # 公共组件 - │ ├── FlowDesigner/ # 流程设计器组件 - │ ├── FormDesigner/ # 表单设计器组件 - │ └── NodeConfig/ # 节点配置组件 - ├── pages/ # 页面组件 - │ └── workflow/ # 工作流相关页面 - ├── services/ # API服务 - │ └── workflow/ # 工作流相关API - ├── models/ # 数据模型 - ├── utils/ # 工具函数 - ├── constants/ # 常量定义 - ├── types/ # TypeScript类型 - └── locales/ # 国际化资源 -``` +## 6. 最佳实践建议 -### 4.2 命名规范 -- 文件命名：使用 PascalCase - - 组件文件：`FlowDesigner.tsx` - - 类型文件：`WorkflowTypes.ts` - - 工具文件：`FlowUtils.ts` -- 变量命名：使用 camelCase - - 普通变量：`flowInstance` - - 布尔值：`isRunning`、`hasError` -- 常量命名：使用 UPPER_CASE - - `MAX_NODE_COUNT` - - `DEFAULT_CONFIG` +1. **代码组织** + - 使用TypeScript确保类型安全 + - 遵循组件设计原则 + - 实现完整的测试覆盖 -### 4.3 组件开发规范 -1. 使用函数组件和 Hooks -2. 使用 TypeScript 类型声明 -3. 添加必要的注释 -4. 实现错误处理 -5. 添加加载状态 -6. 做好性能优化 +2. **用户体验** + - 实现撤销/重做功能 + - 支持键盘快捷键 + - 添加操作引导 -### 4.4 代码提交规范 -- feat: 新功能 -- fix: 修复bug -- docs: 文档更新 -- style: 代码格式 -- refactor: 重构 -- test: 测试 -- chore: 构建过程或辅助工具的变动 +3. **可扩展性** + - 支持自定义节点 + - 支持自定义连线样式 + - 预留扩展接口 \ No newline at end of file