docs：ScriptView 统一对话页改造实现计划

6 个任务：扩展消息模型、handleShortNovelEvent 改对话流、 runGeneration+交互函数改造、统一 chat 视图模板、 sendChat 接口切换、端到端浏览器验证
2026-07-19 14:55:27 +08:00
parent b2df7d4de0
commit 25d8a9f8f2
1 changed files with 874 additions and 0 deletions
@@ -0,0 +1,874 @@
+# ScriptView 统一对话页改造实现计划
+
+> **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 心愿实现页的澄清/大纲/小说生成从独立视图切换改为统一对话流，用户提交心愿后始终停留在同一对话页面
+
+**Architecture:** viewState 简化为 home+chat；扩展 resultMessages 消息模型支持 kind: text/card/outline/novel + 交互态字段；handleShortNovelEvent 把 SSE 事件转为对话消息追加；卡片/大纲消息内嵌交互按钮，用户操作后转 user 消息并调 followupStream；novel_done 后底部输入栏按 generationPhase 切换到旧接口 streamScriptChat 做自由对话修改
+
+**Tech Stack:** UniApp + Vue 3 Composition API（`<script setup>`），shortNovel.js（新接口 SSE），scriptChat.js（旧接口流式对话），H5 热加载验证
+
+---
+
+## 文件结构
+
+### 修改文件
+- `mini-program/src/pages/main/ScriptView.vue` — 核心改造文件（约 3300 行）
+  - 扩展 `addResultMessage` 消息模型
+  - 新增 `generationPhase` 状态
+  - 改造 `handleShortNovelEvent` 为对话流追加消息
+  - 改造 `runGeneration`/`submitClarification`/`confirmOutline`/`modifyOutline`/`resumeSession` 操作对话消息
+  - 改造 `sendChat` 按 generationPhase 切换接口
+  - 新增统一 chat 视图模板，删除 clarifying/outlining/novel-generating 独立视图
+
+### 不变文件
+- `mini-program/src/components/ClarificationCard.vue` — 复用，由父组件控制 submitted 态
+- `mini-program/src/services/shortNovel.js` — 新接口不变
+- `mini-program/src/services/scriptChat.js` — 旧接口不变
+
+### 验证方式
+本项目无前端单元测试框架，采用 **H5 热加载 + Playwright 浏览器验证**。每个任务结束后在浏览器确认页面行为。
+
+---
+
+## Task 1: 扩展消息模型 + 新增 generationPhase 状态
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`（addResultMessage 函数约 1283 行，新增 generationPhase ref 约 350 行附近）
+
+- [ ] **Step 1: 扩展 addResultMessage 支持 card/outline/交互态字段**
+
+找到 `addResultMessage` 函数（约 1283 行），当前实现：
+
+```javascript
+const addResultMessage = ({ role, content, pending = false, kind = '' }) => {
+  const message = {
+    id: createMessageId(),
+    role,
+    kind,
+    content,
+    pending,
+    time: formatMessageTime()
+  }
+  resultMessages.value.push(message)
+  if (!pending) persistResultMessages()
+  keepResultAtBottom()
+  return message
+}
+```
+
+替换为（新增 card/outline/submitted/confirmed/failed/answer/feedback 字段）：
+
+```javascript
+const addResultMessage = ({ role, content, pending = false, kind = 'text', card = null, outline = null, answer = '', feedback = '', failed = false }) => {
+  const message = {
+    id: createMessageId(),
+    role,
+    kind,
+    content,
+    pending,
+    time: formatMessageTime(),
+    card,
+    outline,
+    answer,
+    feedback,
+    failed,
+    submitted: false,
+    confirmed: false
+  }
+  resultMessages.value.push(message)
+  if (!pending) persistResultMessages()
+  keepResultAtBottom()
+  return message
+}
+```
+
+- [ ] **Step 2: 新增 generationPhase ref**
+
+找到 `const resumeableSessionId = ref('')`（约 350 行），在其后新增一行：
+
+```javascript
+const resumeableSessionId = ref('')
+const generationPhase = ref('idle')
+```
+
+`generationPhase` 取值：`'idle'`（未开始）/`'generating'`（生成流程中，用新接口）/`'done'`（novel_done 后，用旧接口）。
+
+- [ ] **Step 3: 验证热加载无编译错误**
+
+H5 服务在后台运行（端口 5180），保存文件后 Vite 自动热加载。打开浏览器 http://localhost:5180 确认页面无白屏、Console 无语法错误。
+
+- [ ] **Step 4: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "refactor(mini-program): 扩展 addResultMessage 消息模型 + 新增 generationPhase"
+```
+
+---
+
+## Task 2: 改造 handleShortNovelEvent 为对话流追加消息
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`（handleShortNovelEvent 函数约 1682 行）
+
+- [ ] **Step 1: 改造 handleShortNovelEvent**
+
+找到 `handleShortNovelEvent` 函数（约 1682 行），当前实现是切换 viewState。替换为往 resultMessages 追加消息：
+
+```javascript
+const handleShortNovelEvent = (event) => {
+  const { type, session_id, payload = {} } = event
+  if (session_id) novelSessionId.value = session_id
+
+  switch (type) {
+    case 'status':
+      // 仅更新加载提示，不追加独立消息
+      generationStatus.value = payload.stage || 'processing'
+      break
+    case 'clarification_card':
+      addResultMessage({ role: 'assistant', kind: 'card', card: payload.card || null })
+      generationStatus.value = 'idle'
+      break
+    case 'outline_created':
+      addResultMessage({ role: 'assistant', kind: 'outline', outline: payload.outline || null })
+      generationStatus.value = 'idle'
+      break
+    case 'novel_start':
+      addResultMessage({ role: 'assistant', kind: 'novel', content: '', pending: true })
+      generationStatus.value = 'streaming'
+      break
+    case 'novel_delta': {
+      // 往最后一条 novel 消息追加 delta
+      const lastNovel = [...resultMessages.value].reverse().find(m => m.kind === 'novel' && m.pending)
+      if (lastNovel) {
+        lastNovel.content += payload.delta || ''
+      }
+      keepResultAtBottom()
+      break
+    }
+    case 'novel_done': {
+      // 标记最后一条 novel 消息完成
+      const lastNovel = [...resultMessages.value].reverse().find(m => m.kind === 'novel')
+      if (lastNovel) {
+        if (payload.full_text) lastNovel.content = payload.full_text
+        lastNovel.pending = false
+      }
+      scriptId.value = payload.scriptId || ''
+      conversationId.value = payload.conversationId || ''
+      currentVersionMessageId.value = payload.currentVersionMessageId || ''
+      generationPhase.value = 'done'
+      generationStatus.value = 'idle'
+      persistResultMessages()
+      break
+    }
+    case 'error':
+      if (payload.code === 'DAILY_GENERATION_IN_PROGRESS' && session_id) {
+        resumeableSessionId.value = session_id
+        markGenerationFailed(payload.message || '今天已有未完成的创作，可点击继续创作恢复')
+      } else {
+        markGenerationFailed(payload.message || '生成失败')
+        addResultMessage({ role: 'assistant', kind: 'text', content: payload.message || '生成失败', failed: true })
+      }
+      break
+  }
+}
+```
+
+关键变化：
+- 不再切换 `viewState`（始终保持 `chat`）
+- `clarification_card` → 追加 kind:'card' 消息
+- `outline_created` → 追加 kind:'outline' 消息
+- `novel_start` → 追加 pending 的 kind:'novel' 消息
+- `novel_delta` → 往最后一条 pending novel 消息追加文本
+- `novel_done` → 标记 novel 消息完成，设置 `generationPhase='done'`
+
+- [ ] **Step 2: 验证热加载无错误**
+
+保存后浏览器确认无 Console 错误（此时 UI 还未改造，但逻辑应无语法错误）。
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "refactor(mini-program): handleShortNovelEvent 改为对话流追加消息"
+```
+
+---
+
+## Task 3: 改造 runGeneration 和交互函数
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`（runGeneration 约 1626 行，submitClarification/confirmOutline/modifyOutline/resumeSession 约 1727 行）
+
+- [ ] **Step 1: 改造 runGeneration 进入 chat 视图并追加用户消息**
+
+找到 `runGeneration` 函数（约 1626 行）。当前在函数中段设置 `viewState.value = 'generating'` 和 `generationDisplayText.value = display`。
+
+把 `viewState.value = 'generating'` 改为 `viewState.value = 'chat'`，并在 `generationDisplayText.value = display` 后新增追加用户消息的逻辑：
+
+找到这一段：
+```javascript
+  streamWriter.reset()
+  startGenerationFeedback()
+  ttsPlayer.reset()
+  viewState.value = 'generating'
+  keepGenerationAtBottom()
+```
+
+替换为：
+```javascript
+  streamWriter.reset()
+  startGenerationFeedback()
+  ttsPlayer.reset()
+  viewState.value = 'chat'
+  generationPhase.value = 'generating'
+  resultMessages.value = []
+  addResultMessage({ role: 'user', kind: 'text', content: display })
+  keepResultAtBottom()
+```
+
+说明：进入 chat 视图，清空旧消息，把用户心愿作为第一条 user 消息追加。
+
+- [ ] **Step 2: 改造 submitClarification 接收消息对象**
+
+找到 `submitClarification` 函数（约 1727 行），当前签名 `const submitClarification = (answer) =>`。替换为接收消息对象 + answer：
+
+```javascript
+const submitClarification = (msg, answer) => {
+  if (answeringClarification.value) return
+  if (msg) {
+    msg.submitted = true
+    msg.answer = answer
+  }
+  addResultMessage({ role: 'user', kind: 'text', content: answer })
+  answeringClarification.value = true
+  currentStreamTask.value = followupStream({
+    sessionId: novelSessionId.value,
+    action: 'answer_clarification',
+    payload: { answer },
+    onEvent: handleShortNovelEvent,
+    onError: (msg) => markGenerationFailed(msg)
+  })
+  setTimeout(() => { answeringClarification.value = false }, 200)
+}
+```
+
+- [ ] **Step 3: 改造 confirmOutline 接收消息对象**
+
+找到 `confirmOutline` 函数（约 1740 行），替换为：
+
+```javascript
+const confirmOutline = (msg) => {
+  if (msg) msg.confirmed = true
+  addResultMessage({ role: 'user', kind: 'text', content: '确认大纲' })
+  currentStreamTask.value = followupStream({
+    sessionId: novelSessionId.value,
+    action: 'confirm_outline',
+    payload: null,
+    onEvent: handleShortNovelEvent,
+    onError: (msg) => markGenerationFailed(msg)
+  })
+}
+```
+
+- [ ] **Step 4: 改造 modifyOutline 接收消息对象**
+
+找到 `modifyOutline` 函数（约 1750 行），替换为：
+
+```javascript
+const modifyOutline = (msg) => {
+  const feedback = msg?.feedback || ''
+  if (!feedback.trim()) {
+    uni.showToast({ title: '请先填写修改意见', icon: 'none' })
+    return
+  }
+  if (msg) msg.confirmed = true
+  addResultMessage({ role: 'user', kind: 'text', content: feedback })
+  currentStreamTask.value = followupStream({
+    sessionId: novelSessionId.value,
+    action: 'modify_outline',
+    payload: { feedback },
+    onEvent: handleShortNovelEvent,
+    onError: (msg) => markGenerationFailed(msg)
+  })
+}
+```
+
+- [ ] **Step 5: 改造 resumeSession 在对话流内恢复**
+
+找到 `resumeSession` 函数（约 1761 行），替换为：
+
+```javascript
+const resumeSession = () => {
+  if (!resumeableSessionId.value || generating.value) return
+  novelSessionId.value = resumeableSessionId.value
+  resumeableSessionId.value = ''
+  generating.value = true
+  generationPhase.value = 'generating'
+  generationStatus.value = 'waiting'
+  generationError.value = ''
+  addResultMessage({ role: 'user', kind: 'text', content: '继续之前的创作' })
+  streamWriter.reset()
+  startGenerationFeedback()
+  keepResultAtBottom()
+
+  try {
+    currentStreamTask.value = followupStream({
+      sessionId: novelSessionId.value,
+      action: 'retry',
+      payload: null,
+      onEvent: handleShortNovelEvent,
+      onError: (msg) => {
+        markGenerationFailed(msg)
+        analytics.track('script_generate_fail', {
+          source: 'resume',
+          error: msg
+        }, { eventType: 'script', pagePath })
+      }
+    })
+  } catch (error) {
+    markGenerationFailed(error.message || '恢复失败')
+  } finally {
+    generating.value = false
+  }
+}
+```
+
+关键变化：不再切换 viewState（保持 chat），改为追加 user 消息"继续之前的创作"。
+
+- [ ] **Step 6: 验证热加载无错误**
+
+保存后浏览器确认无 Console 错误。
+
+- [ ] **Step 7: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "refactor(mini-program): runGeneration+交互函数改为操作对话消息"
+```
+
+---
+
+## Task 4: 新增统一 chat 视图模板 + 删除旧独立视图
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`（template 部分，约 89-183 行的 clarifying/outlining 块 + 139-183 的 generating 块 + 185-302 的 result 块）
+
+- [ ] **Step 1: 删除 clarifying 和 outlining 独立视图块**
+
+找到 `clarifying` 视图块（约 89 行 `<view v-else-if="viewState === 'clarifying'"` 到 102 行 `</view>`）和 `outlining` 视图块（约 104 行 `<view v-else-if="viewState === 'outlining'"` 到 137 行 `</view>`），**整块删除**。
+
+删除这两个块后，template 里不再有 viewState==='clarifying' 和 'outlining' 的分支。
+
+- [ ] **Step 2: 改造 generating 视图为 chat 视图**
+
+找到 generating 视图块（约 139 行 `<view v-else-if="viewState === 'generating"`，但由于 Step 1 删除了前面两个块，行号会前移）。把整个 generating 块替换为统一 chat 视图：
+
+把 `<view v-else-if="viewState === 'generating'" class="generation-view">` 整块（到对应的 `</view>` 结束）替换为：
+
+```vue
+    <view v-else-if="viewState === 'chat'" class="chat-page">
+      <view class="chat-top-actions">
+        <view class="history-button" @click="openScriptLibrary">
+          <view class="history-lines">
+            <view></view>
+            <view></view>
+            <view></view>
+          </view>
+          <text>历史</text>
+        </view>
+        <button class="page-close-btn" @click="closeResult">×</button>
+      </view>
+
+      <scroll-view
+        class="chat-scroll"
+        scroll-y
+        :scroll-top="resultCommandScrollTop"
+        :scroll-into-view="resultScrollTarget"
+        :scroll-with-animation="true"
+        :enhanced="true"
+        :show-scrollbar="false"
+        @scroll="handleResultScroll"
+      >
+        <view class="chat-scroll-content">
+          <view id="result-scroll-top" class="result-scroll-top"></view>
+
+          <view class="conversation compact">
+            <view
+              v-for="msg in resultMessages"
+              :key="msg.id"
+            >
+              <!-- user text -->
+              <view v-if="msg.role === 'user' && msg.kind === 'text'" class="chat-bubble user">
+                <text>{{ msg.content }}</text>
+                <text class="bubble-time">{{ msg.time }}</text>
+              </view>
+
+              <!-- assistant card -->
+              <view v-else-if="msg.kind === 'card'" class="chat-bubble system">
+                <ClarificationCard
+                  v-if="!msg.submitted && msg.card"
+                  :card="msg.card"
+                  @submit="(answer) => submitClarification(msg, answer)"
+                />
+                <view v-else class="card-answered">
+                  <text>已回答：{{ msg.answer }}</text>
+                </view>
+              </view>
+
+              <!-- assistant outline -->
+              <view v-else-if="msg.kind === 'outline'" class="chat-bubble system">
+                <view v-if="msg.outline">
+                  <view v-if="msg.outline.title" class="outline-title">
+                    <text>{{ msg.outline.title }}</text>
+                  </view>
+                  <view v-if="msg.outline.logline" class="outline-logline">
+                    <text>{{ msg.outline.logline }}</text>
+                  </view>
+                  <view v-if="Array.isArray(msg.outline.beats)" class="outline-beats">
+                    <view v-for="(beat, idx) in msg.outline.beats" :key="idx" class="beat-item">
+                      <text class="beat-order">{{ beat.order || idx + 1 }}</text>
+                      <view class="beat-content">
+                        <text class="beat-title">{{ beat.title || '' }}</text>
+                        <text v-if="beat.summary" class="beat-summary">{{ beat.summary }}</text>
+                      </view>
+                    </view>
+                  </view>
+                  <view v-if="msg.outline.ending" class="outline-ending">
+                    <text class="ending-label">结局</text>
+                    <text class="ending-text">{{ msg.outline.ending }}</text>
+                  </view>
+                </view>
+                <view v-if="!msg.confirmed" class="outline-actions">
+                  <input v-model="msg.feedback" placeholder="如需修改请输入意见" class="outline-feedback" />
+                  <view class="outline-buttons">
+                    <view class="btn-secondary" @click="modifyOutline(msg)">修改大纲</view>
+                    <view class="btn-primary" @click="confirmOutline(msg)">确认大纲</view>
+                  </view>
+                </view>
+              </view>
+
+              <!-- assistant novel -->
+              <view v-else-if="msg.kind === 'novel'" class="chat-bubble system">
+                <text class="novel-text">{{ msg.content }}<text v-if="msg.pending" class="typing-cursor">|</text></text>
+              </view>
+
+              <!-- assistant text (status/error) -->
+              <view v-else class="chat-bubble system">
+                <text :class="{ 'generation-error': msg.failed }">{{ msg.content }}</text>
+                <text class="bubble-time">{{ msg.time }}</text>
+              </view>
+            </view>
+
+            <!-- 底部 loading -->
+            <view v-if="generating && generationStatus !== 'failed'" 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>
+
+            <!-- 失败继续创作入口 -->
+            <view v-if="generationStatus === 'failed' && resumeableSessionId" class="resume-action">
+              <button class="generation-action primary" @click="resumeSession">继续创作</button>
+            </view>
+
+            <view :id="resultScrollAnchor" class="result-scroll-anchor"></view>
+          </view>
+        </view>
+      </scroll-view>
+
+      <!-- 底部输入栏：novel_done 后启用 -->
+      <view v-if="generationPhase === 'done'" class="chat-input-bar">
+        <view class="result-input-shell">
+          <textarea
+            class="result-chat-input"
+            v-model="chatInput"
+            :auto-height="true"
+            :show-confirm-bar="false"
+            maxlength="500"
+            confirm-type="send"
+            placeholder="输入修改建议，或让 AI 继续生成"
+            @confirm="sendChat"
+          />
+        </view>
+        <view class="chat-send-btn" :class="{ disabled: !chatInput.trim() || generating }" @click="sendChat">发送</view>
+      </view>
+    </view>
+```
+
+- [ ] **Step 3: 删除独立的 result 视图块**
+
+找到原 result 视图块（`<view v-else class="result-page">`，约 185 行到 302 行）。由于 chat 视图已包含所有对话功能，**整块删除**原 result-page 块。
+
+删除后 template 的 v-if/v-else-if 链为：`home` → `chat`。
+
+- [ ] **Step 4: 新增 chat 视图相关样式**
+
+在 `<style scoped>` 部分末尾添加 chat 视图样式（复用现有 result/generation 样式，新增缺失部分）：
+
+```scss
+.chat-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #13091f;
+}
+
+.chat-top-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 32rpx;
+}
+
+.chat-scroll {
+  flex: 1;
+  height: calc(100vh - 180rpx);
+}
+
+.chat-scroll-content {
+  padding: 0 24rpx 40rpx;
+}
+
+.card-answered {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 26rpx;
+  padding: 16rpx 0;
+}
+
+.outline-title {
+  color: #ffffff;
+  font-size: 40rpx;
+  font-weight: 700;
+  margin-bottom: 16rpx;
+}
+
+.outline-logline {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 28rpx;
+  line-height: 1.6;
+  margin-bottom: 24rpx;
+}
+
+.outline-beats {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  margin-bottom: 24rpx;
+}
+
+.beat-item {
+  display: flex;
+  gap: 20rpx;
+  align-items: flex-start;
+}
+
+.beat-order {
+  flex-shrink: 0;
+  width: 56rpx;
+  height: 56rpx;
+  background: #087e8b;
+  border-radius: 50%;
+  color: #ffffff;
+  font-size: 28rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.beat-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.beat-title {
+  color: #ffffff;
+  font-size: 28rpx;
+  font-weight: 600;
+}
+
+.beat-summary {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 26rpx;
+  margin-top: 8rpx;
+  line-height: 1.5;
+}
+
+.outline-ending {
+  margin-top: 24rpx;
+  padding-top: 24rpx;
+  border-top: 2rpx solid rgba(255, 255, 255, 0.1);
+}
+
+.ending-label {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 24rpx;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.ending-text {
+  color: #ffffff;
+  font-size: 28rpx;
+  line-height: 1.6;
+}
+
+.outline-actions {
+  margin-top: 24rpx;
+}
+
+.outline-feedback {
+  width: 100%;
+  padding: 20rpx;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 12rpx;
+  color: #ffffff;
+  font-size: 28rpx;
+  margin-bottom: 16rpx;
+  box-sizing: border-box;
+}
+
+.outline-buttons {
+  display: flex;
+  gap: 16rpx;
+  justify-content: flex-end;
+}
+
+.novel-text {
+  color: #ffffff;
+  font-size: 28rpx;
+  line-height: 1.8;
+  white-space: pre-wrap;
+}
+
+.typing-cursor {
+  color: #087e8b;
+  animation: blink 900ms steps(1) infinite;
+}
+
+.chat-loading {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 24rpx 0;
+}
+
+.resume-action {
+  padding: 24rpx 0;
+  display: flex;
+  justify-content: center;
+}
+
+.chat-input-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 16rpx;
+  padding: 16rpx 24rpx;
+  background: rgba(255, 255, 255, 0.04);
+  border-top: 2rpx solid rgba(255, 255, 255, 0.1);
+}
+
+.result-input-shell {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 12rpx;
+  padding: 8rpx 16rpx;
+}
+
+.result-chat-input {
+  width: 100%;
+  min-height: 60rpx;
+  padding: 12rpx 0;
+  color: #ffffff;
+  font-size: 28rpx;
+}
+
+.chat-send-btn {
+  padding: 16rpx 32rpx;
+  background: #087e8b;
+  border-radius: 32rpx;
+  color: #ffffff;
+  font-size: 28rpx;
+}
+
+.chat-send-btn.disabled {
+  opacity: 0.5;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+```
+
+- [ ] **Step 5: 验证热加载渲染**
+
+保存后浏览器打开 http://localhost:5180，进入心愿页输入心愿发送，确认：
+- 页面进入 chat 视图（对话页）
+- 用户心愿作为气泡显示
+- 澄清卡片作为 AI 消息出现在对话流
+- Console 无错误
+
+- [ ] **Step 6: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "feat(mini-program): 统一 chat 视图，删除 clarifying/outlining/result 独立视图"
+```
+
+---
+
+## Task 5: 改造 sendChat 按 generationPhase 切换接口
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`（sendChat 函数约 701 行）
+
+- [ ] **Step 1: 改造 sendChat 根据 generationPhase 切换接口**
+
+找到 `sendChat` 函数（约 701 行）。当前实现用旧接口 `streamScriptChat` + `createMessage`。
+
+在函数开头插入 generationPhase 判断：如果是 `'generating'`（生成流程中，理论上 novel_done 前底部输入栏不显示，但防御性处理），直接 return；如果是 `'done'`，走原有旧接口逻辑。
+
+把 `sendChat` 函数替换为：
+
+```javascript
+const sendChat = async () => {
+  if (!chatInput.value.trim() || generating.value) return
+  const content = chatInput.value.trim()
+  chatInput.value = ''
+
+  // novel_done 前底部输入栏不显示，此处只处理 done 态的后续对话
+  if (generationPhase.value !== 'done') return
+
+  const messageId = currentVersionMessageId.value
+
+  const userMessageRes = await createMessage({
+    conversationId: conversationId.value,
+    userId: getCurrentUserId(),
+    content,
+    senderType: 'user',
+    contentType: 'chat'
+  })
+  const userMessageId = userMessageRes.data?.id
+
+  resultMessages.value.push({
+    id: userMessageId || createMessageId(),
+    role: 'user',
+    kind: 'text',
+    content,
+    pending: false,
+    time: formatMessageTime(),
+    submitted: false,
+    confirmed: false
+  })
+  keepResultAtBottom()
+
+  generating.value = true
+  generationStatus.value = 'streaming'
+  await streamScriptChat({
+    operationType: 'chat',
+    conversationId: conversationId.value,
+    messageId,
+    userMessageId,
+    content,
+    scriptId: scriptId.value,
+    onDelta: (delta) => {
+      // 往最后一条 AI 消息追加（如有）
+      const lastAssistant = [...resultMessages.value].reverse().find(m => m.role === 'assistant' && m.kind === 'novel')
+      if (lastAssistant) {
+        lastAssistant.content += delta
+      }
+    },
+    onDone: () => {
+      generating.value = false
+      generationStatus.value = 'idle'
+      // 重新加载持久化消息以获取最新版本
+      loadMessages()
+    },
+    onError: (error) => {
+      generating.value = false
+      generationStatus.value = 'idle'
+      uni.showToast({ title: error || '生成失败', icon: 'none' })
+    }
+  })
+}
+```
+
+关键变化：
+- 只在 `generationPhase === 'done'` 时处理（底部输入栏此时才显示）
+- 用户消息追加到 `resultMessages`（统一对话流）
+- `onDelta` 往最后一条 AI 消息追加文本
+
+- [ ] **Step 2: 验证热加载无错误**
+
+保存后浏览器确认无 Console 错误。
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "feat(mini-program): sendChat 按 generationPhase 切换接口，消息进统一对话流"
+```
+
+---
+
+## Task 6: 端到端浏览器验证
+
+**Files:**
+- 无代码改动，纯浏览器验证
+
+- [ ] **Step 1: 确认 H5 服务运行**
+
+Run: `python dev-services.py status`
+Expected: mini-program 端口 5180 运行中
+
+若未运行，启动：`cd mini-program && npm run dev:h5 -- --host 127.0.0.1 --port 5180`（后台运行）
+
+- [ ] **Step 2: Playwright 验证完整对话流程**
+
+使用 Playwright MCP 打开 http://localhost:5180：
+
+1. 登录（手机号 13800138000 + 验证码 123456）
+2. 进入心愿页，输入"今天我想当 CEO"，发送
+3. **验证**：进入 chat 对话页，用户心愿作为气泡显示在对话流
+4. **验证**：澄清卡片作为 AI 消息出现在对话流（不在独立页面）
+5. 选择选项，提交
+6. **验证**：卡片变为"已回答"态，user 消息追加，下一轮澄清或大纲出现
+7. 若进入大纲：**验证**大纲作为 AI 消息出现（带确认/修改按钮）
+8. 确认大纲
+9. **验证**：小说流式生成作为一条 AI 消息逐字出现
+10. novel_done 后：**验证**底部输入栏出现，可输入修改建议
+
+- [ ] **Step 3: 验证继续创作（DAILY_GENERATION_IN_PROGRESS）**
+
+若触发每日限制：
+1. **验证**：对话流内显示失败提示 + "继续创作"按钮
+2. 点击"继续创作"
+3. **验证**：恢复会话，新澄清/大纲作为消息追加到对话流
+
+- [ ] **Step 4: 检查 Console 和 Network**
+
+- Console：无业务错误（`uni.getRecorderManager not supported` 平台限制可忽略）
+- Network：`/shortNovel/stream` 和 `/shortNovel/followup` 返回 SSE 事件流，无 4xx/5xx
+
+- [ ] **Step 5: 验收报告**
+
+输出验收报告：每个步骤通过/失败 + 截图证据 + 最终结论
+
+---
+
+## 验收标准
+
+- [ ] 提交心愿后进入 chat 对话页，用户心愿作为气泡显示
+- [ ] 澄清卡片作为 AI 消息出现在对话流（非独立页面）
+- [ ] 卡片提交后变"已回答"态，user 消息追加
+- [ ] 大纲作为 AI 消息出现，确认/修改后按钮消失
+- [ ] 小说流式生成作为一条 AI 消息逐字出现
+- [ ] novel_done 后底部输入栏出现，继续修改用旧接口工作
+- [ ] 失败时对话流内显示"继续创作"入口
+- [ ] 整个过程不切换视图，用户始终在同一对话页