# Flow Platform React

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

## 项目概述

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

## 技术栈

- [Next.js](https://nextjs.org/) - React 框架
- [React](https://reactjs.org/) - JavaScript UI 库
- [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集，提供类型安全
- [@xyflow/react](https://reactflow.dev/) - 可视化流程图库
- [@arco-design/web-react](https://arco.design/react) - React UI 组件库
- [Redux Toolkit](https://redux-toolkit.js.org/) - 状态管理

## 功能特性

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

## 快速开始

### 环境要求

- Node.js >= 16.20.0
- pnpm

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm run dev
```

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

### 构建生产版本

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

### 启动生产服务器

```bash
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 接口

## 部署

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

```bash
pnpm run export
```

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

## 环境配置

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

```env
NEXT_PUBLIC_DEV_SERVER_HOST=http://localhost:8080
```

## 代码规范

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

```bash
pnpm run eslint
pnpm run stylelint
```