# 前端界面测试指南 - 邮件和消息队列节点

## 🎯 测试目标

在前端界面中测试新实现的邮件节点和消息队列节点，验证：
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日