# 售后模块测试指南

## 🎯 功能验证清单

### 前置准备

1. **启动项目**
   ```bash
   cd yss-project
   npm run start
   ```

2. **访问项目详情页**
   - 导航到设计师工作台
   - 选择任意项目进入详情页
   - 或直接访问：`http://localhost:4200/designer/project-detail/{projectId}`

3. **切换到售后板块**
   - 点击顶部四个圆圈导航中的"售后"（第4个圆圈）
   - 或直接点击页面右侧的售后模块

---

## ✅ 模块功能测试

### 1. 💰 尾款结算模块测试

#### 测试步骤：
1. **查看自动化功能介绍**
   - ✅ 确认显示4个功能特性卡片（自动触发流程、自动解密发送、凭证智能识别、自动通知）

2. **查看结算记录**
   - ✅ 确认显示示例结算记录（定金、进度款）
   - ✅ 查看结算状态、金额、时间等信息

3. **启动自动化结算（技术人员视图）**
   - ✅ 点击"🚀 启动自动化结算"按钮
   - ✅ 系统显示权限检查提示
   - ✅ 确认弹出启动成功提示
   - ✅ 查看控制台日志确认流程执行

4. **验证自动化流程**
   - ✅ 查看控制台确认以下日志：
     - "启动自动化结算流程..."
     - "📝 已创建尾款结算记录"
     - "📢 正在通知客服跟进尾款..."
     - "✅ 客服通知已发送成功"

5. **上传支付凭证（可选）**
   - ✅ 点击"📎 上传支付凭证"按钮
   - ✅ 选择支付截图文件

#### 预期结果：
- ✅ 所有按钮可正常点击
- ✅ 权限控制正常工作
- ✅ 提示信息清晰明确
- ✅ 控制台日志完整

---

### 2. 🖼️ 全景图合成模块测试

#### 测试步骤：
1. **查看功能介绍**
   - ✅ 确认显示3个功能特性卡片（KR Panel集成、智能空间标注、自动生成链接）

2. **查看合成记录**
   - ✅ 确认显示示例全景图记录
   - ✅ 查看合成状态、空间数量等信息

3. **启动全景图合成**
   - ✅ 点击"开始合成"按钮
   - ✅ 选择多张图片文件（建议命名为"客厅-角度1.jpg"等）
   - ✅ 观察上传进度条
   - ✅ 等待合成完成提示

4. **验证合成结果**
   - ✅ 查看新增的合成记录
   - ✅ 确认显示合成进度 100%
   - ✅ 确认显示"已完成"状态
   - ✅ 查看控制台日志

5. **查看全景图库**
   - ✅ 点击"查看全景图库"按钮
   - ✅ 确认显示全景图列表

#### 预期结果：
- ✅ 文件上传流畅
- ✅ 进度显示正常
- ✅ 合成记录正确创建
- ✅ 链接已生成

---

### 3. ⭐ 客户评价模块测试

#### 测试步骤：
1. **查看评价表单**
   - ✅ 确认显示客户评价表单组件
   - ✅ 表单包含多维度评分项

2. **查看评价记录**
   - ✅ 确认显示示例评价记录
   - ✅ 显示评分、内容、时间等信息

3. **生成评价链接**
   - ✅ 点击"🔗 生成评价链接"按钮
   - ✅ 确认弹出链接已复制提示
   - ✅ 提示中包含链接和有效期信息

4. **验证链接生成**
   - ✅ 查看控制台日志
   - ✅ 确认显示评价令牌
   - ✅ 确认显示客服通知

5. **确认评价完成**
   - ✅ 点击"✅ 确认评价完成"按钮
   - ✅ 确认弹出完成提示

#### 预期结果：
- ✅ 评价链接格式正确
- ✅ 包含唯一token
- ✅ 有效期设置为30天
- ✅ 通知发送成功

---

### 4. 📋 投诉处理模块测试

