# 澄清卡片已回答显示修复实施计划

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