101 lines
3.6 KiB
Markdown
101 lines
3.6 KiB
Markdown
---
|
||
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 编译通过
|