#### 测试步骤：
1. **查看功能介绍**
   - ✅ 确认显示4个功能特性卡片

2. **查看投诉记录**
   - ✅ 确认显示投诉记录组件
   - ✅ 初始状态应为空或显示示例数据

3. **人工创建投诉**
   - ✅ 点击"📝 人工创建投诉"按钮
   - ✅ 在弹出的输入框中输入投诉原因
   - ✅ 输入投诉环节
   - ✅ 确认创建成功提示
   - ✅ 查看新增的投诉记录

4. **验证智能标注**
   - ✅ 查看创建的投诉记录
   - ✅ 确认显示智能标注的核心问题标签
   - ✅ 不同关键词应产生不同标签

5. **设置关键词监控**
   - ✅ 点击"⚙️ 设置关键词监测"按钮
   - ✅ 查看当前监控关键词列表
   - ✅ 添加新的监控关键词
   - ✅ 确认监控激活提示

6. **测试关键词检测**
   - ✅ 在浏览器控制台手动触发：
   ```javascript
   // 假设已在项目详情页
   // 在控制台执行
   component.onKeywordDetected('客户说不满意，要求退款', '不满意');
   ```
   - ✅ 查看自动创建的投诉记录
   - ✅ 确认严重程度评估正确
   - ✅ 确认环节识别正确

7. **确认投诉处理完成**
   - ✅ 点击"✅ 确认投诉处理完成"按钮
   - ✅ 如有未处理投诉，应弹出确认提示

#### 预期结果：
- ✅ 投诉创建成功
- ✅ 智能标注准确
- ✅ 关键词监控正常
- ✅ 自动检测工作正常

---

### 5. 📊 项目复盘模块测试

#### 测试步骤：
1. **查看复盘模块布局**
   - ✅ 确认复盘模块位于4个售后模块下方
   - ✅ 横向布局，覆盖整个宽度
   - ✅ 显示模块标题和副标题

2. **查看Tab导航**
   - ✅ 确认显示3个Tab：SOP执行数据、经验复盘、优化建议
   - ✅ 默认选中"SOP执行数据"

3. **测试SOP执行数据Tab**
   - ✅ 切换到"SOP执行数据"Tab
   - ✅ 查看4个关键指标卡片：
     - 需求沟通次数
     - 改图次数
     - 交付周期
     - 客户满意度
   - ✅ 查看各阶段执行详情时间线
   - ✅ 查看数据图表（柱状图、雷达图）

4. **测试经验复盘Tab**
   - ✅ 切换到"经验复盘"Tab
   - ✅ 查看4个经验卡片：
     - 客户需求
     - 客户顾虑
     - 投诉点
     - 项目亮点
   - ✅ 查看关键沟通记录时间线
   - ✅ 确认内容可滚动查看

5. **测试优化建议Tab**
   - ✅ 切换到"优化建议"Tab
   - ✅ 查看优化建议列表
   - ✅ 每个建议包含：
     - 优先级标识
     - 问题分析
     - 优化建议
     - 行动计划
   - ✅ 查看建议统计数据

6. **测试生成复盘报告**
   - ✅ 点击"📊 生成复盘报告"按钮
   - ✅ 观察按钮loading状态
   - ✅ 等待生成完成
   - ✅ 查看控制台日志

7. **测试导出报告**
   - ✅ 生成报告后，"📤 导出报告"按钮应显示
   - ✅ 点击导出按钮
   - ✅ 查看控制台确认导出流程

#### 预期结果：
- ✅ Tab切换流畅
- ✅ 数据展示完整
- ✅ 图表渲染正常
- ✅ 内容可滚动
- ✅ 报告生成成功

---

## 🔍 常见问题排查

### 问题1：按钮点击无反应
**排查步骤：**
1. 打开浏览器开发者工具（F12）
2. 查看Console标签页是否有错误
3. 检查Network标签页查看API请求
4. 确认Angular应用已正确编译

