流程视图组件

目录

1. 简介
2. 项目结构
3. 核心组件
4. 架构概述
5. 详细组件分析
6. 依赖分析
7. 性能考虑
8. 故障排除指南
9. 结论

简介

本技术文档旨在深入解析lmes-web-base项目中的流程视图组件，重点阐述其在MES系统中的应用与实现机制。文档将详细说明轻量级流程标签展示器Flow组件的实现逻辑，对比分析G6Flow与LogicFlow两大图形引擎的技术选型差异，并描述流程组件在工艺路线可视化、工序流转监控等场景中的核心应用。

项目结构

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

图示来源

• Flow.tsx
• G6Flow.tsx
• LogicFlow.tsx
• Tag.tsx
• logic-flow.ts

本节来源

• src/components

核心组件

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

本节来源

• Flow.tsx
• G6Flow.tsx
• LogicFlow.tsx

架构概述

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

图示来源

• Flow.tsx
• G6Flow.tsx
• LogicFlow.tsx
• Tag.tsx
• logic-flow.ts

详细组件分析

Flow组件分析

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

实现逻辑

图示来源

• Flow.tsx
• Tag.tsx

本节来源

• Flow.tsx
• Flow.module.scss
• Tag.tsx

G6Flow与LogicFlow技术选型分析

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

技术选型对比

图示来源

• G6Flow.tsx
• LogicFlow.tsx

G6Flow组件实现

图示来源

• G6Flow.tsx
• NodeDrawer.tsx
• EdgeDrawer.tsx
• Tools.tsx
• Canvas.tsx
• Renderer.tsx
• store.ts

本节来源

• G6Flow.tsx
• store.ts
• enum.ts

节点类型实现分析

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

图示来源

• Node.tsx
• OrdinaryNode.tsx
• StartNode.tsx
• EndNode.tsx
• enum.ts

本节来源

• Node.tsx
• OrdinaryNode.tsx
• StartNode.tsx
• EndNode.tsx
• enum.ts

工具组件分析

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

图示来源

• ToolBar.tsx
• Tools.tsx
• Icon.tsx
• BaseConfigProvider.tsx
• store.ts

本节来源

• ToolBar.tsx
• Tools.tsx

依赖分析

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

图示来源

• G6Flow.tsx
• LogicFlow.tsx
• Flow.tsx
• logic-flow.ts
• store.ts
• enum.ts

本节来源

• G6Flow.tsx
• LogicFlow.tsx
• Flow.tsx
• logic-flow.ts
• store.ts

性能考虑

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