docs: 澄清卡片已回答显示修复实施计划

2026-07-20 21:17:34 +08:00
parent 8693b3febc
commit 412d3f3a9a
1 changed files with 183 additions and 0 deletions
@@ -0,0 +1,183 @@
+# 澄清卡片已回答显示修复实施计划
+
+> **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:** 修复澄清卡片提交后"已回答：xxx"显示英文 value 而非中文 label，以及已回答状态不显示 AI 问题的问题。
+
+**Architecture:** 在 `ScriptView.vue` 的 `submitClarification` 函数中，通过 value 查找 `card.options` 对应的 label，用 label 显示（`card.answer` 和 `addResultMessage`），后端 payload 仍用 value。在 `card-answered` 模板中显示 AI 的问题（`msg.card?.question`）。
+
+**Tech Stack:** UniApp Vue 3 `<script setup>` + mp-weixin 编译
+
+---
+
+### Task 1: 修改 submitClarification 用 label 显示
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+  - 修改 `submitClarification` 函数（约 line 1746-1764）
+
+- [ ] **Step 1: 修改 submitClarification**
+
+打开 `mini-program/src/pages/main/ScriptView.vue`，定位到 `submitClarification` 函数（约 line 1746-1764）。
+
+替换为：
+
+```js
+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（中文）
+  }
+  addResultMessage({ role: 'user', kind: 'text', content: label })
+  answeringClarification.value = true
+  currentStreamTask.value = followupStream({
+    sessionId: novelSessionId.value,
+    action: 'answer_clarification',
+    payload: { answer },  // 后端仍收 value
+    onEvent: handleShortNovelEvent,
+    onError: (errMsg) => markGenerationFailed(errMsg)
+  })
+  setTimeout(() => { answeringClarification.value = false }, 200)
+}
+```
+
+- [ ] **Step 2: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "fix: 澄清卡片已回答用 label 显示，后端 payload 仍用 value"
+```
+
+---
+
+### Task 2: 修改 card-answered 模板显示 AI 的问题
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+  - 修改 `card-answered` 模板（约 line 131-133）
+  - 新增 `.card-question-text` 样式（在 `.card-answered` 样式附近）
+
+- [ ] **Step 1: 修改 card-answered 模板**
+
+定位到约 line 131-133：
+
+```html
+<view v-else class="card-answered">
+  <text>已回答：{{ msg.answer }}</text>
+</view>
+```
+
+替换为：
+
+```html
+<view v-else class="card-answered">
+  <text v-if="msg.card?.question" class="card-question-text">{{ msg.card.question }}</text>
+  <text>已回答：{{ msg.answer }}</text>
+</view>
+```
+
+- [ ] **Step 2: 新增 .card-question-text 样式**
+
+在 `.card-answered` 样式块附近（用 Grep 找 `.card-answered {` 位置），新增样式：
+
+```css
+.card-question-text {
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-bottom: 16rpx;
+  line-height: 1.5;
+  display: block;
+}
+```
+
+- [ ] **Step 3: 提交**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "fix: 已回答状态显示 AI 的问题（question）"
+```
+
+---
+
+### Task 3: H5 浏览器验证
+
+**Files:**
+- Test: `http://localhost:5180` (H5 开发服务器)
+
+- [ ] **Step 1: 确认 H5 开发服务器运行中**
+
+```bash
+python dev-services.py status
+```
+
+如未运行：`python dev-services.py start mini-program`
+
+- [ ] **Step 2: 浏览器打开页面并进入 chat 视图**
+
+1. 打开 `http://localhost:5180`
+2. 登录（如未登录，用 123456 验证码）
+3. 点击「爽文生成」→ 输入内容 → 点击「发送」
+
+- [ ] **Step 3: 验证澄清卡片提交后的显示**
+
+等待澄清卡片出现：
+1. 选择一个选项（如"工作/学习上的事"），点击「提交」
+2. 确认：
+   - ✅ 澄清卡片位置显示 AI 的问题（如"你想重写今天的什么经历？"）
+   - ✅ "已回答："后面显示中文 label（如"工作/学习上的事"），而非英文 value（如"competition"）
+   - ✅ 下方用户气泡显示中文 label（如"工作/学习上的事"）
+
+- [ ] **Step 4: 检查浏览器 Console 无报错**
+
+打开 DevTools → Console 面板，确认：
+- ✅ 无新增红色 ERROR（预先存在的 favicon 404、`uni.getRecorderManager not supported` 可忽略）
+
+---
+
+### Task 4: mp-weixin 编译验证
+
+**Files:**
+- Build: `mini-program/unpackage/dist/build/mp-weixin/`
+
+- [ ] **Step 1: 执行 mp-weixin 编译**
+
+```bash
+cd mini-program
+npm run build:mp-weixin
+```
+
+Expected: 编译成功，无 error 输出。
+
+- [ ] **Step 2: 提交（如有微调）**
+
+```bash
+git add mini-program/src/pages/main/ScriptView.vue
+git commit -m "style: mp-weixin 编译产物验证通过"
+```
+
+---
+
+### Task 5: 通知用户在微信开发者工具中验证
+
+- [ ] **Step 1: 提示用户操作**
+
+告知用户：
+
+> mp-weixin 编译产物已更新。请在**微信开发者工具**中：
+> 1. 打开 `unpackage/dist/build/mp-weixin` 目录
+> 2. 点击「编译」重新编译
+> 3. 进入心愿实现页面，发送一条消息
+> 4. 等待澄清卡片出现，选择一个选项，点击「提交」
+> 5. 确认：
+>    - 已回答状态显示 AI 的问题（如"你想重写今天的什么经历？"）
+>    - "已回答："后面显示中文 label（如"工作/学习上的事"），而非英文 value
+>    - 用户气泡显示中文 label
+>
+> 如有问题，截图反馈。