From fbd60bc488390230f76bc281efe7c85d30250098 Mon Sep 17 00:00:00 2001 From: ZLY Date: Tue, 9 Dec 2025 10:40:40 +0800 Subject: [PATCH] =?UTF-8?q?docs(readme):=20=E9=87=8D=E6=9E=84=20README=20?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E7=BB=93=E6=9E=84=E4=B8=8E=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 207 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 117 insertions(+), 90 deletions(-) diff --git a/README.md b/README.md index 5c5d8f2..5064b93 100644 --- a/README.md +++ b/README.md @@ -1,150 +1,177 @@ # Flow Platform React -这是一个基于 React 和 Next.js 构建的可视化流程编辑平台。该平台提供了丰富的组件和工具，用于创建、编辑和管理复杂的业务流程。 - -## 项目概述 - -Flow Platform React 是一个功能强大的流程编辑器，支持拖拽式操作、组件连接、循环结构、条件判断等多种功能。平台内置了多种组件类型，包括基础组件、复合组件、系统组件等，可以满足各种业务场景的需求。 +基于 React 和 Next.js 构建的可视化流程编排平台，提供拖拽式流程设计、组件开发与管理、实时执行监控等功能。 ## 技术栈 -- [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/) - 状态管理 - -## 功能特性 - -- 🎨 可视化流程编辑器，支持拖拽和连接节点 -- 🔗 多种节点类型：开始/结束节点、基础节点、循环节点、条件节点等 -- ⚙️ 组件库管理，支持自定义组件 -- 🔄 流程执行和状态跟踪 -- 📊 实时数据监控和可视化 -- 🎯 精确的对齐辅助线 -- 📚 丰富的组件市场 -- 🧩 复合组件支持 +| 类别 | 技术 | +|------|------| +| 框架 | 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 (推荐) -### 安装依赖 +### 安装与运行 ```bash +# 安装依赖 pnpm install -``` -### 开发模式 - -```bash +# 开发模式 (http://localhost:4121) pnpm run dev -``` - -打开浏览器访问 [http://localhost:4121](http://localhost:4121) 查看应用。 - -### 构建生产版本 -```bash -# 构建服务端渲染 +# 生产构建 pnpm run build -# 构建服务端渲染，同时输出dist文件供静态部署 + +# 静态导出 (输出到 dist/) pnpm run export + +# 启动生产服务器 +pnpm run start ``` -### 启动生产服务器 +### 环境配置 -```bash -pnpm run start +创建 `.env` 文件： + +```env +NEXT_PUBLIC_DEV_SERVER_HOST=http://localhost:8080 ``` ## 项目结构 ``` src/ -├── api/ # API 接口定义 -├── components/ # 公共组件 -├── hooks/ # 自定义 React Hooks -├── pages/ # 页面组件 -├── routes/ # 路由配置 -├── store/ # Redux 状态管理 -├── utils/ # 工具函数 -└── ... +├── 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 实现的可视化流程设计器，支持： + +- 拖拽式节点布局与连接 +- 对齐辅助线 +- 撤销/重做 +- 实时执行状态追踪 -- 节点拖拽和自由布局 -- 连接线绘制和管理 -- 循环结构支持（LOOP_START/LOOP_END） -- 条件分支支持 -- 实时对齐辅助线 -- 撤销/重做功能 -- 流程执行状态跟踪 +**节点类型：** -### 组件库 +| 类型 | 说明 | +|------|------| +| `start` / `end` | 开始/结束节点 | +| `BASIC` | 基础组件节点 | +| `SUB` | 子应用节点 | +| `SWITCH` | 条件分支节点 | +| `LOOP_START` / `LOOP_END` | 循环控制节点 | +| `CODE` | 代码执行节点 | +| `REST` | REST API 调用节点 | +| `IMAGE` | 图像处理节点 | -项目提供了丰富的组件库： +### 组件系统 -- 基础组件库：包含常用的业务组件 -- 复合组件库：由多个基础组件组合而成的复杂组件 -- 组件市场：可共享和复用的组件 +- **组件库**: 管理可复用的业务组件 +- **复合组件库**: 由多个基础组件组合的复杂组件 +- **组件市场**: 组件共享与发现平台 -### 状态管理 +### 组件开发工作流 -使用 Redux Toolkit 进行全局状态管理，主要包括： +完整的组件开发生命周期支持： -- 用户信息 -- 流程数据 -- 组件库数据 -- 画布状态 -- 执行状态 +1. **组件编码** - 集成 IDE 环境 +2. **组件测试** - 测试用例管理与执行 +3. **组件部署** - 环境配置与发布 +4. **组件市场** - 发布与共享 ## 开发指南 -### 添加新节点类型 +### 代码规范 -1. 在 `src/components/FlowEditor/node/` 目录下创建新的节点组件 -2. 在 `src/utils/flowCommon.ts` 中的 `getNodeComponent` 函数中注册新节点类型 -3. 在 `src/components/FlowEditor/node/types/defaultType.ts` 中定义节点类型 +```bash +# ESLint 检查 (自动修复) +pnpm run eslint -### 添加新组件 +# Stylelint 检查 (自动修复) +pnpm run stylelint -1. 在相应的组件目录中创建新组件 -2. 在路由和菜单中注册新组件 -3. 添加必要的状态管理和 API 接口 +# 提交前检查 (Prettier + ESLint + Stylelint) +pnpm run pre-commit +``` -## 部署 +### 添加新节点类型 -项目使用静态导出模式，可以部署到任何支持静态文件托管的服务上： +1. 在 `src/components/FlowEditor/node/` 创建节点组件 +2. 在 `src/utils/flowCommon.ts` 的 `getNodeComponent()` 中注册 +3. 在 `src/components/FlowEditor/nodeEditors/` 创建对应编辑器 -```bash -pnpm run export -``` +### 添加新页面 -构建后的文件将位于 `dist/` 目录中。 +1. 在 `src/pages/[module]/` 创建页面组件 +2. 在 `src/routes/modules/[module].ts` 添加路由配置 +3. 在 `src/api/` 添加相关 API 接口 -## 环境配置 +### 路径别名 -项目使用环境变量进行配置，创建 `.env` 文件： +```typescript +import { Component } from '@/components/Component'; +import { apiCall } from '@/api/module'; +``` -```env -NEXT_PUBLIC_DEV_SERVER_HOST=http://localhost:8080 +## API 响应格式 + +```typescript +interface ApiResponse { + status: number; + msg: string; + code: number; // 200: 成功, -401: 未授权 + data: T; +} ``` -## 代码规范 +## 部署 -项目使用 ESLint 和 Prettier 进行代码规范检查： +项目支持静态导出，可部署到任何静态文件托管服务： ```bash -pnpm run eslint -pnpm run stylelint +pnpm run export ``` + +构建产物位于 `dist/` 目录。 +