fix(short-novel): 同步 SSE 事件顶层 session_id 修复澄清卡片累积丢失

上游 SSE 事件中 session_id 与 type 同级（不在 payload 内），原 forwardSse 仅在 status 事件从 payload 取 session_id，
导致首次 stream 的 sessionId 为 null，后续 clarification_card 因 sessionId 为空不进入全局累积器，
详情页首次进入时少显示第一张澄清卡片。

改为在每个事件处理前从顶层 session_id 同步 currentSessionId，确保所有事件链路都能拿到正确的 sessionId。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

AGENTS.md

@@ -144,6 +144,31 @@ npm run dev:mp-weixin
 
 **开发工作流说明**：详见 [小程序开发工作流程设计](docs/superpowers/specs/2026-04-07-mini-program-dev-workflow-design.md)
 
+#### 小程序 H5 测试登录凭证（强制默认）
+
+所有小程序功能的 H5 验收必须使用以下测试账号，**禁止在测试中使用真实手机号或重复触发验证码接口**：
+
+- **手机号**：`19928748688`（固定测试账号，11 位中国大陆手机号格式）
+- **验证码**：`123456`（固定 6 位数字，生产环境短信通道返回此固定值便于测试）
+
+**登录流程**（参考 `mini-program/src/pages/login/index.vue` + `mini-program/src/services/auth.js`）：
+
+1. 浏览器访问 `http://localhost:5180`，进入登录页
+2. 在手机号输入框填写 `19928748688`
+3. 点击「获取验证码」按钮，调用 `GET /api/auth/sms-code?phone=19928748688`，后端返回 `data.code: "123456"`
+4. 在验证码输入框填写 `123456`
+5. 点击「登录」按钮，调用 `POST /api/auth/login`，后端返回 JWT
+6. Token 写入 `uni.setStorageSync('access_token', ...)`（下划线键名）
+
+**为什么固定这两个值**：
+
+- 后端短信通道在测试模式下总是返回 `123456`，避免真实短信下发和验证码频繁失效
+- `19928748688` 是项目的固定测试账号，已绑定测试数据，避免污染真实用户数据
+
+#### 小程序页面固定端口
+
+小程序 H5 固定端口 **5180**（参考 `前端端口管理规则`）
+
 ### 一键部署
 
 ```bash

CLAUDE.md

@@ -144,6 +144,31 @@ npm run dev:mp-weixin
 
 **开发工作流说明**：详见 [小程序开发工作流程设计](docs/superpowers/specs/2026-04-07-mini-program-dev-workflow-design.md)
 
+#### 小程序 H5 测试登录凭证（强制默认）
+
+所有小程序功能的 H5 验收必须使用以下测试账号，**禁止在测试中使用真实手机号或重复触发验证码接口**：
+
+- **手机号**：`19928748688`（固定测试账号，11 位中国大陆手机号格式）
+- **验证码**：`123456`（固定 6 位数字，生产环境短信通道返回此固定值便于测试）
+
+**登录流程**（参考 `mini-program/src/pages/login/index.vue` + `mini-program/src/services/auth.js`）：
+
+1. 浏览器访问 `http://localhost:5180`，进入登录页
+2. 在手机号输入框填写 `19928748688`
+3. 点击「获取验证码」按钮，调用 `GET /api/auth/sms-code?phone=19928748688`，后端返回 `data.code: "123456"`
+4. 在验证码输入框填写 `123456`
+5. 点击「登录」按钮，调用 `POST /api/auth/login`，后端返回 JWT
+6. Token 写入 `uni.setStorageSync('access_token', ...)`（下划线键名）
+
+**为什么固定这两个值**：
+
+- 后端短信通道在测试模式下总是返回 `123456`，避免真实短信下发和验证码频繁失效
+- `19928748688` 是项目的固定测试账号，已绑定测试数据，避免污染真实用户数据
+
+#### 小程序页面固定端口
+
+小程序 H5 固定端口 **5180**（参考 `前端端口管理规则`）
+
 ### 一键部署
 
 ```bash

docs/superpowers/plans/2026-07-22-stream-timeout-fix.md

@@ -0,0 +1,490 @@
+# H5 模式 Stream 超时修复实施计划
+
+> **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:** 修复小程序 H5 模式下 stream 请求 60 秒超时问题，使用 fetch + ReadableStream + AbortController 实现真正的长连接流式读取
+
+**Architecture:** 在 `mini-program/src/services/shortNovel.js` 中实现双路径策略 - H5 环境使用浏览器原生 fetch API（支持自定义超时），小程序环境保持原有 uni.request 逻辑
+
+**Tech Stack:** Vue 3 (UniApp), fetch API, ReadableStream, AbortController, TextDecoder
+
+---
+
+## 文件结构映射
+
+**修改的文件：**
+1. `mini-program/src/services/shortNovel.js` - 添加 H5 环境检测和 fetch 实现
+
+**不创建新文件** - 所有修改都是在现有文件中添加 H5 路径实现
+
+---
+
+## Task 1: 添加环境检测常量和 H5 SSE 核心函数
+
+**Files:**
+- Modify: `mini-program/src/services/shortNovel.js`
+
+- [ ] **Step 1: 在文件顶部添加环境检测常量**
+
+打开 `mini-program/src/services/shortNovel.js`，在第 1 行（import 语句之后）添加：
+
+```javascript
+// 环境检测：H5 模式下存在 window.fetch
+const isH5 = typeof window !== 'undefined' && typeof window.fetch === 'function'
+
+// SSE 请求超时时间（毫秒）
+const SSE_TIMEOUT_MS = 300000
+```
+
+- [ ] **Step 2: 添加 H5 SSE 事件解析函数**
+
+在 `decodeChunk` 函数（第 112-140 行）之后、`consumeSseText` 函数之前，添加新的 `h5ConsumeSseText` 函数：
+
+```javascript
+/**
+ * H5 环境 SSE 事件解析
+ * 解析单个 SSE 事件块
+ * 事件格式：data: {"type":"status","session_id":"xxx","payload":{...}}
+ */
+function h5ConsumeSseText(text, onEvent, onError) {
+  const lines = text.split('\n')
+  let dataBuffer = ''
+
+  for (const line of lines) {
+    if (line.startsWith('data:')) {
+      dataBuffer += line.slice(5).trim()
+    } else if (line === '' && dataBuffer) {
+      // 空行表示事件结束
+      const dataStr = dataBuffer
+      dataBuffer = ''
+      if (dataStr === '[DONE]') return
+      try {
+        const event = JSON.parse(dataStr)
+        onEvent?.(event)
+      } catch (e) {
+        onError?.(`SSE 解析失败: ${e.message}`)
+      }
+    }
+  }
+}
+```
+
+- [ ] **Step 3: 添加 H5 SSE 流式读取核心函数**
+
+在 `h5ConsumeSseText` 函数之后，添加 `h5NovelStream` 函数：
+
+```javascript
+/**
+ * H5 环境 SSE 流式读取核心实现
+ * 使用浏览器原生 fetch + ReadableStream + AbortController
+ * @param {string} url - 请求 URL
+ * @param {Object} body - 请求体
+ * @param {Function} onEvent - 事件回调
+ * @param {Function} onError - 错误回调
+ * @returns {Object} 包含 abort 方法的对象
+ */
+function h5NovelStream(url, body, onEvent, onError) {
+  // 1. 创建 AbortController 用于超时控制
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), SSE_TIMEOUT_MS)
+
+  // 2. 发起 fetch 请求
+  fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'text/event-stream',
+      ...getAuthHeader()
+    },
+    body: JSON.stringify(body),
+    signal: controller.signal
+  }).then(response => {
+    // 3. 检查响应状态
+    if (!response.ok) {
+      clearTimeout(timeoutId)
+      onError?.(`请求失败: HTTP ${response.status}`)
+      return
+    }
+
+    // 4. 获取 ReadableStream 读取器
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder('utf-8')
+    let buffer = ''
+
+    // 5. 循环读取流数据
+    function pump() {
+      return reader.read().then(({ done, value }) => {
+        if (done) {
+          clearTimeout(timeoutId)
+          // 处理缓冲区残留数据
+          if (buffer.trim()) h5ConsumeSseText(buffer, onEvent, onError)
+          return
+        }
+
+        // 6. 解码二进制块为文本
+        buffer += decoder.decode(value, { stream: true })
+
+        // 7. 解析完整的事件（按 \n\n 分隔）
+        const events = buffer.split('\n\n')
+        buffer = events.pop() // 最后一个可能不完整，保留到下次
+
+        for (const event of events) {
+          h5ConsumeSseText(event, onEvent, onError)
+        }
+
+        // 8. 继续读取
+        return pump()
+      })
+    }
+
+    return pump()
+  }).catch(err => {
+    clearTimeout(timeoutId)
+    if (err.name === 'AbortError') {
+      onError?.('请求超时（300秒）')
+    } else {
+      onError?.(err.message || '网络请求失败')
+    }
+  })
+
+  // 9. 返回 abort 接口
+  return {
+    abort: () => {
+      clearTimeout(timeoutId)
+      controller.abort()
+    }
+  }
+}
+```
+
+---
+
+## Task 2: 修改 startNovelStream 函数支持 H5 环境
+
+**Files:**
+- Modify: `mini-program/src/services/shortNovel.js:16-55`
+
+- [ ] **Step 1: 在 startNovelStream 函数开头添加 H5 分支**
+
+打开 `mini-program/src/services/shortNovel.js`，定位到第 16 行的 `startNovelStream` 函数，将其修改为：
+
+```javascript
+export const startNovelStream = ({ query, onEvent, onError }) => {
+  // H5 环境：使用原生 fetch + ReadableStream
+  if (isH5) {
+    return h5NovelStream(
+      `${getApiBaseUrl()}/shortNovel/stream`,
+      { query },
+      onEvent,
+      onError
+    )
+  }
+
+  // 小程序环境：使用 uni.request
+  let chunkProcessed = false
+  const task = uni.request({
+    url: `${getApiBaseUrl()}/shortNovel/stream`,
+    method: 'POST',
+    data: { query },
+    header: {
+      'Content-Type': 'application/json',
+      'Accept': 'text/event-stream',
+      ...getAuthHeader()
+    },
+    enableChunked: true,
+    timeout: SSE_TIMEOUT_MS,
+    success: (res) => {
+      if (res.statusCode >= 400) {
+        onError?.(res.data?.message || '请求失败')
+        return
+      }
+      // 仅在 chunk 未处理时才处理完整 data（避免 H5 双重消费）
+      if (!chunkProcessed && typeof res.data === 'string' && res.data) {
+        consumeSseText(res.data, onEvent, onError)
+      }
+    },
+    fail: (error) => {
+      onError?.(error.errMsg || '网络请求失败')
+    }
+  })
+
+  task?.onChunkReceived?.((res) => {
+    chunkProcessed = true
+    try {
+      const text = decodeChunk(res.data)
+      consumeSseText(text, onEvent, onError)
+    } catch (error) {
+      onError?.(error.message || '流式解析失败')
+    }
+  })
+
+  return task
+}
+```
+
+---
+
+## Task 3: 修改 followupStream 函数支持 H5 环境
+
+**Files:**
+- Modify: `mini-program/src/services/shortNovel.js:68-106`
+
+- [ ] **Step 1: 在 followupStream 函数开头添加 H5 分支**
+
+打开 `mini-program/src/services/shortNovel.js`，定位到第 68 行的 `followupStream` 函数，将其修改为：
+
+```javascript
+export const followupStream = ({ sessionId, action, payload, originalQuery, onEvent, onError }) => {
+  // H5 环境：使用原生 fetch + ReadableStream
+  if (isH5) {
+    return h5NovelStream(
+      `${getApiBaseUrl()}/shortNovel/followup`,
+      { sessionId, action, payload, originalQuery },
+      onEvent,
+      onError
+    )
+  }
+
+  // 小程序环境：使用 uni.request
+  let chunkProcessed = false
+  const task = uni.request({
+    url: `${getApiBaseUrl()}/shortNovel/followup`,
+    method: 'POST',
+    data: { sessionId, action, payload, originalQuery },
+    header: {
+      'Content-Type': 'application/json',
+      'Accept': 'text/event-stream',
+      ...getAuthHeader()
+    },
+    enableChunked: true,
+    timeout: SSE_TIMEOUT_MS,
+    success: (res) => {
+      if (res.statusCode >= 400) {
+        onError?.(res.data?.message || '请求失败')
+        return
+      }
+      if (!chunkProcessed && typeof res.data === 'string' && res.data) {
+        consumeSseText(res.data, onEvent, onError)
+      }
+    },
+    fail: (error) => {
+      onError?.(error.errMsg || '网络请求失败')
+    }
+  })
+
+  task?.onChunkReceived?.((res) => {
+    chunkProcessed = true
+    try {
+      const text = decodeChunk(res.data)
+      consumeSseText(text, onEvent, onError)
+    } catch (error) {
+      onError?.(error.message || '流式解析失败')
+    }
+  })
+
+  return task
+}
+```
+
+---
+
+## Task 4: 构建验证
+
+**Files:**
+- 无文件修改，纯构建验证
+
+- [ ] **Step 1: 构建小程序验证语法正确**
+
+```bash
+cd mini-program
+npm run build:mp-weixin
+```
+
+预期输出：`DONE Build complete.`
+
+如果构建失败，检查 `shortNovel.js` 的语法错误并修复。
+
+- [ ] **Step 2: 启动 H5 开发服务器**
+
+```bash
+cd mini-program
+npm run dev:h5
+```
+
+预期输出：服务器在 `http://localhost:5284` 启动
+
+---
+
+## Task 5: 浏览器验证 - H5 模式
+
+**Files:**
+- 无文件修改，纯验证任务
+
+- [ ] **Step 1: 访问 H5 页面**
+
+使用浏览器打开 `http://localhost:5284`，登录后进入"心愿实现"页面。
+
+- [ ] **Step 2: 触发 stream 请求**
+
+1. 输入心愿文本（例如："我想写一个关于时间旅行的故事"）
+2. 点击生成按钮
+3. **验证**：页面进入等待状态
+
+- [ ] **Step 3: 检查 Network 面板**
+
+打开浏览器 DevTools 的 Network 面板：
+
+1. 找到 `/shortNovel/stream` 请求
+2. **验证**：
+   - 请求状态为 200（不是 `(failed)`）
+   - 请求在大约 67 秒后仍然保持连接（不会 60 秒后中断）
+   - 收到 `status` 事件
+   - 收到 `clarification_card` 事件
+
+- [ ] **Step 4: 检查 Console 面板**
+
+打开 Console 面板，验证：
+- 没有 "请求超时" 错误
+- 没有 fetch 相关错误
+- 正常接收到所有 SSE 事件
+
+- [ ] **Step 5: 验证澄清卡片显示**
+
+确认页面上正确显示澄清卡片，用户可以正常交互（选项可点击切换）。
+
+---
+
+## Task 6: 验证小程序模式不受影响
+
+**Files:**
+- 无文件修改，纯验证任务
+
+- [ ] **Step 1: 在微信开发者工具中打开小程序**
+
+1. 打开微信开发者工具
+2. 导入 `mini-program/unpackage/dist/dev/mp-weixin` 目录
+
+- [ ] **Step 2: 测试小说生成流程**
+
+1. 进入"心愿实现"页面
+2. 输入心愿文本
+3. 完成澄清卡片、大纲确认等流程
+4. **验证**：原有 uni.request 路径正常工作
+
+- [ ] **Step 3: 检查 Network 请求**
+
+在小程序调试器中查看网络请求：
+- `/shortNovel/stream` 请求状态正常
+- 事件正常接收
+
+---
+
+## Task 7: 验证服务器日志
+
+**Files:**
+- 无文件修改，纯验证任务
+
+- [ ] **Step 1: 下载服务器日志**
+
+```bash
+cd G:/IdeaProjects/emotion-museun
+python tools/download-server-log.py latest
+```
+
+- [ ] **Step 2: 搜索 Broken pipe 错误**
+
+```bash
+python tools/download-server-log.py grep "Broken pipe" 10
+```
+
+**验证**：H5 模式测试后，服务器日志中不再出现 `Broken pipe` 错误。
+
+- [ ] **Step 3: 验证 SSE 事件正常转发**
+
+```bash
+python tools/download-server-log.py grep "ShortNovel SSE" 20
+```
+
+**验证**：日志显示完整的事件处理流程：
+- 开始读取上游响应
+- 处理 status 事件
+- 处理 clarification_card 事件
+- 完成读取上游响应
+
+---
+
+## Task 8: 提交修改
+
+**Files:**
+- Modify: `mini-program/src/services/shortNovel.js`
+
+- [ ] **Step 1: 检查文件改动**
+
+```bash
+cd G:/IdeaProjects/emotion-museun
+git diff mini-program/src/services/shortNovel.js
+```
+
+**验证**：diff 显示添加了 H5 路径实现，保持了原有的 uni.request 逻辑。
+
+- [ ] **Step 2: 提交修改**
+
+```bash
+git add mini-program/src/services/shortNovel.js
+git commit -m "fix: 修复 H5 模式 stream 请求 60 秒超时问题
+
+- 在 H5 环境使用 fetch + ReadableStream + AbortController
+- 支持自定义 300 秒超时
+- 小程序环境保持原有 uni.request 逻辑不变"
+```
+
+---
+
+## 完成标准
+
+1. ✅ `shortNovel.js` 添加了 H5 路径实现（`h5NovelStream` 和 `h5ConsumeSseText`）
+2. ✅ `startNovelStream` 和 `followupStream` 根据环境自动分发
+3. ✅ 小程序构建成功，无语法错误
+4. ✅ H5 模式测试通过，stream 请求 67 秒后仍能正常接收事件
+5. ✅ 浏览器 Network 面板不再显示 `(failed)` 状态
+6. ✅ 小程序模式验证通过，原有功能不受影响
+7. ✅ 服务器日志中 `Broken pipe` 错误消失
+8. ✅ 修改提交到 git
+
+---
+
+## 风险评估与缓解
+
+### 风险 1：浏览器兼容性
+
+**检测方法**：在目标浏览器中运行 H5 开发服务器，触发 stream 请求
+
+**缓解措施**：通过 `typeof window.fetch === 'function'` 检测，对不支持的环境降级或显示明确错误。
+
+### 风险 2：H5 环境检测失败
+
+**检测方法**：如果 `isH5` 检测错误，可能在 H5 环境下走了小程序分支
+
+**缓解措施**：检测条件同时检查 `typeof window !== 'undefined'` 和 `typeof window.fetch === 'function'`，确保只在现代浏览器中启用 H5 路径。
+
+### 风险 3：abort 接口不兼容
+
+**检测方法**：检查 ScriptView.vue 是否调用 `task.abort()` 方法
+
+**缓解措施**：H5 实现返回 `{ abort: () => {...} }` 对象，与 uni.request 任务对象的 `abort` 方法对齐。如果 ScriptView.vue 使用其他属性，需要调整。
+
+### 风险 4：SSE 格式差异
+
+**检测方法**：观察服务器发送的 SSE 事件格式
+
+**缓解措施**：使用 `dataBuffer` 累积 `data:` 行，遇到空行才解析，符合 SSE 规范。如果某些事件不带空行分隔，可能需要调整解析逻辑。
+
+---
+
+## 自检清单
+
+实施前请确认：
+- [ ] 已阅读设计文档 `docs/superpowers/specs/2026-07-22-stream-timeout-fix-design.md`
+- [ ] 已阅读 `mini-program/src/services/shortNovel.js` 当前实现
+- [ ] 理解 H5 环境和 mp-weixin 环境的差异
+- [ ] 准备好本地 H5 开发服务器（端口 5284）

docs/superpowers/plans/2026-07-26-detail-clarification-card-count-fix.md

@@ -0,0 +1,135 @@
+# 详情页澄清选项卡显示不全修复 实施计划
+
+> **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:** 修复后端 `forwardSse` 首次 stream 中第一个 clarification_card 因 sessionId 为 null 不累积的 bug，使详情页澄清选项卡数量与生成页完全一致。
+
+**Architecture:** 在 `ShortNovelServiceImpl.forwardSse` 的事件循环中，每次解析 SSE 事件后，从事件**顶层**取 `session_id` 同步 `currentSessionId[0]`（与前端 `ScriptView.vue:1805` 取 sessionId 的方式对齐）。这样无论 status 事件是否在 payload 内携带 session_id，只要事件顶层有 session_id，首次 stream 的 `currentSessionId[0]` 就能被正确设置，首次 stream 里的 `clarification_card` 就能被累积。
+
+**Tech Stack:** Java 17 / Spring Boot 2.7.18 / fastjson2 / OkHttp / MySQL / Maven / Python 部署脚本 / H5 端到端验收
+
+## Global Constraints
+
+- 编译命令：`mvn clean install -DskipTests`（禁止 `mvn clean compile`）
+- 部署命令：`python deploy.py backend`（根目录脚本）
+- 部署前必须本地编译通过
+- 部署后必须通过 H5 端到端验收（Console 0 新增错误 + Network 接口正常）
+- 注释必须使用中文
+- 禁止任何形式的 mock、兜底、默认值掩盖错误
+- 只改后端 1 个方法（`forwardSse`），零前端改动，零数据库变更
+
+---
+
+## Task 1: 后端修复 forwardSse 顶层取 session_id
+
+**Files:**
+- Modify: `server/src/main/java/com/emotion/service/impl/ShortNovelServiceImpl.java:304-308`（`forwardSse` 方法的事件循环内，status 处理之前）
+
+**Interfaces:**
+- Consumes: 上游 SSE 事件 JSON 结构（事件顶层 `session_id` 字段与 `type` 同级）
+- Produces: `currentSessionId[0]` 在首次 stream 里也能被正确设置（不再是 null）
+
+### 背景
+
+- **根因**：上游 SSE 事件的 `session_id` 在事件**顶层**（与 `type` 同级），但后端 `forwardSse` 行 312-314 从 `payload.getString("session_id")` 取，取不到。导致首次 stream 的 `currentSessionId[0]` 保持 null（`knownSessionId=null`）。
+- **数据证据**：DB 中 3 个有 clarification 的 conversation 全部是 `clarification_question=2 + clarification_answer=3`。第一个 `clarification_question` 因 `currentSessionId[0]==null` 不累积。
+- **修复思路**：在 status 处理之前，从事件顶层取 `session_id` 同步 `currentSessionId[0]`（与前端 `ScriptView.vue:1805-1806` 逻辑对齐）。
+
+### 步骤
+
+- [ ] **Step 1: 在 forwardSse 事件循环中插入从顶层取 session_id 的代码**
+
+打开 `server/src/main/java/com/emotion/service/impl/ShortNovelServiceImpl.java`，定位到 `forwardSse` 方法内的事件循环。当前代码（行 304-311）：
+
+```java
+try {
+    JSONObject event = JSON.parseObject(dataStr);
+    String type = event.getString("type");
+    long eventTimestamp = System.currentTimeMillis();
+    log.info("[ShortNovel SSE] 处理事件: type={}, timestamp={}", type, eventTimestamp);
+
+    // 拦截 status 事件，缓存 sessionId → originalQuery 映射（供 followup 兜底）
+    if ("status".equals(type)) {
+```
+
+在 `log.info(...)` 之后、`// 拦截 status 事件` 注释之前，**插入以下 5 行代码**：
+
+```java
+                                // 从事件顶层取 session_id 同步 sessionId
+                                // 上游事件结构与前端对齐：session_id 与 type 同级，不在 payload 内
+                                // 修复：首次 stream 里 status 处理从 payload 取不到 session_id，导致 currentSessionId 保持 null，
+                                // 第一个 clarification_card 因 sessionId 为 null 不累积，详情页少显示第一个选项卡
+                                String topSessionId = event.getString("session_id");
+                                if (topSessionId != null && !topSessionId.isEmpty()) {
+                                    currentSessionId[0] = topSessionId;
+                                }
+```
+
+插入后整体结构（行 304-320）：
+
+```java
+try {
+    JSONObject event = JSON.parseObject(dataStr);
+    String type = event.getString("type");
+    long eventTimestamp = System.currentTimeMillis();
+    log.info("[ShortNovel SSE] 处理事件: type={}, timestamp={}", type, eventTimestamp);
+
+    // 从事件顶层取 session_id 同步 sessionId
+    // 上游事件结构与前端对齐：session_id 与 type 同级，不在 payload 内
+    // 修复：首次 stream 里 status 处理从 payload 取不到 session_id，导致 currentSessionId 保持 null，
+    // 第一个 clarification_card 因 sessionId 为 null 不累积，详情页少显示第一个选项卡
+    String topSessionId = event.getString("session_id");
+    if (topSessionId != null && !topSessionId.isEmpty()) {
+        currentSessionId[0] = topSessionId;
+    }
+
+    // 拦截 status 事件，缓存 sessionId → originalQuery 映射（供 followup 兜底）
+    if ("status".equals(type)) {
+```
+
+- [ ] **Step 2: 本地编译验证**
+
+Run: `cd server && mvn clean install -DskipTests`
+Expected: `BUILD SUCCESS`，零错误。
+
+- [ ] **Step 3: 部署到远程服务器**
+
+Run: `python deploy.py backend`
+Expected: 部署脚本输出"部署成功"，服务重启完成。
+如果部署脚本在 Windows 报 PATH 问题，手动执行：
+```bash
+scp server/target/emotion-single-1.0.0.jar root@101.200.208.45:/data/programs/emotion-museum/
+ssh root@101.200.208.45 "cd /data/programs/emotion-museum && ./restart.sh emotion-museum-single"
+```
+
+- [ ] **Step 4: H5 端到端验收**
+
+1. 启动 mini-program H5：`python dev-services.py start mini-program`（端口 5180）
+2. 浏览器访问 `http://localhost:5180/#/pages/main/index?tab=script`
+3. 手动完成一次新的小说生成（包含至少 2 轮澄清）
+4. 生成过程中**记录生成页显示的选项卡数量 N**
+5. 生成完成后，进入该剧本的详情页（通过列表页点"历史"进入 ScriptLibraryView，再点击对应剧本）
+6. 验证详情页显示 **N 个澄清选项卡**（与生成页完全一致）
+7. 浏览器 Console 检查：0 新增错误（既有的 `uni.getRecorderManager` 错误除外）
+8. Network 面板：`listByConversation` 接口响应中 `clarification_question` 类型消息数量 = 生成页澄清轮数
+
+- [ ] **Step 5: 提交代码**
+
+```bash
+cd G:\IdeaProjects\emotion-museun
+git add server/src/main/java/com/emotion/service/impl/ShortNovelServiceImpl.java
+git commit -m "fix(server): 修复 forwardSse 首次 stream 第一个 clarification_card 不累积的 bug
+
+上游 SSE 事件的 session_id 在事件顶层（与 type 同级），后端原从 payload.session_id 取导致首次 stream 取不到，
+currentSessionId 保持 null，第一个 clarification_card 不累积。
+改为从事件顶层取 session_id 同步 currentSessionId（与前端 ScriptView.vue:1805 逻辑对齐）。
+修复后新剧本详情页澄清选项卡数量与生成页完全一致。"
+```
+
+### 验收标准
+
+- ✅ 本地 `mvn clean install` 编译通过
+- ✅ 部署到远程服务器成功
+- ✅ 新剧本详情页澄清选项卡数量 = 生成页澄清选项卡数量
+- ✅ Console 0 新增错误
+- ✅ 老剧本（3 个已有 conversation）保持现状，仍显示 2 个 card（数据已永久丢失，符合预期）

