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