happy-life-star/docs/superpowers/plans/2026-07-19-chat-view-loading-fix.md

心愿实现 chat 视图 Loading 标识修复实施计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 修复 ScriptView chat 视图在等待后端 SSE 响应期间 loading 立即消失导致页面空白的问题。

Architecture: 新增 computed showChatLoading，基于 generationPhase === 'generating' + generationStatus !== 'failed' + resultMessages 最后一条消息 role === 'user' 三个条件判断是否显示 loading。替换原 v-if="generating && generationStatus !== 'failed'"。

Tech Stack: UniApp Vue 3 <script setup> + mp-weixin 编译

---

Task 1: 新增 computed showChatLoading 并替换 v-if

Files:

• Modify: mini-program/src/pages/main/ScriptView.vue

  • 新增 computed showChatLoading（在 generationCopy 附近，约 line 942）
  • 替换 line 177 的 v-if 条件

• Step 1: 新增 computed showChatLoading

打开 mini-program/src/pages/main/ScriptView.vue，在 line 942（generationCopy computed 之后）新增：

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'
})

• Step 2: 替换 line 177 的 v-if 条件

定位到 line 177：

<view v-if="generating && generationStatus !== 'failed'" class="chat-loading">

改为：

<view v-if="showChatLoading" class="chat-loading">

• Step 3: 提交

git add mini-program/src/pages/main/ScriptView.vue
git commit -m "fix: chat 视图 loading 在等待首个 assistant 响应期间持续显示"

---

Task 2: H5 浏览器验证

Files:

• Test: http://localhost:5180 (H5 开发服务器，端口 5180 由 dev-services.py 管理)

• Step 1: 确认 H5 开发服务器运行中

python dev-services.py status

Expected: mini-program 服务在端口 5180 上运行。如未运行，执行：

python dev-services.py start mini-program

• Step 2: 浏览器打开页面并进入 chat 视图

1. 用浏览器打开 http://localhost:5180
2. 确认已登录（如未登录，使用手机号验证码 123456 登录）
3. 点击底部导航「爽文生成」
4. 在输入框输入内容（或点击灵感推荐），点击「发送」

• Step 3: 验证 loading 立即显示

发送后立即观察 chat 视图：

• ✅ 用户消息气泡出现后，下方立刻显示 loading 动画（loading-orbit + loading-copy 文本，如 "正在把你的心愿写成故事"）

• ✅ loading 不是空白，也不是瞬间消失

• ✅ 浏览器 Network 面板能看到 SSE 请求正在进行

• Step 4: 验证 loading 在收到首个 assistant 响应后隐藏

等待 SSE 响应（通常 3-10 秒）：

• ✅ 收到 clarification_card 后，澄清卡片出现，loading 自动隐藏

• ✅ 或直接收到 outline_created 后，大纲出现，loading 自动隐藏

• ✅ 或直接收到 novel_start 后，小说内容开始流式出现，loading 自动隐藏

• Step 5: 验证澄清回答后 loading 重新显示

如果出现澄清卡片：

1. 选择一个选项，点击「提交」
2. ✅ 用户回答作为消息追加后，loading 立即重新显示
3. ✅ 等待下一个 assistant 响应（outline_created / novel_start）
4. ✅ 响应到达后，loading 自动隐藏

• Step 6: 检查浏览器 Console 无报错

打开浏览器 DevTools → Console 面板，确认：

• ✅ 无新增红色 ERROR（uni.getRecorderManager not supported 是 H5 环境预期内的 warning，可忽略）

• Step 7: 验证失败状态不显示 loading

如果生成失败（网络异常或后端错误）：

• ✅ loading 不显示
• ✅ 显示「继续创作」按钮（resume 按钮）

---

Task 3: mp-weixin 编译验证

Files:

• Build: mini-program/unpackage/dist/build/mp-weixin/

• Step 1: 执行 mp-weixin 编译

cd mini-program
npm run build:mp-weixin

Expected: 编译成功，无 error 输出。编译产物在 unpackage/dist/build/mp-weixin/。

• Step 2: 验证编译产物

grep "showChatLoading" mini-program/unpackage/dist/build/mp-weixin/pages/main/ScriptView.wxml

Expected: 编译产物中 .chat-loading 的 v-if 使用了 showChatLoading（或编译后的等效表达式），不再使用原来的 generating && generationStatus !== 'failed'。

• Step 3: 提交（如有微调）

如有需要，执行：

git add mini-program/src/pages/main/ScriptView.vue
git commit -m "style: mp-weixin 编译产物验证通过"

---

Task 4: 通知用户在微信开发者工具中验证

• Step 1: 提示用户操作

告知用户：

mp-weixin 编译产物已更新（mini-program/unpackage/dist/build/mp-weixin/）。请在微信开发者工具中：

1. 打开 unpackage/dist/build/mp-weixin 目录
2. 点击「编译」按钮重新编译
3. 进入心愿实现页面，发送一条消息
4. 观察等待 SSE 响应期间是否有 loading 动画持续显示（loading-orbit 动画 + "正在把你的心愿写成故事" 等文案）
5. 等待澄清卡片 / 大纲 / 小说内容出现后，确认 loading 自动隐藏
6. 如有澄清问题流程，回答后确认 loading 重新显示直到下一个响应到达

如有问题，截图反馈。