You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
178 lines
4.2 KiB
Markdown
178 lines
4.2 KiB
Markdown
# 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 (推荐)
|
|
|
|
### 安装与运行
|
|
|
|
```bash
|
|
# 安装依赖
|
|
pnpm install
|
|
|
|
# 开发模式 (http://localhost:4121)
|
|
pnpm run dev
|
|
|
|
# 生产构建
|
|
pnpm run build
|
|
|
|
# 静态导出 (输出到 dist/)
|
|
pnpm run export
|
|
|
|
# 启动生产服务器
|
|
pnpm run start
|
|
```
|
|
|
|
### 环境配置
|
|
|
|
创建 `.env` 文件：
|
|
|
|
```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. **组件市场** - 发布与共享
|
|
|
|
## 开发指南
|
|
|
|
### 代码规范
|
|
|
|
```bash
|
|
# 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 接口
|
|
|
|
### 路径别名
|
|
|
|
```typescript
|
|
import { Component } from '@/components/Component';
|
|
import { apiCall } from '@/api/module';
|
|
```
|
|
|
|
## API 响应格式
|
|
|
|
```typescript
|
|
interface ApiResponse<T> {
|
|
status: number;
|
|
msg: string;
|
|
code: number; // 200: 成功, -401: 未授权
|
|
data: T;
|
|
}
|
|
```
|
|
|
|
## 部署
|
|
|
|
项目支持静态导出，可部署到任何静态文件托管服务：
|
|
|
|
```bash
|
|
pnpm run export
|
|
```
|
|
|
|
构建产物位于 `dist/` 目录。
|
|
|