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
 >
 > 如有问题，截图反馈。