流程图的功能

docs/API接口对比分析.md

@@ -2,7 +2,23 @@
 
 ## 更新日志
 
-### 最近更新（2025-10）
+### 最近更新（2025-01-15）
+- ✨ **FlowchartEditor 流程图编辑器**：新增完整的流程图编辑功能
+  - 基于 Vue Flow 构建的流程图编辑器组件
+  - 支持7种节点类型：开始、输入、处理、判断、循环、输出、结束
+  - 完整的拖拽创建、节点连接、编辑功能
+  - 撤销重做、自动保存、键盘快捷键支持
+  - 模块化设计，包含9个独立的功能模块
+- 🎨 **前端组件优化**：完善了组件文档和项目结构说明
+  - 更新了 README.md 中的技术栈和项目结构
+  - 创建了详细的 FlowchartEditor 使用文档
+  - 优化了开发指南和构建流程说明
+- 🔧 **构建工具升级**：从 Vite 迁移到 Rsbuild
+  - 使用 Rsbuild 作为新的构建工具
+  - 支持多环境构建（test、staging、production）
+  - 优化了构建性能和开发体验
+
+### 历史更新（2025-10）
 - ✨ **AI分析功能增强**：完善了AI智能分析模块的文档说明
   - 详细说明了4个AI相关接口的功能和参数
   - 新增等级系统说明（S/A/B/C），包含特殊规则
@@ -434,3 +450,99 @@ const hasTriedButNotPassed = computed(() => {
 **结论**：
 此接口是系统内部通信接口，前端完全不需要调用。类似的内部接口还可能存在于分布式系统的其他服务间通信中。
 
+---
+
+## 六、新增功能模块
+
+### FlowchartEditor 流程图编辑器 ✨
+
+**功能概述**: 基于 Vue Flow 构建的完整流程图编辑器，支持拖拽创建、节点连接、编辑等核心功能。
+
+**技术实现**:
+- **核心库**: Vue Flow (@vue-flow/core)
+- **组件架构**: 模块化设计，9个独立功能模块
+- **状态管理**: 基于 Vue 3 Composition API
+- **数据持久化**: localStorage 自动缓存
+- **交互体验**: 拖拽、键盘快捷键、撤销重做
+
+**组件结构**:
+```
+FlowchartEditor/
+├── index.vue              # 主组件 - 整合所有功能
+├── CustomNode.vue         # 自定义节点 - 7种节点类型
+├── Toolbar.vue            # 工具栏 - 节点创建和操作
+├── NodeHandles.vue        # 节点操作手柄 - 连接点管理
+├── NodeActions.vue        # 节点动作 - 删除、编辑按钮
+├── useCache.ts            # 缓存管理 - 自动保存/恢复
+├── useDnD.ts              # 拖拽处理 - 节点创建逻辑
+├── useFlowOperations.ts   # 流程操作 - 增删改查
+├── useHistory.ts          # 历史记录 - 撤销重做
+└── useNodeStyles.ts       # 节点样式 - 类型配置
+```
+
+**节点类型支持**:
+- **开始节点** (start) - 流程开始，绿色主题
+- **输入节点** (input) - 数据输入，蓝色主题
+- **处理节点** (default) - 数据处理，紫色主题
+- **判断节点** (decision) - 条件判断，橙色主题
+- **循环节点** (loop) - 循环处理，青色主题
+- **输出节点** (output) - 数据输出，粉色主题
+- **结束节点** (end) - 流程结束，红色主题
+
+**核心功能**:
+1. **拖拽创建**: 从工具栏拖拽节点到画布
+2. **节点连接**: 支持节点间的连线操作
+3. **节点编辑**: 双击节点进行文本编辑
+4. **撤销重做**: 完整的历史记录管理
+5. **自动保存**: 本地缓存，防止数据丢失
+6. **键盘快捷键**: Ctrl+Z/Ctrl+Y 撤销重做，Delete 删除
+7. **批量操作**: 支持多选和批量删除
+
+**数据格式**:
+```typescript
+// 节点数据
+interface Node {
+  id: string
+  type: string
+  position: { x: number, y: number }
+  data: {
+    customLabel: string
+    [key: string]: any
+  }
+}
+
+// 边数据
+interface Edge {
+  id: string
+  source: string
+  target: string
+  sourceHandle?: string
+  targetHandle?: string
+  type?: string
+}
+```
+
+**使用场景**:
+- 算法流程图绘制
+- 业务流程设计
+- 教学演示工具
+- 问题分析图表
+
+**性能优化**:
+- 基于 Vue Flow 的高性能渲染
+- 模块化设计，按需加载
+- 本地缓存减少重复计算
+- 响应式状态管理
+
+**扩展性**:
+- 支持自定义节点类型
+- 可扩展工具栏功能
+- 支持主题定制
+- 支持数据导入导出
+
+**文档支持**:
+- 详细的使用文档: `docs/FlowchartEditor.md`
+- 完整的 API 说明
+- 最佳实践指南
+- 故障排除手册
+