# DDNS 双模式功能测试指南

## 🎯 测试目标

验证 DDNS 双模式架构的前端实现是否正确，包括：
1. Tab 4 重命名为"增强"
2. DDNS 表单支持两种模式切换
3. 增强页服务卡片显示正确
4. 表单验证逻辑区分模式

---

## 📋 前置准备

### 1. 启动服务
```bash
cd e:\Project\MeshRay
.\meshray.exe
```

### 2. 访问页面
- URL: http://localhost:9531
- 默认账号：admin / admin123

### 3. 打开浏览器开发者工具（F12）
- Console 标签 - 查看是否有 JavaScript 错误
- Network 标签 - 查看 API 请求

---

## ✅ 测试用例

### 测试 1：验证 Tab 名称修改

**步骤**：
1. 登录系统
2. 点击左侧菜单"服务管理"
3. 查看顶部的 Tab 标签

**预期结果**：
- ✅ Tab 1: "TUN" 🔌
- ✅ Tab 2: "TURN" 🔗
- ✅ Tab 3: "DDNS" 🌐
- ✅ Tab 4: "增强" 🚀 ← **重点验证**

**截图位置**：
```
[在此处粘贴 Tab 栏截图]
```

---

### 测试 2：验证 Tab 3 "DDNS"说明文案

**步骤**：
1. 点击 Tab 3 "DDNS"
2. 查看顶部的信息卡片

**预期结果**：
- ✅ 标题：**DDNS 配置（基础设施）**
- ✅ 描述：配置 DNS 服务商对接信息，用于组网同步、内网穿透等场景
- ✅ 列表项：
  - 支持阿里云、腾讯云、Cloudflare
  - 配置后可在组网创建时直接选用
  - 也可在「增强」页创建完整的 DDNS 服务

**实际结果**：
```
[记录实际显示的文案]
```

---

### 测试 3：测试 DDNS 基础设施配置模式

**步骤**：
1. 在 Tab 3 点击"添加 DDNS"按钮
2. 查看弹出的对话框

**预期结果**：
- ✅ 对话框标题："添加 DDNS"
- ✅ 表单包含"配置模式"单选框
- ✅ 默认选中"🏗️ 基础设施配置"
- ✅ 选择基础设施模式后，显示：
  - DNS 服务商下拉框
  - 根域名输入框
  - 根据服务商显示不同的认证字段（Cloudflare API Token、阿里云 AccessKey 等）

**验证表单字段**：
| 字段 | 是否显示 | 备注 |
|------|---------|------|
| 服务名称 | ✅ | 通用字段 |
| 服务类型 | ✅ | 固定为 DDNS |
| 配置模式 | ✅ | 单选框 |
| DNS 服务商 | ✅ | 基础设施模式特有 |
| 根域名 | ✅ | 基础设施模式特有 |
| API Token/AccessKey | ✅ | 根据服务商显示 |
| 主机记录 | ❌ | 全功能模式才有 |
| 目标 IP | ❌ | 全功能模式才有 |

**截图位置**：
```
[在此处粘贴表单截图]
```

---

### 测试 4：测试 DDNS 全功能服务模式

**步骤**：
1. 在 DDNS 添加对话框中
2. 切换配置模式为"🚀 全功能 DDNS 服务"

**预期结果**：
- ✅ 显示"选择 DDNS 配置"下拉框（从已配置的 DDNS 服务中选择）
- ✅ 显示"记录类型"下拉框（A/AAAA/TXT/CNAME）
- ✅ 选择 A/AAAA 记录时，显示：
  - 主机记录输入框
  - 目标 IP 输入框
  - 检测端口输入框
- ✅ 选择 TXT 记录时，显示：
  - TXT 记录名称输入框
  - TXT 记录值输入框
- ✅ 选择 CNAME 记录时，显示：
  - 目标域名输入框
- ✅ TTL 设置下拉框

**验证表单字段**：
| 字段 | 是否显示 | 备注 |
|------|---------|------|
| 选择 DDNS 配置 | ✅ | 级联选择 |
| 记录类型 | ✅ | A/AAAA/TXT/CNAME |
| 主机记录 | ✅ | A/AAAA 模式显示 |
| 目标 IP | ✅ | A/AAAA 模式显示 |
| 检测端口 | ✅ | A/AAAA 模式显示 |
| TXT 记录名称 | ✅ | TXT 模式显示 |
| TXT 记录值 | ✅ | TXT 模式显示 |
| 目标域名 | ✅ | CNAME 模式显示 |
| TTL | ✅ | 通用 |

**测试不同记录类型的切换**：
1. 选择 A 记录 → 验证显示主机记录、IPv4 目标 IP
2. 选择 AAAA 记录 → 验证显示主机记录、IPv6 目标 IP
3. 选择 TXT 记录 → 验证显示 TXT 记录名称和值
4. 选择 CNAME 记录 → 验证显示目标域名

**截图位置**：
```
[在此处粘贴全功能模式表单截图]
```

---

### 测试 5：验证表单验证规则

**测试场景 A：基础设施模式**
1. 切换到基础设施模式
2. 不填写任何字段，点击提交

**预期验证错误**：
- ✅ "请输入服务名称"
- ✅ "请选择 DNS 服务商"
- ✅ "请输入域名"

**测试场景 B：全功能模式 - A 记录**
1. 切换到全功能模式
2. 选择 A 记录类型
3. 不填写字段，点击提交

