流程视图组件

目录

1. 简介
2. 项目结构
3. 核心组件
4. 架构概述
5. 详细组件分析
6. 依赖分析
7. 性能考虑

简介

本文说明 Flow 流程标签展示器的实现，对比 G6Flow 与 LogicFlow 的选型差异，以及它们在工艺路线展示、工序流转监控中的用法。

项目结构

项目采用典型的前端组件化架构，主要功能模块集中在src/components目录下。流程视图相关组件包括轻量级标签展示器Flow、基于AntV G6的高级流程编辑器G6Flow以及基于LogicFlow的低代码流程设计器LogicFlow。各组件通过模块化设计实现职责分离，支持灵活复用与扩展。

图示来源

• src/components/Flow/Flow.tsx
• src/components/G6Flow/G6Flow.tsx
• src/components/LogicFlow/LogicFlow.tsx
• src/components/Tag/Tag.tsx
• src/api/logic-flow.ts

本节来源

• src/components

核心组件

流程视图组件体系包含三个核心组件：Flow作为轻量级流程标签展示器，G6Flow提供高定制化流程编辑能力，LogicFlow支持低代码流程设计。这些组件共同构成了MES系统中工艺路线可视化与工序流转监控的基础。

本节来源

• src/components/Flow/Flow.tsx
• src/components/G6Flow/G6Flow.tsx
• src/components/LogicFlow/LogicFlow.tsx

架构概述

流程视图组件采用分层架构设计，上层为不同复杂度的流程展示与编辑组件，中层为图形引擎适配层，底层为数据服务与状态管理。这种架构支持从简单标签展示到复杂流程编排的全场景覆盖。

图示来源

• src/components/Flow/Flow.tsx
• src/components/G6Flow/G6Flow.tsx
• src/components/LogicFlow/LogicFlow.tsx
• src/components/Tag/Tag.tsx
• src/api/logic-flow.ts

详细组件分析

Flow组件分析

Flow组件作为轻量级流程标签展示器，基于Tag组件实现流程节点的集合渲染。该组件支持禁用状态控制，适用于只读场景下的流程信息展示。

实现逻辑

图示来源

• src/components/Flow/Flow.tsx
• src/components/Tag/Tag.tsx

本节来源

• src/components/Flow/Flow.tsx
• src/components/Flow/Flow.module.scss
• src/components/Tag/Tag.tsx

G6Flow与LogicFlow技术选型分析

G6Flow与LogicFlow代表了两种不同的技术路线：G6Flow基于AntV G6实现高定制化节点与边线交互，LogicFlow则侧重于低代码流程设计与DSL解析。

技术选型对比

图示来源

• src/components/G6Flow/G6Flow.tsx
• src/components/LogicFlow/LogicFlow.tsx

G6Flow组件实现

图示来源

• src/components/G6Flow/G6Flow.tsx
• src/components/G6Flow/components/NodeDrawer/NodeDrawer.tsx
• src/components/G6Flow/components/EdgeDrawer/EdgeDrawer.tsx
• src/components/G6Flow/components/Tools/Tools.tsx
• src/components/G6Flow/components/Canvas/Canvas.tsx
• src/components/G6Flow/components/Renderer/Renderer.tsx
• src/components/G6Flow/core/store.ts

本节来源

• src/components/G6Flow/G6Flow.tsx
• src/components/G6Flow/core/store.ts
• src/components/G6Flow/core/enum.ts

节点类型实现分析

G6Flow组件支持多种预定义节点类型，每种类型具有特定的视觉表现和行为特征。

图示来源

• src/components/G6Flow/components/Nodes/Node.tsx
• src/components/G6Flow/components/Nodes/OrdinaryNode.tsx
• src/components/G6Flow/components/Nodes/StartNode.tsx
• src/components/G6Flow/components/Nodes/EndNode.tsx
• src/components/G6Flow/core/enum.ts

本节来源

• src/components/G6Flow/components/Nodes/Node.tsx
• src/components/G6Flow/components/Nodes/OrdinaryNode.tsx
• src/components/G6Flow/components/Nodes/StartNode.tsx
• src/components/G6Flow/components/Nodes/EndNode.tsx
• src/components/G6Flow/core/enum.ts

工具组件分析

G6Flow提供丰富的工具组件支持流程编辑操作，包括工具栏和工具箱。

图示来源

• src/components/G6Flow/components/ToolBar/ToolBar.tsx
• src/components/G6Flow/components/Tools/Tools.tsx
• src/components/Icon/Icon.tsx
• src/components/BaseConfigProvider/BaseConfigProvider.tsx
• src/components/G6Flow/core/store.ts

本节来源

• src/components/G6Flow/components/ToolBar/ToolBar.tsx
• src/components/G6Flow/components/Tools/Tools.tsx

依赖分析

流程视图组件体系具有清晰的依赖关系，各组件通过合理的抽象层次实现松耦合。

图示来源

• src/components/G6Flow/G6Flow.tsx
• src/components/LogicFlow/LogicFlow.tsx
• src/components/Flow/Flow.tsx
• src/api/logic-flow.ts
• src/components/G6Flow/core/store.ts
• src/components/G6Flow/core/enum.ts

本节来源

• src/components/G6Flow/G6Flow.tsx
• src/components/LogicFlow/LogicFlow.tsx
• src/components/Flow/Flow.tsx
• src/api/logic-flow.ts
• src/components/G6Flow/core/store.ts

性能考虑

流程视图组件在设计时考虑了性能优化，通过合理的