From 979fcb5897227925316c209c9f3e713f49784937 Mon Sep 17 00:00:00 2001
From: Peanut <peanut_hzm@163.com>
Date: Mon, 20 Jul 2026 00:17:18 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=BF=83=E6=84=BF=E5=AE=9E=E7=8E=B0=20?=
 =?UTF-8?q?chat=20=E8=A7=86=E5=9B=BE=20loading=20=E6=A0=87=E8=AF=86?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AE=9E=E6=96=BD=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plans/2026-07-19-chat-view-loading-fix.md | 163 ++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-07-19-chat-view-loading-fix.md

diff --git a/docs/superpowers/plans/2026-07-19-chat-view-loading-fix.md b/docs/superpowers/plans/2026-07-19-chat-view-loading-fix.md
new file mode 100644
index 0000000..a75be36
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-19-chat-view-loading-fix.md
@@ -0,0 +1,163 @@
+# 心愿实现 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 之后）新增：
+
+```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'
+})
+```
+
+- [ ] **Step 2: 替换 line 177 的 v-if 条件**
+
+定位到 line 177：
+
+```html
+<view v-if="generating && generationStatus !== 'failed'" class="chat-loading">
+```
+
+改为：
+
+```html
+<view v-if="showChatLoading" class="chat-loading">
+```
+
+- [ ] **Step 3: 提交**
+
+```bash
+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 开发服务器运行中**
+
+```bash
+python dev-services.py status
+```
+
+Expected: `mini-program` 服务在端口 5180 上运行。如未运行，执行：
+
+```bash
+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 编译**
+
+```bash
+cd mini-program
+npm run build:mp-weixin
+```
+
+Expected: 编译成功，无 error 输出。编译产物在 `unpackage/dist/build/mp-weixin/`。
+
+- [ ] **Step 2: 验证编译产物**
+
+```bash
+grep "showChatLoading" mini-program/unpackage/dist/build/mp-weixin/pages/main/ScriptView.wxml
+```
+
+Expected: 编译产物中 `.chat-loading` 的 `v-if` 使用了 `showChatLoading`（或编译后的等效表达式），不再使用原来的 `generating && generationStatus !== 'failed'`。
+
+- [ ] **Step 3: 提交（如有微调）**
+
+如有需要，执行：
+
+```bash
+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 重新显示直到下一个响应到达
+>
+> 如有问题，截图反馈。