Process Engine UI - 工艺流程编辑器

基于 React Flow 构建的可视化工艺流程编辑器，支持与 NocoBase Process Engine 后端集成。

技术栈

• React 18 + TypeScript
• React Flow (@xyflow/react) - 流程图渲染引擎
• Zustand - 状态管理
• Axios - HTTP 客户端
• Vite - 构建工具
• Dagre - 自动布局算法（待集成）

项目结构

process-engine-ui/
├── src/
│   ├── components/
│   │   ├── FlowEditor.tsx           # 流程图编辑器核心组件
│   │   ├── ProcessNode.tsx          # 自定义工艺节点组件
│   │   ├── NodePanel.tsx            # 左侧节点面板
│   │   └── PropertyPanel.tsx        # 右侧属性编辑面板
│   ├── services/
│   │   └── api.ts                   # API 服务层
│   ├── store/
│   │   └── graphStore.ts            # Zustand 状态管理
│   ├── types/
│   │   └── index.ts                 # TypeScript 类型定义
│   ├── styles/
│   │   └── App.css                  # 全局样式
│   ├── App.tsx                      # 主应用组件
│   └── main.tsx                     # 入口文件
├── package.json
├── tsconfig.json
└── vite.config.ts

核心功能

✅ 已完成

1. 流程图编辑器

   • React Flow 集成
   • 节点拖拽放置
   • 连线创建流程
   • 缩放和平移
   • 小地图导航
   • 网格对齐

2. 自定义节点

   • 7 种工艺节点类型（反应器、泵、储罐、换热器、塔器、阀门、仪表）
   • 颜色编码区分类型
   • 显示位号和名称
   • 输入/输出连接点

3. 节点面板

   • 拖拽添加节点
   • 类型图标预览
   • 悬停动效

4. 属性编辑面板

   • 节点属性编辑（位号、名称、坐标）
   • 管线属性编辑（管线号、介质、管径、规格、流量、温度、压力、保温、伴热）
   • 实时保存

5. API 集成

   • 完整的 API 服务层
   • 自动认证 token 管理
   • 支持所有后端接口

⏳ 待实现

1. 自动布局 - Dagre 算法集成
2. 流程图列表 - 多流程图切换
3. 导出功能 - PNG/SVG 导出
4. 撤销/重做 - 历史记录
5. 快捷键 - 键盘操作支持

安装和运行

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

访问开发服务器地址（默认为 http://localhost:5173）

节点类型

类型	颜色	说明
Reactor	🔴 红色	反应器
Pump	🔵 蓝色	泵
Tank	🟢 绿色	储罐
HeatExchanger	🟡 黄色	换热器
Column	🟣 紫色	塔器
Valve	⚫ 灰色	阀门
Instrument	🩷 粉色	仪表

使用方式

1. 创建流程

• 从左侧面板拖拽节点到画布
• 节点自动生成位号（如 R-101, P-101）

2. 连接流程

• 从节点的输出点（右侧）拖拽到目标节点的输入点（左侧）
• 自动生成管线编号（如 L-001）

3. 编辑属性

• 点击节点或管线打开右侧属性面板
• 修改后点击保存

4. 导航

• 鼠标滚轮缩放
• 拖拽画布平移
• 使用小地图快速定位

与后端集成

默认代理配置：

// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: '<YOUR_NOCOBASE_URL>', // NocoBase 地址
      changeOrigin: true,
    },
  },
}

状态管理

使用 Zustand 管理流程图状态：

import { useGraphStore } from '@/store/graphStore';

const { currentGraph, addNode, updateNode, removeNode } = useGraphStore();

开发计划

Phase 2: 基础功能（当前）

• React Flow 集成
• 节点拖拽 + 连线
• 属性编辑面板
• 自动布局（dagre）

Phase 3: 增强功能

• Line List 表格视图
• Equipment List 表格视图
• BOM 表格视图
• 数据导出 Excel

Phase 4: Plant 3D 集成

• Excel 导出
• Plant 3D Data Manager 导入模板

---

版本: v1.0
创建日期: 2026-04-11