docs: 澄清卡片已回答显示修复设计（label 替代 value + 显示 AI 问题）

2026-07-20 21:15:36 +08:00
parent d560f63d70
commit 8693b3febc
1 changed files with 100 additions and 0 deletions
@@ -0,0 +1,100 @@
+---
+author: AI Assistant
+created_at: 2026-07-19
+purpose: 修复澄清卡片已回答显示英文 value 而非中文 label，以及已回答状态不显示 AI 问题的问题
+---
+
+# 澄清卡片已回答显示修复设计
+
+## 概述
+
+ScriptView chat 视图中，澄清卡片（ClarificationCard）提交后：
+1. **Bug 1**："已回答：competition" 显示的是英文 value，而非中文 label（"工作/学习上的事"）
+2. **Bug 2**：已回答状态不显示 AI 的问题（如"你想重写今天的什么经历？"）
+
+根因：ClarificationCard 的 `handleSubmit` 发出的是选项的 value（如 'competition'），`submitClarification` 直接用 value 作为显示文本和后端 payload。
+
+## 修复方案
+
+### 改动文件
+
+- `mini-program/src/pages/main/ScriptView.vue`
+
+### 改动 1：submitClarification 用 label 显示，value 发给后端
+
+```js
+const submitClarification = (answer) => {
+  if (answeringClarification.value) return
+  const card = [...resultMessages.value].reverse().find(m => m.kind === 'card' && !m.submitted)
+  if (card) {
+    // 通过 value 查找选项的 label
+    const option = card.card?.options?.find(opt => opt.value === answer)
+    const label = option?.label || answer
+    card.submitted = true
+    card.answer = label  // 显示用 label（中文）
+  }
+  // 用户气泡显示 label
+  const displayAnswer = card?.card?.options?.find(opt => opt.value === answer)?.label || answer
+  addResultMessage({ role: 'user', kind: 'text', content: displayAnswer })
+  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)
+}
+```
+
+### 改动 2：card-answered 显示 AI 的问题
+
+```html
+<view v-else class="card-answered">
+  <text class="card-question-text">{{ msg.card?.question || '' }}</text>
+  <text>已回答：{{ msg.answer }}</text>
+</view>
+```
+
+新增 `.card-question-text` 样式（复用 ClarificationCard 的 `.card-question` 样式）：
+
+```css
+.card-question-text {
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-bottom: 16rpx;
+  line-height: 1.5;
+  display: block;
+}
+```
+
+## 数据流
+
+```
+用户点选"工作/学习上的事"（value: 'competition'）
+  └─ ClarificationCard.handleSubmit
+       └─ emit('submit', 'competition')
+            └─ ScriptView.submitClarification('competition')
+                 ├─ 查找 option → label = '工作/学习上的事'
+                 ├─ card.answer = '工作/学习上的事'（显示）
+                 ├─ addResultMessage({ content: '工作/学习上的事' })
+                 └─ followupStream({ payload: { answer: 'competition' } })（后端）
+```
+
+## 不影响范围
+
+- ClarificationCard.vue 组件本身不修改（保持 value 的 emit 行为）
+- 后端收到的 answer 仍是 value（语义化，便于判断选择）
+- outline、novel、text 等其他消息类型不受影响
+- mp-weixin 模板限制：`v-if` 不能用箭头函数，`submitClarification` 中查找 option 的逻辑在 JS 层完成
+
+## 验收标准
+
+- [ ] 澄清卡片提交后，"已回答："后面显示中文 label（如"工作/学习上的事"）
+- [ ] 用户气泡显示中文 label（如"工作/学习上的事"）
+- [ ] 已回答状态显示 AI 的问题（如"你想重写今天的什么经历？"）
+- [ ] 后端收到的 answer 仍是 value（如 'competition'）
+- [ ] 浏览器 Console 无新增错误
+- [ ] mp-weixin 编译通过