110 lines
5.0 KiB
Markdown
110 lines
5.0 KiB
Markdown
---
|
||
author: AI Assistant
|
||
created_at: 2026-07-19
|
||
purpose: 修复心愿实现 chat 视图在等待接口响应期间没有 loading 标识、呈现空白等待状态的问题
|
||
---
|
||
|
||
# 心愿实现 chat 视图 Loading 标识修复设计
|
||
|
||
## 概述
|
||
|
||
心愿实现页面（`ScriptView.vue` 的 chat 视图）在用户发送消息后、等待后端 SSE 接口响应的阶段，页面处于空白状态，没有任何 loading 标识，无法判断是否卡住。需要在等待期间展示动态 loading，提升等待体验。
|
||
|
||
## 问题根因
|
||
|
||
`ScriptView.vue` 中 chat-loading 组件的显示条件（line 177）：
|
||
|
||
```html
|
||
<view v-if="generating && generationStatus !== 'failed'" class="chat-loading">
|
||
```
|
||
|
||
`runGeneration` 函数（line 1618-1672）中：
|
||
|
||
```js
|
||
generating.value = true // Line 1630
|
||
// ...
|
||
try {
|
||
currentStreamTask.value = startNovelStream({...}) // Line 1653 - 异步 fire-and-forget
|
||
} finally {
|
||
generating.value = false // Line 1671 - 立即执行！
|
||
}
|
||
```
|
||
|
||
**Bug**：`startNovelStream` 是异步流式调用（fire-and-forget，没有 await），`finally` 在流启动后**立即**把 `generating` 设回 `false`。结果：
|
||
|
||
1. 用户点发送 → `generating = true` → 切换到 chat 视图
|
||
2. 几乎同时 → `finally` 执行 → `generating = false` → chat-loading 立即隐藏
|
||
3. 在第一个 SSE 事件（`status`）到达前，页面只有用户消息气泡，下方空白
|
||
4. 用户看到"发送 → 空白等待 → 突然跳出内容"，无法判断系统是否在工作
|
||
|
||
## 修复方案
|
||
|
||
**用新的 computed `showChatLoading` 替换原有显示条件**，语义精确匹配"等待首个 assistant 响应"：
|
||
|
||
```js
|
||
const showChatLoading = computed(() => {
|
||
if (generationPhase.value !== 'generating') return false
|
||
if (generationStatus.value === 'failed') return false
|
||
const lastMsg = resultMessages.value[resultMessages.value.length - 1]
|
||
// 最后一条消息是 user（刚发送的请求），说明还没收到 assistant 响应
|
||
return lastMsg && lastMsg.role === 'user'
|
||
})
|
||
```
|
||
|
||
```html
|
||
<view v-if="showChatLoading" class="chat-loading">
|
||
<view class="loading-orbit" :class="{ streaming: generationStatus === 'streaming' }">
|
||
<view class="orbit-ring outer"></view>
|
||
<view class="orbit-ring inner"></view>
|
||
<view class="orbit-core"></view>
|
||
</view>
|
||
<text class="loading-copy">{{ generationCopy }}</text>
|
||
</view>
|
||
```
|
||
|
||
### 场景覆盖表
|
||
|
||
| 场景 | generationPhase | 最后一条消息 | loading 显示 |
|
||
|---|---|---|---|
|
||
| 用户刚发送 | 'generating' | user | ✅ 显示 |
|
||
| SSE status 事件（processing 阶段）| 'generating' | user | ✅ 显示 |
|
||
| `clarification_card` 到达 | 'generating' | assistant (card) | ❌ 隐藏 |
|
||
| 用户回答澄清问题 | 'generating' | user | ✅ 显示 |
|
||
| `outline_created` 到达 | 'generating' | assistant (outline) | ❌ 隐藏 |
|
||
| 用户提交大纲修改意见 | 'generating' | user | ✅ 显示 |
|
||
| `novel_start` 到达 | 'generating' | assistant (novel) | ❌ 隐藏 |
|
||
| `novel_done` 到达 | 'done' | assistant | ❌ 隐藏 |
|
||
|
||
### 为什么这样设计
|
||
|
||
1. **用 `generationPhase` 而非 `generating`**：`generationPhase` 在 `runGeneration` 开始时设为 'generating'，在 `novel_done` 时设为 'done'，完整覆盖生成流程生命周期。`generating` 因为 try-finally 立即重置，不可靠。
|
||
|
||
2. **用最后一条消息的 role 判断**：assistant 消息（card/outline/novel）到达后，用户看到的是交互内容而非空白，loading 应自动隐藏。通过判断最后一条消息的 role，精确实现"等待首个响应"的语义。
|
||
|
||
3. **支持多轮交互**：用户回答澄清问题、提交大纲修改后，最后一条又变回 user，loading 自动重新显示。无需额外的 flag 管理。
|
||
|
||
## 改动文件
|
||
|
||
- `mini-program/src/pages/main/ScriptView.vue`
|
||
- 新增 computed `showChatLoading`（在 `generationCopy` 附近，约 line 930-950）
|
||
- 替换 line 177 的 `v-if` 条件
|
||
|
||
## 不影响范围
|
||
|
||
- `chat-loading` 组件的样式、动画内容保持不变
|
||
- `generating` 变量的其他用途（按钮禁用、重试逻辑等）不变
|
||
- `generationStatus`、`generationPhase`、`generationCopy` 等 computed 不变
|
||
- `home` 视图、`generation` 视图、`chat-input-bar` 不受影响
|
||
- `sendChat`、`sendRewrite`、`sendChatAsContinue` 等其他流程不受影响（它们本身有 await，generating 状态正确）
|
||
|
||
## 验收标准
|
||
|
||
- [ ] H5（`http://localhost:5180`）：点击发送后，chat 视图立即显示 loading 动画（loading-orbit + generationCopy 文本）
|
||
- [ ] Loading 持续到 `clarification_card` / `outline_created` / `novel_start` 任一事件到达前
|
||
- [ ] 澄清卡片 / 大纲 / 小说消息出现后，loading 自动隐藏
|
||
- [ ] 用户回答澄清、提交大纲修改后，loading 重新显示直到下一个 assistant 响应到达
|
||
- [ ] 失败状态（`generationStatus === 'failed'`）不显示 loading，显示 resume 按钮
|
||
- [ ] 浏览器 Console 无新增错误
|
||
- [ ] mp-weixin 编译通过（`npm run build:mp-weixin` 无 error）
|
||
- [ ] 编译产物中 `.chat-loading` 的 v-if 使用 `showChatLoading`
|