# 🧪 Mock 数据测试指南

**测试页面**: `http://localhost:3100/universalChat`  
**更新时间**: 2026-04-10

---

## 📋 测试清单

### 1. 基础对话测试 ✅

**关键词**: `你好`

**测试功能**:
- [ ] 文本正常显示
- [ ] Emoji 表情渲染
- [ ] 流式输出（逐字显示）
- [ ] 消息滚动到底部

**预期效果**:
```
你好！我是盈科小智，很高兴为您服务！😊

请问有什么可以帮助您的？我可以回答关于招聘、报销、IT 支持等问题。
```

---

### 2. Markdown 列表测试 ✅

**关键词**: `招聘`

**测试功能**:
- [ ] 标题渲染（H1, H2, H3）
- [ ] 有序列表（1. 2. 3.）
- [ ] 无序列表（- ）
- [ ] 粗体文本（**text**）
- [ ] 引用块（> text）
- [ ] 链接渲染

**预期效果**:
- 看到多级标题
- 列表正确缩进
- 粗体文字加粗显示
- 引用块有左侧边框

---

### 3. Markdown 表格测试 ✅

**关键词**: `报销`

**测试功能**:
- [ ] 表格渲染
- [ ] 表头样式
- [ ] 单元格对齐
- [ ] 列表和表格混排

**预期效果**:
```
| 费用类型 | 标准 | 备注 |
|---------|------|------|
| 交通费 | 实报实销 | 需提供发票 |
| 住宿费 | ≤500 元/天 | 一线城市可放宽 |
```

---

### 4. 代码高亮测试 ✅

**关键词**: `代码`

**测试功能**:
- [ ] 代码块渲染
- [ ] Python 语法高亮
- [ ] JavaScript 语法高亮
- [ ] 行内代码（`code`）
- [ ] 代码注释显示

**预期效果**:
- 代码块有背景色
- 关键字显示不同颜色
- 字符串、注释等正确高亮

---

### 5. LaTeX 公式测试 ✅

**关键词**: `公式`

**测试功能**:
- [ ] 行内公式（$E=mc^2$）
- [ ] 块级公式（居中显示）
- [ ] 分式渲染
- [ ] 根号渲染
- [ ] 求和符号
- [ ] 积分符号

**预期效果**:
- 公式正确显示，不是纯文本
- 块级公式居中
- 数学符号渲染清晰

---

### 6. 多轮对话测试 ✅

**测试步骤**:
1. 输入 `你是谁`
2. 输入 `你能做什么`

**测试功能**:
- [ ] 上下文理解
- [ ] 消息历史显示
- [ ] 滚动流畅

**预期效果**:
- 两条消息都正常显示
- 可以向上滚动查看历史

---

### 7. 长文本测试 ✅

**关键词**: `详细介绍`

**测试功能**:
- [ ] 长文本渲染
- [ ] 自动滚动
- [ ] 分页显示
- [ ] 多级标题
- [ ] 分隔线（---）

**预期效果**:
- 文本完整显示
- 滚动条正常
- 结构清晰

---

### 8. 特殊字符测试 ✅

**关键词**: `特殊字符`

**测试功能**:
- [ ] HTML 实体转义（< > &）
- [ ] Markdown 特殊格式
- [ ] 删除线（~~text~~）
- [ ] 链接和图片语法

**预期效果**:
- 特殊字符正确显示，不解析为 HTML
- 删除线显示为删除效果
- 链接可点击

---

### 9. 流式输出测试 🔥

**测试所有带流式标记的回复**

**测试功能**:
- [ ] 逐字显示效果
- [ ] 打字机动画
- [ ] 加载状态显示
- [ ] 输出完成后停止

**预期效果**:
- 文字逐个出现（类似打字效果）
- 速度适中（约 30ms/字）
- 输出完成后加载动画消失

---

### 10. 欢迎界面测试 ✅

**测试步骤**:
1. 访问页面
2. 或点击"新建对话"

**测试功能**:
- [ ] Logo 显示
- [ ] 输入框占位符
- [ ] 建议标签显示
- [ ] 功能按钮显示

**预期效果**:
- 看到"建科小智"Logo
- 输入框提示"请输入你的问题或需求"
- 看到"专业知识"、"职能管理"等建议标签

---

### 11. 新建对话测试 ✅

**测试步骤**:
1. 发送一条消息
2. 点击"新建对话"按钮

**测试功能**:
- [ ] 清空所有消息
- [ ] 回到欢迎界面
- [ ] 提示消息显示

**预期效果**:
- 消息列表清空
- 显示欢迎界面
- 提示"已清空对话，可以重新开始"

---

### 12. 切换会话测试 ✅

**测试步骤**:
1. 创建一个对话
2. 点击"新建对话"
3. 点击左侧历史对话

**测试功能**:
- [ ] 会话切换
- [ ] 消息历史恢复
- [ ] 激活状态显示

**预期效果**:
- 点击后显示对应消息
- 当前会话高亮显示

---

### 13. 删除会话测试 ✅

**测试步骤**:
1. 右键点击历史对话
2. 选择"删除"

**测试功能**:
- [ ] 确认对话框
- [ ] 删除成功
- [ ] 自动切换到其他会话

**预期效果**:
- 弹出确认对话框
- 删除后提示成功
- 如果有其他会话，自动切换

---

### 14. 消息复制测试 ✅

**测试步骤**:
1. 发送一条消息
2. 点击 AI 回复下方的复制按钮

**测试功能**:
- [ ] 复制功能
- [ ] 成功提示

**预期效果**:
- 点击后内容复制到剪贴板
- 提示"复制成功"

---

### 15. 加载状态测试 ✅

**测试步骤**:
1. 发送消息
2. 观察加载动画

**测试功能**:
- [ ] 三个跳动的小圆点
- [ ] 动画流畅
- [ ] 回复完成后消失

**预期效果**:
- 看到加载动画
- 动画平滑
- 回复出现后动画消失

---

## 🎯 测试报告模板

完成测试后，请填写以下报告：

```markdown
## 测试报告

**测试时间**: 2026-04-10
**测试人员**: [你的名字]

### 通过的测试
- [x] 基础对话
- [x] Markdown 列表
- [ ] Markdown 表格（如有问题请说明）

### 发现的问题
1. [描述问题]
   - 复现步骤：...
   - 预期结果：...
   - 实际结果：...

2. [描述问题]

### 性能指标
- 流式输出速度：适中/太快/太慢
- 页面加载时间：___ ms
- 滚动流畅度：流畅/卡顿

### 建议
1. [优化建议]
```

---

## 🔧 调试技巧

### 查看控制台日志
按 `F12` 打开开发者工具，查看：
- 是否有错误信息
- API 调用日志
- Mock 数据返回

### 网络面板
查看 Network 标签：
- 确认没有真实 API 调用
- 所有响应都来自 Mock

### 应用面板
查看 Application > Local Storage：
- 查看会话数据存储
- 清空数据重新开始

---

## 📞 问题反馈

如果测试中发现问题，请提供：
1. 测试关键词
2. 预期结果
3. 实际结果
4. 控制台错误截图
5. 浏览器版本信息

---

*测试指南生成完毕 - 祝测试顺利！*