Flow Platform React

基于 React 和 Next.js 构建的可视化流程编排平台，提供拖拽式流程设计、组件开发与管理、实时执行监控等功能。

技术栈

类别	技术
框架	Next.js 12.0.4 / React 17.0.2
语言	TypeScript
状态管理	Redux Toolkit
UI 组件库	Arco Design
流程编辑器	@xyflow/react
代码编辑器	CodeMirror (Java/Python/JSON)
样式方案	LESS
HTTP 客户端	Axios

快速开始

环境要求

• Node.js >= 16.20.0
• pnpm (推荐)

安装与运行

# 安装依赖
pnpm install

# 开发模式 (http://localhost:4121)
pnpm run dev

# 生产构建
pnpm run build

# 静态导出 (输出到 dist/)
pnpm run export

# 启动生产服务器
pnpm run start

环境配置

创建 .env 文件：

NEXT_PUBLIC_DEV_SERVER_HOST=http://localhost:8080

项目结构

src/
├── api/                    # API 接口层
│   ├── index.ts           # Axios 配置与拦截器
│   ├── apps.ts            # 应用管理
│   ├── components.ts      # 组件库操作
│   ├── flow.ts            # 流程操作
│   ├── componentMarket.ts # 组件市场
│   └── ...
├── components/             # 公共组件
│   └── FlowEditor/        # 流程编辑器核心
│       ├── node/          # 节点组件
│       └── nodeEditors/   # 节点编辑器
├── hooks/                  # 自定义 Hooks
├── pages/                  # 页面组件
│   ├── ideContainer/      # 集成开发环境
│   ├── flowEditor/        # 流程编辑器页面
│   ├── componentLibrary/  # 组件库
│   ├── componentMarket/   # 组件市场
│   └── componentDevelopment/ # 组件开发
├── routes/                 # 路由配置
├── store/                  # Redux 状态管理
│   ├── global.ts          # 全局设置
│   ├── user.ts            # 用户状态
│   └── ideContainer.ts    # 流程编辑器状态
└── utils/                  # 工具函数
    ├── flowCommon.ts      # 流程通用逻辑
    └── convertFlowData.ts # 数据格式转换

核心功能

流程编辑器

基于 @xyflow/react 实现的可视化流程设计器，支持：

• 拖拽式节点布局与连接
• 对齐辅助线
• 撤销/重做
• 实时执行状态追踪

节点类型：

类型	说明
start / end	开始/结束节点
BASIC	基础组件节点
SUB	子应用节点
SWITCH	条件分支节点
LOOP_START / LOOP_END	循环控制节点
CODE	代码执行节点
REST	REST API 调用节点
IMAGE	图像处理节点

组件系统

• 组件库: 管理可复用的业务组件
• 复合组件库: 由多个基础组件组合的复杂组件
• 组件市场: 组件共享与发现平台

组件开发工作流

完整的组件开发生命周期支持：

1. 组件编码 - 集成 IDE 环境
2. 组件测试 - 测试用例管理与执行
3. 组件部署 - 环境配置与发布
4. 组件市场 - 发布与共享

开发指南

代码规范

# ESLint 检查 (自动修复)
pnpm run eslint

# Stylelint 检查 (自动修复)
pnpm run stylelint

# 提交前检查 (Prettier + ESLint + Stylelint)
pnpm run pre-commit

添加新节点类型

1. 在 src/components/FlowEditor/node/ 创建节点组件
2. 在 src/utils/flowCommon.ts 的 getNodeComponent() 中注册
3. 在 src/components/FlowEditor/nodeEditors/ 创建对应编辑器

添加新页面

1. 在 src/pages/[module]/ 创建页面组件
2. 在 src/routes/modules/[module].ts 添加路由配置
3. 在 src/api/ 添加相关 API 接口

路径别名

import { Component } from '@/components/Component';
import { apiCall } from '@/api/module';

API 响应格式

interface ApiResponse<T> {
  status: number;
  msg: string;
  code: number;  // 200: 成功, -401: 未授权
  data: T;
}

部署

项目支持静态导出，可部署到任何静态文件托管服务：

pnpm run export

构建产物位于 dist/ 目录。