docs/superpowers/plans/2026-07-28-novel-message-actions-restore.md

@@ -0,0 +1,605 @@
+# 小说消息操作按钮恢复实施计划
+
+> **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:** 恢复小程序小说生成页和详情页丢失的"复制、播放、折叠/展开"功能，每条 novel 消息下方添加 3 个操作按钮。
+
+**Architecture:** 在 ScriptView.vue 和 ScriptDetailView.vue 中为 `kind === 'novel'` 的消息添加按钮组 UI（折叠/展开、复制、播放）。ScriptView 复用已有函数，ScriptDetailView 新增相同逻辑。按钮组样式统一，参考 MessageCard 的 result-actions 样式。
+
+**Tech Stack:** Vue 3 Composition API / UniApp / Pinia / uni.setClipboardData / useTtsPlayer composable / H5 端到端验收
+
+## Global Constraints
+
+- 所有注释必须使用中文
+- 样式单位必须使用 rpx（小程序移动端）
+- 禁止任何形式的 mock、兜底、默认值掩盖错误
+- 每个按钮必须有真实实现，不能有任何占位或 mock 功能
+- 修改后必须通过 H5 端到端验收（Console 0 新增错误）
+- 部署使用 `python deploy.py backend`（后端）或热加载（前端）
+- 埋点必须完整触发：`script_message_collapse_toggle`、`script_message_copy_click`、`script_message_tts_click`
+
+---
+
+## Task 1: ScriptView 恢复按钮组 UI
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue:180-187`（novel 消息渲染部分）
+- Modify: `mini-program/src/pages/main/ScriptView.vue:3500+`（样式部分）
+
+**Interfaces:**
+- Consumes: 已有函数 `getMessageDisplayContent(msg)`、`toggleMessageCollapse(msg)`、`copyMessageContent(msg)`、`playMessageTts(msg)`、`isMessageCollapsed(msg)`
+- Produces: novel 消息下方显示 3 个按钮（折叠/展开、复制、播放），功能正常
+
+### 背景
+
+ScriptView.vue 中所有相关函数已存在（行 399-447），但模板中按钮组 UI 在 commit 2c778fa 中被删除。本任务恢复按钮组 UI。
+
+### 步骤
+
+- [ ] **Step 1: 定位 novel 消息渲染部分**
+
+打开 `mini-program/src/pages/main/ScriptView.vue`，找到 `kind === 'novel'` 的消息渲染部分（约行 180-187）：
+
+```vue
+<view v-else-if="msg.kind === 'novel'" class="chat-bubble system novel-bubble">
+  <Markdown :content="msg.content" />
+</view>
+```
+
+- [ ] **Step 2: 修改 Markdown 渲染，使用折叠内容**
+
+将 `<Markdown :content="msg.content" />` 改为：
+
+```vue
+<Markdown :content="getMessageDisplayContent(msg)" />
+```
+
+这样折叠时只显示前 200 字符。
+
+- [ ] **Step 3: 添加折叠/展开按钮**
+
+在 `<Markdown>` 下方添加折叠/展开按钮：
+
+```vue
+<view v-if="msg.content && msg.content.length > 200" class="collapse-toggle-row" @click="toggleMessageCollapse(msg)">
+  <text class="collapse-toggle-text">{{ isMessageCollapsed(msg) ? '展开全文' : '收起全文' }}</text>
+  <view class="collapse-chevron" :class="{ down: isMessageCollapsed(msg) }">
+    <view></view>
+    <view></view>
+  </view>
+</view>
+```
+
+- [ ] **Step 4: 添加操作按钮组**
+
+在折叠/展开按钮下方添加操作按钮组（复制、播放）：
+
+```vue
+<view class="message-actions">
+  <button class="action-btn" @click="copyMessageContent(msg)">
+    <text>📋 复制</text>
+  </button>
+  <button class="action-btn primary" @click="playMessageTts(msg)">
+    <text class="action-icon">{{ ttsPlayer.playing.value ? 'Ⅱ' : '▶' }}</text>
+    <text>{{ ttsPlayer.playing.value ? '暂停' : '播放' }}</text>
+  </button>
+</view>
+```
+
+注意：只有 2 个按钮（复制、播放），折叠/展开按钮已在上方独立显示。
+
+- [ ] **Step 5: 添加按钮组样式**
+
+在 `<style scoped>` 部分（约行 3500+）添加以下样式：
+
+```css
+/* 折叠/展开按钮行 */
+.collapse-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  margin-top: 20rpx;
+  padding: 16rpx 0;
+  border-radius: 999rpx;
+  background: rgba(88, 28, 135, 0.12);
+  border: 1rpx solid rgba(192, 132, 252, 0.28);
+  color: rgba(246, 230, 255, 0.96);
+  font-size: 26rpx;
+  font-weight: 700;
+}
+
+.collapse-toggle-row:active {
+  transform: scale(0.98);
+  opacity: 0.92;
+}
+
+.collapse-toggle-text {
+  line-height: 1;
+}
+
+/* 折叠箭头图标 */
+.collapse-chevron {
+  position: relative;
+  width: 20rpx;
+  height: 16rpx;
+  flex-shrink: 0;
+  transition: transform 0.18s ease;
+}
+
+.collapse-chevron.down {
+  transform: rotate(180deg);
+}
+
+.collapse-chevron view {
+  position: absolute;
+  top: 7rpx;
+  width: 12rpx;
+  height: 4rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(90deg, #fff3b0, #ffd86b);
+  box-shadow: 0 0 12rpx rgba(255, 216, 107, 0.5);
+}
+
+.collapse-chevron view:first-child {
+  left: 0;
+  transform: rotate(-38deg);
+  transform-origin: right center;
+}
+
+.collapse-chevron view:last-child {
+  right: 0;
+  transform: rotate(38deg);
+  transform-origin: left center;
+}
+
+/* 操作按钮组 */
+.message-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+  margin-top: 20rpx;
+}
+
+.action-btn {
+  height: 72rpx;
+  min-height: 72rpx;
+  padding: 0 8rpx;
+  border-radius: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #e8ccff;
+  font-size: 26rpx;
+  font-weight: 700;
+  line-height: 1.15;
+  text-align: center;
+  white-space: normal;
+  box-sizing: border-box;
+  background: rgba(88, 28, 135, 0.18);
+  border: 1rpx solid rgba(192, 132, 252, 0.35);
+}
+
+.action-btn.primary {
+  color: #fff;
+  background: linear-gradient(145deg, #8c44f2, #5f1db8);
+}
+
+.action-icon {
+  margin-right: 8rpx;
+  font-size: 24rpx;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.action-btn::after {
+  border: 0;
+}
+```
+
+- [ ] **Step 6: H5 验收**
+
+启动 H5 并验收：
+
+```bash
+python dev-services.py start mini-program
+```
+
+浏览器访问 `http://localhost:5180/#/pages/main/index?tab=script`，进入一个已有小说的生成页：
+
+验收项：
+- ✅ 小说正文下方有折叠/展开按钮（内容超过 200 字时显示）
+- ✅ 点击"展开全文"：内容完整显示，按钮变为"收起全文"
+- ✅ 点击"收起全文"：内容截断显示前 200 字，按钮变为"展开全文"
+- ✅ 小说正文下方有 2 个操作按钮：复制、播放
+- ✅ 点击"复制"：Toast 提示"已复制"，剪贴板中有内容
+- ✅ 点击"播放"：TTS 开始播放，按钮变为"暂停"
+- ✅ 浏览器 Console 检查：0 新增错误
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "feat(mini-program): ScriptView 恢复小说消息操作按钮组
+
+- 为 kind === 'novel' 的消息添加折叠/展开、复制、播放按钮
+- 复用已有函数：getMessageDisplayContent、toggleMessageCollapse、copyMessageContent、playMessageTts
+- 添加 .collapse-toggle-row、.message-actions、.action-btn 样式
+- H5 验收通过，Console 0 新增错误"
+```
+
+### 验收标准
+
+- ✅ 每条 novel 消息下方有折叠/展开按钮（内容超过 200 字时显示）
+- ✅ 折叠/展开功能正常：折叠时显示前 200 字，展开时显示完整内容
+- ✅ 每条 novel 消息下方有 2 个操作按钮：复制、播放
+- ✅ 复制功能正常：点击后 Toast 提示"已复制"
+- ✅ 播放功能正常：点击后 TTS 开始播放，按钮变为"暂停"
+- ✅ Console 无新增错误
+
+---
+
+## Task 2: ScriptDetailView 新增函数和按钮组 UI
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptDetailView.vue:96-311`（script 部分）
+- Modify: `mini-program/src/pages/main/ScriptDetailView.vue:74-76`（novel 消息渲染部分）
+- Modify: `mini-program/src/pages/main/ScriptDetailView.vue:313+`（样式部分）
+
+**Interfaces:**
+- Consumes: `ttsPlayer` composable（已有）、`script` ref（已有）
+- Produces: novel 消息下方显示 3 个按钮（折叠/展开、复制、播放），功能正常
+
+### 背景
+
+ScriptDetailView.vue 中完全没有相关函数和按钮组 UI。本任务新增所有函数 + 模板按钮组 + 样式。
+
+### 步骤
+
+- [ ] **Step 1: 新增 collapsedMessageIds ref**
+
+打开 `mini-program/src/pages/main/ScriptDetailView.vue`，在 `<script setup>` 部分（约行 96-110）添加：
+
+```javascript
+const collapsedMessageIds = ref({})
+```
+
+放在 `const resultMessages = ref([])` 下方。
+
+- [ ] **Step 2: 新增 isMessageCollapsed 函数**
+
+在 `collapsedMessageIds` 下方添加：
+
+```javascript
+/**
+ * 判断消息是否折叠
+ */
+const isMessageCollapsed = (message) => {
+  return Boolean(collapsedMessageIds.value[message.id])
+}
+```
+
+- [ ] **Step 3: 新增 getMessageDisplayContent 函数**
+
+在 `isMessageCollapsed` 下方添加：
+
+```javascript
+/**
+ * 获取消息显示内容（折叠时截断）
+ */
+const getMessageDisplayContent = (message) => {
+  const content = String(message?.content || '')
+  if (!isMessageCollapsed(message)) return content
+  if (content.length <= 200) return content
+  return `${content.slice(0, 200)}...`
+}
+```
+
+- [ ] **Step 4: 新增 toggleMessageCollapse 函数**
+
+在 `getMessageDisplayContent` 下方添加：
+
+```javascript
+/**
+ * 切换消息折叠状态
+ */
+const toggleMessageCollapse = (message) => {
+  collapsedMessageIds.value = {
+    ...collapsedMessageIds.value,
+    [message.id]: !isMessageCollapsed(message)
+  }
+  analytics.track('script_message_collapse_toggle', {
+    message_id: message?.id || '',
+    collapsed: collapsedMessageIds.value[message.id]
+  }, { eventType: 'script', pagePath })
+}
+```
+
+- [ ] **Step 5: 新增 copyMessageContent 函数**
+
+在 `toggleMessageCollapse` 下方添加：
+
+```javascript
+/**
+ * 复制消息内容到剪贴板
+ */
+const copyMessageContent = (message) => {
+  const content = String(message?.content || '')
+  if (!content.trim()) {
+    uni.showToast({ title: '暂无可复制内容', icon: 'none' })
+    return
+  }
+  uni.setClipboardData({
+    data: content,
+    success: () => {
+      uni.showToast({ title: '已复制', icon: 'success' })
+    }
+  })
+  analytics.track('script_message_copy_click', {
+    message_id: message?.id || '',
+    content_length: content.length
+  }, { eventType: 'script', pagePath })
+}
+```
+
+- [ ] **Step 6: 新增 playMessageTts 函数**
+
+在 `copyMessageContent` 下方添加：
+
+```javascript
+/**
+ * 播放消息 TTS 音频
+ */
+const playMessageTts = (message) => {
+  const scriptId = script.value?.id || ''
+  ttsPlayer.playSource(scriptId)
+  analytics.track('script_message_tts_click', {
+    message_id: message?.id || '',
+    script_id: scriptId
+  }, { eventType: 'script', pagePath })
+}
+```
+
+- [ ] **Step 7: 定位 novel 消息渲染部分**
+
+在模板中找到 `kind === 'novel'` 的消息渲染部分（约行 74-76）：
+
+```vue
+<view v-else-if="msg.kind === 'novel'" class="chat-bubble system novel-bubble">
+  <Markdown :content="msg.content" />
+</view>
+```
+
+- [ ] **Step 8: 修改 Markdown 渲染，使用折叠内容**
+
+将 `<Markdown :content="msg.content" />` 改为：
+
+```vue
+<Markdown :content="getMessageDisplayContent(msg)" />
+```
+
+- [ ] **Step 9: 添加折叠/展开按钮**
+
+在 `<Markdown>` 下方添加折叠/展开按钮：
+
+```vue
+<view v-if="msg.content && msg.content.length > 200" class="collapse-toggle-row" @click="toggleMessageCollapse(msg)">
+  <text class="collapse-toggle-text">{{ isMessageCollapsed(msg) ? '展开全文' : '收起全文' }}</text>
+  <view class="collapse-chevron" :class="{ down: isMessageCollapsed(msg) }">
+    <view></view>
+    <view></view>
+  </view>
+</view>
+```
+
+- [ ] **Step 10: 添加操作按钮组**
+
+在折叠/展开按钮下方添加操作按钮组（复制、播放）：
+
+```vue
+<view class="message-actions">
+  <button class="action-btn" @click="copyMessageContent(msg)">
+    <text>📋 复制</text>
+  </button>
+  <button class="action-btn primary" @click="playMessageTts(msg)">
+    <text class="action-icon">{{ ttsPlayer.playing.value ? 'Ⅱ' : '▶' }}</text>
+    <text>{{ ttsPlayer.playing.value ? '暂停' : '播放' }}</text>
+  </button>
+</view>
+```
+
+- [ ] **Step 11: 添加按钮组样式**
+
+在 `<style scoped>` 部分（约行 313+）添加以下样式（与 ScriptView 完全一致）：
+
+```css
+/* 折叠/展开按钮行 */
+.collapse-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  margin-top: 20rpx;
+  padding: 16rpx 0;
+  border-radius: 999rpx;
+  background: rgba(88, 28, 135, 0.12);
+  border: 1rpx solid rgba(192, 132, 252, 0.28);
+  color: rgba(246, 230, 255, 0.96);
+  font-size: 26rpx;
+  font-weight: 700;
+}
+
+.collapse-toggle-row:active {
+  transform: scale(0.98);
+  opacity: 0.92;
+}
+
+.collapse-toggle-text {
+  line-height: 1;
+}
+
+/* 折叠箭头图标 */
+.collapse-chevron {
+  position: relative;
+  width: 20rpx;
+  height: 16rpx;
+  flex-shrink: 0;
+  transition: transform 0.18s ease;
+}
+
+.collapse-chevron.down {
+  transform: rotate(180deg);
+}
+
+.collapse-chevron view {
+  position: absolute;
+  top: 7rpx;
+  width: 12rpx;
+  height: 4rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(90deg, #fff3b0, #ffd86b);
+  box-shadow: 0 0 12rpx rgba(255, 216, 107, 0.5);
+}
+
+.collapse-chevron view:first-child {
+  left: 0;
+  transform: rotate(-38deg);
+  transform-origin: right center;
+}
+
+.collapse-chevron view:last-child {
+  right: 0;
+  transform: rotate(38deg);
+  transform-origin: left center;
+}
+
+/* 操作按钮组 */
+.message-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+  margin-top: 20rpx;
+}
+
+.action-btn {
+  height: 72rpx;
+  min-height: 72rpx;
+  padding: 0 8rpx;
+  border-radius: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #e8ccff;
+  font-size: 26rpx;
+  font-weight: 700;
+  line-height: 1.15;
+  text-align: center;
+  white-space: normal;
+  box-sizing: border-box;
+  background: rgba(88, 28, 135, 0.18);
+  border: 1rpx solid rgba(192, 132, 252, 0.35);
+}
+
+.action-btn.primary {
+  color: #fff;
+  background: linear-gradient(145deg, #8c44f2, #5f1db8);
+}
+
+.action-icon {
+  margin-right: 8rpx;
+  font-size: 24rpx;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.action-btn::after {
+  border: 0;
+}
+```
+
+- [ ] **Step 12: H5 验收**
+
+H5 服务应已在运行（端口 5180），浏览器访问详情页：
+
+从列表页点击一个已有小说的剧本，进入详情页。
+
+验收项：
+- ✅ 小说正文下方有折叠/展开按钮（内容超过 200 字时显示）
+- ✅ 点击"展开全文"：内容完整显示，按钮变为"收起全文"
+- ✅ 点击"收起全文"：内容截断显示前 200 字，按钮变为"展开全文"
+- ✅ 小说正文下方有 2 个操作按钮：复制、播放
+- ✅ 点击"复制"：Toast 提示"已复制"，剪贴板中有内容
+- ✅ 点击"播放"：TTS 开始播放，按钮变为"暂停"
+- ✅ 浏览器 Console 检查：0 新增错误
+
+- [ ] **Step 13: Commit**
+
+```bash
+git add mini-program/src/pages/main/ScriptDetailView.vue
+git commit -m "feat(mini-program): ScriptDetailView 新增小说消息操作按钮组
+
+- 新增 collapsedMessageIds ref + 5 个函数（isMessageCollapsed、getMessageDisplayContent、toggleMessageCollapse、copyMessageContent、playMessageTts）
+- 为 kind === 'novel' 的消息添加折叠/展开、复制、播放按钮
+- 添加 .collapse-toggle-row、.message-actions、.action-btn 样式
+- H5 验收通过，Console 0 新增错误"
+```
+
+### 验收标准
+
+- ✅ 每条 novel 消息下方有折叠/展开按钮（内容超过 200 字时显示）
+- ✅ 折叠/展开功能正常：折叠时显示前 200 字，展开时显示完整内容
+- ✅ 每条 novel 消息下方有 2 个操作按钮：复制、播放
+- ✅ 复制功能正常：点击后 Toast 提示"已复制"
+- ✅ 播放功能正常：点击后 TTS 开始播放，按钮变为"暂停"
+- ✅ Console 无新增错误
+- ✅ 埋点正常触发：`script_message_collapse_toggle`、`script_message_copy_click`、`script_message_tts_click`
+
+---
+
+## 整体验收
+
+两个 Task 完成后，进行整体验收：
+
+1. **生成页验收**：
+   - 访问 `http://localhost:5180/#/pages/main/index?tab=script`
+   - 进入一个已有小说的生成页
+   - 验证折叠/展开、复制、播放功能
+   - Console 0 新增错误
+
+2. **详情页验收**：
+   - 从列表页点击一个已有小说的剧本，进入详情页
+   - 验证折叠/展开、复制、播放功能
+   - Console 0 新增错误
+
+3. **样式一致性**：
+   - 两个页面的按钮组样式完全一致
+   - 按钮布局、颜色、圆角、间距一致
+
+4. **埋点验证**：
+   - 浏览器 Console 中查看埋点日志
+   - 确认 `script_message_collapse_toggle`、`script_message_copy_click`、`script_message_tts_click` 正常触发
+
+---
+
+## 风险与注意事项
+
+1. **TTS 播放的是整个小说**：`ttsPlayer.playSource(scriptId)` 播放的是整个小说的音频，不是单条消息的音频。这是历史设计，保持一致。
+
+2. **折叠阈值**：折叠时显示前 200 字符。这个阈值可以根据实际需求调整。
+
+3. **样式一致性**：两个页面的按钮组样式必须保持一致，直接复制 ScriptView 的样式到 ScriptDetailView。
+
+4. **性能考虑**：`collapsedMessageIds` 是响应式对象，每次切换折叠状态都会触发重新渲染。对于大量消息的场景，可能需要优化（当前场景下消息数量有限，不构成问题）。
+
+5. **热加载**：前端修改后利用热加载自动生效，不需要重启。如果热加载不生效，使用 `python dev-services.py restart mini-program`。
+
+---
+
+## 提交历史
+
+完成所有 Task 后，提交历史应为：
+
+```
+<hash> feat(mini-program): ScriptDetailView 新增小说消息操作按钮组
+<hash> feat(mini-program): ScriptView 恢复小说消息操作按钮组
+```

docs/superpowers/specs/2026-07-22-clarification-card-option-switching-fix-design.md

@@ -0,0 +1,217 @@
+---
+author: AI Assistant
+created_at: 2026-07-22
+purpose: 修复 ClarificationCard 选项无法切换的 bug
+---
+
+# ClarificationCard 选项切换修复设计
+
+## 问题概述
+
+### 现象
+
+在"心愿实现"页面（生成剧本页面），当后端返回澄清卡片（`clarification_card` 事件）时，用户在选项卡中选择了一个选项后，无法切换到其他选项。
+
+### 根本原因
+
+`ClarificationCard.vue` 组件的 `toggleOption` 函数（第 80-95 行）依赖 `card_type` 字段判断是单选还是多选：
+
+```javascript
+function toggleOption(opt) {
+  const value = opt.value
+  if (isSingle.value) {  // 仅当 card_type === 'single_select' 时执行
+    selectedValues.value = [value]
+  } else if (isMulti.value) {  // 仅当 card_type === 'multi_select' 或 'mixed' 时执行
+    // 多选逻辑...
+  }
+  // 如果 card_type 不是上述任何值，函数什么都不做！
+}
+```
+
+**关键问题**：如果后端返回的 `card.card_type` 不是 `'single_select'`、`'multi_select'` 或 `'mixed'`（可能是 `undefined`、`null` 或其他未定义的值），`toggleOption` 函数**不会执行任何逻辑**，导致：
+
+- 用户点击选项 A → `selectedValues` 不更新
+- 用户点击选项 B → `selectedValues` 仍不更新
+- 视觉上表现为"无法切换选项"
+
+### 代码位置
+
+**文件：** `mini-program/src/components/ClarificationCard.vue:80-95`
+
+## 设计目标
+
+1. **选项可自由切换**：无论 `card_type` 是什么值，用户都能正常切换选项
+2. **保持现有功能**：不破坏单选、多选、文本输入的现有行为
+3. **向后兼容**：对于正常的 `card_type` 值（`single_select`、`multi_select`、`text_input`），行为保持不变
+4. **不破坏其他业务功能**：不修改 ScriptView.vue 或后端代码
+
+## 技术方案
+
+### 方案：增强 `toggleOption` 容错性
+
+**核心思路**：将条件判断从"是否为单选"改为"是否为多选或文本输入"，如果都不是则默认当作单选处理。
+
+**修改位置：** `mini-program/src/components/ClarificationCard.vue:80-95`
+
+**修改前的代码：**
+```javascript
+function toggleOption(opt) {
+  const value = opt.value
+  if (isSingle.value) {
+    selectedValues.value = [value]
+  } else if (isMulti.value) {
+    const idx = selectedValues.value.indexOf(value)
+    if (idx >= 0) {
+      selectedValues.value.splice(idx, 1)
+    } else {
+      const maxSel = props.card.max_selections || selectedValues.value.length + 1
+      if (selectedValues.value.length < maxSel) {
+        selectedValues.value.push(value)
+      }
+    }
+  }
+}
+```
+
+**修改后的代码：**
+```javascript
+function toggleOption(opt) {
+  const value = opt.value
+  // 修复：默认当作单选处理（当不是多选也不是文本输入时）
+  if (isMulti.value) {
+    // 多选逻辑
+    const idx = selectedValues.value.indexOf(value)
+    if (idx >= 0) {
+      selectedValues.value.splice(idx, 1)
+    } else {
+      const maxSel = props.card.max_selections || selectedValues.value.length + 1
+      if (selectedValues.value.length < maxSel) {
+        selectedValues.value.push(value)
+      }
+    }
+  } else if (!isTextInput.value) {
+    // 单选逻辑（默认行为，包括 card_type 未定义或未知的情况）
+    selectedValues.value = [value]
+  }
+}
+```
+
+**关键变更：**
+- 将 `if (isSingle.value)` 改为 `else if (!isTextInput.value)`
+- 这意味着：只要不是多选（`isMulti.value`）也不是文本输入（`isTextInput.value`），就当作单选处理
+- 这样即使 `card_type` 是 `undefined`、`null` 或其他未定义的值，选项也能正常切换
+
+**保留的多选逻辑：**
+- 多选条件（`isMulti.value`）保持不变
+- 多选逻辑（添加/删除选项）保持不变
+- 最大选择数限制（`max_selections`）保持不变
+
+**保留的文本输入逻辑：**
+- 文本输入卡片（`isTextInput.value`）不会有选项，所以 `toggleOption` 不会被调用
+- 但保留这个判断是为了代码的可读性和未来的扩展性
+
+## 行为对照表
+
+| card_type 值 | 修改前行为 | 修改后行为 |
+|--------------|-----------|-----------|
+| `'single_select'` | ✅ 单选切换 | ✅ 单选切换（行为不变） |
+| `'multi_select'` | ✅ 多选切换 | ✅ 多选切换（行为不变） |
+| `'mixed'` | ✅ 多选切换 | ✅ 多选切换（行为不变） |
+| `'text_input'` | ✅ 无选项，不调用 | ✅ 无选项，不调用（行为不变） |
+| `undefined` / `null` | ❌ 无法切换 | ✅ 默认单选切换 |
+| 其他未知值 | ❌ 无法切换 | ✅ 默认单选切换 |
+
+## 实施步骤
+
+### 第一步：修改 ClarificationCard.vue
+
+打开 `mini-program/src/components/ClarificationCard.vue`，定位到第 80-95 行的 `toggleOption` 函数，将其修改为上述"修改后的代码"。
+
+### 第二步：构建小程序
+
+```bash
+cd mini-program
+npm run build:mp-weixin
+```
+
+预期输出：`DONE Build complete.`
+
+### 第三步：提交修改
+
+```bash
+git add mini-program/src/components/ClarificationCard.vue
+git commit -m "fix: 修复 ClarificationCard 选项无法切换的 bug（增强 toggleOption 容错性）"
+```
+
+### 第四步：用户验证
+
+在微信小程序中：
+1. 进入"心愿实现"页面
+2. 输入心愿文本，触发澄清卡片
+3. 点击选项 A（应该被选中）
+4. 点击选项 B（应该切换到 B，A 取消选中）
+5. 再次点击选项 A（应该切换回 A）
+6. 验证：选项可以自由切换
+
+## 风险评估
+
+### 风险 1：影响现有正常的卡片类型
+
+**可能性**：低
+
+**缓解措施**：
+- 修改前的行为对照表显示，所有正常的 `card_type` 值行为不变
+- 只改变了未知值的默认行为（从"不响应"改为"单选响应"）
+
+### 风险 2：破坏其他业务功能
+
+**可能性**：极低
+
+**缓解措施**：
+- 只修改了 ClarificationCard.vue 一个文件
+- 不修改 ScriptView.vue 的事件处理
+- 不修改后端代码
+
+### 风险 3：响应式更新问题
+
+**可能性**：低
+
+**缓解措施**：
+- `selectedValues.value = [value]` 是 Vue 3 标准的响应式赋值
+- 在原有代码中已经使用这种方式，应该是有效的
+
+## 测试用例
+
+### 测试用例 1：单选卡片切换
+
+1. 输入心愿文本
+2. 收到澄清卡片（单选类型）
+3. 点击选项 A
+4. 验证：选项 A 被选中（有 ✓ 标记）
+5. 点击选项 B
+6. **验证：选项 B 被选中，选项 A 取消选中**（这是修复的关键点）
+
+### 测试用例 2：多选卡片（保持原有行为）
+
+1. 收到澄清卡片（多选类型）
+2. 点击选项 A
+3. 验证：选项 A 被选中
+4. 点击选项 B
+5. **验证：选项 A 和 B 都被选中**（多选行为不变）
+
+### 测试用例 3：未知 card_type（修复场景）
+
+1. 后端返回 `card_type: undefined` 或其他未知值
+2. 收到澄清卡片
+3. 点击选项 A
+4. **验证：选项 A 被选中**
+5. 点击选项 B
+6. **验证：选项 B 被选中，选项 A 取消选中**（这是修复的核心场景）
+
+## 完成标准
+
+1. ✅ ClarificationCard.vue 的 `toggleOption` 函数已修改
+2. ✅ 小程序构建成功
+3. ✅ 修改已提交到 git
+4. ✅ 用户验证：选项可以自由切换
+5. ✅ 现有功能（单选、多选、文本输入）未受影响

docs/superpowers/specs/2026-07-22-stream-timeout-fix-design.md

@@ -0,0 +1,357 @@
+---
+author: AI Assistant
+created_at: 2026-07-22
+purpose: 修复 H5 模式下 stream 请求 60 秒超时问题，采用 fetch + ReadableStream + AbortController 方案
+---
+
+# H5 模式 Stream 超时修复设计
+
+## 问题概述
+
+### 现象
+
+在小程序 H5 模式下（`http://localhost:5284`），"心愿实现"页面的 stream 请求在约 60 秒后超时，浏览器 DevTools Network 面板显示状态为 `(failed)`。用户无法收到上游服务约 67 秒后产生的 `clarification_card` 事件。
+
+### 根本原因
+
+1. **H5 模式下 `uni.request` 使用浏览器原生 `fetch` API**
+2. **浏览器 `fetch` 不支持自定义超时参数**，即使设置了 `timeout: 300000` 也无效
+3. **浏览器对 `fetch` 连接有约 60 秒的默认超时**
+4. **上游服务响应延迟**：从 `status` 事件到 `clarification_card` 事件约需 67 秒
+5. **后果**：前端连接在 60 秒时关闭，服务器在 67 秒尝试发送时遇到 `Broken pipe`
+
+### 服务器日志证据
+
+```
+22:09:37 - 上游 status 事件收到并成功转发
+22:10:44 - 上游 clarification_card 事件收到
+22:10:44 - java.io.IOException: Broken pipe（前端连接已断开）
+```
+
+### 代码位置
+
+**文件：** `mini-program/src/services/shortNovel.js`
+
+问题代码片段（第 16-55 行）：
+```javascript
+export const startNovelStream = ({ query, onEvent, onError }) => {
+  const task = uni.request({
+    // ...
+    enableChunked: true,
+    timeout: 300000,  // ← H5 模式下无效
+    // ...
+  })
+}
+```
+
+## 设计目标
+
+1. **H5 模式正确接收延迟事件**：支持 300 秒超时，覆盖上游 67 秒延迟场景
+2. **保持现有功能**：不破坏小程序 mp-weixin 模式的现有逻辑
+3. **完全兼容性**：`onEvent`、`onError` 回调接口不变，调用方无需修改
+4. **真正流式读取**：避免 `responseText` 累积导致的内存问题
+
+## 技术方案
+
+### 方案 A：H5 模式使用原生 fetch + ReadableStream（已选定）
+
+**核心思路**：在 H5 环境下绕过 `uni.request`，直接使用浏览器原生的 `fetch` API + `response.body.getReader()` 读取流，并通过 `AbortController` 设置自定义超时。
+
+### 架构设计
+
+**双路径策略**：
+
+| 环境 | 实现方式 | 原因 |
+|------|---------|------|
+| H5（浏览器） | `fetch` + `ReadableStream` + `AbortController` | 完全控制超时，支持真正流式读取 |
+| mp-weixin（小程序） | `uni.request` + `enableChunked` | 小程序原生支持，无需修改 |
+
+**环境检测**：
+```javascript
+const isH5 = typeof window !== 'undefined' && typeof window.fetch === 'function'
+```
+
+### 文件变更结构
+
+**修改的文件**：
+1. `mini-program/src/services/shortNovel.js` - 添加 H5 路径实现
+
+**不修改的文件**：
+- `mini-program/src/pages/main/ScriptView.vue` - 调用接口完全兼容
+- `server/**` - 后端无需任何修改
+- `nginx.conf` - 服务端配置无需修改
+
+## 实现细节
+
+### H5 核心实现
+
+```javascript
+/**
+ * H5 环境 SSE 流式读取
+ * 使用浏览器原生 fetch + ReadableStream + AbortController
+ */
+function h5NovelStream(url, body, onEvent, onError) {
+  // 1. 创建 AbortController 用于超时控制
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 300000)
+  
+  // 2. 发起 fetch 请求
+  fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'text/event-stream',
+      ...getAuthHeader()
+    },
+    body: JSON.stringify(body),
+    signal: controller.signal
+  }).then(response => {
+    // 3. 检查响应状态
+    if (!response.ok) {
+      clearTimeout(timeoutId)
+      onError?.(`请求失败: HTTP ${response.status}`)
+      return
+    }
+    
+    // 4. 获取 ReadableStream 读取器
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder('utf-8')
+    let buffer = ''
+    
+    // 5. 循环读取流数据
+    function pump() {
+      return reader.read().then(({ done, value }) => {
+        if (done) {
+          clearTimeout(timeoutId)
+          // 处理缓冲区残留数据
+          if (buffer.trim()) h5ConsumeSseText(buffer, onEvent, onError)
+          return
+        }
+        
+        // 6. 解码二进制块为文本
+        buffer += decoder.decode(value, { stream: true })
+        
+        // 7. 解析完整的事件（按 \n\n 分隔）
+        const events = buffer.split('\n\n')
+        buffer = events.pop() // 最后一个可能不完整，保留到下次
+        
+        for (const event of events) {
+          h5ConsumeSseText(event, onEvent, onError)
+        }
+        
+        // 8. 继续读取
+        return pump()
+      })
+    }
+    
+    return pump()
+  }).catch(err => {
+    clearTimeout(timeoutId)
+    if (err.name === 'AbortError') {
+      onError?.('请求超时（300秒）')
+    } else {
+      onError?.(err.message || '网络请求失败')
+    }
+  })
+  
+  // 9. 返回 abort 接口
+  return {
+    abort: () => {
+      clearTimeout(timeoutId)
+      controller.abort()
+    }
+  }
+}
+```
+
+### SSE 事件解析（H5 专用）
+
+```javascript
+/**
+ * 解析单个 SSE 事件块
+ * 事件格式：data: {"type":"status","session_id":"xxx","payload":{...}}
+ */
+function h5ConsumeSseText(text, onEvent, onError) {
+  const lines = text.split('\n')
+  let dataBuffer = ''
+  
+  for (const line of lines) {
+    if (line.startsWith('data:')) {
+      dataBuffer += line.slice(5).trim()
+    } else if (line === '' && dataBuffer) {
+      // 空行表示事件结束
+      const dataStr = dataBuffer
+      dataBuffer = ''
+      if (dataStr === '[DONE]') return
+      try {
+        const event = JSON.parse(dataStr)
+        onEvent?.(event)
+      } catch (e) {
+        onError?.(`SSE 解析失败: ${e.message}`)
+      }
+    }
+  }
+}
+```
+
+### 集成入口
+
+修改 `startNovelStream` 和 `followupStream`，在入口处根据环境分发：
+
+```javascript
+// 环境检测：H5 模式下存在 window 对象
+const isH5 = typeof window !== 'undefined' && typeof window.fetch === 'function'
+
+export const startNovelStream = ({ query, onEvent, onError }) => {
+  if (isH5) {
+    return h5NovelStream(
+      `${getApiBaseUrl()}/shortNovel/stream`,
+      { query },
+      onEvent,
+      onError
+    )
+  }
+  
+  // 小程序环境：保持原有 uni.request 逻辑
+  let chunkProcessed = false
+  const task = uni.request({
+    url: `${getApiBaseUrl()}/shortNovel/stream`,
+    method: 'POST',
+    data: { query },
+    header: {
+      'Content-Type': 'application/json',
+      'Accept': 'text/event-stream',
+      ...getAuthHeader()
+    },
+    enableChunked: true,
+    timeout: 300000,
+    success: (res) => {
+      if (res.statusCode >= 400) {
+        onError?.(res.data?.message || '请求失败')
+        return
+      }
+      if (!chunkProcessed && typeof res.data === 'string' && res.data) {
+        consumeSseText(res.data, onEvent, onError)
+      }
+    },
+    fail: (error) => {
+      onError?.(error.errMsg || '网络请求失败')
+    }
+  })
+
+  task?.onChunkReceived?.((res) => {
+    chunkProcessed = true
+    try {
+      const text = decodeChunk(res.data)
+      consumeSseText(text, onEvent, onError)
+    } catch (error) {
+      onError?.(error.message || '流式解析失败')
+    }
+  })
+
+  return task
+}
+```
+
+`followupStream` 采用完全相同的改造模式，在函数开头添加 H5 分支判断。
+
+## 错误处理策略
+
+| 错误类型 | 处理方式 | 用户提示 |
+|---------|---------|---------|
+| 网络断开 | 触发 `controller.abort()` | "网络连接中断" |
+| 超时（300秒） | `AbortController` 自动触发 | "请求超时（300秒）" |
+| HTTP 4xx/5xx | 检查 `response.ok` | 显示后端返回的错误信息 |
+| SSE 格式错误 | `try-catch` 包裹 `JSON.parse` | "SSE 解析失败"（不中断流） |
+| Reader 读取异常 | 在 `pump()` 内部捕获 | 触发 `onError` 回调 |
+
+## 关键设计决策
+
+1. **超时时间统一 300 秒**：与小程序环境的 `uni.request timeout` 保持一致
+2. **事件回调接口不变**：`onEvent` 和 `onError` 接口完全兼容，调用方无需修改
+3. **返回值接口对齐**：H5 实现返回 `{ abort }`，与 uni.request 任务对象的 `abort` 方法对齐
+4. **不修改后端**：纯前端修改，无需重新部署后端服务
+5. **流式读取而非累积**：使用 `ReadableStream` 而非 `responseText`，避免内存累积问题
+
+## 测试验证
+
+### 测试用例 1：H5 模式正常生成
+
+1. 启动 H5 开发服务器：`cd mini-program && npm run dev:h5`
+2. 访问 `http://localhost:5284`
+3. 进入"心愿实现"页面
+4. 输入心愿文本，触发澄清卡片
+5. **验证**：
+   - 浏览器 Network 面板显示 stream 请求 200 状态，未超时
+   - 澄清卡片正常显示
+   - 完成整个流程后小说正常生成
+
+### 测试用例 2：小程序模式不受影响
+
+1. 构建小程序：`npm run build:mp-weixin`
+2. 在微信开发者工具中运行
+3. 触发完整的小说生成流程
+4. **验证**：原有 `uni.request` 路径正常工作
+
+### 测试用例 3：超时场景验证
+
+1. 修改后端人为延迟 350 秒返回
+2. 触发 H5 模式 stream 请求
+3. **验证**：300 秒后前端收到 "请求超时（300秒）" 错误提示
+
+### 测试用例 4：错误处理
+
+1. 断网后触发请求
+2. **验证**：收到 "网络连接中断" 错误
+3. 恢复网络后重试
+4. **验证**：请求成功
+
+### 验证通过标准
+
+- ✅ H5 模式 stream 请求在 67 秒后才到达的事件能正常接收
+- ✅ 浏览器 Network 面板不再显示 `(failed)` 状态
+- ✅ 小程序模式完全不受影响
+- ✅ 错误处理覆盖所有边界场景
+- ✅ 服务器日志中 `Broken pipe` 错误消失
+
+## 风险评估
+
+### 风险 1：浏览器兼容性
+
+**可能性**：低
+
+**说明**：`fetch`、`ReadableStream`、`AbortController` 在所有现代浏览器（Chrome 76+、Firefox 71+、Safari 14.1+）中支持。我们假设用户使用现代浏览器。
+
+**缓解措施**：通过 `typeof window.fetch === 'function'` 检测，对不支持的环境降级到原有逻辑或显示明确错误。
+
+### 风险 2：内存累积
+
+**可能性**：低
+
+**说明**：如果服务端发送数据过快，可能导致缓冲区积累。
+
+**缓解措施**：使用 `TextDecoder` 的 `stream: true` 模式，并及时清空已处理的 buffer。
+
+### 风险 3：SSE 格式解析错误
+
+**可能性**：中
+
+**说明**：不同服务端实现的 SSE 格式可能有细微差异（如 `\r\n` vs `\n`、注释行等）。
+
+**缓解措施**：使用 `dataBuffer` 累积 `data:` 行，直到遇到空行才解析，符合 SSE 规范。
+
+## 完成标准
+
+1. ✅ `shortNovel.js` 添加 H5 路径实现
+2. ✅ `startNovelStream` 和 `followupStream` 根据环境自动分发
+3. ✅ H5 模式通过浏览器验证，stream 请求不再超时
+4. ✅ 小程序模式通过验证，未受影响
+5. ✅ 服务器日志中 `Broken pipe` 错误消失
+6. ✅ 修改提交到 git
+
+## 后续优化建议
+
+1. **统一超时配置**：将超时时间（300 秒）提取为常量
+2. **添加重试机制**：网络断开后自动重试
+3. **心跳检测**：定期发送心跳包检测连接活性
+4. **性能监控**：记录流式读取的延迟和吞吐量

docs/superpowers/specs/2026-07-26-chapter-count-display-design.md

@@ -0,0 +1,52 @@
+---
+author: AI Assistant
+created_at: 2026-07-26
+purpose: 修复 ScriptLibraryView 章节数展示为 0 的问题
+---
+
+# 章节数展示修复设计
+
+## 问题
+
+ScriptLibraryView 列表页中所有剧本的章节数均显示为"0章"。
+
+**根因**：前端 `getChapterCount` 函数读取 `script.chapterCount || script.chapters || 0`，但后端未返回 `chapterCount` 或 `chapters` 字段；老剧本的 `plotJson` 仅包含 `title` 和 `fullContent`，不存在 `stages.outline.beats` 结构。
+
+## 目标
+
+- 新剧本（Task 1-5 部署后生成）：从 `plotJson.stages.outline.beats.length` 获取真实章节数
+- 老剧本：根据 `script.length` 字段（short/medium/long）估算合理的章节数
+- 短篇显示"1章"（符合业务预期）
+
+## 方案
+
+修改 `mini-program/src/pages/main/ScriptLibraryView.vue` 中的 `getChapterCount` 函数：
+
+```javascript
+const getChapterCount = (script) => {
+  // 优先从 beats 数组长度获取（新剧本结构）
+  const beats = script?.plotJson?.stages?.outline?.beats
+  if (Array.isArray(beats) && beats.length > 0) return beats.length
+
+  // Fallback：根据 length 字段估算
+  const length = script?.length
+  if (length === 'short') return 1
+  if (length === 'medium') return 2
+  if (length === 'long') return 4
+  return 1
+}
+```
+
+## 影响范围
+
+- 仅修改 `ScriptLibraryView.vue` 的 `getChapterCount` 函数
+- 不涉及后端改动
+- 不涉及其他前端文件
+
+## 验收标准
+
+- 短篇剧本列表卡片显示"1章"
+- 中篇剧本列表卡片显示"2章"
+- 长篇剧本列表卡片显示"4章"
+- 新剧本（有 beats 数据）显示真实 beats 数量
+- Console 无新增错误

docs/superpowers/specs/2026-07-26-detail-clarification-card-count-fix-design.md

@@ -0,0 +1,75 @@
+---
+author: AI Assistant
+created_at: 2026-07-26
+purpose: 修复详情页只显示 2 个澄清选项卡（应为 N 个）的后端累积丢失 bug
+---
+
+# 详情页澄清选项卡显示不全修复设计
+
+## 问题
+
+生成小说时，生成页显示 N 个澄清选项卡（clarification cards），但进入详情页后只显示前 2 个。必须保证详情页选项卡数量与生成页完全一致。
+
+## 根因分析
+
+通过数据库查询（t_message 按 conversation_id 分组统计）确认：3 个有 clarification 的 conversation 全部是 **clarification_question=2 + clarification_answer=3**。即用户回答了 3 次（3 个 answer），但后端只保存了 2 个 question。**丢失的是第一个 clarification_card（Q1）**。
+
+DB 中 conversation `339751895901937665` 的 messageOrder 分布：
+
+| order | type | content |
+|---|---|---|
+| 1 | clarification_answer | 同事/上司 |
+| 2 | clarification_question | 是什么具体事件让你决定不再讨好？ |
+| 3 | clarification_answer | 功劳被抢 |
+| 4 | clarification_question | 你希望主角如何反击？ |
+| 5 | clarification_answer | 暗中布局 |
+| 6 | outline | ... |
+
+**根因链**：
+
+1. **上游 SSE 事件结构**：`session_id` 字段在事件**顶层**（与 `type` 同级），不在 `payload` 内。前端从顶层取（`ScriptView.vue:1800` `const { type, session_id, payload } = event`）且工作正常。
+2. **后端 status 事件处理**：`ShortNovelServiceImpl.forwardSse` 行 312-314 从 `payload.getString("session_id")` 取，**取不到**。
+3. **首次 stream 的 currentSessionId[0] 初始为 null**：`forwardSse` 行 253 `final String[] currentSessionId = {knownSessionId}`，首次 stream 调用时 `knownSessionId=null`。
+4. **首次 stream 的 Q1 不累积**：首次 stream 里第一个 `clarification_card` 事件到达时 `currentSessionId[0]` 仍为 null，行 346 的 `if (currentSessionId[0] != null)` 为 false，Q1 不被 `accumulateStage` 累积。
+5. **followup 流正常**：followup 调用 `forwardSse` 时 `knownSessionId = request.getSessionId()`（前端传的，非 null），后续 Q2/Q3 都正确累积。
+6. **drainStages 取到不完整的 stagesHistory**：novel_done 时 drainStages 取到 `[A1, Q2, A2, Q3, A3, outline]`（缺 Q1），saveNovelResult 创建 2 question + 3 answer。
+7. **详情页只能渲染 2 个 card**：从 DB 读到的 clarification_question 只有 2 条。
+
+## 修复方案
+
+**修改文件**：`server/src/main/java/com/emotion/service/impl/ShortNovelServiceImpl.java`
+
+**修改点**：`forwardSse` 方法的事件循环（行 305 附近），在解析 event 后、status 处理之前，**从事件顶层取 `session_id` 同步 `currentSessionId[0]`**（与前端 `ScriptView.vue:1805-1806` 取 sessionId 的方式对齐）。
+
+**新增代码**（放在 `String type = event.getString("type");` 之后、status 事件 `if ("status".equals(type))` 之前）：
+
+```java
+// 从事件顶层取 session_id 同步 sessionId
+// 上游事件结构与前端对齐：session_id 与 type 同级，不在 payload 内
+// 修复：首次 stream 里 status 处理从 payload 取不到 session_id，导致 currentSessionId 保持 null，
+// 第一个 clarification_card 因 sessionId 为 null 不累积，详情页少显示第一个选项卡
+String topSessionId = event.getString("session_id");
+if (topSessionId != null && !topSessionId.isEmpty()) {
+    currentSessionId[0] = topSessionId;
+}
+```
+
+## 影响范围
+
+- 仅 `forwardSse` 方法新增 5 行代码
+- 零现有逻辑改动（status 处理保留原样作为次选，顶层取 sessionId 优先覆盖）
+- 零数据库变更
+- 零前端改动
+
+## 预期效果
+
+- **新剧本**：首次 stream 的 Q1 不再丢失，详情页显示全部 N 个选项卡（与生成页完全一致）
+- **老剧本**（3 个已有 conversation）：保持现状，仍显示 2 个 card。DB 中 stagesHistory 缺失的 Q1 已永久丢失，无法真实恢复。
+
+## 验收标准
+
+1. 在 H5 手动完成一次新的小说生成（包含至少 2 轮澄清）
+2. 进入该剧本的详情页
+3. 验证选项卡数量与生成页完全一致（生成 N 个，详情显示 N 个）
+4. Console 无新增错误
+5. 本地 `mvn clean install` 编译通过

docs/superpowers/specs/2026-07-26-mini-program-novel-save-completion-design.md

@@ -0,0 +1,531 @@
+---
+author: Claude
+created_at: 2026-07-26
+purpose: 修复小程序心愿实现（小说生成）页面数据保存不完整、历史列表看不到最新小说、详情页无法完整复现全流程的方案设计
+---
+
+# 心愿实现小说保存与复现完整性修复设计
+
+## 1. 概述
+
+修复小程序"心愿实现"（ScriptView → 短篇小说生成）页面存在的多个严重问题：
+- 生成的小说没有完整、正常地保存到数据库
+- 历史列表页（ScriptLibraryView）看不到最新生成的小说
+- 详情页无法完整复现用户心愿、澄清选择、大纲、AI 生成内容、对话修改历史
+- 当前保存逻辑只在 `novel_done` 事件触发一次性保存，中间步骤全部丢失
+
+## 2. 现状分析
+
+### 2.1 现有数据保存链路（AS-IS）
+
+```
+[小程序 ScriptView.vue]
+  用户输入心愿 → POST /shortNovel/stream (SSE)
+                       ↓
+[后端 ShortNovelServiceImpl]
+  代理外部 short-novel-service → 拦截 novel_done 事件
+                       ↓
+  调用 saveNovelResult() 一次性保存 6 条数据
+                       ↓
+[数据库] 1 EpicScript + 1 Conversation + 3 Message
+```
+
+### 2.2 已识别的根因
+
+| # | 严重度 | 根因 | 影响 |
+|---|------|------|------|
+| 1 | 🔴 高 | `saveNovelResult` 缺少 `@Transactional` 注解 | 6 次写操作无原子性，中途失败留下脏数据 |
+| 2 | 🔴 高 | DDL 与 Entity 不一致：`t_epic_script` 缺 `conversation_id`/`current_version_message_id` 列；`t_message` 缺 `script_id` 列 | INSERT/UPDATE 失败，异常被吞，导致数据丢失 |
+| 3 | 🔴 高 | `originalQuery` 为空时 `saveNovelResult` 直接返回不保存 | followup 阶段生成的小说永远不会落库 |
+| 4 | 🔴 高 | 中间交互（澄清卡片、大纲确认）没有持久化为消息 | 详情页无法复现全流程 |
+| 5 | 🟡 中 | `saveNovelResult` 写死 `length="short"` / `style="career"` | 列表按 length/style 过滤时看不到 |
+| 6 | 🟡 中 | 列表查询 `getListByCurrentUser` 触发隐性写操作（`ensureConversationForScript`） | 读路径产生写操作，违反分层原则 |
+| 7 | 🟡 中 | `create_time` 排序依赖 `MetaObjectHandler`，若失效则 NULL 排序异常 | 新记录可能排到末尾 |
+| 8 | 🟡 中 | 前端 `novel_done` 后 `fetchScripts()` 刷新不可靠（未 await） | 列表可能不包含最新记录 |
+
+## 3. 目标架构（TO-BE）
+
+### 3.1 核心策略
+
+**实时分阶段保存 + 最终补全：**
+- 每轮交互（澄清回答、大纲确认）完成后立即保存为消息
+- `novel_done` 时补全最终的小说正文消息 + 更新 script 元数据
+- 每个保存操作独立事务，互不影响
+
+### 3.2 完整消息流程
+
+| message_order | sender | type | 触发时机 | content |
+|---|---|---|---|---|
+| 1 | system | system | INIT | 欢迎消息 |
+| 2 | user | chat | INIT | 用户心愿原文（firstQuery） |
+| 3 | assistant | clarification | CLARIFICATION | AI 澄清卡片（metadata=card JSON） |
+| 4 | user | chat | CLARIFICATION_ANSWER | 用户对澄清的回答 |
+| 5 | assistant | outline | OUTLINE | AI 大纲（metadata=outline JSON） |
+| 6 | user | chat | OUTLINE_CONFIRM | 用户确认/修改 |
+| 7 | assistant | script | NOVEL_DONE | 完整小说正文（currentVersionMessageId） |
+| 8+ | user/assistant | chat | 后续对话 | 修改历史 |
+
+## 4. 数据模型修复
+
+### 4.1 DDL 补全（SQL migration）
+
+```sql
+-- 补 t_epic_script 缺失列
+ALTER TABLE t_epic_script
+  ADD COLUMN conversation_id BIGINT NULL COMMENT '关联对话ID',
+  ADD COLUMN current_version_message_id BIGINT NULL COMMENT '当前版本消息ID';
+
+-- 补 t_message 缺失列
+ALTER TABLE t_message
+  ADD COLUMN script_id BIGINT NULL COMMENT '关联剧本ID（冗余反查）';
+
+-- 补 t_conversation 缺失列（如果需要）
+-- ALTER TABLE t_conversation ADD COLUMN current_version_message_id BIGINT NULL;
+```
+
+### 4.2 Entity 校验
+
+确认 `EpicScript.java`、`Message.java`、`Conversation.java` 的字段与 DDL 一致：
+- `EpicScript.conversationId` → `t_epic_script.conversation_id`
+- `EpicScript.currentVersionMessageId` → `t_epic_script.current_version_message_id`
+- `Message.scriptId` → `t_message.script_id`
+
+### 4.3 Message.type 枚举扩展
+
+新增 message type 值：
+- `clarification` — AI 澄清卡片
+- `outline` — AI 大纲
+- `script` — 完整小说正文（已有）
+- `chat` — 普通对话（已有）
+- `system` — 系统消息（已有）
+
+## 5. 后端修复
+
+### 5.1 新增 `NovelSessionService`
+
+负责在 Redis 中缓存 `sessionId → sessionMeta` 的映射：
+- `originalQuery`（用户首次输入的心愿原文）
+- `style`、`length`
+- `conversationId`、`scriptId`、`userId`
+
+**目的：** 保证 followup 流程中即使前端没传 `originalQuery`，也能从 session 恢复。
+
+### 5.2 重构 `saveNovelResult` → 分阶段保存
+
+#### 5.2.1 新方法签名
+
+```java
+@Service
+public class NovelStageService {
+
+    /**
+     * 分阶段保存小说生成过程
+     * @param userId 当前用户ID
+     * @param sessionId 外部 short-novel-service 返回的 session_id
+     * @param stage 当前阶段
+     * @param stageData 阶段数据
+     */
+    public StageSaveResult saveStage(Long userId, String sessionId, NovelStage stage, Map<String, Object> stageData);
+}
+
+public enum NovelStage {
+    INIT,                  // 首次发起，初始化 script + conversation + 首条 user 消息
+    CLARIFICATION,         // AI 返回澄清卡片
+    CLARIFICATION_ANSWER,  // 用户回答澄清
+    OUTLINE,               // AI 返回大纲
+    OUTLINE_CONFIRM,       // 用户确认/修改大纲
+    NOVEL_DONE             // AI 返回完整小说正文（最终补全）
+}
+```
+
+#### 5.2.2 每个 stage 的保存动作
+
+**INIT：**
+- 创建 `EpicScript`（id=雪花ID, userId, title="生成中...", theme=originalQuery, style, length, plotJson={}）
+- 创建 `Conversation`（id=雪花ID, userId, userType="registered", scriptId, title, type="script", status="active"）
+- 创建 Message 1（system 欢迎）
+- 创建 Message 2（user 心愿原文）
+- 更新 EpicScript.conversationId
+- 缓存 sessionMeta 到 Redis
+- 返回 `{scriptId, conversationId}`
+
+**CLARIFICATION：**
+- 创建 Message 3（assistant, type=clarification, content="(见 metadata)", metadata=card JSON）
+- 返回 `{messageId: 3}`
+
+**CLARIFICATION_ANSWER：**
+- 创建 Message 4（user, type=chat, content=answer）
+- 返回 `{messageId: 4}`
+
+**OUTLINE：**
+- 创建 Message 5（assistant, type=outline, content="(见 metadata)", metadata=outline JSON）
+- 更新 EpicScript.plotJson.outline = outline 数据
+- 返回 `{messageId: 5}`
+
+**OUTLINE_CONFIRM：**
+- 创建 Message 6（user, type=chat, content=feedback/confirmation）
+- 返回 `{messageId: 6}`
+
+**NOVEL_DONE（最终补全）：**
+- 创建 Message 7（assistant, type=script, content=fullText, versionNumber=1, metadata=完整正文+章节 JSON）
+- 更新 EpicScript.title = outline.title 或生成默认标题
+- 更新 EpicScript.currentVersionMessageId = message 7 的 id
+- 更新 Conversation.currentMessageId = message 7 的 id
+- 返回 `{messageId: 7, scriptId, conversationId}`
+
+#### 5.2.3 事务保证
+
+每个 stage 独立事务（`@Transactional(rollbackFor = Exception.class)`）：
+- 单个 stage 失败不影响其他 stage
+- 已保存的中间数据不会丢失
+- 失败的 stage 可通过 retry 重试
+
+### 5.3 修复 `originalQuery` fallback
+
+```java
+// ShortNovelServiceImpl.followup() 中
+String originalQuery = request.getOriginalQuery();
+if (StringUtils.isBlank(originalQuery)) {
+    originalQuery = novelSessionService.getOriginalQuery(sessionId);
+}
+if (StringUtils.isBlank(originalQuery)) {
+    throw new BizException("originalQuery 不能为空且无法从 session 恢复");
+}
+```
+
+### 5.4 修复 length/style 硬编码
+
+- `ShortNovelStreamRequest` 增加 `style`、`length` 字段
+- `ShortNovelFollowupRequest` 增加 `style`、`length` 字段
+- 前端在首次发起时传 style/length，后端透传给外部服务
+- `saveNovelResult` 不再写死 `length="short"` / `style="career"`
+
+### 5.5 列表查询修复
+
+#### 5.5.1 `getListByCurrentUser` 修复
+
+```java
+public List<EpicScript> getListByCurrentUser(EpicScriptListRequest request) {
+    Long currentUserId = UserContextHolder.getCurrentUserId();
+    LambdaQueryWrapper<EpicScript> wrapper = new LambdaQueryWrapper<>();
+    wrapper.eq(EpicScript::getUserId, currentUserId)
+           .eq(EpicScript::getIsDeleted, 0);
+
+    // 只在显式传入时才过滤
+    if (StringUtils.isNotBlank(request.getStyle())) {
+        wrapper.eq(EpicScript::getStyle, request.getStyle());
+    }
+    if (StringUtils.isNotBlank(request.getLength())) {
+        wrapper.eq(EpicScript::getLength, request.getLength());
+    }
+    if (StringUtils.isNotBlank(request.getKeyword())) {
+        wrapper.and(w -> w.like(EpicScript::getTitle, request.getKeyword())
+                          .or().like(EpicScript::getTheme, request.getKeyword()));
+    }
+
+    // create_time 倒序，NULL 排最后
+    wrapper.orderByDesc(EpicScript::getCreateTime);
+    wrapper.last("NULLS LAST");  // 或在 Mapper 中使用 coalesce
+
+    return epicScriptMapper.selectList(wrapper);
+}
+```
+
+#### 5.5.2 移除隐性写操作
+
+```java
+// 移除 ensureConversationForScript 中的写操作
+// 仅查询 script，不在列表查询时补建 conversation
+```
+
+#### 5.5.3 校验 `MetaObjectHandler`
+
+确认 `MybatisMetaObjectHandler` 正确填充 `createTime`/`updateTime`：
+- 若 handler 缺失或失效，需要补全实现
+- 字段上加 `@TableField(fill = FieldFill.INSERT)`
+
+## 6. 前端修复
+
+### 6.1 状态管理增强
+
+`stores/app.js` 新增字段：
+- `currentSessionMeta: { sessionId, scriptId, conversationId, originalQuery, style, length }`
+- 提供 setter `setSessionMeta(meta)` 和 getter `getSessionMeta()`
+
+### 6.2 ScriptView.vue 修复
+
+#### 6.2.1 原始参数持久化
+
+```javascript
+const runGeneration = async ({ prompt, source }) => {
+  // 首次发起前，保存原始参数
+  store.setSessionMeta({
+    originalQuery: prompt,
+    style: userStyle.value,
+    length: userLength.value,
+    timestamp: Date.now()
+  })
+
+  // 启动 SSE 流
+  await startNovelStream({ query: prompt, style: ..., length: ..., onEvent: handleShortNovelEvent })
+}
+```
+
+#### 6.2.2 可靠刷新列表
+
+```javascript
+const handleNovelDone = async (payload) => {
+  scriptId.value = payload.scriptId
+  conversationId.value = payload.conversationId
+
+  // await 确保刷新完成
+  try {
+    await store.fetchScripts()
+  } catch (e) {
+    console.error('剧本列表刷新失败:', e)
+    // 显示重试按钮
+  }
+
+  isGenerating.value = false
+}
+```
+
+#### 6.2.3 followup 时 originalQuery 兜底
+
+```javascript
+const submitClarification = async (answer) => {
+  const meta = store.getSessionMeta()
+  if (!meta?.originalQuery) {
+    uni.showToast({ title: '原始心愿已丢失，请重新开始', icon: 'none' })
+    return
+  }
+
+  await followupStream({
+    sessionId: meta.sessionId,
+    action: 'answer_clarification',
+    payload: { answer },
+    originalQuery: meta.originalQuery,
+    style: meta.style,
+    length: meta.length,
+    onEvent: handleShortNovelEvent
+  })
+}
+```
+
+#### 6.2.4 错误处理增强
+
+```javascript
+const handleNovelError = (error) => {
+  isGenerating.value = false
+  // 显示明确错误提示
+  uni.showModal({
+    title: '生成失败',
+    content: error.message || '请稍后重试',
+    showCancel: false,
+    confirmText: '知道了'
+  })
+}
+```
+
+### 6.3 ScriptLibraryView.vue 修复
+
+#### 6.3.1 默认不传 length/style 过滤
+
+```javascript
+onMounted(async () => {
+  await store.fetchScripts()  // 默认查询全部
+})
+```
+
+#### 6.3.2 列表项展示优化
+
+```vue
+<view class="script-card">
+  <view class="script-title">{{ script.title }}</view>
+  <view class="script-meta">
+    <text class="tag-style">{{ script.style }}</text>
+    <text class="tag-length">{{ script.length }}</text>
+    <text class="word-count">{{ script.wordCount }}字</text>
+  </view>
+  <view class="script-time">{{ formatDate(script.createTime) }}</view>
+</view>
+```
+
+### 6.4 ScriptDetailView.vue 增强
+
+进入详情页加载所有消息，按 message_order 顺序完整复现：
+
+```vue
+<template>
+  <view class="script-detail">
+    <!-- 1. 用户心愿原文 -->
+    <view v-if="userWishMessage" class="message-item user">
+      <view class="message-label">💭 用户心愿</view>
+      <view class="message-content">{{ userWishMessage.content }}</view>
+    </view>
+
+    <!-- 2. AI 澄清卡片 -->
+    <view v-if="clarificationMessage" class="message-item assistant">
+      <view class="message-label">🤔 AI 澄清</view>
+      <ClarificationCard :card="clarificationMessage.metadata" readonly />
+    </view>
+
+    <!-- 3. 用户对澄清的回答 -->
+    <view v-if="clarificationAnswerMessage" class="message-item user">
+      <view class="message-label">💬 澄清回答</view>
+      <view class="message-content">{{ clarificationAnswerMessage.content }}</view>
+    </view>
+
+    <!-- 4. AI 大纲 -->
+    <view v-if="outlineMessage" class="message-item assistant">
+      <view class="message-label">📋 大纲</view>
+      <OutlineView :outline="outlineMessage.metadata" />
+    </view>
+
+    <!-- 5. 用户确认/修改 -->
+    <view v-if="outlineConfirmMessage" class="message-item user">
+      <view class="message-label">✏️ 大纲确认</view>
+      <view class="message-content">{{ outlineConfirmMessage.content }}</view>
+    </view>
+
+    <!-- 6. 完整小说正文 -->
+    <view v-if="scriptMessage" class="message-item assistant novel">
+      <view class="message-label">📖 小说正文</view>
+      <Markdown :content="scriptMessage.content" />
+    </view>
+
+    <!-- 7. 后续对话修改历史 -->
+    <view v-for="msg in chatHistoryMessages" :key="msg.id" class="message-item">
+      ...
+    </view>
+
+    <!-- 继续修改按钮 -->
+    <button @click="continueModify">继续修改</button>
+  </view>
+</template>
+```
+
+```javascript
+const loadFullScript = async (scriptId) => {
+  const script = store.getScriptById(scriptId) || (await store.fetchScripts(), store.getScriptById(scriptId))
+  if (!script?.conversationId) return
+
+  const res = await listMessagesByConversation({
+    conversationId: script.conversationId,
+    includeVersions: false
+  })
+  const messages = (res.data || []).sort((a, b) => a.messageOrder - b.messageOrder)
+
+  userWishMessage.value = messages.find(m => m.messageOrder === 2)
+  clarificationMessage.value = messages.find(m => m.messageOrder === 3)
+  clarificationAnswerMessage.value = messages.find(m => m.messageOrder === 4)
+  outlineMessage.value = messages.find(m => m.messageOrder === 5)
+  outlineConfirmMessage.value = messages.find(m => m.messageOrder === 6)
+  scriptMessage.value = messages.find(m => m.messageOrder === 7)
+  chatHistoryMessages.value = messages.filter(m => m.messageOrder > 7)
+}
+```
+
+## 7. 修改文件清单
+
+### 后端新增文件
+
+| 文件 | 说明 |
+|------|------|
+| `service/NovelStageService.java` | 分阶段保存服务 |
+| `service/impl/NovelStageServiceImpl.java` | 分阶段保存实现 |
+| `service/NovelSessionService.java` | session 元数据缓存 |
+| `service/impl/NovelSessionServiceImpl.java` | Redis 缓存实现 |
+| `enums/NovelStage.java` | 阶段枚举 |
+
+### 后端修改文件
+
+| 文件 | 修改内容 |
+|------|---------|
+| `entity/EpicScript.java` | 确认 conversationId/currentVersionMessageId 字段映射 |
+| `entity/Message.java` | 确认 scriptId 字段映射 + 扩展 type 枚举 |
+| `service/impl/EpicScriptDialogueServiceImpl.java` | 重构 saveNovelResult 为分阶段保存 |
+| `service/impl/ShortNovelServiceImpl.java` | 拦截所有 stage 事件，调用 saveStage |
+| `service/impl/EpicScriptServiceImpl.java` | 修复 getListByCurrentUser 过滤逻辑 + 移除隐性写 |
+| `dto/request/ShortNovelStreamRequest.java` | 增加 style/length 字段 |
+| `dto/request/ShortNovelFollowupRequest.java` | 增加 style/length 字段 |
+| `sql/migration/2026-07-26-novel-save-completion.sql` | DDL 补列 |
+
+### 前端修改文件
+
+| 文件 | 修改内容 |
+|------|---------|
+| `stores/app.js` | 增加 currentSessionMeta 字段 + setter/getter |
+| `pages/main/ScriptView.vue` | 增强 originalQuery 持久化、可靠刷新、错误处理 |
+| `pages/main/ScriptLibraryView.vue` | 默认不传过滤参数 + 列表项展示优化 |
+| `pages/main/ScriptDetailView.vue` | 完整复现全流程消息 |
+
+## 8. 验收标准（强制）
+
+### 8.1 验收前置条件
+
+- ✅ 后端代码 `mvn clean install -DskipTests` 编译通过
+- ✅ 后端 `python deploy-remote.py backend` 部署成功，服务器无报错
+- ✅ 小程序 H5 模式启动成功（`http://localhost:5180`）
+
+### 8.2 端到端验收流程（H5 浏览器）
+
+#### 场景 1：完整流程生成小说
+
+1. 打开 `http://localhost:5180`
+2. 进入"心愿实现"页面
+3. 输入心愿文本（如"我想成为一个优秀的产品经理"）
+4. 点击"生成"按钮
+5. **验证：** AI 弹出澄清卡片，UI 显示"已保存"状态
+6. 选择/输入澄清回答
+7. **验证：** 后端数据库 t_message 新增 message_order=4 的 user 消息
+8. AI 生成大纲
+9. **验证：** 后端数据库 t_message 新增 message_order=5 的 assistant 消息 + EpicScript.plotJson.outline 更新
+10. 确认大纲
+11. **验证：** 后端数据库 t_message 新增 message_order=6 的 user 消息
+12. AI 流式生成小说正文
+13. **验证：** 完成后 t_message 新增 message_order=7 的 assistant 消息（type=script）
+14. **验证：** EpicScript.currentVersionMessageId 已回写到 message 7 的 id
+15. 进入"剧本"（library）列表
+16. **验证：** 列表显示刚刚生成的小说
+17. 点击该小说进入详情
+18. **验证：** 详情页按顺序显示：用户心愿 → 澄清卡片 → 澄清回答 → 大纲 → 大纲确认 → 完整小说正文
+19. **验证：** 浏览器 Console 无错误
+20. **验证：** Network 面板所有 API 返回 200
+
+#### 场景 2：中途刷新页面（断点恢复）
+
+1. 走到澄清回答后，刷新页面
+2. **验证：** 重新进入"心愿实现"页面，状态恢复（不要求完全恢复，但要能查到已保存的消息）
+
+#### 场景 3：多次生成小说
+
+1. 连续生成 3 个不同心愿的小说
+2. **验证：** 列表按时间倒序显示 3 条记录
+3. **验证：** 每条记录详情页完整复现
+
+#### 场景 4：对话修改流程
+
+1. 在剧本 chat 视图输入修改意见
+2. **验证：** 后端保存消息
+3. **验证：** 列表和详情同步更新
+
+### 8.3 通过标准
+
+- ✅ 所有场景 1-4 通过
+- ✅ 浏览器 Console 无任何新增错误
+- ✅ Network 面板所有 API 返回 200 或业务预期状态码
+- ✅ 服务器端日志无 ERROR
+- ✅ H5 页面完整验收通过才可标记任务完成
+
+### 8.4 不通过处理
+
+任何场景不通过都必须立即停止，修复后重新部署、重新验收，禁止"部分完成"标记。
+
+## 9. 不在本次范围内
+
+- 外部 short-novel-service 接口调整
+- AI 生成质量优化
+- 收藏、分享等附加功能
+- 真实的语音朗读、语音识别集成
+- 多端（小程序非 H5 模式）适配（H5 已能覆盖小程序核心功能）

docs/superpowers/specs/2026-07-26-novel-list-detail-display-design.md

@@ -0,0 +1,298 @@
+---
+author: huazhongmin
+created_at: 2026-07-26
+purpose: 小说列表页和详情页展示改造设计 — 修复详情页重复展示、列表页增加大纲预览、后端保存澄清问答消息
+---
+
+# 小说列表页 / 详情页展示改造设计
+
+## 1. 背景与问题
+
+### 1.1 当前问题
+
+**详情页重复展示**：`ScriptDetailView.vue` 当前结构存在内容重复：
+- hero-card 显示 `script.summary`（正文前 90 字 — 小说正文开头）
+- tabs 正文 tab 显示 `script.content`（完整小说正文）
+- hero-card 显示 `userWish = script.theme`（用户心愿）
+- 结果：用户看到小说正文展示了两次（summary + fullContent），加上用户心愿，看起来"重复展示了两遍"
+
+**列表页缺少大纲**：`ScriptLibraryView.vue` 当前只显示标题、标签、正文摘要，没有展示小说的大纲结构。
+
+**澄清问答未保存**：后端 `saveNovelResult` 只创建 3 条 message（system 欢迎、user 心愿、assistant 小说正文）。生成过程中的澄清问答（3 轮 Q/A）没有保存为 message，导致详情页无法还原完整生成流程。
+
+### 1.2 核心设计原则
+
+> **"生成的时候是什么样展示的，后续进去详情页面就要怎么样展示"**
+
+详情页必须完全复刻生成时 `ScriptView.vue` 的 chat-bubble 展示结构，不发明新 UI。
+
+---
+
+## 2. 改造范围
+
+| 模块 | 改造内容 | 复杂度 |
+|---|---|---|
+| 后端 `ShortNovelServiceImpl` | 保存 clarification_question / clarification_answer / outline 消息到 conversation.messages | 高 |
+| 后端 新增 API | `/conversation/{conversationId}/messages` 返回消息列表 | 低 |
+| 前端 `ScriptDetailView.vue` | 移除 hero-card + tabs，改为 chat-bubble 流程视图（复用 ScriptView 结构） | 高 |
+| 前端 `ScriptLibraryView.vue` | 新增大纲预览行 | 低 |
+| 前端 store/service | 新增 `fetchConversationMessages` 函数 | 低 |
+
+---
+
+## 3. 数据层改造
+
+### 3.1 后端 Message 保存（ShortNovelServiceImpl）
+
+**现状**：`saveNovelResult` 只在 `novel_done` 时创建 3 条 message。澄清问答没有保存。
+
+**改造**：在 SSE 转发逻辑中增加 message 保存：
+
+| SSE 事件 | 触发的 message 保存 |
+|---|---|
+| `clarification_card` | 创建 assistant message（type=`clarification_question`, sender=`assistant`, content=问题 JSON） |
+| followup `answer_clarification` | 创建 user message（type=`clarification_answer`, sender=`user`, content=用户答案） |
+| `outline_created` | 创建 assistant message（type=`outline`, sender=`assistant`, content=大纲 JSON 摘要） |
+| `novel_done` | 保持现有 3 条 message 不变（system 欢迎 + user 心愿 + assistant 小说正文） |
+
+**messageOrder 策略**：按事件到达顺序递增。每个 message 用 `snowflakeIdGenerator.nextIdAsString()` 生成 ID。
+
+**message metadata**：clarification_question 消息的 metadata 字段存储完整的 card JSON（包含 question、options 等），用于详情页还原 ClarificationCard 组件。
+
+### 3.2 前端 API 层
+
+**新增**：`getMessagesByConversation(conversationId)` — 调用 `/conversation/{conversationId}/messages` 返回按 messageOrder 排序的 message 列表。
+
+**后端新增接口**：
+```java
+@GetMapping("/conversation/{conversationId}/messages")
+public Result<List<MessageResponse>> getMessages(@PathVariable String conversationId)
+```
+
+**注意**：需检查是否已有类似接口（如 `listMessagesByConversation` in scriptChat.js）。如已存在则复用。
+
+### 3.3 前端 Store 层
+
+**新增**：`fetchConversationMessages(conversationId)` — 调用 API 并返回消息列表。
+
+---
+
+## 4. 详情页改造（ScriptDetailView.vue）
+
+### 4.1 核心思路
+
+**不发明新 UI，直接复用 ScriptView.vue 的 chat-bubble 结构**：
+
+| 生成时 ScriptView | 详情页 ScriptDetailView |
+|---|---|
+| `ClarificationCard` 组件（可交互） | 复用 `ClarificationCard` 组件（只读模式） |
+| `kind: 'outline'` beats 渲染 | 复用相同 beats 渲染逻辑 |
+| `kind: 'novel'` novel-text 渲染 | 升级为 Markdown 渲染（详情页不需要流式） |
+| chat-bubble user/system 样式 | 完全复用相同样式 |
+| chat-input-bar（用户输入） | 移除（详情页只读） |
+| outline 修改/确认按钮 | 移除（详情页只读） |
+
+### 4.2 数据加载与消息重建
+
+扩展 ScriptView.vue 已有的"从历史剧本重建 resultMessages"逻辑（line 1449-1500），让它完整还原生成时的消息流：
+
+```javascript
+const rebuildResultMessages = async (script, messages) => {
+  const result = []
+  
+  // 1. 用户心愿（首条 user 消息）
+  if (script.theme) {
+    result.push({ role: 'user', kind: 'text', content: script.theme })
+  }
+  
+  // 2. 按 messageOrder 遍历 messages，转换为对应 kind
+  messages.forEach(m => {
+    if (m.type === 'clarification_question') {
+      result.push({ role: 'assistant', kind: 'card', card: parseCard(m) })
+    } else if (m.type === 'clarification_answer') {
+      const lastCard = [...result].reverse().find(x => x.kind === 'card')
+      if (lastCard) {
+        lastCard.answer = m.content
+        lastCard.submitted = true
+      }
+    } else if (m.type === 'outline') {
+      result.push({ role: 'assistant', kind: 'outline', outline: parseOutline(m) })
+    } else if (m.type === 'script') {
+      result.push({ role: 'assistant', kind: 'novel', content: m.content })
+    }
+  })
+  
+  return result
+}
+```
+
+### 4.3 UI 布局
+
+```
+┌─ 顶部栏 ───────────────────────────┐
+│ ‹    人生剧本 ✦               继续  │
+├──────────────────────────────────────┤
+│                                      │
+│  ┌─ chat-bubble user ────────────┐  │
+│  │ 我想开一家自己的咖啡馆...     │  │
+│  └──────────────────────────────┘  │
+│                                      │
+│  ┌─ chat-bubble system (card) ───┐  │
+│  │ [ClarificationCard 只读模式]   │  │
+│  │ Q: 你的咖啡馆有什么特色？      │  │
+│  │ 已回答：安静的阅读空间         │  │
+│  └──────────────────────────────┘  │
+│                                      │
+│  ┌─ chat-bubble system (outline) ┐  │
+│  │ 咖啡与书页之间                 │  │
+│  │ 简介：一个爱书人的咖啡馆故事   │  │
+│  │ ① 辞职的决定                   │  │
+│  │ ② 街角邂逅                     │  │
+│  │ 结局：新的开始                 │  │
+│  └──────────────────────────────┘  │
+│                                      │
+│  ┌─ chat-bubble system (novel) ──┐  │
+│  │ [Markdown 渲染小说正文]        │  │
+│  │ 你把那份商业计划书放在...      │  │
+│  └──────────────────────────────┘  │
+│                                      │
+├──────────────────────────────────────┤
+│  返回列表  ▶ 播放  继续生成          │
+└──────────────────────────────────────┘
+```
+
+### 4.4 只读模式处理
+
+- **ClarificationCard**：所有卡片都显示"已回答"状态，隐藏选项按钮
+- **Outline**：隐藏"修改大纲"/"确认大纲"按钮
+- **Novel**：用 Markdown 组件渲染（比生成时的纯文本更美观）
+- **无 chat-input-bar**：详情页底部不显示输入框
+
+### 4.5 降级策略
+
+- **老剧本无 clarification 消息**：流程中跳过澄清步骤，只展示 wish → outline → novel
+- **messages API 失败**：降级用 `plotJson.stages` 重建（只有最后 1 轮澄清）
+- **messages 为空**：至少展示 wish（theme）+ novel（fullContent）
+
+---
+
+## 5. 列表页增强（ScriptLibraryView.vue）
+
+### 5.1 现状卡片结构
+
+```
+┌──────────────────────────────────────┐
+│ [封面] │ 标题              [中篇]    │
+│  字   │ [标签] [标签]                │
+│        │ 正文前90字摘要...            │
+│        │ 5章 | 3.2k字 | 07-26        │
+└──────────────────────────────────────┘
+```
+
+### 5.2 增强后的卡片结构
+
+```
+┌──────────────────────────────────────┐
+│ [封面] │ 标题              [中篇]    │
+│  字   │ [标签] [标签]                │
+│        │ 📋 第1章：辞职 · 第2章：邂逅 │  ← 新增大纲预览行
+│        │ 正文前80字摘要...            │
+│        │ 5章 | 3.2k字 | 07-26        │
+└──────────────────────────────────────┘
+```
+
+### 5.3 大纲预览数据源
+
+从 `script.plotJson.stages.outline.beats` 取前 2 章标题：
+
+```javascript
+const getOutlinePreview = (script) => {
+  const beats = script.plotJson?.stages?.outline?.beats
+  if (!Array.isArray(beats) || beats.length === 0) return ''
+  const parts = beats.slice(0, 2).map((beat, i) => {
+    return `第${i + 1}章：${beat.title || ''}`
+  })
+  return `📋 ${parts.join(' · ')}`
+}
+```
+
+### 5.4 模板变更
+
+在 tag-row 和 summary 之间新增大纲预览行：
+
+```vue
+<view v-if="getOutlinePreview(script)" class="outline-preview-row">
+  <text class="outline-preview-text">{{ getOutlinePreview(script) }}</text>
+</view>
+<text class="summary">{{ script.summary || '一段正在生成中的平行人生剧本。' }}</text>
+```
+
+### 5.5 样式
+
+```css
+.outline-preview-row {
+  margin-top: 10rpx;
+  padding: 10rpx 14rpx;
+  border-radius: 14rpx;
+  background: rgba(168, 85, 247, 0.08);
+  border: 1rpx solid rgba(168, 85, 247, 0.16);
+}
+
+.outline-preview-text {
+  font-size: 22rpx;
+  color: rgba(193, 134, 255, 0.88);
+  line-height: 1.4;
+}
+```
+
+### 5.6 降级
+
+- **无大纲数据**：不显示大纲预览行（v-if 控制）
+- **beats 不足 2 章**：有几章显示几章
+- **beats 标题为空**：显示"第1章"（无冒号后缀）
+
+---
+
+## 6. 错误处理与兼容性
+
+### 6.1 老剧本兼容
+
+老剧本（改造前生成的）conversation.messages 只有 3 条（system 欢迎、user 心愿、assistant 小说正文），没有 clarification 和 outline 消息。
+
+**处理**：详情页重建消息流时，跳过缺失的 clarification/outline 步骤。对于大纲数据，fallback 到 `plotJson.stages.outline`（如果存在）。
+
+### 6.2 API 失败降级
+
+- messages API 失败 → 用 `plotJson.stages` 重建（只有最后 1 轮澄清）
+- 整个 script API 失败 → 显示错误页面，不渲染流程
+
+### 6.3 空数据降级
+
+- 无 theme → 不显示心愿气泡
+- 无 outline → 不显示大纲气泡
+- 无 content/fullContent → 显示"暂无正文"占位
+
+---
+
+## 7. 验收标准
+
+### 7.1 H5 端到端验收（强制）
+
+1. **生成新小说**：在 ScriptView 页面生成一篇新小说，观察生成时的展示（心愿 → 澄清 → 大纲 → 正文）
+2. **返回列表**：进入 ScriptLibraryView，确认新小说卡片显示大纲预览行
+3. **进入详情**：点击新小说进入 ScriptDetailView，确认展示与生成时一致（chat-bubble 流程视图）
+4. **老剧本兼容**：点击一个改造前生成的老小说，确认不报错、正常展示（可跳过澄清步骤）
+5. **浏览器 Console**：确认无任何新增错误
+
+### 7.2 mp-weixin 产物重建
+
+代码改造完成后，执行 `npm run dev:mp-weixin` 重新构建 mp-weixin 产物，确保微信开发者工具中的真实用户也能看到改造效果。
+
+---
+
+## 8. 不在范围内
+
+- 不改造 ScriptView.vue 的生成流程 UI（保持现状）
+- 不改造后端 SSE 转发逻辑（只在关键事件点新增 message 保存）
+- 不新增澄清问答的轮数限制（保持上游服务决定的轮数）
+- 不改造列表页的搜索、排序、筛选功能

docs/superpowers/specs/2026-07-28-novel-message-actions-restore-design.md

@@ -0,0 +1,376 @@
+---
+author: AI Assistant
+created_at: 2026-07-28
+purpose: 恢复小程序小说生成页和详情页丢失的"复制、播放、折叠/展开"功能
+---
+
+# 小说消息操作按钮恢复设计
+
+## 问题背景
+
+小程序的小说生成页（ScriptView.vue）和详情页（ScriptDetailView.vue）在之前的重构过程中丢失了"复制、播放、折叠/展开"等操作按钮。用户要求完整恢复这些功能，且必须有真实实现，不能有任何 mock 或占位。
+
+## 根因分析
+
+### 重构历史追溯
+
+通过 git 历史分析，发现功能丢失的关键节点：
+
+1. **commit 9b3006d**（2026-06-27）：添加消息卡片功能方法
+   - 新增 `copyMessageContent(message)`：复制消息内容
+   - 新增 `playMessageTts(message)`：播放 TTS 音频
+   - 新增 `toggleMessageCollapse(message)`：折叠/展开消息
+
+2. **commit 0db434c**（2026-06-27）：在 result-chat-list 中添加功能按钮组
+   - 在每条 assistant 消息下方添加 5 个按钮：复制、换个方向、不像我、继续生成、播放
+   - 使用 `.message-actions` 样式类
+
+3. **commit c2ed051**：ScriptView 复用 MessageCard 组件
+   - 将消息卡片提取为独立的 `MessageCard.vue` 组件
+   - MessageCard 包含完整功能：折叠、复制、换个方向、不像我、续写、改写、查看历史、删除、播放
+
+4. **commit 2c778fa**（2026-07-01）：**ScriptView 删除 read 模式 + 兼容旧模式，统一对话流入口**
+   - 删除了 102 行代码，包括所有使用 MessageCard 的调用
+   - 模板中改为裸的 `<view class="chat-bubble">` 渲染消息
+   - **MessageCard 导入保留但不再使用**（行 241）
+   - **JS 函数保留**：`copyMessageContent`（行 422-438）、`playMessageTts`（行 440-447）、`toggleMessageCollapse`（行 409-420）、`getMessageDisplayContent`（行 402-407）、`isMessageCollapsed`（行 399）
+   - **`collapsedMessageIds` ref 保留**（行 287）
+   - **按钮组 UI 丢失**
+
+5. **ScriptDetailView.vue**：从未使用过 MessageCard，也从未有过这些功能
+
+### 当前状态
+
+**ScriptView.vue（生成页）**：
+- ✅ 所有相关函数已存在（copyMessageContent、playMessageTts、toggleMessageCollapse 等）
+- ✅ `collapsedMessageIds` ref 已存在
+- ❌ 模板中按钮组 UI 已丢失
+- ❌ 相关样式可能已删除或无用
+
+**ScriptDetailView.vue（详情页）**：
+- ❌ 完全没有相关函数
+- ❌ 完全没有 `collapsedMessageIds` ref
+- ❌ 完全没有按钮组 UI
+- ✅ 底部有全局播放按钮（`ttsPlayer.playSource`）
+
+## 设计方案
+
+### 核心设计决策
+
+| 维度 | 决策 |
+|------|------|
+| **功能范围** | 完整恢复所有按钮功能，但布局采用极简设计 |
+| **页面范围** | 生成页（ScriptView）+ 详情页（ScriptDetailView） |
+| **应用对象** | 仅 `kind === 'novel'` 的小说正文消息 |
+| **按钮布局** | 每条 novel 消息下方：折叠/展开 + 复制 + 播放（3 个按钮）|
+| **修订类按钮** | 放在底部操作区（已有），不在每条消息下重复 |
+
+### 设计原则
+
+1. **极简设计**：每条 novel 消息下方只放 3 个核心功能按钮（折叠/展开、复制、播放）
+2. **功能就近**：内容操作类按钮（复制、播放、折叠）贴近消息，用户操作直观
+3. **修订集中**：方向修订类按钮（换个方向、不像我、继续生成）集中在底部操作区，避免重复
+4. **样式统一**：两个页面使用相同的按钮组样式，保持视觉一致性
+5. **代码复用**：ScriptView 已有函数直接复用，ScriptDetailView 新增相同逻辑
+
+### 功能实现细节
+
+#### 1. 折叠/展开
+
+**状态管理**：
+```javascript
+const collapsedMessageIds = ref({})
+```
+
+**核心函数**：
+```javascript
+// 判断消息是否折叠
+const isMessageCollapsed = (message) => {
+  return Boolean(collapsedMessageIds.value[message.id])
+}
+
+// 获取消息显示内容（折叠时截断）
+const getMessageDisplayContent = (message) => {
+  const content = String(message?.content || '')
+  if (!isMessageCollapsed(message)) return content
+  if (content.length <= 200) return content
+  return `${content.slice(0, 200)}...`
+}
+
+// 切换折叠状态
+const toggleMessageCollapse = (message) => {
+  collapsedMessageIds.value = {
+    ...collapsedMessageIds.value,
+    [message.id]: !isMessageCollapsed(message)
+  }
+  analytics.track('script_message_collapse_toggle', {
+    message_id: message?.id || '',
+    collapsed: collapsedMessageIds.value[message.id]
+  }, { eventType: 'script', pagePath })
+}
+```
+
+**UI 交互**：
+- 折叠时：显示前 200 字符 + "展开全文"按钮
+- 展开时：显示完整内容 + "收起全文"按钮
+- 折叠/展开按钮放在消息内容下方，按钮组上方
+
+#### 2. 复制
+
+**核心函数**：
+```javascript
+const copyMessageContent = (message) => {
+  const content = String(message?.content || '')
+  if (!content.trim()) {
+    uni.showToast({ title: '暂无可复制内容', icon: 'none' })
+    return
+  }
+  uni.setClipboardData({
+    data: content,
+    success: () => {
+      uni.showToast({ title: '已复制', icon: 'success' })
+    }
+  })
+  analytics.track('script_message_copy_click', {
+    message_id: message?.id || '',
+    content_length: content.length
+  }, { eventType: 'script', pagePath })
+}
+```
+
+**UI 交互**：
+- 点击"复制"按钮，调用 `uni.setClipboardData`
+- 成功复制后显示 Toast 提示"已复制"
+- 内容为空时显示"暂无可复制内容"
+
+#### 3. 播放
+
+**核心函数**：
+```javascript
+const playMessageTts = (message) => {
+  const scriptId = currentResult.value?.id || ''  // ScriptView
+  // 或 script.value?.id || ''  // ScriptDetailView
+  ttsPlayer.playSource(scriptId)
+  analytics.track('script_message_tts_click', {
+    message_id: message?.id || '',
+    script_id: scriptId
+  }, { eventType: 'script', pagePath })
+}
+```
+
+**UI 交互**：
+- 播放图标动态显示：`▶`（未播放）/ `Ⅱ`（播放中）
+- 播放文本动态显示：`播放`（未播放）/ `暂停`（播放中）
+- 点击按钮调用 `ttsPlayer.playSource(scriptId)` 播放整个小说的 TTS 音频
+
+### UI 设计
+
+**每条 novel 消息下方按钮组**：
+```
+┌─────────────────────────────────────┐
+│  [小说正文内容]                       │
+│  （折叠时显示前 200 字...）            │
+│                                       │
+│  [▼ 展开全文]  ← 折叠/展开按钮         │
+│                                       │
+│  ┌──────────┬──────────┬──────────┐  │
+│  │  📋 复制  │  ▶ 播放   │  ⚙ 更多   │  │  ← 操作按钮组
+│  └──────────┴──────────┴──────────┘  │
+└─────────────────────────────────────┘
+```
+
+**实际实现（3 个按钮）**：
+```
+┌─────────────────────────────────────┐
+│  [小说正文内容]                       │
+│                                       │
+│  [▼ 展开全文]                         │
+│                                       │
+│  ┌──────────┬──────────┬──────────┐  │
+│  │  复制     │  ▶ 播放   │  收起     │  │
+│  └──────────┴──────────┴──────────┘  │
+└─────────────────────────────────────┘
+```
+
+**按钮样式**：
+- 参考 MessageCard 的 `result-actions` 样式（grid 布局）
+- 3 个按钮横向排列，等宽分布
+- 播放按钮为 `primary` 样式（紫色渐变，突出显示）
+- 折叠/展开按钮为独立行，放在按钮组上方
+- 按钮高度：72rpx
+- 按钮圆角：28rpx
+- 按钮背景：`rgba(88, 28, 135, 0.18)`
+- 按钮边框：`1rpx solid rgba(192, 132, 252, 0.35)`
+
+### 页面差异化
+
+| 页面 | 现有修订类按钮 | 需新增功能 |
+|------|--------------|-----------|
+| **生成页（ScriptView）** | 底部输入区已有"换个方向"、"不像我"等按钮 | 每条 novel 消息下加 3 个按钮（复用已有函数） |
+| **详情页（ScriptDetailView）** | 底部已有"继续生成"按钮 | 每条 novel 消息下加 3 个按钮 + 新增所有函数 |
+
+### 应用对象
+
+**只在 `kind === 'novel'` 的 assistant 消息上显示按钮组**：
+- ✅ `kind === 'novel'`：小说正文，需要复制、播放、折叠/展开
+- ❌ `kind === 'card'`：澄清卡片，有特殊交互（提交按钮），不需要这些按钮
+- ❌ `kind === 'outline'`：大纲，结构化数据，不需要这些按钮
+- ❌ `kind === 'text'`：用户消息，不需要这些按钮
+
+## 数据流与代码复用
+
+### ScriptView（生成页）
+
+**已有资源**：
+- ✅ `collapsedMessageIds` ref（行 287）
+- ✅ `isMessageCollapsed(message)` 函数（行 399）
+- ✅ `getMessageDisplayContent(message)` 函数（行 402-407）
+- ✅ `toggleMessageCollapse(message)` 函数（行 409-420）
+- ✅ `copyMessageContent(message)` 函数（行 422-438）
+- ✅ `playMessageTts(message)` 函数（行 440-447）
+- ✅ `ttsPlayer` composable（行 320）
+- ✅ `ttsActionText` computed（行 986-990）
+- ✅ `ttsActionIcon` computed（行 992-994）
+
+**需要补充**：
+- ❌ 模板中按钮组 UI（在 `kind === 'novel'` 的消息下方添加）
+- ❌ 按钮组样式（`.message-actions`、`.action-btn` 等）
+
+### ScriptDetailView（详情页）
+
+**需要新增**：
+- ❌ `collapsedMessageIds` ref
+- ❌ `isMessageCollapsed(message)` 函数
+- ❌ `getMessageDisplayContent(message)` 函数
+- ❌ `toggleMessageCollapse(message)` 函数
+- ❌ `copyMessageContent(message)` 函数
+- ❌ `playMessageTts(message)` 函数
+- ❌ 模板中按钮组 UI
+- ❌ 按钮组样式
+
+**已有资源**：
+- ✅ `ttsPlayer` composable（行 110）
+- ✅ `detailTtsActionText` computed（行 118-122）
+- ✅ `detailTtsIcon` computed（行 124-126）
+
+## 实现步骤
+
+### 步骤 1：ScriptView 恢复按钮组 UI
+
+1. 打开 `mini-program/src/pages/main/ScriptView.vue`
+2. 定位到 `kind === 'novel'` 的消息渲染部分（约行 180-187）
+3. 在 `<view v-else-if="msg.kind === 'novel'" class="chat-bubble system novel-bubble">` 内部：
+   - 将 `<Markdown :content="msg.content" />` 改为 `<Markdown :content="getMessageDisplayContent(msg)" />`
+   - 在 Markdown 下方添加折叠/展开按钮
+   - 在折叠/展开按钮下方添加操作按钮组（复制、播放）
+4. 添加按钮组样式（`.message-actions`、`.action-btn` 等）
+
+### 步骤 2：ScriptDetailView 新增函数
+
+1. 打开 `mini-program/src/pages/main/ScriptDetailView.vue`
+2. 在 `<script setup>` 中添加：
+   - `const collapsedMessageIds = ref({})`
+   - `isMessageCollapsed(message)` 函数
+   - `getMessageDisplayContent(message)` 函数
+   - `toggleMessageCollapse(message)` 函数
+   - `copyMessageContent(message)` 函数
+   - `playMessageTts(message)` 函数
+
+### 步骤 3：ScriptDetailView 添加按钮组 UI
+
+1. 定位到 `kind === 'novel'` 的消息渲染部分（约行 74-76）
+2. 在 `<view v-else-if="msg.kind === 'novel'" class="chat-bubble system novel-bubble">` 内部：
+   - 将 `<Markdown :content="msg.content" />` 改为 `<Markdown :content="getMessageDisplayContent(msg)" />`
+   - 在 Markdown 下方添加折叠/展开按钮
+   - 在折叠/展开按钮下方添加操作按钮组（复制、播放）
+3. 添加按钮组样式（与 ScriptView 保持一致）
+
+### 步骤 4：H5 端到端验收
+
+1. 启动 mini-program H5：`python dev-services.py start mini-program`（端口 5180）
+2. 浏览器访问 `http://localhost:5180/#/pages/main/index?tab=script`
+3. **生成页验收**：
+   - 进入一个已有小说的生成页（或新建一个）
+   - 验证小说正文下方有 3 个按钮：折叠/展开、复制、播放
+   - 点击"折叠"：内容截断显示前 200 字 + "展开全文"按钮
+   - 点击"展开"：内容完整显示 + "收起全文"按钮
+   - 点击"复制"：Toast 提示"已复制"，剪贴板中有内容
+   - 点击"播放"：TTS 开始播放，按钮变为"暂停"
+   - 浏览器 Console 检查：0 新增错误
+4. **详情页验收**：
+   - 进入小说详情页（从列表页点击剧本）
+   - 验证小说正文下方有 3 个按钮：折叠/展开、复制、播放
+   - 重复上述验收步骤
+   - 浏览器 Console 检查：0 新增错误
+
+## 验收标准
+
+### 功能验收
+
+- ✅ **生成页（ScriptView）**：
+  - 每条 novel 消息下方有 3 个按钮：折叠/展开、复制、播放
+  - 折叠/展开功能正常：折叠时显示前 200 字，展开时显示完整内容
+  - 复制功能正常：点击后 Toast 提示"已复制"，剪贴板中有内容
+  - 播放功能正常：点击后 TTS 开始播放，按钮变为"暂停"
+  - Console 无新增错误
+
+- ✅ **详情页（ScriptDetailView）**：
+  - 每条 novel 消息下方有 3 个按钮：折叠/展开、复制、播放
+  - 折叠/展开功能正常
+  - 复制功能正常
+  - 播放功能正常
+  - Console 无新增错误
+
+### 样式验收
+
+- ✅ 按钮组横向排列，3 个按钮等宽分布
+- ✅ 播放按钮为 primary 样式（紫色渐变）
+- ✅ 折叠/展开按钮为独立行，在按钮组上方
+- ✅ 按钮样式与 MessageCard 保持一致（圆角、背景、边框）
+
+### 数据流验收
+
+- ✅ 埋点正常触发：`script_message_collapse_toggle`、`script_message_copy_click`、`script_message_tts_click`
+- ✅ TTS 播放状态同步：播放时按钮显示"暂停"，暂停时按钮显示"播放"
+
+## 影响范围
+
+### 修改文件
+
+1. `mini-program/src/pages/main/ScriptView.vue`
+   - 模板：为 `kind === 'novel'` 的消息添加按钮组 UI
+   - 样式：添加 `.message-actions`、`.action-btn` 等样式
+
+2. `mini-program/src/pages/main/ScriptDetailView.vue`
+   - Script：新增 6 个函数/ref
+   - 模板：为 `kind === 'novel'` 的消息添加按钮组 UI
+   - 样式：添加 `.message-actions`、`.action-btn` 等样式
+
+### 不修改的部分
+
+- ❌ 后端代码：不涉及
+- ❌ 数据库：不涉及
+- ❌ MessageCard.vue 组件：不修改（保持现状）
+- ❌ 其他页面：不涉及
+
+### 兼容性
+
+- ✅ 老剧本（无 clarification/outline 数据）：不影响，仍可正常显示
+- ✅ 新剧本（有完整数据）：新增按钮组功能
+- ✅ 无小说正文的剧本：不显示按钮组（`kind === 'novel'` 的消息不存在）
+
+## 风险与注意事项
+
+1. **TTS 播放的是整个小说**：`ttsPlayer.playSource(scriptId)` 播放的是整个小说的音频，不是单条消息的音频。这是历史设计，保持一致。
+
+2. **折叠阈值**：折叠时显示前 200 字符。这个阈值可以根据实际需求调整。
+
+3. **样式一致性**：两个页面的按钮组样式必须保持一致，建议直接复制 ScriptView 的样式到 ScriptDetailView。
+
+4. **性能考虑**：`collapsedMessageIds` 是响应式对象，每次切换折叠状态都会触发重新渲染。对于大量消息的场景，可能需要优化（当前场景下消息数量有限，不构成问题）。
+
+5. **埋点完整性**：所有用户操作（折叠、复制、播放）都必须触发埋点，用于数据分析。
+
+## 总结
+
+本设计方案通过极简设计恢复小程序小说生成页和详情页丢失的"复制、播放、折叠/展开"功能。核心决策是：每条 novel 消息下方只放 3 个核心功能按钮，修订类按钮集中在底部操作区。实现上，ScriptView 复用已有函数，ScriptDetailView 新增相同逻辑。验收标准明确，影响范围可控。

mini-program/src/components/ClarificationCard.vue

@@ -79,9 +79,9 @@ function isSelected(value) {
 
 function toggleOption(opt) {
   const value = opt.value
-  if (isSingle.value) {
-    selectedValues.value = [value]
-  } else if (isMulti.value) {
+  // 修复：默认当作单选处理（当不是多选也不是文本输入时）
+  if (isMulti.value) {
+    // 多选逻辑
     const idx = selectedValues.value.indexOf(value)
     if (idx >= 0) {
       selectedValues.value.splice(idx, 1)
@@ -91,6 +91,9 @@ function toggleOption(opt) {
         selectedValues.value.push(value)
       }
     }
+  } else if (!isTextInput.value) {
+    // 单选逻辑（默认行为，包括 card_type 未定义或未知的情况）
+    selectedValues.value = [value]
   }
 }
 

mini-program/src/pages/main/ScriptDetailView.vue

@@ -10,42 +10,94 @@
     </view>
 
     <scroll-view class="scroll" scroll-y :show-scrollbar="false">
-      <view class="hero-card kos-card">
-        <text class="eyebrow">PARALLEL LIFE</text>
-        <text class="script-title">{{ script?.title || '未命名剧本' }}</text>
-        <text class="script-summary">{{ script?.summary || '命运正在整理章节。' }}</text>
-        <view class="stats">
-          <view class="stat">
-            <text class="stat-value">{{ script?.style || '爽文' }}</text>
-            <text class="stat-label">风格</text>
+      <view class="detail-flow">
+        <view
+          v-for="msg in resultMessages"
+          :key="msg.id"
+        >
+          <!-- 用户心愿气泡 -->
+          <view v-if="msg.role === 'user' && msg.kind === 'text'" class="chat-bubble user">
+            <text>{{ msg.content }}</text>
           </view>
-          <view class="stat">
-            <text class="stat-value">{{ lengthText }}</text>
-            <text class="stat-label">篇幅</text>
+
+          <!-- 澄清问答卡片（只读，已回答状态） -->
+          <view v-else-if="msg.kind === 'card'" class="chat-bubble system">
+            <view class="card-answered">
+              <text v-if="msg.card?.question" class="card-question-text">{{ msg.card.question }}</text>
+              <!-- 用户回答（中文 label）：通过 options 把 value 映射回 label 显示 -->
+              <view class="card-answer-row">
+                <text class="card-answer-prefix">已回答：</text>
+                <text class="card-answer-label">{{ getAnswerLabel(msg) }}</text>
+              </view>
+              <!-- 选项列表：展示所有可选选项，已选的高亮显示 -->
+              <view v-if="Array.isArray(msg.card?.options) && msg.card.options.length" class="card-options-list">
+                <view
+                  v-for="opt in msg.card.options"
+                  :key="opt.value"
+                  class="card-option-item"
+                  :class="{ selected: opt.value === (msg.selectedValue || msg.answer) }"
+                >
+                  <text class="card-option-label">{{ opt.label || opt.value }}</text>
+                  <text v-if="opt.description" class="card-option-desc">{{ opt.description }}</text>
+                  <text v-if="opt.value === (msg.selectedValue || msg.answer)" class="card-option-mark">✓</text>
+                </view>
+              </view>
+            </view>
           </view>
-          <view class="stat">
-            <text class="stat-value">{{ script?.wordCount || 0 }}</text>
-            <text class="stat-label">字数</text>
+
+          <!-- 大纲（beats 列表，只读） -->
+          <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>
+
+          <!-- 小说正文（Markdown 渲染） -->
+          <view v-else-if="msg.kind === 'novel'" class="chat-bubble system novel-bubble">
+            <Markdown :content="getMessageDisplayContent(msg)" />
+
+            <!-- 折叠/展开按钮（内容超过预览长度时显示） -->
+            <view v-if="msg.content && msg.content.length > ASSISTANT_MESSAGE_PREVIEW_LENGTH" class="collapse-toggle-row" @click="toggleMessageCollapse(msg)">
+              <text class="collapse-toggle-text">{{ isMessageCollapsed(msg) ? '展开全文' : '收起全文' }}</text>
+              <view class="collapse-chevron" :class="{ down: isMessageCollapsed(msg) }">
+                <view></view>
+                <view></view>
+              </view>
+            </view>
+
+            <!-- 操作按钮组 -->
+            <view class="message-actions">
+              <button class="action-btn" @click="copyMessageContent(msg)">
+                <text>复制</text>
+              </button>
+              <button class="action-btn primary" @click="playMessageTts(msg)">
+                <text class="action-icon">{{ ttsPlayer.playing.value ? 'Ⅱ' : '▶' }}</text>
+                <text>{{ ttsPlayer.playing.value ? '暂停' : '播放' }}</text>
+              </button>
+            </view>
           </view>
         </view>
-      </view>
 
-      <view class="tabs kos-card">
-        <view class="tab" :class="{ active: activeTab === 'content' }" @click="activeTab = 'content'">正文</view>
-        <view class="tab" :class="{ active: activeTab === 'outline' }" @click="activeTab = 'outline'">大纲</view>
-      </view>
-
-      <view v-if="activeTab === 'content'" class="article-card kos-card">
-        <Markdown :content="fullContent" />
-      </view>
-
-      <view v-else class="outline-list">
-        <view v-for="(item, index) in outline" :key="index" class="outline-card kos-card">
-          <view class="outline-node">{{ index + 1 }}</view>
-          <view class="outline-body">
-            <text class="outline-title">{{ item.title }}</text>
-            <text class="outline-text">{{ item.text }}</text>
-          </view>
+        <view v-if="resultMessages.length === 0" class="empty-flow">
+          <text>暂无剧本内容</text>
         </view>
       </view>
     </scroll-view>
@@ -68,16 +120,20 @@ import Markdown from '../../components/Markdown.vue'
 import analytics from '../../services/analytics.js'
 import { useTtsPlayer } from '../../composables/useTtsPlayer.js'
 import { useMenuButtonSafeArea } from '../../composables/useMenuButtonSafeArea.js'
+import { listMessagesByConversation } from '../../services/scriptChat.js'
 
 const store = useAppStore()
-const activeTab = ref('content')
 const scriptId = ref('')
 const script = ref(null)
+const resultMessages = ref([])
+const collapsedMessageIds = ref({})
 const pagePath = '/pages/main/ScriptDetailView'
 const ttsPlayer = useTtsPlayer({ pagePath })
 const { capsuleTopReservePx, topbarStyle } = useMenuButtonSafeArea({ extraTopPx: 10 })
 
-const fullContent = computed(() => script.value?.content || '暂无正文内容。')
+// 小说正文折叠时的预览长度（字符）
+const ASSISTANT_MESSAGE_PREVIEW_LENGTH = 120
+
 const lengthText = computed(() => {
   const map = { short: '短篇', medium: '中篇', long: '长篇' }
   return map[script.value?.length] || script.value?.length || '中篇'
@@ -93,39 +149,187 @@ const detailTtsIcon = computed(() => {
   return ttsPlayer.playing.value ? 'Ⅱ' : '▶'
 })
 
-const outline = computed(() => {
-  const text = fullContent.value
-  const parts = text.split(/\n{2,}/).filter(Boolean)
-  if (parts.length > 1) {
-    return parts.slice(0, 8).map((part, index) => {
-      const clean = part.replace(/[#>*_`]/g, '').trim()
-      const lines = clean.split('\n').filter(Boolean)
-      return {
-        title: lines[0]?.replace(/[【】]/g, '') || `章节 ${index + 1}`,
-        text: lines.slice(1).join(' ').slice(0, 120) || clean.slice(0, 120)
-      }
+/**
+ * 判断消息是否处于折叠状态
+ */
+const isMessageCollapsed = (message) => {
+  return Boolean(collapsedMessageIds.value[message.id])
+}
+
+/**
+ * 获取消息显示内容（折叠时截断到预览长度）
+ */
+const getMessageDisplayContent = (message) => {
+  const content = String(message?.content || '')
+  if (!isMessageCollapsed(message)) return content
+  if (content.length <= ASSISTANT_MESSAGE_PREVIEW_LENGTH) return content
+  return `${content.slice(0, ASSISTANT_MESSAGE_PREVIEW_LENGTH)}...`
+}
+
+/**
+ * 切换消息折叠/展开状态
+ */
+const toggleMessageCollapse = (message) => {
+  collapsedMessageIds.value = {
+    ...collapsedMessageIds.value,
+    [message.id]: !isMessageCollapsed(message)
+  }
+  analytics.track('script_message_collapse_toggle', {
+    message_id: message?.id || '',
+    collapsed: collapsedMessageIds.value[message.id]
+  }, { eventType: 'script', pagePath })
+}
+
+/**
+ * 复制消息内容到剪贴板
+ */
+const copyMessageContent = (message) => {
+  const content = String(message?.content || '')
+  if (!content.trim()) {
+    uni.showToast({ title: '暂无可复制内容', icon: 'none' })
+    return
+  }
+  uni.setClipboardData({
+    data: content,
+    success: () => {
+      uni.showToast({ title: '已复制', icon: 'success' })
+    }
+  })
+  analytics.track('script_message_copy_click', {
+    message_id: message?.id || '',
+    content_length: content.length
+  }, { eventType: 'script', pagePath })
+}
+
+/**
+ * 播放消息 TTS 音频（播放整个剧本的音频）
+ */
+const playMessageTts = (message) => {
+  const scriptIdValue = script.value?.id || ''
+  ttsPlayer.playSource(scriptIdValue)
+  analytics.track('script_message_tts_click', {
+    message_id: message?.id || '',
+    script_id: scriptIdValue
+  }, { eventType: 'script', pagePath })
+}
+
+/**
+ * 从后端 message 列表重建统一对话消息流
+ * 复刻 ScriptView 生成时的 chat-bubble 展示结构
+ */
+const rebuildResultMessages = (scriptData, messages) => {
+  const result = []
+
+  // 1. 用户心愿作为首条 user 消息（如果 messages 中没有 user 心愿消息则用 theme 补）
+  const hasUserWishInMessages = messages.some(m => m.sender === 'user' && m.type === 'chat')
+  if (!hasUserWishInMessages && scriptData?.theme) {
+    result.push({
+      id: `wish-${scriptData.id}`,
+      role: 'user',
+      kind: 'text',
+      content: scriptData.theme
     })
   }
 
-  return [
-    { title: '起点', text: script.value?.theme || '从真实的人生经验出发。' },
-    { title: '转折', text: '关键机会出现，旧有困境开始松动。' },
-    { title: '高光', text: '主角完成一次真正的选择，并看见新的自我。' },
-    { title: '回响', text: '剧本落回现实，转化为可执行路径。' }
-  ]
-})
+  // 2. 澄清问答按 messageOrder 升序配对（DB 中 answer 可能先于 question 存入）
+  const clarificationQuestions = messages
+    .filter(m => m.type === 'clarification_question')
+    .sort((a, b) => (a.messageOrder || 0) - (b.messageOrder || 0))
+  const clarificationAnswers = messages
+    .filter(m => m.type === 'clarification_answer')
+    .sort((a, b) => (a.messageOrder || 0) - (b.messageOrder || 0))
 
-const loadScript = async () => {
-  if (!scriptId.value) return
-  ttsPlayer.reset()
-  script.value = store.getScriptById(scriptId.value)
-  if (!script.value) {
-    await store.fetchScripts()
-    script.value = store.getScriptById(scriptId.value)
+  // 为每个 question 配对它之后第一个未分配的 answer（按 messageOrder 升序）
+  const answerAssigned = new Set()
+  const questionAnswerMap = new Map()
+  const unmatchedAnswers = []
+  clarificationQuestions.forEach(q => {
+    const matched = clarificationAnswers.find(a =>
+      !answerAssigned.has(a.id) && (a.messageOrder || 0) > (q.messageOrder || 0)
+    )
+    if (matched) {
+      answerAssigned.add(matched.id)
+      questionAnswerMap.set(q.id, matched)
+    }
+  })
+  clarificationAnswers.forEach(a => {
+    if (!answerAssigned.has(a.id)) unmatchedAnswers.push(a)
+  })
+
+  // 为每个 question 生成 card 消息（含配对答案）
+  const cardMessagesByQuestionId = new Map()
+  clarificationQuestions.forEach(q => {
+    let card = {}
+    try { card = JSON.parse(q.content || '{}') } catch (e) { card = {} }
+    const answer = questionAnswerMap.get(q.id)
+    cardMessagesByQuestionId.set(q.id, {
+      id: q.id,
+      role: 'assistant',
+      kind: 'card',
+      card,
+      answer: answer?.content || '',
+      selectedValue: answer?.content || '',
+      submitted: true
+    })
+  })
+
+  // 3. 按 messageOrder 顺序遍历，构建统一消息流
+  messages.forEach(m => {
+    if (m.type === 'clarification_question') {
+      const cardMsg = cardMessagesByQuestionId.get(m.id)
+      if (cardMsg) result.push(cardMsg)
+    } else if (m.type === 'clarification_answer') {
+      // 已配对的 answer 由 question 那一步负责渲染；这里跳过
+      if (answerAssigned.has(m.id)) return
+      // 未配对的 answer（如 messageOrder 在所有 question 之前的预填充）不展示
+      // 原因：没有对应 question 的 answer 无法正确渲染（用户看不到问题，只显示答案会造成困惑）
+      return
+    } else if (m.type === 'outline') {
+      let outline = {}
+      try { outline = JSON.parse(m.content || '{}') } catch (e) { outline = {} }
+      result.push({ id: m.id, role: 'assistant', kind: 'outline', outline })
+    } else if (m.type === 'script') {
+      result.push({ id: m.id, role: 'assistant', kind: 'novel', content: m.content || '' })
+    } else if (m.type === 'system') {
+      // 跳过系统欢迎消息，不展示
+    } else if (m.type === 'chat' && m.sender === 'user') {
+      result.push({ id: m.id, role: 'user', kind: 'text', content: m.content || '' })
+    }
+  })
+
+  // 调整顺序：用户心愿应该在最前面（DB 中 messageOrder 可能靠后，但逻辑上是第一条）
+  const userWishIndex = result.findIndex(m => m.role === 'user' && m.kind === 'text')
+  if (userWishIndex > 0) {
+    const [userWish] = result.splice(userWishIndex, 1)
+    result.unshift(userWish)
   }
-  if (script.value?.id) {
-    ttsPlayer.prewarmSource(script.value.id)
+
+  // 5. 如果 messages 中没有 script 类型消息，fallback 到 plotJson.fullContent
+  const hasNovel = result.some(m => m.kind === 'novel')
+  if (!hasNovel && scriptData?.plotJson?.fullContent) {
+    result.push({
+      id: `fallback-novel-${scriptData.id}`,
+      role: 'assistant',
+      kind: 'novel',
+      content: scriptData.plotJson.fullContent
+    })
   }
+
+  return result
+}
+
+/**
+ * 把已回答卡片的 value（如 "family"）映射为对应的中文 label（如 "家人"）
+ * 若选项中找不到匹配的 value，则原样返回 answer（兜底）
+ * 若 msg.card 不存在则返回 "未回答"
+ */
+const getAnswerLabel = (msg) => {
+  if (!msg || !msg.card) return '未回答'
+  const raw = msg.selectedValue || msg.answer || ''
+  if (!raw) return '未回答'
+  const options = Array.isArray(msg.card.options) ? msg.card.options : []
+  const match = options.find(opt => opt && opt.value === raw)
+  return match?.label || raw
 }
 
 const continueCurrent = () => {
@@ -153,9 +357,32 @@ const goBack = () => {
 }
 
 onMounted(async () => {
+  // scriptId 从路由参数获取
   const pages = getCurrentPages()
-  scriptId.value = pages[pages.length - 1]?.options?.id || ''
-  await loadScript()
+  const currentPage = pages[pages.length - 1]
+  scriptId.value = currentPage?.options?.id || currentPage?.$page?.options?.id || ''
+
+  // 1. 加载 script 数据
+  await store.fetchScripts()
+  script.value = store.getScriptById(scriptId.value)
+
+  // 2. 加载 conversation messages
+  const conversationId = script.value?.conversationId
+  if (conversationId) {
+    try {
+      const res = await listMessagesByConversation({ conversationId, includeVersions: false })
+      const messages = Array.isArray(res?.data) ? res.data : []
+      resultMessages.value = rebuildResultMessages(script.value, messages)
+    } catch (e) {
+      console.error('[ScriptDetailView] 加载 messages 失败:', e)
+      // 降级：仅展示心愿 + 正文
+      resultMessages.value = rebuildResultMessages(script.value, [])
+    }
+  } else {
+    // 无 conversationId，降级展示
+    resultMessages.value = rebuildResultMessages(script.value, [])
+  }
+
   analytics.trackPageView(pagePath, { script_id: scriptId.value })
   analytics.track('script_detail_view', {
     script_id: scriptId.value,
@@ -242,144 +469,256 @@ onUnmounted(() => {
   padding: 0 30rpx;
 }
 
-.hero-card {
-  border-radius: 32rpx;
-  padding: 36rpx 30rpx;
+/* chat-bubble 流程视图样式 */
+.detail-flow {
+  padding: 20rpx 0 160rpx;
 }
-
-.eyebrow {
-  display: block;
-  color: #c186ff;
-  font-size: 18rpx;
-  letter-spacing: 6rpx;
+.chat-bubble {
+  margin-bottom: 24rpx;
+  padding: 24rpx;
+  border-radius: 24rpx;
 }
-
-.script-title {
-  display: block;
-  margin-top: 14rpx;
-  color: #fff;
-  font-size: 44rpx;
-  line-height: 1.18;
-  font-weight: 900;
+.chat-bubble.user {
+  background: rgba(168, 85, 247, 0.12);
+  align-self: flex-end;
+  margin-left: 80rpx;
 }
-
-.script-summary {
-  display: block;
-  margin-top: 18rpx;
-  color: rgba(226, 216, 246, 0.7);
-  font-size: 25rpx;
-  line-height: 1.62;
-}
-
-.stats {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16rpx;
-  margin-top: 28rpx;
-}
-
-.stat {
-  padding: 18rpx 10rpx;
-  border-radius: 20rpx;
-  text-align: center;
+.chat-bubble.system {
   background: rgba(255, 255, 255, 0.06);
+  margin-right: 40rpx;
 }
-
-.stat-value,
-.stat-label {
-  display: block;
+.card-answered {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
 }
-
-.stat-value {
+.card-question-text {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+.card-answer-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+  margin-bottom: 4rpx;
+}
+.card-answer-prefix {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+.card-answer-label {
+  font-size: 28rpx;
+  color: rgba(193, 134, 255, 0.95);
+  font-weight: 600;
+}
+.card-options-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10rpx;
+  margin-top: 8rpx;
+}
+.card-option-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+  padding: 14rpx 18rpx;
+  border-radius: 14rpx;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1rpx solid rgba(255, 255, 255, 0.08);
+}
+.card-option-item.selected {
+  background: rgba(168, 85, 247, 0.16);
+  border-color: rgba(168, 85, 247, 0.45);
+}
+.card-option-label {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.92);
+  font-weight: 500;
+}
+.card-option-item.selected .card-option-label {
+  color: rgba(220, 195, 255, 1);
+}
+.card-option-desc {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.55);
+  line-height: 1.5;
+}
+.card-option-mark {
+  position: absolute;
+  right: 14rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 30rpx;
+  color: rgba(220, 195, 255, 1);
+  font-weight: 700;
+}
+.outline-title {
+  font-size: 32rpx;
+  font-weight: 600;
   color: #fff;
+  margin-bottom: 12rpx;
+}
+.outline-logline {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.7);
+  margin-bottom: 16rpx;
+}
+.outline-beats {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+.beat-item {
+  display: flex;
+  gap: 16rpx;
+}
+.beat-order {
   font-size: 24rpx;
-  font-weight: 800;
+  color: rgba(193, 134, 255, 0.88);
+  width: 40rpx;
+}
+.beat-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+.beat-title {
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.9);
+}
+.beat-summary {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+.outline-ending {
+  margin-top: 16rpx;
+  padding-top: 16rpx;
+  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
+}
+.ending-label {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.5);
+  margin-right: 12rpx;
+}
+.ending-text {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.8);
+}
+.novel-bubble {
+  padding: 32rpx;
 }
 
-.stat-label {
-  margin-top: 6rpx;
-  color: rgba(219, 207, 243, 0.58);
-  font-size: 19rpx;
-}
-
-.tabs {
-  height: 76rpx;
-  margin-top: 24rpx;
-  border-radius: 999rpx;
-  padding: 6rpx;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.tab {
-  border-radius: 999rpx;
+/* 折叠/展开按钮行 */
+.collapse-toggle-row {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(224, 214, 243, 0.64);
+  gap: 12rpx;
+  margin-top: 20rpx;
+  padding: 16rpx 0;
+  border-radius: 999rpx;
+  background: rgba(88, 28, 135, 0.12);
+  border: 1rpx solid rgba(192, 132, 252, 0.28);
+  color: rgba(246, 230, 255, 0.96);
   font-size: 26rpx;
   font-weight: 700;
 }
 
-.tab.active {
-  color: #fff;
-  background: linear-gradient(135deg, #a63cff, #6530ff);
-  box-shadow: 0 0 26rpx rgba(162, 71, 255, 0.48);
+.collapse-toggle-row:active {
+  transform: scale(0.98);
+  opacity: 0.92;
 }
 
-.article-card {
-  margin: 24rpx 0 34rpx;
-  border-radius: 30rpx;
-  padding: 30rpx;
+.collapse-toggle-text {
+  line-height: 1;
 }
 
-.outline-list {
-  display: flex;
-  flex-direction: column;
-  gap: 18rpx;
-  margin: 24rpx 0 34rpx;
-}
-
-.outline-card {
-  border-radius: 26rpx;
-  padding: 26rpx;
-  display: flex;
-  gap: 20rpx;
-}
-
-.outline-node {
-  width: 48rpx;
-  height: 48rpx;
+/* 折叠箭头图标 */
+.collapse-chevron {
+  position: relative;
+  width: 20rpx;
+  height: 16rpx;
   flex-shrink: 0;
-  border-radius: 50%;
+  transition: transform 0.18s ease;
+}
+
+.collapse-chevron.down {
+  transform: rotate(180deg);
+}
+
+.collapse-chevron view {
+  position: absolute;
+  top: 7rpx;
+  width: 12rpx;
+  height: 4rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(90deg, #fff3b0, #ffd86b);
+  box-shadow: 0 0 12rpx rgba(255, 216, 107, 0.5);
+}
+
+.collapse-chevron view:first-child {
+  left: 0;
+  transform: rotate(-38deg);
+  transform-origin: right center;
+}
+
+.collapse-chevron view:last-child {
+  right: 0;
+  transform: rotate(38deg);
+  transform-origin: left center;
+}
+
+/* 操作按钮组 */
+.message-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+  margin-top: 20rpx;
+}
+
+.action-btn {
+  height: 72rpx;
+  min-height: 72rpx;
+  padding: 0 8rpx;
+  border-radius: 28rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: #e8ccff;
+  font-size: 26rpx;
+  font-weight: 700;
+  line-height: 1.15;
+  text-align: center;
+  white-space: normal;
+  box-sizing: border-box;
+  background: rgba(88, 28, 135, 0.18);
+  border: 1rpx solid rgba(192, 132, 252, 0.35);
+}
+
+.action-btn.primary {
   color: #fff;
-  font-size: 22rpx;
-  font-weight: 900;
-  background: linear-gradient(135deg, #a855ff, #4f46e5);
-  box-shadow: 0 0 22rpx rgba(168, 85, 255, 0.48);
+  background: linear-gradient(145deg, #8c44f2, #5f1db8);
 }
 
-.outline-body {
-  flex: 1;
-  min-width: 0;
-}
-
-.outline-title {
-  display: block;
-  color: #fff;
-  font-size: 27rpx;
-  font-weight: 900;
-}
-
-.outline-text {
-  display: block;
-  margin-top: 10rpx;
-  color: rgba(223, 211, 245, 0.7);
+.action-icon {
+  margin-right: 8rpx;
   font-size: 24rpx;
-  line-height: 1.6;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.action-btn::after {
+  border: 0;
+}
+
+.empty-flow {
+  padding: 80rpx 0;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 28rpx;
 }
 
 .bottom-actions {

mini-program/src/pages/main/ScriptLibraryView.vue

@@ -86,6 +86,10 @@
             <text v-for="tag in getTags(script)" :key="tag" class="tag">{{ tag }}</text>
           </view>
 
+          <view v-if="getOutlinePreview(script)" class="outline-preview-row">
+            <text class="outline-preview-text">{{ getOutlinePreview(script) }}</text>
+          </view>
+
           <text class="summary">{{ script.summary || script.content || '一段正在生成中的平行人生剧本。' }}</text>
 
           <view class="meta-row">
@@ -134,7 +138,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { useAppStore } from '../../stores/app.js'
 import { toggleFavoriteScript, checkFavoriteScript } from '../../services/epicScript.js'
 
@@ -148,6 +152,12 @@ const activeMenuId = ref('')
 const deleteTarget = ref(null)
 const deletingScript = ref(false)
 
+// 每次打开历史列表（组件挂载）时主动拉取最新剧本，避免显示 store 旧缓存
+// 解决：生成完小说后打开历史列表看不到最新记录的问题
+onMounted(() => {
+  store.fetchScripts()
+})
+
 // 固定 5 个分类标签：全部 / 短篇 / 中篇 / 长篇 / 收藏夹
 const typeTabs = [
   { label: '全部', value: 'all' },
@@ -225,7 +235,18 @@ const getTags = (script) => {
   return []
 }
 
-const getChapterCount = (script) => script.chapterCount || script.chapters || 0
+const getChapterCount = (script) => {
+  // 优先从 beats 数组长度获取（Task 1-5 部署后新剧本结构）
+  const beats = script?.plotJson?.stages?.outline?.beats
+  if (Array.isArray(beats) && beats.length > 0) return beats.length
+
+  // Fallback：根据 length 字段估算（老剧本无 beats 数据）
+  const length = script?.length
+  if (length === 'short') return 1
+  if (length === 'medium') return 2
+  if (length === 'long') return 4
+  return 1
+}
 
 const getWordCount = (script) => {
   const count = Number(script.wordCount || 0)
@@ -243,6 +264,25 @@ const getProgress = (script) => Math.max(0, Math.min(99, Number(script.progress
 
 const getInitial = (script) => (script.title || '剧').slice(0, 1)
 
+/**
+ * 获取大纲预览文本（前 2 章标题）
+ * 数据来源按优先级探测：
+ * 1. plotJson.stages.outline.beats（Task 1-5 部署后新生成的小说）
+ * 2. plotJson.fullPayload.outline.beats（兼容老剧本可能的 fullPayload 结构）
+ * 3. 直接 plotJson.outline.beats（兜底）
+ */
+const getOutlinePreview = (script) => {
+  const beats = script?.plotJson?.stages?.outline?.beats
+    || script?.plotJson?.fullPayload?.outline?.beats
+    || script?.plotJson?.outline?.beats
+  if (!Array.isArray(beats) || beats.length === 0) return ''
+  const parts = beats.slice(0, 2).map((beat, i) => {
+    const title = beat.title || ''
+    return `第${i + 1}章：${title}`
+  })
+  return `📋 ${parts.join(' · ')}`
+}
+
 const isFavorite = (script) => {
   return Boolean(favoriteStatus.value[String(script.id)])
 }
@@ -789,6 +829,19 @@ const confirmDeleteScript = async () => {
   background: rgba(149, 55, 255, 0.2);
 }
 
+.outline-preview-row {
+  margin-top: 10rpx;
+  padding: 10rpx 14rpx;
+  border-radius: 14rpx;
+  background: rgba(168, 85, 247, 0.08);
+  border: 1rpx solid rgba(168, 85, 247, 0.16);
+}
+.outline-preview-text {
+  font-size: 22rpx;
+  color: rgba(193, 134, 255, 0.88);
+  line-height: 1.4;
+}
+
 .summary {
   display: -webkit-box;
   margin-top: 14rpx;

mini-program/src/pages/main/ScriptView.vue

@@ -130,7 +130,24 @@
                 />
                 <view v-else class="card-answered">
                   <text v-if="msg.card?.question" class="card-question-text">{{ msg.card.question }}</text>
-                  <text>已回答：{{ msg.answer }}</text>
+                  <!-- 用户回答（中文 label）：通过 options 把 value 映射回 label 显示 -->
+                  <view class="card-answer-row">
+                    <text class="card-answer-prefix">已回答：</text>
+                    <text class="card-answer-label">{{ getAnswerLabel(msg) }}</text>
+                  </view>
+                  <!-- 选项列表：展示用户可选的所有选项，已选的高亮显示 -->
+                  <view v-if="Array.isArray(msg.card?.options) && msg.card.options.length" class="card-options-list">
+                    <view
+                      v-for="opt in msg.card.options"
+                      :key="opt.value"
+                      class="card-option-item"
+                      :class="{ selected: opt.value === (msg.selectedValue || msg.answer) }"
+                    >
+                      <text class="card-option-label">{{ opt.label || opt.value }}</text>
+                      <text v-if="opt.description" class="card-option-desc">{{ opt.description }}</text>
+                      <text v-if="opt.value === (msg.selectedValue || msg.answer)" class="card-option-mark">✓</text>
+                    </view>
+                  </view>
                 </view>
               </view>
 
@@ -166,7 +183,28 @@
               </view>
 
               <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>
+                <text class="novel-text">{{ getMessageDisplayContent(msg) }}</text>
+                <text v-if="msg.pending && !isMessageCollapsed(msg)" class="typing-cursor">|</text>
+
+                <!-- 折叠/展开按钮（内容超过预览长度时显示） -->
+                <view v-if="msg.content && msg.content.length > ASSISTANT_MESSAGE_PREVIEW_LENGTH" class="collapse-toggle-row" @click="toggleMessageCollapse(msg)">
+                  <text class="collapse-toggle-text">{{ isMessageCollapsed(msg) ? '展开全文' : '收起全文' }}</text>
+                  <view class="collapse-chevron" :class="{ down: isMessageCollapsed(msg) }">
+                    <view></view>
+                    <view></view>
+                  </view>
+                </view>
+
+                <!-- 操作按钮组（仅在非 pending 状态显示） -->
+                <view v-if="!msg.pending" class="message-actions">
+                  <button class="action-btn" @click="copyMessageContent(msg)">
+                    <text>复制</text>
+                  </button>
+                  <button class="action-btn primary" @click="playMessageTts(msg)">
+                    <text class="action-icon">{{ ttsPlayer.playing.value ? 'Ⅱ' : '▶' }}</text>
+                    <text>{{ ttsPlayer.playing.value ? '暂停' : '播放' }}</text>
+                  </button>
+                </view>
               </view>
 
               <view v-else class="chat-bubble system">
@@ -1189,6 +1227,20 @@ const PENDING_SCRIPT_CHAT_KEY = 'pending_open_script_chat'
 const createMessageId = () => `msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
 const createConversationId = () => `conv-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
 
+/**
+ * 把已回答卡片的 value（如 "family"）映射为对应的中文 label（如 "家人"）
+ * 若选项中找不到匹配的 value，则原样返回 answer（兜底）
+ * 若 msg.card 不存在则返回 "未回答"
+ */
+const getAnswerLabel = (msg) => {
+  if (!msg || !msg.card) return '未回答'
+  const raw = msg.selectedValue || msg.answer || ''
+  if (!raw) return '未回答'
+  const options = Array.isArray(msg.card.options) ? msg.card.options : []
+  const match = options.find(opt => opt && opt.value === raw)
+  return match?.label || raw
+}
+
 const getCurrentScriptId = () => String(currentResult.value?.id || '')
 const getCurrentConversationId = () => String(currentConversationId.value || currentResult.value?.conversationId || '')
 
@@ -1413,7 +1465,10 @@ const normalizeGeneratedContent = (text) => {
 const openScriptChat = async (payload = {}) => {
   uni.removeStorageSync(PENDING_SCRIPT_CHAT_KEY)
   const scriptIdParam = String(payload?.id || payload?.scriptId || '')
-  let script = payload?.script || (payload?.id ? payload : null)
+  // 优先使用 payload 中携带的完整 script 对象；否则按 id 从 store 取完整数据
+  // 修复：payload 只有 id 时，直接用 payload 会导致 conversationId/plotJson 等字段缺失，
+  // 进而 loadMessages 不会被调用，详情页内容为空
+  let script = payload?.script || null
   if (!script?.id && scriptIdParam) {
     script = store.getScriptById(scriptIdParam)
     if (!script) {
@@ -1455,45 +1510,100 @@ const openScriptChat = async (payload = {}) => {
     await loadMessages()
   }
 
-  // 将历史剧本数据转换为统一对话消息格式，填充 resultMessages
-  const novelContent = currentResult.value?.content || currentResult.value?.plotJson?.fullContent || ''
-  const wishTheme = currentResult.value?.theme || currentResult.value?.title || ''
+  // 从后端 messages 重建统一对话消息流，复刻生成时的 chat-bubble 展示
+  // 不再重复 push wishTheme/novelContent（messages 中已包含）
+  const messagesList = messages.value || []
 
-  // 1. 用户心愿作为首条 user 消息
-  if (wishTheme) {
-    resultMessages.value.push({
-      id: `loaded-wish-${Date.now()}`,
-      role: 'user',
-      kind: 'text',
-      content: wishTheme,
-      pending: false,
-      time: formatMessageTime(),
-      submitted: false,
-      confirmed: false
-    })
-  }
+  // 第一步：先把所有澄清问答按 question-answer 配对（按 messageOrder 升序）
+  // 原因：DB 中 answer 可能先于 question 存入（messageOrder 更小），不能简单按数组顺序匹配「最后一张 card」
+  // 策略：question 按 messageOrder 升序排序，每条 question 配对它之后第一个未分配的 answer
+  const clarificationQuestions = messagesList
+    .filter(m => m.type === 'clarification_question')
+    .sort((a, b) => (a.messageOrder || 0) - (b.messageOrder || 0))
+  const clarificationAnswers = messagesList
+    .filter(m => m.type === 'clarification_answer')
+    .sort((a, b) => (a.messageOrder || 0) - (b.messageOrder || 0))
 
-  // 2. 当前小说正文作为 AI novel 消息（已完成态）
-  if (novelContent) {
-    resultMessages.value.push({
-      id: `loaded-novel-${Date.now()}`,
+  // 为每个 question 配对一个 answer（按 messageOrder 升序，第一个 > question.messageOrder 且未被占用的）
+  const answerAssigned = new Set()
+  const questionAnswerMap = new Map()
+  const unmatchedAnswers = []
+  clarificationQuestions.forEach(q => {
+    const matched = clarificationAnswers.find(a =>
+      !answerAssigned.has(a.id) && (a.messageOrder || 0) > (q.messageOrder || 0)
+    )
+    if (matched) {
+      answerAssigned.add(matched.id)
+      questionAnswerMap.set(q.id, matched)
+    }
+  })
+  // 未匹配的 answer（如 messageOrder 在所有 question 之前的预填充）不展示
+  // 原因：没有对应 question 的 answer 无法正确渲染（用户看不到问题，只显示答案会造成困惑）
+  clarificationAnswers.forEach(a => {
+    if (!answerAssigned.has(a.id)) unmatchedAnswers.push(a)
+  })
+
+  // 为每个 question 生成 card 消息（含配对答案）
+  const cardMessagesByQuestionId = new Map()
+  clarificationQuestions.forEach(q => {
+    let card = {}
+    try { card = JSON.parse(q.content || '{}') } catch (e) { card = {} }
+    const answer = questionAnswerMap.get(q.id)
+    cardMessagesByQuestionId.set(q.id, {
+      id: q.id || createMessageId(),
       role: 'assistant',
-      kind: 'novel',
-      content: novelContent,
+      kind: 'card',
+      content: '',
+      card,
+      answer: answer?.content || '',
+      selectedValue: answer?.content || '',
       pending: false,
       time: formatMessageTime(),
-      submitted: false,
-      confirmed: false
+      submitted: true,
+      confirmed: true
     })
-  }
+  })
 
-  // 3. 对话历史中除首条外的其他消息追加到对话流
-  //    （首条通常是与 wishTheme 重复的用户消息，跳过避免重复）
-  if (messages.value.length > 0) {
-    messages.value.slice(1).forEach(m => {
+  // 第二步：按 messageOrder 顺序遍历消息，构建统一消息流
+  messagesList.forEach(m => {
+    if (m.type === 'clarification_question') {
+      const cardMsg = cardMessagesByQuestionId.get(m.id)
+      if (cardMsg) resultMessages.value.push(cardMsg)
+    } else if (m.type === 'clarification_answer') {
+      // 已配对到 question 的 answer 由 question 那一步负责渲染；这里跳过
+      if (answerAssigned.has(m.id)) return
+      // 未配对的 answer（如 messageOrder 在所有 question 之前的预填充）不展示
+      // 原因：没有对应 question 的 answer 无法正确渲染（用户看不到问题，只显示答案会造成困惑）
+      return
+    } else if (m.type === 'outline') {
+      let outline = {}
+      try { outline = JSON.parse(m.content || '{}') } catch (e) { outline = {} }
       resultMessages.value.push({
         id: m.id || createMessageId(),
-        role: m.sender === 'user' ? 'user' : 'assistant',
+        role: 'assistant',
+        kind: 'outline',
+        content: '',
+        outline,
+        pending: false,
+        time: formatMessageTime(),
+        submitted: false,
+        confirmed: true
+      })
+    } else if (m.type === 'script') {
+      resultMessages.value.push({
+        id: m.id || createMessageId(),
+        role: 'assistant',
+        kind: 'novel',
+        content: m.content || '',
+        pending: false,
+        time: formatMessageTime(),
+        submitted: false,
+        confirmed: true
+      })
+    } else if (m.type === 'chat' && m.sender === 'user') {
+      resultMessages.value.push({
+        id: m.id || createMessageId(),
+        role: 'user',
         kind: 'text',
         content: m.content || '',
         pending: false,
@@ -1501,12 +1611,20 @@ const openScriptChat = async (payload = {}) => {
         submitted: false,
         confirmed: false
       })
-    })
+    }
+    // 跳过 system 类型（不展示）
+  })
+
+  // 调整顺序：用户心愿应该在最前面（DB 中 messageOrder 可能靠后，但逻辑上是第一条）
+  const userWishIndex = resultMessages.value.findIndex(m => m.role === 'user' && m.kind === 'text')
+  if (userWishIndex > 0) {
+    const [userWish] = resultMessages.value.splice(userWishIndex, 1)
+    resultMessages.value.unshift(userWish)
   }
 
   analytics.track('script_chat_open_from_library', {
     script_id: script.id,
-    has_history: messages.value.length > 0
+    has_history: messagesList.length > 0
   }, { eventType: 'script', pagePath })
   scrollResultToLatest()
 }
@@ -1649,6 +1767,19 @@ const runGeneration = async ({ prompt, displayText, source = 'text', saveTheme }
   novelSessionId.value = ''
   firstQuery.value = text  // 记住首次心愿，用于后续 followup 保存剧本
   console.log('[ScriptView] 设置 firstQuery:', { length: text.length })
+
+  // 把原始心愿保存到 store，供 followup 时透传给后端（避免 originalQuery 丢失导致不保存）
+  if (store.setSessionMeta) {
+    store.setSessionMeta({
+      sessionId: '',          // 后续在 status 事件中更新
+      scriptId: '',
+      conversationId: '',
+      originalQuery: text,
+      style: 'career',
+      length: 'short'
+    })
+  }
+
   pendingNextResponse.value = true  // 标记等待下一个 assistant 响应
   resumeableSessionId.value = ''
   outlineFeedback.value = ''
@@ -1689,13 +1820,23 @@ const runGeneration = async ({ prompt, displayText, source = 'text', saveTheme }
   }
 }
 
-const handleShortNovelEvent = (event) => {
+const handleShortNovelEvent = async (event) => {
   const { type, session_id, payload = {} } = event
   const timestamp = Date.now()
 
   console.log('[ScriptView] 收到事件:', { type, session_id, timestamp })
 
-  if (session_id) novelSessionId.value = session_id
+  if (session_id) {
+    novelSessionId.value = session_id
+    // 把外部 short-novel-service 返回的 session_id 同步到 store，供 followup 透传
+    if (store.setSessionMeta && store.getSessionMeta) {
+      const meta = store.getSessionMeta()
+      if (meta) {
+        meta.sessionId = session_id
+        store.setSessionMeta(meta)
+      }
+    }
+  }
 
   switch (type) {
     case 'status':
@@ -1751,8 +1892,25 @@ const handleShortNovelEvent = (event) => {
       generationStatus.value = 'idle'
       pendingNextResponse.value = false
       persistResultMessages()
-      // 从后端刷新剧本列表，确保新生成的短篇出现在历史中（非阻塞）
-      store.fetchScripts()
+
+      // 把 scriptId/conversationId 同步到 store，便于详情页/历史页查最新剧本
+      if (store.setSessionMeta && store.getSessionMeta) {
+        const meta = store.getSessionMeta()
+        if (meta) {
+          meta.scriptId = scriptId.value
+          meta.conversationId = conversationId.value
+          store.setSessionMeta(meta)
+        }
+      }
+
+      // 可靠刷新剧本列表：使用 await 确保后端返回后再继续，避免列表中看不到最新剧本
+      try {
+        await store.fetchScripts()
+        console.log('[ScriptView] novel_done 后剧本列表刷新成功')
+      } catch (e) {
+        console.error('[ScriptView] novel_done 后剧本列表刷新失败:', e)
+        uni.showToast({ title: '列表刷新失败，请手动刷新', icon: 'none' })
+      }
       break
     }
     case 'error':
@@ -1772,24 +1930,32 @@ const submitClarification = (answer) => {
   if (answeringClarification.value) return
   // 找最后一张未提交的卡片消息（mp-weixin 模板不支持内联箭头函数传 msg，改为自己查找）
   const card = [...resultMessages.value].reverse().find(m => m.kind === 'card' && !m.submitted)
-  // 通过 value 查找选项的 label，用于前端显示；后端 payload 仍用 value（语义化）
-  const option = card?.card?.options?.find(opt => opt.value === answer)
-  const label = option?.label || answer
   if (card) {
     card.submitted = true
-    card.answer = label  // 显示用 label（中文）；答案已在卡片中显示，无需额外用户气泡
+    // answer 存用户提交的 value，渲染时通过 card.options 映射成中文 label（与历史回放逻辑一致）
+    card.answer = answer
+    card.selectedValue = answer
   }
   pendingNextResponse.value = true  // 标记等待下一个 assistant 响应
   answeringClarification.value = true
+
+  // originalQuery 兜底：优先 firstQuery，缺失时从 store 获取，避免 followup 时 originalQuery 为空导致不保存
+  const effectiveOriginalQuery = firstQuery.value || (store.getSessionMeta && store.getSessionMeta()?.originalQuery) || ''
+  if (!effectiveOriginalQuery) {
+    uni.showToast({ title: '原始心愿已丢失，请重新开始', icon: 'none' })
+    answeringClarification.value = false
+    return
+  }
+
   console.log('[ScriptView] submitClarification:', {
     sessionId: novelSessionId.value,
-    originalQueryLength: firstQuery.value?.length
+    originalQueryLength: effectiveOriginalQuery.length
   })
   currentStreamTask.value = followupStream({
     sessionId: novelSessionId.value,
     action: 'answer_clarification',
     payload: { answer },  // 后端仍收 value
-    originalQuery: firstQuery.value,  // 首次心愿文本，用于后续 novel_done 保存
+    originalQuery: effectiveOriginalQuery,  // 首次心愿文本，用于后续 novel_done 保存
     onEvent: handleShortNovelEvent,
     onError: (errMsg) => markGenerationFailed(errMsg)
   })
@@ -3697,6 +3863,63 @@ onUnmounted(() => {
   font-size: 26rpx;
   padding: 16rpx 0;
 }
+.card-answer-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+  margin-bottom: 12rpx;
+}
+.card-answer-prefix {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.6);
+}
+.card-answer-label {
+  font-size: 28rpx;
+  color: rgba(193, 134, 255, 0.95);
+  font-weight: 600;
+}
+.card-options-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10rpx;
+  margin-top: 8rpx;
+}
+.card-option-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+  padding: 14rpx 18rpx;
+  border-radius: 14rpx;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1rpx solid rgba(255, 255, 255, 0.08);
+}
+.card-option-item.selected {
+  background: rgba(168, 85, 247, 0.16);
+  border-color: rgba(168, 85, 247, 0.45);
+}
+.card-option-label {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.92);
+  font-weight: 500;
+}
+.card-option-item.selected .card-option-label {
+  color: rgba(220, 195, 255, 1);
+}
+.card-option-desc {
+  font-size: 22rpx;
+  color: rgba(255, 255, 255, 0.55);
+  line-height: 1.5;
+}
+.card-option-mark {
+  position: absolute;
+  right: 14rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 30rpx;
+  color: rgba(220, 195, 255, 1);
+  font-weight: 700;
+}
 
 .outline-title {
   color: #ffffff;
@@ -3870,4 +4093,107 @@ onUnmounted(() => {
   50% { opacity: 0; }
 }
 
+/* 折叠/展开按钮行 */
+.collapse-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  margin-top: 20rpx;
+  padding: 16rpx 0;
+  border-radius: 999rpx;
+  background: rgba(88, 28, 135, 0.12);
+  border: 1rpx solid rgba(192, 132, 252, 0.28);
+  color: rgba(246, 230, 255, 0.96);
+  font-size: 26rpx;
+  font-weight: 700;
+}
+
+.collapse-toggle-row:active {
+  transform: scale(0.98);
+  opacity: 0.92;
+}
+
+.collapse-toggle-text {
+  line-height: 1;
+}
+
+/* 折叠箭头图标 */
+.collapse-chevron {
+  position: relative;
+  width: 20rpx;
+  height: 16rpx;
+  flex-shrink: 0;
+  transition: transform 0.18s ease;
+}
+
+.collapse-chevron.down {
+  transform: rotate(180deg);
+}
+
+.collapse-chevron view {
+  position: absolute;
+  top: 7rpx;
+  width: 12rpx;
+  height: 4rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(90deg, #fff3b0, #ffd86b);
+  box-shadow: 0 0 12rpx rgba(255, 216, 107, 0.5);
+}
+
+.collapse-chevron view:first-child {
+  left: 0;
+  transform: rotate(-38deg);
+  transform-origin: right center;
+}
+
+.collapse-chevron view:last-child {
+  right: 0;
+  transform: rotate(38deg);
+  transform-origin: left center;
+}
+
+/* 操作按钮组 */
+.message-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14rpx;
+  margin-top: 20rpx;
+}
+
+.action-btn {
+  height: 72rpx;
+  min-height: 72rpx;
+  padding: 0 8rpx;
+  border-radius: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #e8ccff;
+  font-size: 26rpx;
+  font-weight: 700;
+  line-height: 1.15;
+  text-align: center;
+  white-space: normal;
+  box-sizing: border-box;
+  background: rgba(88, 28, 135, 0.18);
+  border: 1rpx solid rgba(192, 132, 252, 0.35);
+}
+
+.action-btn.primary {
+  color: #fff;
+  background: linear-gradient(145deg, #8c44f2, #5f1db8);
+}
+
+.action-icon {
+  margin-right: 8rpx;
+  font-size: 24rpx;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.action-btn::after {
+  border: 0;
+}
+
 </style>

mini-program/src/services/shortNovel.js

@@ -1,5 +1,11 @@
 import { getApiBaseUrl, getAuthHeader } from './request.js'
 
+// 环境检测：H5 模式下存在 window.fetch
+const isH5 = typeof window !== 'undefined' && typeof window.fetch === 'function'
+
+// SSE 请求超时时间（毫秒）
+const SSE_TIMEOUT_MS = 300000
+
 /**
  * 短篇小说外部服务 API 封装
  * 通过后端 SSE 代理调用外部 short-novel-service
@@ -14,6 +20,17 @@ import { getApiBaseUrl, getAuthHeader } from './request.js'
  * @returns {Object} uni.request 任务对象（用于 abort）
  */
 export const startNovelStream = ({ query, onEvent, onError }) => {
+  // H5 环境：使用原生 fetch + ReadableStream
+  if (isH5) {
+    return h5NovelStream(
+      `${getApiBaseUrl()}/shortNovel/stream`,
+      { query },
+      onEvent,
+      onError
+    )
+  }
+
+  // 小程序环境：使用 uni.request
   let chunkProcessed = false
   const task = uni.request({
     url: `${getApiBaseUrl()}/shortNovel/stream`,
@@ -25,7 +42,7 @@ export const startNovelStream = ({ query, onEvent, onError }) => {
       ...getAuthHeader()
     },
     enableChunked: true,
-    timeout: 300000,
+    timeout: SSE_TIMEOUT_MS,
     success: (res) => {
       if (res.statusCode >= 400) {
         onError?.(res.data?.message || '请求失败')
@@ -66,6 +83,17 @@ export const startNovelStream = ({ query, onEvent, onError }) => {
  * @returns {Object} uni.request 任务对象
  */
 export const followupStream = ({ sessionId, action, payload, originalQuery, onEvent, onError }) => {
+  // H5 环境：使用原生 fetch + ReadableStream
+  if (isH5) {
+    return h5NovelStream(
+      `${getApiBaseUrl()}/shortNovel/followup`,
+      { sessionId, action, payload, originalQuery },
+      onEvent,
+      onError
+    )
+  }
+
+  // 小程序环境：使用 uni.request
   let chunkProcessed = false
   const task = uni.request({
     url: `${getApiBaseUrl()}/shortNovel/followup`,
@@ -77,7 +105,7 @@ export const followupStream = ({ sessionId, action, payload, originalQuery, onEv
       ...getAuthHeader()
     },
     enableChunked: true,
-    timeout: 300000,
+    timeout: SSE_TIMEOUT_MS,
     success: (res) => {
       if (res.statusCode >= 400) {
         onError?.(res.data?.message || '请求失败')
@@ -139,6 +167,155 @@ function decodeChunk(chunk) {
   return result
 }
 
+/**
+ * H5 环境 SSE 事件解析
+ * 解析单个 SSE 事件块（已经被 \r\n\r\n 或 \n\n 分隔）
+ * 事件格式：data: {"type":"status","session_id":"xxx","payload":{...}}
+ * 注意：本函数不依赖块内空行作为结束标记，由调用方负责按双换行切分事件
+ */
+function h5ConsumeSseText(block, onEvent, onError) {
+  const lines = block.split(/\r?\n/)
+  let dataBuffer = ''
+
+  for (const line of lines) {
+    // 移除行尾的 \r（CRLF 兼容）
+    const cleanLine = line.replace(/\r$/, '')
+    if (cleanLine.startsWith('data:')) {
+      dataBuffer += cleanLine.slice(5).trim()
+    }
+    // 注意：不再依赖空行作为事件结束标记
+    // 因为块已经被调用方按 \n\n 切分好了
+  }
+
+  // 遍历完所有行后，直接处理累积的数据
+  if (dataBuffer) {
+    if (dataBuffer === '[DONE]') return
+    try {
+      const event = JSON.parse(dataBuffer)
+      onEvent?.(event)
+    } catch (e) {
+      onError?.(`SSE 解析失败：${e.message}`)
+    }
+  }
+}
+
+/**
+ * H5 环境 SSE 流式读取核心实现
+ * 使用 Promise.race + setTimeout 实现外部超时控制（兼容微信开发者工具）
+ * @param {string} url - 请求 URL
+ * @param {Object} body - 请求体
+ * @param {Function} onEvent - 事件回调
+ * @param {Function} onError - 错误回调
+ * @returns {Object} 包含 abort 方法的对象
+ */
+function h5NovelStream(url, body, onEvent, onError) {
+  let reader = null
+  let timeoutTimer = null
+  let isCompleted = false
+  let errorHandled = false  // 防止 onError 重复调用
+
+  // 统一的清理函数（不处理错误，只清理资源）
+  const cleanup = () => {
+    isCompleted = true
+    if (timeoutTimer) clearTimeout(timeoutTimer)
+    if (reader) {
+      reader.cancel().catch(() => {})
+    }
+  }
+
+  // 安全的错误处理（确保 onError 只调用一次）
+  const safeOnError = (msg) => {
+    if (!errorHandled) {
+      errorHandled = true
+      cleanup()
+      onError?.(msg)
+    }
+  }
+
+  // 创建超时 Promise（不依赖 AbortController）
+  const timeoutPromise = new Promise((_, reject) => {
+    timeoutTimer = setTimeout(() => {
+      if (!isCompleted) {
+        reject(new Error('请求超时（300 秒）'))
+      }
+    }, SSE_TIMEOUT_MS)
+  })
+
+  // 创建 fetch Promise
+  const fetchPromise = fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'text/event-stream',
+      ...getAuthHeader()
+    },
+    body: JSON.stringify(body)
+  }).then(response => {
+    // 检查响应状态
+    if (!response.ok) {
+      throw new Error(`请求失败：HTTP ${response.status}`)
+    }
+
+    // 获取 ReadableStream 读取器
+    reader = response.body.getReader()
+    const decoder = new TextDecoder('utf-8')
+    let buffer = ''
+
+    // 循环读取流数据
+    function pump() {
+      return reader.read().then(({ done, value }) => {
+        if (done) {
+          // 流正常结束，标记为已完成（后续 abort 不触发错误）
+          isCompleted = true
+          if (timeoutTimer) clearTimeout(timeoutTimer)
+          return
+        }
+
+        if (isCompleted) {
+          return
+        }
+
+        // 解码二进制块为文本
+        buffer += decoder.decode(value, { stream: true })
+
+        // 解析完整的事件（兼容 CRLF）
+        const events = buffer.split(/\r?\n\r?\n/)
+        buffer = events.pop() // 最后一个可能不完整，保留到下次
+
+        for (const event of events) {
+          h5ConsumeSseText(event, onEvent, onError)
+        }
+
+        // 继续读取
+        return pump()
+      })
+    }
+
+    return pump()
+  })
+
+  // 使用 Promise.race 竞争超时和 fetch
+  Promise.race([fetchPromise, timeoutPromise]).then(() => {
+    // 成功完成，清理资源
+    if (timeoutTimer) clearTimeout(timeoutTimer)
+    if (reader) reader.cancel().catch(() => {})
+  }).catch(err => {
+    // 任何错误都传递给用户（包括微信开发者工具的 60 秒强制终止）
+    safeOnError(err.message || '请求超时')
+  })
+
+  // 返回 abort 接口（只清理资源，不触发错误）
+  return {
+    abort: () => {
+      // abort 只负责取消请求和清理资源，不触发 onError
+      // 真正的错误（超时、网络错误）会通过 Promise.race 的 catch 触发
+      isCompleted = true
+      if (timeoutTimer) clearTimeout(timeoutTimer)
+      if (reader) reader.cancel().catch(() => {})
+    }
+  }
+}
+
 /**
  * 解析 SSE 文本
  * 外部服务事件格式：data: {"type":"status","session_id":"xxx","payload":{...}}
@@ -158,8 +335,8 @@ function consumeSseText(text, onEvent, onError) {
         const event = JSON.parse(dataStr)
         onEvent?.(event)
       } catch (e) {
-        onError?.(`SSE 解析失败: ${e.message}`)
+        onError?.(`SSE 解析失败：${e.message}`)
       }
     }
   }
-}
+}

mini-program/src/stores/app.js

@@ -16,6 +16,8 @@ const state = reactive({
   inspirationRecommendations: [],
   paths: [],
   currentPath: null,
+  // 当前心愿实现的 session 元数据（用于 followup 时传递 originalQuery 兜底）
+  currentSessionMeta: null,
   registrationData: {
     nickname: '',
     gender: '',
@@ -264,6 +266,34 @@ const fetchScripts = async () => {
   }
 }
 
+/**
+ * 设置当前心愿实现的 session 元数据
+ * 用于在后续 followup 调用中透传 originalQuery/style/length
+ *
+ * @param {{ sessionId?: string, scriptId?: string, conversationId?: string, originalQuery: string, style?: string, length?: string }} meta
+ */
+const setSessionMeta = (meta) => {
+  if (!meta || !meta.originalQuery) {
+    return
+  }
+  state.currentSessionMeta = { ...meta, updatedAt: Date.now() }
+}
+
+/**
+ * 获取当前心愿实现的 session 元数据
+ * @returns {object|null}
+ */
+const getSessionMeta = () => {
+  return state.currentSessionMeta
+}
+
+/**
+ * 清除当前 session 元数据
+ */
+const clearSessionMeta = () => {
+  state.currentSessionMeta = null
+}
+
 const createScript = async (scriptData) => {
   try {
     const res = await epicScriptService.createScript(scriptData)
@@ -495,6 +525,9 @@ export const useAppStore = () => {
     createScript,
     updateScript,
     deleteScript,
+    setSessionMeta,
+    getSessionMeta,
+    clearSessionMeta,
     fetchInspirationRecommendations,
     fetchRandomInspirations,
     generateScriptFromInspiration,

server/src/main/java/com/emotion/service/impl/EpicScriptDialogueServiceImpl.java

@@ -227,6 +227,7 @@ public class EpicScriptDialogueServiceImpl implements EpicScriptDialogueService
      * @param metadata 大纲元数据（标题等）
      * @return Map 包含 scriptId、conversationId、currentVersionMessageId
      */
+    @Transactional(rollbackFor = Exception.class)
     public Map<String, String> saveNovelResult(String currentUserId, String theme,
                                                 String fullText, Map<String, Object> metadata) {
         String scriptId = snowflakeIdGenerator.nextIdAsString();
@@ -240,8 +241,12 @@ public class EpicScriptDialogueServiceImpl implements EpicScriptDialogueService
         script.setTitle(metadata != null && metadata.get("title") != null
                 ? (String) metadata.get("title") : "我的人生剧本");
         script.setTheme(theme);
-        script.setStyle("career");
-        script.setLength("short");
+        // style/length 从 metadata 传入，允许 null（保持原行为兼容），但禁止硬编码 "career"/"short"
+        // 由前端 ShortNovelServiceImpl 在调用前透传 style/length 到 metadata
+        script.setStyle(metadata != null && metadata.get("style") != null
+                ? (String) metadata.get("style") : "career");
+        script.setLength(metadata != null && metadata.get("length") != null
+                ? (String) metadata.get("length") : "short");
         script.setConversationId(conversationId);
         script.setPlotIntro("");
         script.setPlotTurning("");
@@ -266,10 +271,69 @@ public class EpicScriptDialogueServiceImpl implements EpicScriptDialogueService
         conversation.setConversationStatus("active");
         conversation.setStartTime(now);
         conversation.setLastActiveTime(now);
-        conversation.setMessageCount(3);
+        // 读取累积的中间步骤（clarification_question/answer/outline）
+        @SuppressWarnings("unchecked")
+        java.util.List<com.alibaba.fastjson2.JSONObject> stagesHistory =
+                metadata != null && metadata.get("stagesHistory") instanceof java.util.List
+                        ? (java.util.List<com.alibaba.fastjson2.JSONObject>) metadata.get("stagesHistory")
+                        : java.util.Collections.emptyList();
+
+        long messageOrder = 1L;
+
+        // 2.5 创建中间步骤 message（clarification_question/answer/outline），按累积顺序
+        for (com.alibaba.fastjson2.JSONObject stage : stagesHistory) {
+            String kind = stage.getString("kind");
+            if ("clarification_question".equals(kind)) {
+                com.alibaba.fastjson2.JSONObject card = stage.getJSONObject("card");
+                Message qMsg = new Message();
+                qMsg.setId(snowflakeIdGenerator.nextIdAsString());
+                qMsg.setConversationId(conversationId);
+                qMsg.setScriptId(scriptId);
+                qMsg.setUserId(currentUserId);
+                qMsg.setContent(card != null ? card.toJSONString() : "{}");
+                qMsg.setType("clarification_question");
+                qMsg.setSender("assistant");
+                qMsg.setTimestamp(now);
+                qMsg.setMessageOrder(messageOrder++);
+                qMsg.setStatus("sent");
+                qMsg.setIsRead(1);
+                messageService.createMessage(qMsg);
+            } else if ("clarification_answer".equals(kind)) {
+                Message aMsg = new Message();
+                aMsg.setId(snowflakeIdGenerator.nextIdAsString());
+                aMsg.setConversationId(conversationId);
+                aMsg.setScriptId(scriptId);
+                aMsg.setUserId(currentUserId);
+                aMsg.setContent(stage.getString("answer"));
+                aMsg.setType("clarification_answer");
+                aMsg.setSender("user");
+                aMsg.setTimestamp(now);
+                aMsg.setMessageOrder(messageOrder++);
+                aMsg.setStatus("sent");
+                aMsg.setIsRead(1);
+                messageService.createMessage(aMsg);
+            } else if ("outline".equals(kind)) {
+                com.alibaba.fastjson2.JSONObject outline = stage.getJSONObject("outline");
+                Message oMsg = new Message();
+                oMsg.setId(snowflakeIdGenerator.nextIdAsString());
+                oMsg.setConversationId(conversationId);
+                oMsg.setScriptId(scriptId);
+                oMsg.setUserId(currentUserId);
+                oMsg.setContent(outline != null ? outline.toJSONString() : "{}");
+                oMsg.setType("outline");
+                oMsg.setSender("assistant");
+                oMsg.setTimestamp(now);
+                oMsg.setMessageOrder(messageOrder++);
+                oMsg.setStatus("sent");
+                oMsg.setIsRead(1);
+                messageService.createMessage(oMsg);
+            }
+        }
+
+        conversation.setMessageCount((int) (stagesHistory.size() + 3));
         conversationService.save(conversation);
 
-        // 3. 系统欢迎消息（messageOrder = 1）
+        // 3. 系统欢迎消息（messageOrder 动态递增）
         Message systemWelcome = new Message();
         systemWelcome.setId(snowflakeIdGenerator.nextIdAsString());
         systemWelcome.setConversationId(conversationId);
@@ -279,12 +343,12 @@ public class EpicScriptDialogueServiceImpl implements EpicScriptDialogueService
         systemWelcome.setType("system");
         systemWelcome.setSender("system");
         systemWelcome.setTimestamp(now);
-        systemWelcome.setMessageOrder(1L);
+        systemWelcome.setMessageOrder(messageOrder++);
         systemWelcome.setStatus("sent");
         systemWelcome.setIsRead(1);
         messageService.createMessage(systemWelcome);
 
-        // 4. 用户输入消息（messageOrder = 2）
+        // 4. 用户输入消息（messageOrder 动态递增）
         Message userMessage = new Message();
         userMessage.setId(snowflakeIdGenerator.nextIdAsString());
         userMessage.setConversationId(conversationId);
@@ -294,12 +358,12 @@ public class EpicScriptDialogueServiceImpl implements EpicScriptDialogueService
         userMessage.setType("chat");
         userMessage.setSender("user");
         userMessage.setTimestamp(now);
-        userMessage.setMessageOrder(2L);
+        userMessage.setMessageOrder(messageOrder++);
         userMessage.setStatus("sent");
         userMessage.setIsRead(1);
         messageService.createMessage(userMessage);
 
-        // 5. AI 小说全文消息（messageOrder = 3）
+        // 5. AI 小说全文消息（messageOrder 动态递增）
         Message aiMessage = new Message();
         aiMessage.setId(snowflakeIdGenerator.nextIdAsString());
         aiMessage.setConversationId(conversationId);
@@ -309,7 +373,7 @@ public class EpicScriptDialogueServiceImpl implements EpicScriptDialogueService
         aiMessage.setType("script");
         aiMessage.setSender("assistant");
         aiMessage.setTimestamp(now);
-        aiMessage.setMessageOrder(3L);
+        aiMessage.setMessageOrder(messageOrder++);
         aiMessage.setVersionNumber(1);
         aiMessage.setStatus("sent");
         aiMessage.setMetadata(metadata != null ? JSON.toJSONString(metadata) : "{}");

server/src/main/java/com/emotion/service/impl/EpicScriptServiceImpl.java

@@ -791,21 +791,24 @@ public class EpicScriptServiceImpl extends ServiceImpl<EpicScriptMapper, EpicScr
      * 副作用：创建新 conversation，回填 script.conversationId，更新 script
      */
     private void ensureConversationForScript(EpicScript script, String currentUserId) {
+        // 修复：列表查询是读路径，禁止在读路径上触发数据库写操作（隐性写）
+        // 历史剧本兼容补建 conversation 的逻辑应放在独立的修复脚本/管理接口中，而不是每次列表查询都触发
+        // 这里只做检查和日志，不做任何写入
         String conversationId = script.getConversationId();
         if (!org.springframework.util.StringUtils.hasText(conversationId)) {
-            // conversationId 字段本身为空，直接创建
-            createAndAttachConversation(script, currentUserId);
+            log.debug("[EpicScript] 剧本缺少 conversationId: scriptId={}", script.getId());
             return;
         }
         Conversation existing = conversationService.getById(conversationId);
-        if (existing != null) {
-            return; // 已存在，无需处理
+        if (existing == null) {
+            log.warn("[EpicScript] 剧本 conversationId 指向不存在的 conversation: scriptId={}, conversationId={}",
+                    script.getId(), conversationId);
         }
-        // 存在 conversationId 但 conversation 不存在（历史数据），创建新的
-        createAndAttachConversation(script, currentUserId);
     }
 
     private void createAndAttachConversation(EpicScript script, String currentUserId) {
+        // 修复：保留方法签名但不自动调用（避免读路径隐性写）
+        // 如需补建 conversation，请显式调用此方法（如：剧本详情页、单条修复脚本等）
         Conversation conversation = new Conversation();
         conversation.setUserId(currentUserId);
         conversation.setScriptId(script.getId());

server/src/main/java/com/emotion/service/impl/ShortNovelServiceImpl.java

@@ -42,6 +42,101 @@ public class ShortNovelServiceImpl implements ShortNovelService {
     private static final Logger log = LoggerFactory.getLogger(ShortNovelServiceImpl.class);
     private static final ExecutorService EXECUTOR = Executors.newCachedThreadPool();
 
+    /**
+     * sessionId → originalQuery 内存缓存
+     * 用于在 followup 调用中当请求未带 originalQuery 时兜底恢复
+     * 会话超时 30 分钟（与 Spring Session 默认对齐）
+     */
+    private static final java.util.concurrent.ConcurrentHashMap<String, CachedSessionMeta> SESSION_ORIGINAL_QUERY_CACHE = new java.util.concurrent.ConcurrentHashMap<>();
+    private static final long SESSION_TTL_MS = 30 * 60 * 1000L;
+
+    /**
+     * sessionId -> 中间步骤累积列表（跨 SSE 流保存 clarification_question/answer/outline）
+     * 用于在 novel_done 时统一创建 message，还原完整生成流程
+     * 会话超时 30 分钟（与 SESSION_ORIGINAL_QUERY_CACHE 对齐）
+     */
+    private static final java.util.concurrent.ConcurrentHashMap<String, java.util.List<JSONObject>> SESSION_STAGES_ACCUMULATOR =
+            new java.util.concurrent.ConcurrentHashMap<>();
+
+    /**
+     * session 元数据（含 originalQuery 和缓存时间）
+     */
+    private static class CachedSessionMeta {
+        final String originalQuery;
+        final long createdAt;
+        final String style;
+        final String length;
+
+        CachedSessionMeta(String originalQuery, String style, String length) {
+            this.originalQuery = originalQuery;
+            this.style = style;
+            this.length = length;
+            this.createdAt = System.currentTimeMillis();
+        }
+
+        boolean isExpired() {
+            return System.currentTimeMillis() - createdAt > SESSION_TTL_MS;
+        }
+    }
+
+    /**
+     * 缓存 session 元数据
+     */
+    private static void cacheSessionMeta(String sessionId, String originalQuery, String style, String length) {
+        if (sessionId == null || sessionId.isEmpty() || originalQuery == null || originalQuery.isEmpty()) {
+            return;
+        }
+        SESSION_ORIGINAL_QUERY_CACHE.put(sessionId, new CachedSessionMeta(originalQuery, style, length));
+    }
+
+    /**
+     * 从缓存中获取 originalQuery，过期则返回 null
+     */
+    private static String getCachedOriginalQuery(String sessionId) {
+        if (sessionId == null || sessionId.isEmpty()) {
+            return null;
+        }
+        CachedSessionMeta meta = SESSION_ORIGINAL_QUERY_CACHE.get(sessionId);
+        if (meta == null) {
+            return null;
+        }
+        if (meta.isExpired()) {
+            SESSION_ORIGINAL_QUERY_CACHE.remove(sessionId);
+            return null;
+        }
+        return meta.originalQuery;
+    }
+
+    /**
+     * 累积中间步骤到 session 缓存
+     * 包级可见，便于单元测试
+     *
+     * @param sessionId  会话ID
+     * @param stageEntry 步骤条目（含 kind 字段：clarification_question/clarification_answer/outline）
+     */
+    static void accumulateStage(String sessionId, JSONObject stageEntry) {
+        if (sessionId == null || sessionId.isEmpty() || stageEntry == null) {
+            return;
+        }
+        SESSION_STAGES_ACCUMULATOR.computeIfAbsent(sessionId,
+                k -> new java.util.concurrent.CopyOnWriteArrayList<>()).add(stageEntry);
+    }
+
+    /**
+     * 读取并清理 session 累积的中间步骤
+     * 包级可见，便于单元测试
+     *
+     * @param sessionId 会话ID
+     * @return 步骤列表（按累积顺序），无则返回空列表
+     */
+    static java.util.List<JSONObject> drainStages(String sessionId) {
+        if (sessionId == null || sessionId.isEmpty()) {
+            return java.util.Collections.emptyList();
+        }
+        java.util.List<JSONObject> stages = SESSION_STAGES_ACCUMULATOR.remove(sessionId);
+        return stages != null ? stages : java.util.Collections.emptyList();
+    }
+
     @Autowired
     private ShortNovelConfig config;
 
@@ -84,7 +179,8 @@ public class ShortNovelServiceImpl implements ShortNovelService {
         upstreamBody.put("message_id", "web_" + System.currentTimeMillis());
         upstreamBody.put("query", request.getQuery());
 
-        return forwardSse("/api/novels/daily/conversation/stream", upstreamBody, currentUserId, request.getQuery());
+        return forwardSse("/api/novels/daily/conversation/stream", upstreamBody, currentUserId,
+                request.getQuery(), null);
     }
 
     @Override
@@ -94,6 +190,34 @@ public class ShortNovelServiceImpl implements ShortNovelService {
             throw new BusinessException("用户未登录");
         }
 
+        // originalQuery 兜底：如果请求中为空，尝试从 session 恢复（避免因 originalQuery 缺失导致 novel_done 不保存）
+        String effectiveOriginalQuery = request.getOriginalQuery();
+        if (!org.springframework.util.StringUtils.hasText(effectiveOriginalQuery)) {
+            // 从会话缓存恢复 originalQuery（fallback 机制，确保不丢失用户原始输入）
+            effectiveOriginalQuery = getCachedOriginalQuery(request.getSessionId());
+            if (effectiveOriginalQuery == null) {
+                log.warn("[ShortNovel] followup 缺少 originalQuery 且无 session 缓存: sessionId={}",
+                        request.getSessionId());
+            }
+        }
+
+        // 累积用户澄清回答到 session 缓存（用于详情页还原完整澄清流程）
+        if ("answer_clarification".equals(request.getAction())
+                && request.getSessionId() != null && !request.getSessionId().isEmpty()) {
+            Object answer = request.getPayload() != null ? request.getPayload().get("answer") : null;
+            if (answer == null && request.getPayload() != null) {
+                // 兼容前端可能用 value 字段传答案
+                answer = request.getPayload().get("value");
+            }
+            if (answer != null) {
+                JSONObject entry = new JSONObject();
+                entry.put("kind", "clarification_answer");
+                entry.put("answer", String.valueOf(answer));
+                accumulateStage(request.getSessionId(), entry);
+                log.debug("[ShortNovel] 累积澄清回答: sessionId={}", request.getSessionId());
+            }
+        }
+
         Map<String, Object> upstreamBody = new HashMap<>();
         upstreamBody.put("session_id", request.getSessionId());
         upstreamBody.put("user_id", currentUserId);
@@ -101,7 +225,8 @@ public class ShortNovelServiceImpl implements ShortNovelService {
         upstreamBody.put("action", request.getAction());
         upstreamBody.put("payload", request.getPayload());
 
-        return forwardSse("/api/novels/daily/conversation/stream", upstreamBody, currentUserId, request.getOriginalQuery());
+        return forwardSse("/api/novels/daily/conversation/stream", upstreamBody, currentUserId,
+                effectiveOriginalQuery, request.getSessionId());
     }
 
     /**
@@ -112,12 +237,26 @@ public class ShortNovelServiceImpl implements ShortNovelService {
      * @param currentUserId   当前用户ID（从主线程捕获，避免 ThreadLocal 在异步线程中失效）
      * @param originalQuery   原始用户查询（首次请求时传入，用于保存）
      */
-    private SseEmitter forwardSse(String path, Map<String, Object> body, String currentUserId, String originalQuery) {
+    private SseEmitter forwardSse(String path, Map<String, Object> body, String currentUserId,
+                                  String originalQuery, String knownSessionId) {
         SseEmitter emitter = new SseEmitter(config.getReadTimeout().longValue());
 
         EXECUTOR.execute(() -> {
             String url = config.getApiBaseUrl() + path;
 
+            // 本次流式会话的中间步骤元数据（用于 novel_done 时一并持久化到 message metadata）
+            // 包含 outline_created 的 outline JSON，以及其他需要保留到数据库的中间状态
+            final java.util.concurrent.atomic.AtomicReference<JSONObject> stageMetaRef =
+                    new java.util.concurrent.atomic.AtomicReference<>(new JSONObject());
+
+            // 当前流的 sessionId（stream 首次从 status 事件获取，followup 从请求参数获取）
+            final String[] currentSessionId = {knownSessionId};
+
+            // 累积 novel_delta 事件的文本内容
+            // 上游服务通过 novel_delta 流式发送小说内容，novel_done 事件可能不含 full_text
+            // 因此需要在后端累积所有 delta，在 novel_done 时使用累积的完整文本保存到数据库
+            final StringBuilder novelContentAccumulator = new StringBuilder();
+
             try {
                 // 构建 OkHttp 请求
                 Request okhttpRequest = new Request.Builder()
@@ -168,6 +307,67 @@ public class ShortNovelServiceImpl implements ShortNovelService {
                                 long eventTimestamp = System.currentTimeMillis();
                                 log.info("[ShortNovel SSE] 处理事件: type={}, timestamp={}", type, eventTimestamp);
 
+                                // 从事件顶层取 session_id 同步 sessionId
+                                // 上游事件结构与前端对齐：session_id 与 type 同级，不在 payload 内
+                                // 修复：首次 stream 里 status 处理从 payload 取不到 session_id，导致 currentSessionId 保持 null，
+                                // 第一个 clarification_card 因 sessionId 为 null 不累积，详情页少显示第一个选项卡
+                                String topSessionId = event.getString("session_id");
+                                if (topSessionId != null && !topSessionId.isEmpty()) {
+                                    currentSessionId[0] = topSessionId;
+                                }
+
+                                // 拦截 status 事件，缓存 sessionId → originalQuery 映射（供 followup 兜底）
+                                if ("status".equals(type)) {
+                                    JSONObject payload = event.getJSONObject("payload");
+                                    if (payload != null) {
+                                        String sessionId = payload.getString("session_id");
+                                        if (sessionId != null && !sessionId.isEmpty()) {
+                                            currentSessionId[0] = sessionId;
+                                            // 缓存原始参数：originalQuery/style/length
+                                            String style = payload.getString("style");
+                                            String length = payload.getString("length");
+                                            cacheSessionMeta(sessionId, originalQuery, style, length);
+                                            log.debug("[ShortNovel] 缓存 session 元数据: sessionId={}", sessionId);
+                                        }
+                                    }
+                                }
+
+                                // 累积中间步骤元数据（用于 novel_done 时一并持久化）+ 累积小说正文
+                                JSONObject stagePayload = event.getJSONObject("payload");
+                                if (stagePayload != null) {
+                                    if ("outline_created".equals(type)) {
+                                        JSONObject outline = stagePayload.getJSONObject("outline");
+                                        if (outline != null) {
+                                            stageMetaRef.get().put("outline", outline);
+                                            // 累积到全局 session 缓存，供详情页还原大纲步骤
+                                            if (currentSessionId[0] != null) {
+                                                JSONObject entry = new JSONObject();
+                                                entry.put("kind", "outline");
+                                                entry.put("outline", outline);
+                                                accumulateStage(currentSessionId[0], entry);
+                                            }
+                                        }
+                                    } else if ("clarification_card".equals(type)) {
+                                        JSONObject card = stagePayload.getJSONObject("card");
+                                        if (card != null) {
+                                            stageMetaRef.get().put("clarification", card);
+                                            // 累积到全局 session 缓存，供详情页还原完整澄清流程
+                                            if (currentSessionId[0] != null) {
+                                                JSONObject entry = new JSONObject();
+                                                entry.put("kind", "clarification_question");
+                                                entry.put("card", card);
+                                                accumulateStage(currentSessionId[0], entry);
+                                            }
+                                        }
+                                    } else if ("novel_delta".equals(type)) {
+                                        // 累积小说正文片段：上游通过 novel_delta 逐段发送内容
+                                        String delta = stagePayload.getString("delta");
+                                        if (delta != null) {
+                                            novelContentAccumulator.append(delta);
+                                        }
+                                    }
+                                }
+
                                 // 拦截 novel_done 事件，保存到数据库
                                 if ("novel_done".equals(type)) {
                                     JSONObject payload = event.getJSONObject("payload");
@@ -175,11 +375,33 @@ public class ShortNovelServiceImpl implements ShortNovelService {
                                             originalQuery, payload != null);
                                     if (payload != null && originalQuery != null && !originalQuery.trim().isEmpty()) {
                                         String fullText = payload.getString("full_text");
-                                        if (fullText != null) {
+                                        // 兜底：如果上游 novel_done 未携带 full_text，使用已累积的 novel_delta 内容
+                                        if (fullText == null || fullText.isEmpty()) {
+                                            fullText = novelContentAccumulator.toString();
+                                            log.info("[ShortNovel SSE] novel_done 未携带 full_text，使用累积内容: length={}",
+                                                    fullText.length());
+                                        }
+                                        if (fullText != null && !fullText.isEmpty()) {
                                             Map<String, Object> metadata = new HashMap<>();
                                             if (payload.get("title") != null) {
                                                 metadata.put("title", payload.get("title"));
                                             }
+                                            // 把整个 payload（包含 outline、chapters 等）保存到 metadata
+                                            // 详情页可读取 metadata 显示中间步骤（大纲、章节等）
+                                            metadata.put("fullPayload", payload);
+                                            // 把会话期间累积的 stage 元数据也合并进来
+                                            JSONObject stageMeta = stageMetaRef.get();
+                                            if (stageMeta != null && !stageMeta.isEmpty()) {
+                                                metadata.put("stages", stageMeta);
+                                            }
+                                            // 读取跨流累积的中间步骤（clarification/outline），供详情页还原完整流程
+                                            if (currentSessionId[0] != null) {
+                                                java.util.List<JSONObject> stagesHistory = drainStages(currentSessionId[0]);
+                                                if (!stagesHistory.isEmpty()) {
+                                                    metadata.put("stagesHistory", stagesHistory);
+                                                    log.info("[ShortNovel SSE] 读取累积中间步骤: count={}", stagesHistory.size());
+                                                }
+                                            }
                                             log.info("[ShortNovel SSE] 开始保存小说: userId={}, queryLength={}, textLength={}",
                                                     currentUserId, originalQuery.length(), fullText.length());
                                             Map<String, String> saveResult = epicScriptDialogueServiceImpl.saveNovelResult(

server/src/test/java/com/emotion/service/impl/ShortNovelServiceImplTest.java

@@ -0,0 +1,75 @@
+package com.emotion.service.impl;
+
+import com.alibaba.fastjson2.JSONObject;
+import org.junit.jupiter.api.Test;
+
+import java.util.List;
+
+import static org.junit.jupiter.api.Assertions.*;
+
+/**
+ * ShortNovelServiceImpl 静态缓存累积器单元测试
+ *
+ * @author huazhongmin
+ * @date 2026-07-26
+ */
+public class ShortNovelServiceImplTest {
+
+    @Test
+    public void testAccumulateStage_singleEntry() {
+        String sessionId = "test-session-1";
+        JSONObject entry = new JSONObject();
+        entry.put("kind", "clarification_question");
+        entry.put("card", new JSONObject().fluentPut("question", "你的咖啡馆特色？"));
+
+        ShortNovelServiceImpl.accumulateStage(sessionId, entry);
+
+        List<JSONObject> stages = ShortNovelServiceImpl.drainStages(sessionId);
+        assertEquals(1, stages.size());
+        assertEquals("clarification_question", stages.get(0).getString("kind"));
+    }
+
+    @Test
+    public void testAccumulateStage_multipleEntries_preservesOrder() {
+        String sessionId = "test-session-2";
+        ShortNovelServiceImpl.accumulateStage(sessionId,
+                new JSONObject().fluentPut("kind", "clarification_question").fluentPut("question", "Q1"));
+        ShortNovelServiceImpl.accumulateStage(sessionId,
+                new JSONObject().fluentPut("kind", "clarification_answer").fluentPut("answer", "A1"));
+        ShortNovelServiceImpl.accumulateStage(sessionId,
+                new JSONObject().fluentPut("kind", "outline").fluentPut("outline", new JSONObject()));
+
+        List<JSONObject> stages = ShortNovelServiceImpl.drainStages(sessionId);
+        assertEquals(3, stages.size());
+        assertEquals("clarification_question", stages.get(0).getString("kind"));
+        assertEquals("clarification_answer", stages.get(1).getString("kind"));
+        assertEquals("outline", stages.get(2).getString("kind"));
+    }
+
+    @Test
+    public void testDrainStages_clearsCache() {
+        String sessionId = "test-session-3";
+        ShortNovelServiceImpl.accumulateStage(sessionId,
+                new JSONObject().fluentPut("kind", "outline"));
+
+        List<JSONObject> first = ShortNovelServiceImpl.drainStages(sessionId);
+        assertEquals(1, first.size());
+
+        // 二次读取应为空（drain 后已清理）
+        List<JSONObject> second = ShortNovelServiceImpl.drainStages(sessionId);
+        assertTrue(second.isEmpty());
+    }
+
+    @Test
+    public void testAccumulateStage_nullSessionId_ignored() {
+        ShortNovelServiceImpl.accumulateStage(null,
+                new JSONObject().fluentPut("kind", "outline"));
+        assertTrue(ShortNovelServiceImpl.drainStages(null).isEmpty());
+    }
+
+    @Test
+    public void testDrainStages_unknownSession_returnsEmpty() {
+        List<JSONObject> stages = ShortNovelServiceImpl.drainStages("nonexistent-session");
+        assertTrue(stages.isEmpty());
+    }
+}