happy-life-star/docs/superpowers/plans/2026-07-19-clarification-card-answer-display-fix.md

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

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）。

替换为：

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: 提交

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：

<view v-else class="card-answered">
  <text>已回答：{{ msg.answer }}</text>
</view>

替换为：

<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 { 位置），新增样式：

.card-question-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
  line-height: 1.5;
  display: block;
}

• Step 3: 提交

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 开发服务器运行中

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 编译

cd mini-program
npm run build:mp-weixin

Expected: 编译成功，无 error 输出。

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

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

如有问题，截图反馈。