# 🧪 ChatInterface 功能测试指南

**生成时间**: 2026-04-10 15:25  
**测试环境**: Mock 数据模式 ✅  
**测试页面**: `/chat-test`

---

## 🚀 快速开始

### 1. 访问测试页面

启动项目后，在浏览器中访问：
```
http://localhost:3100/chat-test
```

或访问主项目首页后，手动在地址栏输入 `/chat-test`

**注意**: 项目启动端口为 **3100**（根据 `vite.config.ts` 配置）

---

## ✅ 测试用例清单

### 测试用例 1: 基础对话流程 (P0)

**步骤**:
1. 打开测试页面
2. 在输入框中输入 "你好"
3. 点击发送按钮

**期望结果**:
- ✅ 用户消息显示在右侧（蓝色背景）
- ✅ AI 助手消息显示在左侧（白色背景）
- ✅ 消息自动滚动到底部
- ✅ 加载状态显示正常

---

### 测试用例 2: Markdown 渲染 (P0) 🔥

**步骤**:
1. 在输入框中输入 "请用 Markdown 格式列出 HTML 的基本标签"
2. 点击发送

**期望结果**:
- ✅ 看到格式化的标题（`# H1`, `## H2`）
- ✅ 看到无序列表（`- 项目`）
- ✅ 看到有序列表（`1. 第一项`）
- ✅ 看到引用块（`> 引用内容`）
- ✅ 看到加粗（`**粗体**`）和斜体（`*斜体*`）
- ✅ 看到链接和表格

**Mock 数据关键词**: 输入包含 "Markdown" 或 "列表"

---

### 测试用例 3: LaTeX 公式渲染 (P0) 🔥

**步骤**:
1. 在输入框中输入 "什么是质能方程"
2. 点击发送

**期望结果**:
- ✅ 看到行内公式：$E = mc^2$ 正确渲染
- ✅ 看到块级公式居中显示
- ✅ 看到分式、上下标等数学符号

**Mock 数据关键词**: 输入包含 "公式"、"方程"、"数学"

**测试示例**:
```
输入：请写出二次方程的求根公式
期望输出：
$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
```

---

### 测试用例 4: 代码高亮 (P1) 🔥

**步骤**:
1. 在输入框中输入 "写一个 Python 的 Hello World"
2. 点击发送

**期望结果**:
- ✅ 看到带语法高亮的代码块
- ✅ Python 关键字显示不同颜色（如 `print`, `def`, `class`）
- ✅ 字符串显示为绿色/橙色
- ✅ 看到代码复制按钮

**Mock 数据关键词**: 输入包含 "代码"、"Python"、"Java"、"JavaScript"

**测试示例**:
```python
def hello_world():
    print("Hello, World!")
    return True
```

---

### 测试用例 5: Mermaid 图表 (P2)

**步骤**:
1. 在输入框中输入 "画一个流程图"
2. 点击发送

**期望结果**:
- ✅ 看到渲染后的流程图
- ✅ 节点和箭头显示正确
- ✅ 点击图表可以全屏查看 SVG

**Mock 数据关键词**: 输入包含 "流程图"、"图表"

---

### 测试用例 6: 多轮对话上下文 (P1)

**步骤**:
1. 第一轮：输入 "什么是 RAG"
2. 等待 AI 回复
3. 第二轮：输入 "它有什么优点"

**期望结果**:
- ✅ 第二轮回复能理解上下文（提到 RAG）
- ✅ 对话历史正确保存
- ✅ 消息列表正确显示多轮对话

---

### 测试用例 7: 错误处理 (P1)

**步骤**:
1. 断网或模拟服务器错误
2. 发送消息

**期望结果**:
- ✅ 显示错误提示 Toast
- ✅ Loading 状态正确关闭
- ✅ 可以重新发送

---

## 📊 Mock 数据说明

当前使用 **Mock 数据模式** (`USE_MOCK = true`)，所有 API 请求都会返回预设的模拟数据。

### Mock 数据位置
- **认证相关**: `src/mock/authApi.ts`
- **知识库相关**: `src/mock/knowledgeApi.ts`
- **应用相关**: `src/mock/applicationApi.ts`
- **审核相关**: `src/mock/auditApi.ts`
- **概览相关**: `src/mock/overviewApi.ts`

### 切换到真实 API
如需切换到真实后端 API，修改：
```typescript
// src/apis/api.ts
const USE_MOCK = false; // 改为 false
```

---

## 🐛 问题排查

### 问题 1: Markdown 渲染失败
**症状**: 看到纯文本而不是格式化内容
**排查**:
1. 检查是否已安装依赖：`npm list react-markdown`
2. 检查导入路径是否正确
3. 查看浏览器控制台错误

### 问题 2: LaTeX 公式显示为纯文本
**症状**: `$E=mc^2$` 未渲染为公式
**排查**:
1. 检查 KaTeX CSS 是否加载：`katex/dist/katex.min.css`
2. 检查 `preprocessLaTeX` 函数是否正确处理
3. 查看公式语法是否正确（如 `$` 两侧不能有空格）

### 问题 3: 代码块无高亮
**症状**: 代码显示为纯文本
**排查**:
1. 检查 `rehype-highlight` 是否安装
2. 确认代码块语法正确（使用 \`\`\`language 标记）
3. 查看浏览器控制台是否有 CSS 加载错误

---

## 📝 测试报告模板

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

```markdown
## 测试报告

**测试时间**: 2026-04-10
**测试人员**: [你的名字]
**测试环境**: Chrome v120 / macOS

### 通过情况
- [x] 基础对话流程
- [x] Markdown 渲染
- [ ] LaTeX 公式渲染
- [ ] 代码高亮
- [ ] Mermaid 图表

### 发现的问题
1. [描述问题]
2. [复现步骤]

### 性能指标
- 首字响应时间：___ ms
- 页面加载时间：___ ms
```

---

## 🎯 下一步

测试通过后：
1. 将 `ChatInterface` 集成到主应用
2. 完善 SSE 流式输出
3. 迁移侧边栏等高级功能

---

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