**预期验证错误**：
- ✅ "请输入服务名称"
- ✅ "请选择 DDNS 配置"
- ✅ "请选择记录类型"
- ✅ "请输入主机记录"
- ✅ "请输入目标 IP"
- ✅ "请输入检测端口"

**测试场景 C：全功能模式 - TXT 记录**
1. 切换到全功能模式
2. 选择 TXT 记录类型
3. 填写 TXT 记录名称为"test_invalid!@#"

**预期验证错误**：
- ✅ "只能包含字母、数字、点、下划线和连字符"

**记录实际测试结果**：
```
[记录每个场景的实际验证结果]
```

---

### 测试 6：验证增强页服务卡片

**步骤**：
1. 切换到 Tab 4 "增强"
2. 查看页面内容

**预期结果**：
- ✅ 顶部信息卡片：
  - 标题："增强服务"
  - 图标：🚀
  - 描述：基于已配置的基础设施，创建完整的业务服务
  - 列表项：DDNS 内网穿透、自定义服务

- ✅ 服务卡片网格显示：
  - 卡片 1: "DDNS 内网穿透" 🌐
    - 描述：基于 DDNS 配置创建 A/AAAA 记录，实现内网穿透
    - 标签：内网穿透、DDNS
  - 卡片 2: "自定义服务" 🔧
    - 描述：未来扩展更多能力
    - 标签：自定义、灵活配置

- ✅ 鼠标悬停效果：
  - 卡片上浮（translateY）
  - 边框变蓝色
  - 阴影加深
  - "立即创建"按钮变蓝

**截图位置**：
```
[在此处粘贴增强页截图]
```

---

### 测试 7：测试点击增强服务卡片

**步骤**：
1. 点击"DDNS 内网穿透"卡片
2. 观察弹出的对话框

**预期结果**：
- ✅ 对话框标题："添加 DDNS"
- ✅ 服务名称自动填充："DDNS 内网穿透"
- ✅ 服务类型：DDNS
- ✅ 配置模式：全功能 DDNS 服务（默认选中）
- ✅ 记录类型：A（默认）
- ✅ 其他字段为空，等待用户填写

**点击"自定义服务"卡片**：
- ✅ 对话框标题："添加 TURN"或"添加 STUN"（取决于服务类型）
- ✅ 配置模式：基础设施配置（默认）

**记录实际结果**：
```
[记录点击卡片的实际行为]
```

---

### 测试 8：检查浏览器控制台

**步骤**：
1. 按 F12 打开开发者工具
2. 切换到 Console 标签
3. 执行上述所有测试操作
4. 查看是否有红色错误信息

**预期结果**：
- ✅ 无 JavaScript 运行时错误
- ✅ 无 Vue 警告
- ✅ 无组件未定义错误

**如果看到错误，记录详细信息**：
```
错误信息：
发生时的操作：
堆栈跟踪：
```

---

### 测试 9：检查 Network 请求

**步骤**：
1. 开发者工具 → Network 标签
2. 清空之前的请求记录
3. 点击"添加 DDNS" → 提交表单
4. 查看发送的 API 请求

**预期结果**：
- ✅ 请求 URL: `/api/v1/services`
- ✅ 请求方法：POST
- ✅ 请求体包含正确的字段结构：
```json
{
  "name": "测试 DDNS",
  "type": "DDNS",
  "config_mode": "infrastructure",
  "provider": "cloudflare",
  "domain": "example.com",
  "api_token": "***",
  "enabled": true,
  "timeout": 10
}
```

**对于全功能模式**：
```json
{
  "name": "NAS 内网穿透",
  "type": "DDNS",
  "config_mode": "fullservice",
  "ddns_config_id": "xxx-xxx-xxx",
  "record_type": "AAAA",
  "subdomain": "nas",
  "target_ip": "::ffff:192.168.1.100",
  "port": 80,
  "ttl": 600
}
```

**记录实际请求**：
```
[粘贴请求详情]
```

---

## 🐛 问题记录表

如果在测试中发现任何问题，请在此记录：

| 编号 | 问题描述 | 复现步骤 | 严重程度 | 截图 |
|------|---------|---------|---------|------|
| 1 | | | 高/中/低 | |
| 2 | | | 高/中/低 | |

---

## 📊 测试总结

### 通过的测试项
- [ ] Tab 名称修改
- [ ] Tab 3 文案更新
- [ ] 基础设施配置模式
- [ ] 全功能服务模式
- [ ] 表单验证规则
- [ ] 增强页服务卡片
- [ ] 点击卡片行为
- [ ] 无控制台错误
- [ ] API 请求正确

### 整体评价
```
[对 DDNS 双模式功能的主观评价]
例如：
- UI 设计清晰直观
- 两种模式切换流畅
- 表单验证逻辑完善
- 用户体验良好
```

### 改进建议
```
[提出任何改进建议]
例如：
1. 可以添加更多预设的 DDNS 服务商
2. 全功能模式下可以提供快速配置向导
3. ...
```

---

## 🎯 下一步行动

根据测试结果：
1. 如果所有测试通过 → 开始后端集成开发
2. 如果有问题 → 修复后重新测试
3. 如果有优化建议 → 评估后决定是否实施

---

**测试日期**：2026-03-20  
**测试人员**：_____________  
**测试状态**：⏳ 进行中 / ✅ 已完成 / ❌ 阻塞