第一次提交

2026-01-19 00:09:36 +08:00
parent de4b5059e9
commit 6674060f2f
191 changed files with 40940 additions and 0 deletions
--- a/前端界面测试指南-邮件和消息队列节点.md
+++ b/前端界面测试指南-邮件和消息队列节点.md
@@ -0,0 +1,372 @@
+# 前端界面测试指南 - 邮件和消息队列节点
+
+## 🎯 测试目标
+
+在前端界面中测试新实现的邮件节点和消息队列节点，验证：
+1. 节点在工具箱中正确显示
+2. 节点可以拖拽到画布
+3. 节点配置面板正确显示
+4. 节点配置可以保存
+5. 工作流可以执行
+
+## 📋 前置条件
+
+1. **前端服务运行**: http://101.43.95.130:8038
+2. **后端服务运行**: http://101.43.95.130:8037
+3. **用户已登录**
+
+## 🚀 测试步骤
+
+### 步骤1: 登录系统
+
+1. 打开浏览器，访问: **http://101.43.95.130:8038**
+2. 如果未登录，使用测试账号登录：
+   - 用户名: `test_user`
+   - 密码: `test_password123`
+   - 或使用您自己的账号
+
+### 步骤2: 进入工作流设计器
+
+1. 在首页点击"工作流管理"
+2. 点击"创建新工作流"按钮
+3. 或点击现有工作流的"设计"按钮
+
+### 步骤3: 测试邮件节点
+
+#### 3.1 添加邮件节点
+
+1. **查看左侧节点工具箱**
+   - 应该能看到"邮件"节点（带有Message图标）
+   - 位置：在"Webhook"节点之后，"输出"节点之前
+
+2. **拖拽邮件节点到画布**
+   - 从左侧工具箱拖拽"邮件"节点
+   - 放到画布中央位置
+   - 节点应该成功添加到画布
+
+3. **连接节点**
+   - 如果画布中有"开始"节点，连接开始节点到邮件节点
+   - 如果没有开始节点，先添加一个开始节点
+   - 添加"结束"节点，连接邮件节点到结束节点
+
+#### 3.2 配置邮件节点
+
+1. **点击邮件节点**，右侧应该显示配置面板
+
+2. **检查配置项**，应该看到以下字段：
+   - ✅ SMTP服务器
+   - ✅ SMTP端口
+   - ✅ SMTP用户名
+   - ✅ SMTP密码（密码输入框）
+   - ✅ 使用TLS（开关）
+   - ✅ 发件人邮箱
+   - ✅ 收件人邮箱
+   - ✅ 抄送邮箱（可选）
+   - ✅ 密送邮箱（可选）
+   - ✅ 邮件主题
+   - ✅ 邮件正文类型（下拉选择：纯文本/HTML）
+   - ✅ 邮件正文（多行文本）
+   - ✅ 附件（可选，JSON格式）
+
+3. **填写测试配置**：
+   ```
+   SMTP服务器: smtp.gmail.com
+   SMTP端口: 587
+   SMTP用户名: your-email@gmail.com
+   SMTP密码: [您的应用专用密码]
+   使用TLS: ✅ 开启
+   发件人邮箱: your-email@gmail.com
+   收件人邮箱: recipient@example.com
+   邮件主题: 测试邮件 - {test_key}
+   邮件正文类型: 纯文本
+   邮件正文: 
+     这是一封测试邮件。
+     
+     测试数据: {test_data}
+     时间: {timestamp}
+   ```
+
+4. **测试变量替换提示**
+   - 在主题和正文中使用 `{test_key}`, `{test_data}`, `{timestamp}`
+   - 应该看到提示信息说明支持变量替换
+
+5. **保存节点配置**
+   - 点击"保存配置"按钮
+   - 应该看到"节点配置已保存"的提示
+
+#### 3.3 保存工作流
+
+1. 点击工具栏的"保存"按钮
+2. 应该看到"工作流已保存"的提示
+3. 工作流名称会自动生成或可以手动编辑
+
+#### 3.4 运行工作流
+
+1. **点击"运行"按钮**
+2. **在运行对话框中输入测试数据**：
+   ```json
+   {
+     "test_key": "Hello World",
+     "test_data": "这是测试数据",
+     "timestamp": "2024-01-01 12:00:00"
+   }
+   ```
+3. **点击"开始运行"**
+4. **查看执行结果**：
+   - 执行状态应该显示为"运行中"或"已完成"
+   - 如果配置了真实的SMTP服务器，邮件应该成功发送
+   - 如果未配置，会显示连接错误（这是正常的）
+
+### 步骤4: 测试消息队列节点（RabbitMQ）
+
+#### 4.1 添加消息队列节点
+
+1. **查看左侧节点工具箱**
+   - 应该能看到"消息队列"节点（带有Connection图标）
+   - 位置：在"邮件"节点之后
+
+2. **拖拽消息队列节点到画布**
+   - 从左侧工具箱拖拽"消息队列"节点
+   - 放到画布上
+
+3. **连接节点**
+   - 连接开始节点到消息队列节点
+   - 连接消息队列节点到结束节点
+
+#### 4.2 配置消息队列节点
+
+1. **点击消息队列节点**，右侧应该显示配置面板
+
+2. **选择队列类型**
+   - 下拉选择"RabbitMQ"或"Kafka"
+   - 选择后，配置面板会显示对应的配置项
+
+3. **RabbitMQ配置项**（选择RabbitMQ时）：
+   - ✅ 主机地址
+   - ✅ 端口
+   - ✅ 用户名
+   - ✅ 密码（密码输入框）
+   - ✅ Exchange（可选）
+   - ✅ Routing Key
+   - ✅ 队列名称
+   - ✅ 消息内容（JSON格式）
+
+4. **填写RabbitMQ测试配置**：
+   ```
+   队列类型: RabbitMQ
+   主机地址: localhost
+   端口: 5672
+   用户名: guest
+   密码: guest
+   队列名称: test_queue
+   Routing Key: test.routing.key
+   消息内容: 
+     {
+       "test_key": "{test_key}",
+       "test_data": "{test_data}",
+       "timestamp": "{timestamp}"
+     }
+   ```
+
+5. **保存节点配置**
+
+#### 4.3 测试Kafka配置
+
+1. **切换队列类型为Kafka**
+   - 配置面板会显示Kafka相关配置
+
+2. **Kafka配置项**：
+   - ✅ Bootstrap Servers
+   - ✅ Topic
+   - ✅ 消息内容（JSON格式）
+
+3. **填写Kafka测试配置**：
+   ```
+   队列类型: Kafka
+   Bootstrap Servers: localhost:9092
+   Topic: test_topic
+   消息内容: 
+     {
+       "test_key": "{test_key}",
+       "test_data": "{test_data}",
+       "timestamp": "{timestamp}"
+     }
+   ```
+
+4. **保存节点配置**
+
+#### 4.4 保存并运行工作流
+
+1. 保存工作流
+2. 运行工作流，输入测试数据：
+   ```json
+   {
+     "test_key": "Hello Queue",
+     "test_data": "这是测试数据",
+     "timestamp": "2024-01-01 12:00:00"
+   }
+   ```
+3. 查看执行结果
+
+## ✅ 测试检查清单
+
+### 邮件节点测试
+- [ ] 节点在工具箱中显示（"邮件"节点）
+- [ ] 节点可以拖拽到画布
+- [ ] 节点配置面板正确显示所有配置项
+- [ ] 可以填写和修改配置
+- [ ] 配置可以保存
+- [ ] 工作流可以保存
+- [ ] 工作流可以运行
+- [ ] 变量替换提示正确显示
+- [ ] HTML格式选项可以切换
+
+### 消息队列节点测试
+- [ ] 节点在工具箱中显示（"消息队列"节点）
+- [ ] 节点可以拖拽到画布
+- [ ] 队列类型可以切换（RabbitMQ/Kafka）
+- [ ] RabbitMQ配置项正确显示
+- [ ] Kafka配置项正确显示
+- [ ] 配置可以保存
+- [ ] 工作流可以保存
+- [ ] 工作流可以运行
+- [ ] 变量替换提示正确显示
+
+### 通用测试
+- [ ] 节点可以连接（连线功能）
+- [ ] 节点可以删除
+- [ ] 节点可以复制粘贴
+- [ ] 画布缩放功能正常
+- [ ] 保存状态提示正常
+
+## 🐛 常见问题排查
+
+### 问题1: 节点在工具箱中不显示
+
+**可能原因**:
+- 前端代码未更新
+- 浏览器缓存问题
+
+**解决方法**:
+1. 刷新浏览器（Ctrl+F5 强制刷新）
+2. 检查浏览器控制台是否有错误
+3. 确认前端服务已重启
+
+### 问题2: 配置面板不显示
+
+**可能原因**:
+- 节点未正确选中
+- 配置面板被隐藏
+
+**解决方法**:
+1. 点击节点确保选中（节点应该高亮）
+2. 检查右侧配置面板是否可见
+3. 尝试刷新页面
+
+### 问题3: 配置无法保存
+
+**可能原因**:
+- 后端API错误
+- 网络连接问题
+
+**解决方法**:
+1. 检查浏览器控制台的网络请求
+2. 查看是否有错误信息
+3. 检查后端服务是否正常运行
+
+### 问题4: 工作流执行失败
+
+**可能原因**:
+- 未配置真实的SMTP/RabbitMQ/Kafka服务器
+- 配置信息错误
+- 网络连接问题
+
+**解决方法**:
+1. 检查执行详情页面的错误信息
+2. 确认外部服务配置正确
+3. 查看执行日志了解详细错误
+
+## 📸 预期界面效果
+
+### 节点工具箱
+左侧应该显示以下节点（按顺序）：
+- 开始
+- 输入
+- LLM
+- 条件
+- 转换
+- 循环
+- Agent
+- HTTP请求
+- 数据库
+- 文件操作
+- 定时任务
+- Webhook
+- **邮件** ← 新节点
+- **消息队列** ← 新节点
+- 输出
+- 结束
+
+### 邮件节点配置面板
+右侧配置面板应该显示：
+- 标题："节点配置"
+- 节点ID（只读）
+- 节点类型（只读）
+- 节点名称
+- SMTP配置区域
+- 邮件内容配置区域
+- 附件配置区域
+- 保存/复制/删除按钮
+
+### 消息队列节点配置面板
+右侧配置面板应该显示：
+- 队列类型选择（下拉）
+- RabbitMQ配置区域（选择RabbitMQ时）
+- Kafka配置区域（选择Kafka时）
+- 消息内容配置区域
+- 保存/复制/删除按钮
+
+## 🎯 测试数据示例
+
+### 邮件节点测试数据
+```json
+{
+  "test_key": "Hello World",
+  "test_data": "这是测试数据",
+  "timestamp": "2024-01-01 12:00:00",
+  "user_name": "测试用户",
+  "order_id": "12345"
+}
+```
+
+### 消息队列节点测试数据
+```json
+{
+  "test_key": "Hello Queue",
+  "test_data": "这是测试数据",
+  "timestamp": "2024-01-01 12:00:00",
+  "event_type": "user_action",
+  "user_id": "12345"
+}
+```
+
+## 📝 测试记录
+
+测试时请记录：
+1. 测试时间
+2. 测试环境（浏览器、操作系统）
+3. 测试结果（通过/失败）
+4. 遇到的问题
+5. 截图（如果有）
+
+## 🎉 测试完成
+
+测试通过后，您可以：
+1. 在实际工作流中使用这些节点
+2. 配置真实的SMTP/RabbitMQ/Kafka服务器进行实际测试
+3. 继续开发其他功能
+
+---
+
+**测试指南版本**: v1.0  
+**最后更新**: 2024年1月17日