Files

T

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

2026-07-20 21:15:36 +08:00

3.6 KiB

Raw Blame History

author, created_at, purpose

author	created_at	purpose
AI Assistant	2026-07-19	修复澄清卡片已回答显示英文 value 而非中文 label，以及已回答状态不显示 AI 问题的问题

澄清卡片已回答显示修复设计

概述

ScriptView chat 视图中，澄清卡片（ClarificationCard）提交后：

Bug 1："已回答：competition" 显示的是英文 value，而非中文 label（"工作/学习上的事"）
Bug 2：已回答状态不显示 AI 的问题（如"你想重写今天的什么经历？"）

根因：ClarificationCard 的 handleSubmit 发出的是选项的 value（如 'competition'），submitClarification 直接用 value 作为显示文本和后端 payload。

修复方案

改动文件

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

改动 1：submitClarification 用 label 显示，value 发给后端

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 的问题

<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 样式）：

.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 编译通过

3.6 KiB Raw Blame History Unescape Escape