# 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/` 目录。