docs(readme): 重构 README 文档结构与内容

README.md

@@ -1,150 +1,177 @@
 # Flow Platform React
 
-这是一个基于 React 和 Next.js 构建的可视化流程编辑平台。该平台提供了丰富的组件和工具，用于创建、编辑和管理复杂的业务流程。
+基于 React 和 Next.js 构建的可视化流程编排平台，提供拖拽式流程设计、组件开发与管理、实时执行监控等功能。
-
-## 项目概述
-
-Flow Platform React 是一个功能强大的流程编辑器，支持拖拽式操作、组件连接、循环结构、条件判断等多种功能。平台内置了多种组件类型，包括基础组件、复合组件、系统组件等，可以满足各种业务场景的需求。
 
 ## 技术栈
 
-- [Next.js](https://nextjs.org/) - React 框架
+| 类别 | 技术 |
-- [React](https://reactjs.org/) - JavaScript UI 库
+|------|------|
-- [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集，提供类型安全
+| 框架 | Next.js 12.0.4 / React 17.0.2 |
-- [@xyflow/react](https://reactflow.dev/) - 可视化流程图库
+| 语言 | TypeScript |
-- [@arco-design/web-react](https://arco.design/react) - React UI 组件库
+| 状态管理 | Redux Toolkit |
-- [Redux Toolkit](https://redux-toolkit.js.org/) - 状态管理
+| UI 组件库 | Arco Design |
-
+| 流程编辑器 | @xyflow/react |
-## 功能特性
+| 代码编辑器 | CodeMirror (Java/Python/JSON) |
-
+| 样式方案 | LESS |
-- 🎨 可视化流程编辑器，支持拖拽和连接节点
+| HTTP 客户端 | Axios |
-- 🔗 多种节点类型：开始/结束节点、基础节点、循环节点、条件节点等
-- ⚙️ 组件库管理，支持自定义组件
-- 🔄 流程执行和状态跟踪
-- 📊 实时数据监控和可视化
-- 🎯 精确的对齐辅助线
-- 📚 丰富的组件市场
-- 🧩 复合组件支持
 
 ## 快速开始
 
 ### 环境要求
 
 - Node.js >= 16.20.0
-- pnpm
+- pnpm (推荐)
 
-### 安装依赖
+### 安装与运行
 
 ```bash
+# 安装依赖
 pnpm install
-```
 
-### 开发模式
+# 开发模式 (http://localhost:4121)
-
-```bash
 pnpm run dev
-```
-
-打开浏览器访问 [http://localhost:4121](http://localhost:4121) 查看应用。
-
-### 构建生产版本
 
-```bash
+# 生产构建
-# 构建服务端渲染
 pnpm run build
-# 构建服务端渲染，同时输出dist文件供静态部署
+
+# 静态导出 (输出到 dist/)
 pnpm run export
+
+# 启动生产服务器
+pnpm run start
 ```
 
-### 启动生产服务器
+### 环境配置
 
-```bash
+创建 `.env` 文件：
-pnpm run start
+
+```env
+NEXT_PUBLIC_DEV_SERVER_HOST=http://localhost:8080
 ```
 
 ## 项目结构
 
 ```
 src/
-├── api/              # API 接口定义
+├── api/                    # API 接口层
+│   ├── index.ts           # Axios 配置与拦截器
+│   ├── apps.ts            # 应用管理
+│   ├── components.ts      # 组件库操作
+│   ├── flow.ts            # 流程操作
+│   ├── componentMarket.ts # 组件市场
+│   └── ...
 ├── components/             # 公共组件
-├── hooks/            # 自定义 React Hooks
+│   └── FlowEditor/        # 流程编辑器核心
+│       ├── node/          # 节点组件
+│       └── nodeEditors/   # 节点编辑器
+├── hooks/                  # 自定义 Hooks
 ├── pages/                  # 页面组件
+│   ├── ideContainer/      # 集成开发环境
+│   ├── flowEditor/        # 流程编辑器页面
+│   ├── componentLibrary/  # 组件库
+│   ├── componentMarket/   # 组件市场
+│   └── componentDevelopment/ # 组件开发
 ├── routes/                 # 路由配置
 ├── store/                  # Redux 状态管理
-├── utils/            # 工具函数
+│   ├── 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/` 目录下创建新的节点组件
+```bash
-2. 在 `src/utils/flowCommon.ts` 中的 `getNodeComponent` 函数中注册新节点类型
+# ESLint 检查 (自动修复)
-3. 在 `src/components/FlowEditor/node/types/defaultType.ts` 中定义节点类型
+pnpm run eslint
 
-### 添加新组件
+# Stylelint 检查 (自动修复)
+pnpm run stylelint
 
-1. 在相应的组件目录中创建新组件
+# 提交前检查 (Prettier + ESLint + Stylelint)
-2. 在路由和菜单中注册新组件
+pnpm run pre-commit
-3. 添加必要的状态管理和 API 接口
+```
 
-## 部署
+### 添加新节点类型
 
-项目使用静态导出模式，可以部署到任何支持静态文件托管的服务上：
+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
+## API 响应格式
-NEXT_PUBLIC_DEV_SERVER_HOST=http://localhost:8080
+
+```typescript
+interface ApiResponse<T> {
+  status: number;
+  msg: string;
+  code: number;  // 200: 成功, -401: 未授权
+  data: T;
+}
 ```
 
-## 代码规范
+## 部署
 
-项目使用 ESLint 和 Prettier 进行代码规范检查：
+项目支持静态导出，可部署到任何静态文件托管服务：
 
 ```bash
-pnpm run eslint
+pnpm run export
-pnpm run stylelint
 ```
+
+构建产物位于 `dist/` 目录。
+