# 消息通知渠道功能快速测试指南

## 测试步骤

### 1. 进入功能页面
1. 登录系统
2. 点击顶部导航栏的**农事任务**
3. 点击左侧菜单**农事任务** > **任务分配与派发**
4. 页面会自动切换到"任务分配与派发"标签页

### 2. 查看通知渠道配置
应该看到一个标题为"消息通知渠道"的卡片，包含：
- 4个渠道配置项（2x2网格布局）
- 每个渠道都有：图标、名称、状态徽章、开关、说明文字
- 底部显示统计：已启用渠道数量：4 / 4（初始状态全部启用）

### 3. 测试开关功能

#### 测试1：禁用短信通知
1. 点击"短信通知"卡片右侧的Switch开关
2. **预期结果**：
   - Switch变为关闭状态
   - 卡片变为灰色半透明
   - 图标变为灰色
   - 徽章变为灰色，显示"已禁用"
   - 弹出Toast提示："短信通知已禁用"
   - 底部统计变为：3 / 4

#### 测试2：再次启用短信通知
1. 再次点击"短信通知"的Switch开关
2. **预期结果**：
   - Switch变为开启状态
   - 卡片恢复绿色背景
   - 图标恢复绿色
   - 徽章变为绿色，显示"已启用"
   - 弹出Toast提示："短信通知已启用"
   - 底部统计恢复为：4 / 4

#### 测试3：禁用多个渠道
1. 依次禁用"邮件通知"和"APP推送"
2. **预期结果**：
   - 每次切换都有Toast提示
   - 对应卡片变为灰色半透明
   - 底部统计变为：2 / 4
   - 只有"消息中心"和"短信通知"保持彩色

#### 测试4：禁用所有渠道
1. 继续禁用剩余的"消息中心"和"短信通知"
2. **预期结果**：
   - 所有卡片都变为灰色半透明
   - 底部统计变为：0 / 4

### 4. 测试发送通知功能

#### 测试5：全部渠道禁用时发送
1. 确保所有渠道都已禁用（0 / 4）
2. 切换到"任务管理"标签页
3. 找到任何一个任务，点击"发送通知"按钮（如果有）
4. **预期结果**：
   - 弹出错误Toast："请至少启用一个通知渠道"
   - 不会创建通知记录

#### 测试6：部分渠道启用时发送
1. 回到"任务分配与派发"标签页
2. 只启用"消息中心"和"APP推送"（2 / 4）
3. 回到"任务管理"标签页
4. 创建一个新任务或编辑现有任务
5. 发送通知
6. **预期结果**：
   - 成功发送
   - Toast显示："已通过 消息中心、APP推送 向 [执行人] 发送任务分配通知"

#### 测试7：查看通知记录
1. 切换到"任务分配与派发"标签页
2. 向下滚动查看"通知发送记录"
3. 查看最新的通知记录
4. **预期结果**：
   - 记录中的"通知渠道"只包含启用的渠道
   - 如之前只启用了"消息中心"和"APP推送"，则只显示这两个

### 5. 测试各渠道的独立性

#### 测试8：不同组合测试
1. 尝试以下组合，观察视觉效果：
   - 只启用消息中心（蓝色）
   - 只启用短信通知（绿色）
   - 只启用邮件通知（紫色）
   - 只启用APP推送（橙色）
   - 启用消息中心+短信（蓝+绿）
   - 启用邮件+APP（紫+橙）
2. **预期结果**：
   - 每个组合都有正确的视觉表现
   - 统计数字准确
   - 发送通知时使用正确的渠道

## 验收标准

### ✅ 功能正常
- [ ] 4个渠道都可以独立开关
- [ ] 开关切换有Toast提示
- [ ] 统计数字实时更新
- [ ] 禁用状态视觉清晰（灰色半透明）
- [ ] 启用状态视觉清晰（彩色醒目）
- [ ] 全部禁用时发送通知会提示错误
- [ ] 部分启用时只通过启用的渠道发送
- [ ] 通知记录中渠道信息正确

### ✅ 视觉效果
- [ ] 2x2网格布局美观
- [ ] 4种渠道颜色区分明显（蓝、绿、紫、橙）
- [ ] 启用/禁用状态对比强烈
- [ ] Switch开关位置合理
- [ ] 徽章颜色正确（启用绿色，禁用灰色）
- [ ] 图标颜色随状态变化
- [ ] 半透明效果柔和

### ✅ 交互体验
- [ ] Switch切换流畅
- [ ] Toast提示及时准确
- [ ] 点击反馈明确
- [ ] 状态变化立即可见
- [ ] 统计数字准确

## 常见问题排查

### 问题1：开关点击无反应
- **检查**：浏览器控制台是否有错误
- **解决**：刷新页面重试

### 问题2：Toast提示不显示
- **检查**：Toaster组件是否正常加载
- **解决**：确认App.tsx中已引入<Toaster />

### 问题3：视觉样式错误
- **检查**：CSS类名是否正确
- **解决**：清除浏览器缓存后刷新

### 问题4：统计数字不更新
- **检查**：状态是否正确更新
- **解决**：检查notificationChannels状态

## 快速验证命令

打开浏览器控制台，输入以下命令查看状态：
```javascript
// 查看React组件树中的notificationChannels状态
// （需要React DevTools扩展）
```

## 测试结果记录

| 测试项 | 状态 | 备注 |
|--------|------|------|
| 开关功能 | ⬜ | |
| 视觉状态 | ⬜ | |
| Toast提示 | ⬜ | |
| 统计数字 | ⬜ | |
| 发送适配 | ⬜ | |
| 空渠道保护 | ⬜ | |
| 通知记录 | ⬜ | |

## 测试时间
- 预计用时：10-15分钟
- 测试环境：Chrome浏览器（推荐）

## 反馈
如发现问题，请记录：
1. 问题描述
2. 复现步骤
3. 预期结果
4. 实际结果
5. 截图（如有）
