Flow Platform React

这是一个基于 React 和 Next.js 构建的可视化流程编辑平台。该平台提供了丰富的组件和工具，用于创建、编辑和管理复杂的业务流程。

项目概述

Flow Platform React 是一个功能强大的流程编辑器，支持拖拽式操作、组件连接、循环结构、条件判断等多种功能。平台内置了多种组件类型，包括基础组件、复合组件、系统组件等，可以满足各种业务场景的需求。

技术栈

• Next.js - React 框架
• React - JavaScript UI 库
• TypeScript - JavaScript 的超集，提供类型安全
• @xyflow/react - 可视化流程图库
• @arco-design/web-react - React UI 组件库
• Redux Toolkit - 状态管理

功能特性

• 🎨 可视化流程编辑器，支持拖拽和连接节点
• 🔗 多种节点类型：开始/结束节点、基础节点、循环节点、条件节点等
• ⚙️ 组件库管理，支持自定义组件
• 🔄 流程执行和状态跟踪
• 📊 实时数据监控和可视化
• 🎯 精确的对齐辅助线
• 📚 丰富的组件市场
• 🧩 复合组件支持

快速开始

环境要求

• Node.js >= 16.20.0
• pnpm

安装依赖

pnpm install

开发模式

pnpm run dev

打开浏览器访问 http://localhost:4121 查看应用。

构建生产版本

# 构建服务端渲染
pnpm run build
# 构建服务端渲染，同时输出dist文件供静态部署
pnpm run export

启动生产服务器

pnpm run start

项目结构

src/
├── api/              # API 接口定义
├── components/       # 公共组件
├── hooks/            # 自定义 React Hooks
├── pages/            # 页面组件
├── routes/           # 路由配置
├── store/            # Redux 状态管理
├── utils/            # 工具函数
└── ...

核心模块

流程编辑器

流程编辑器是本项目的核心功能，提供了以下特性：

• 节点拖拽和自由布局
• 连接线绘制和管理
• 循环结构支持（LOOP_START/LOOP_END）
• 条件分支支持
• 实时对齐辅助线
• 撤销/重做功能
• 流程执行状态跟踪

组件库

项目提供了丰富的组件库：

• 基础组件库：包含常用的业务组件
• 复合组件库：由多个基础组件组合而成的复杂组件
• 组件市场：可共享和复用的组件

状态管理

使用 Redux Toolkit 进行全局状态管理，主要包括：

• 用户信息
• 流程数据
• 组件库数据
• 画布状态
• 执行状态

开发指南

添加新节点类型

1. 在 src/components/FlowEditor/node/ 目录下创建新的节点组件
2. 在 src/utils/flowCommon.ts 中的 getNodeComponent 函数中注册新节点类型
3. 在 src/components/FlowEditor/node/types/defaultType.ts 中定义节点类型

添加新组件

1. 在相应的组件目录中创建新组件
2. 在路由和菜单中注册新组件
3. 添加必要的状态管理和 API 接口

部署

项目使用静态导出模式，可以部署到任何支持静态文件托管的服务上：

pnpm run export

构建后的文件将位于 dist/ 目录中。

环境配置

项目使用环境变量进行配置，创建 .env 文件：

NEXT_PUBLIC_DEV_SERVER_HOST=http://localhost:8080

代码规范

项目使用 ESLint 和 Prettier 进行代码规范检查：

pnpm run eslint
pnpm run stylelint