205 lines
5.8 KiB
Markdown
205 lines
5.8 KiB
Markdown
# 停止生成功能 - 快速验证清单
|
||
|
||
## ✅ 补充修复完成
|
||
|
||
### 修复内容
|
||
1. ✅ 按钮文字从"确认"改为"发送"
|
||
2. ✅ 停止后消息状态正确显示"已停止"而不是"发送中..."
|
||
|
||
## 🧪 快速验证步骤
|
||
|
||
### 1. 启动应用
|
||
```bash
|
||
cd web
|
||
npm run dev
|
||
```
|
||
|
||
### 2. 测试流程
|
||
```
|
||
1. 输入消息："请详细介绍 Vue 3 的新特性"
|
||
2. 点击"发送"按钮 ← 确认按钮文字是"发送"
|
||
3. 等待 AI 开始回复（看到文字输出）
|
||
4. 立即点击"停止"按钮
|
||
5. 验证以下几点：
|
||
```
|
||
|
||
### 3. 验证检查点
|
||
|
||
#### ✅ 按钮状态
|
||
- [ ] 未输入时：按钮显示"发送"且禁用
|
||
- [ ] 输入后：按钮显示"发送"且可用
|
||
- [ ] 发送中：按钮显示"停止"且为红色
|
||
- [ ] 停止后：按钮立即变回"发送"且可用
|
||
|
||
#### ✅ 消息状态标签
|
||
- [ ] 发送中：显示蓝色"发送中..."标签
|
||
- [ ] 停止后：显示黄色"已停止"标签
|
||
- [ ] 不显示红色"发送失败"标签
|
||
|
||
#### ✅ Loading 动画
|
||
- [ ] 发送中：显示三个跳动的点 `... ... ...`
|
||
- [ ] 停止后：立即隐藏 loading 动画
|
||
- [ ] 停止后：显示已生成的文字内容
|
||
|
||
#### ✅ 操作按钮
|
||
- [ ] 停止后立即显示：复制、重新生成、删除按钮
|
||
- [ ] 所有按钮都可点击
|
||
|
||
#### ✅ 继续对话
|
||
- [ ] 停止后输入框立即可用
|
||
- [ ] 可以立即发送新消息
|
||
- [ ] 新消息正常发送和接收
|
||
|
||
## 📊 预期界面表现
|
||
|
||
### 发送中
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ AI 助手 14:53 [发送中...] │
|
||
│ ... ... ... ← loading 动画 │
|
||
│ 正在生成的文字内容... │
|
||
└─────────────────────────────────────┘
|
||
|
||
[不启用 MCP] [模型选择] [停止] ← 红色按钮
|
||
```
|
||
|
||
### 停止后（正确）
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ AI 助手 14:53 [已停止] ← 黄色 │
|
||
│ 已生成的文字内容（完整保留） │
|
||
│ [复制] [重新生成] [删除] │
|
||
└─────────────────────────────────────┘
|
||
|
||
[不启用 MCP] [模型选择] [发送] ← 蓝色按钮
|
||
```
|
||
|
||
### 如果还是错误（需要重新检查）
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ AI 助手 14:53 [发送中...] ← ❌ │
|
||
│ ... ... ... ← ❌ 还在动 │
|
||
│ 已生成的文字内容 │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
## 🔍 控制台日志验证
|
||
|
||
点击停止后，控制台应该按顺序显示：
|
||
|
||
```javascript
|
||
// 1. 用户点击停止
|
||
🛑 [handleStopGeneration] 用户请求停止生成
|
||
|
||
// 2. 流读取检测到中止
|
||
🛑 [makeChatRequestStream] 检测到中止信号，停止读取流
|
||
|
||
// 3. API 层抛出中止错误
|
||
⚠️ [makeChatRequestStream] 请求被中止: 用户中止操作
|
||
|
||
// 4. Service 层识别并设置 paused 状态
|
||
⏸️ [sendMessageStream] 用户主动停止生成，保留已生成内容
|
||
|
||
// 5. Store 层更新 UI（新增的关键日志）
|
||
⏸️ [sendMessageStream] 用户中止，更新消息状态 ← ✅ 关键
|
||
```
|
||
|
||
**如果缺少最后一条日志**，说明 catch 块没有正确执行，需要检查代码。
|
||
|
||
## 🐛 常见问题排查
|
||
|
||
### 问题：停止后仍显示"发送中..."
|
||
|
||
**可能原因 1**：浏览器缓存
|
||
```bash
|
||
# 强制刷新页面
|
||
Cmd/Ctrl + Shift + R
|
||
|
||
# 或清除缓存后刷新
|
||
```
|
||
|
||
**可能原因 2**：代码未正确编译
|
||
```bash
|
||
# 重启开发服务器
|
||
cd web
|
||
npm run dev
|
||
```
|
||
|
||
**可能原因 3**：Vue DevTools 状态检查
|
||
```javascript
|
||
// 在浏览器控制台运行
|
||
console.log(store.state.messages[store.state.messages.length - 1])
|
||
// 检查最后一条消息的 status 字段，应该是 'paused'
|
||
```
|
||
|
||
### 问题：按钮还是显示"确认"
|
||
|
||
**检查**：
|
||
1. 确认 ChatLayout.vue 已保存
|
||
2. 检查浏览器是否已刷新
|
||
3. 查看编译输出是否有错误
|
||
|
||
### 问题：点击停止无反应
|
||
|
||
**检查**：
|
||
1. 确认之前的修复都已应用
|
||
2. 查看控制台是否有 JS 错误
|
||
3. 检查 abortController 是否正确创建
|
||
|
||
## 📝 手动验证记录
|
||
|
||
测试日期：___________
|
||
测试人员：___________
|
||
|
||
| 检查项 | 结果 | 备注 |
|
||
|--------|------|------|
|
||
| 按钮文字显示"发送" | ⬜ | |
|
||
| 停止后标签变为"已停止" | ⬜ | |
|
||
| Loading 动画消失 | ⬜ | |
|
||
| 显示操作按钮 | ⬜ | |
|
||
| 可以继续对话 | ⬜ | |
|
||
| 控制台无错误 | ⬜ | |
|
||
| 多次重复测试正常 | ⬜ | |
|
||
|
||
## ✨ 验收标准
|
||
|
||
**所有以下条件必须满足：**
|
||
|
||
1. ✅ 按钮文字为"发送"（不是"确认"）
|
||
2. ✅ 停止后立即显示"已停止"标签（黄色）
|
||
3. ✅ 不显示"发送中..."标签
|
||
4. ✅ 不显示 loading 动画
|
||
5. ✅ 显示已生成的内容
|
||
6. ✅ 显示操作按钮
|
||
7. ✅ 可以立即继续对话
|
||
8. ✅ 控制台有完整的日志链
|
||
9. ✅ 无任何错误日志
|
||
|
||
## 🎯 成功标准
|
||
|
||
**如果看到以下效果，说明修复完全成功：**
|
||
|
||
```
|
||
发送消息 → AI 开始回复
|
||
↓
|
||
点击停止
|
||
↓
|
||
瞬间响应 (< 100ms)
|
||
↓
|
||
┌─────────────────────────┐
|
||
│ [已停止] ← 黄色标签 │
|
||
│ 部分生成的内容... │
|
||
│ [复制] [重新生成] [删除] │
|
||
└─────────────────────────┘
|
||
↓
|
||
按钮变为"发送"
|
||
↓
|
||
可以立即输入新消息
|
||
```
|
||
|
||
---
|
||
|
||
**如果验证通过，修复完成！** ✅
|
||
|
||
**如果验证失败，请查看 `STOP_GENERATION_PATCH.md` 进行详细排查。**
|