From ff6792046d7b40dfe9cc2dcfe6072c64e7d81d99 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Wed, 22 Oct 2025 10:32:31 +0800
Subject: [PATCH] =?UTF-8?q?docs(readme):=E9=87=8D=E6=9E=84=20README=20?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E7=BB=93=E6=9E=84=E5=92=8C=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 152 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 134 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index c87e042..5c5d8f2 100644
--- a/README.md
+++ b/README.md
@@ -1,34 +1,150 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Flow Platform React
 
-## Getting Started
+这是一个基于 React 和 Next.js 构建的可视化流程编辑平台。该平台提供了丰富的组件和工具，用于创建、编辑和管理复杂的业务流程。
 
-First, run the development server:
+## 项目概述
+
+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
-npm run dev
-# or
-yarn dev
+pnpm install
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### 开发模式
+
+```bash
+pnpm run dev
+```
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+打开浏览器访问 [http://localhost:4121](http://localhost:4121) 查看应用。
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+### 构建生产版本
+
+```bash
+# 构建服务端渲染
+pnpm run build
+# 构建服务端渲染，同时输出dist文件供静态部署
+pnpm run export
+```
+
+### 启动生产服务器
+
+```bash
+pnpm run start
+```
+
+## 项目结构
+
+```
+src/
+├── api/              # API 接口定义
+├── components/       # 公共组件
+├── hooks/            # 自定义 React Hooks
+├── pages/            # 页面组件
+├── routes/           # 路由配置
+├── store/            # Redux 状态管理
+├── utils/            # 工具函数
+└── ...
+```
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+## 核心模块
 
-## Learn More
+### 流程编辑器
 
-To learn more about Next.js, take a look at the following resources:
+流程编辑器是本项目的核心功能，提供了以下特性：
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- 节点拖拽和自由布局
+- 连接线绘制和管理
+- 循环结构支持（LOOP_START/LOOP_END）
+- 条件分支支持
+- 实时对齐辅助线
+- 撤销/重做功能
+- 流程执行状态跟踪
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+### 组件库
 
-## Deploy on Vercel
+项目提供了丰富的组件库：
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+- 基础组件库：包含常用的业务组件
+- 复合组件库：由多个基础组件组合而成的复杂组件
+- 组件市场：可共享和复用的组件
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+### 状态管理
+
+使用 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
+```