### 问题2：数据不显示
**排查步骤：**
1. 检查控制台是否有TypeScript错误
2. 确认`initializeAftercareData()`方法已执行
3. 在控制台执行：
   ```javascript
   // 查看组件数据
   ng.getComponent(document.querySelector('app-project-detail'))
   ```
4. 检查数据绑定是否正确

### 问题3：样式显示异常
**排查步骤：**
1. 确认SCSS文件已正确导入
2. 检查`project-detail.scss`中是否包含：
   ```scss
   @import './project-review-styles.scss';
   @import './project-review-experience-suggestions-styles.scss';
   ```
3. 清除浏览器缓存并刷新
4. 检查CSS是否被其他样式覆盖

### 问题4：权限控制异常
**排查步骤：**
1. 检查AuthService是否正确注入
2. 在控制台执行：
   ```javascript
   // 查看当前用户角色
   component.isTechnicalView()
   ```
3. 确认角色判断逻辑

---

## 📊 性能测试

### 加载性能
- ✅ 页面首次加载时间 < 3秒
- ✅ Tab切换响应时间 < 100ms
- ✅ 按钮点击响应时间 < 50ms

### 内存使用
- ✅ 正常运行内存占用 < 100MB
- ✅ 无明显内存泄漏
- ✅ 长时间运行稳定

---

## 🎨 UI/UX 测试

### 视觉检查
- ✅ 卡片间距均匀
- ✅ 文字清晰可读
- ✅ 图标显示正确
- ✅ 颜色搭配协调

### 交互检查
- ✅ 按钮hover效果
- ✅ 点击反馈明显
- ✅ Loading状态显示
- ✅ 错误提示友好

### 响应式检查
- ✅ 在1920x1080分辨率下正常显示
- ✅ 在1366x768分辨率下正常显示
- ✅ 内容可滚动查看
- ✅ 横向布局适应

---

## 📝 测试报告模板

```
测试日期：____年__月__日
测试人员：__________
浏览器：Chrome / Firefox / Edge (选择一个)
版本号：v1.0.0

测试结果：
□ 尾款结算模块 - 通过 / 失败
□ 全景图合成模块 - 通过 / 失败  
□ 客户评价模块 - 通过 / 失败
□ 投诉处理模块 - 通过 / 失败
□ 项目复盘模块 - 通过 / 失败

发现的问题：
1. ___________________________
2. ___________________________
3. ___________________________

备注：
_________________________________
```

---

## 🚀 快速验证命令

在浏览器控制台执行以下命令快速验证功能：

```javascript
// 1. 获取组件实例
const component = ng.getComponent(document.querySelector('app-project-detail'));

// 2. 查看售后数据
console.log('全景图合成记录:', component.panoramicSyntheses);
console.log('结算记录:', component.settlements);
console.log('客户反馈:', component.feedbacks);
console.log('投诉记录:', component.exceptionHistories);

// 3. 测试功能方法
component.initiateAutoSettlement(); // 启动自动结算
component.startPanoramicSynthesis(); // 启动全景图合成
component.generateReviewLink(); // 生成评价链接
component.createComplaintManually(); // 创建投诉
component.generateReviewReport(); // 生成复盘报告

// 4. 查看日志
// 所有操作都会在控制台输出详细日志
```

---

## ✅ 验收标准

### 功能完整性
- ✅ 所有5个模块可正常访问
- ✅ 所有按钮可正常点击
- ✅ 所有功能正常执行
- ✅ 数据显示完整

### 用户体验
- ✅ 界面美观专业
- ✅ 操作流程顺畅
- ✅ 提示信息清晰
- ✅ 无明显bug

### 代码质量
- ✅ 无编译错误
- ✅ 无运行时错误
- ✅ 无控制台警告
- ✅ 代码规范统一

---

**测试完成后，所有功能应能正常运行！** 🎉