docs: 澄清卡片已回答显示修复实施计划
This commit is contained in:
@@ -0,0 +1,183 @@
|
||||
# 澄清卡片已回答显示修复实施计划
|
||||
|
||||
> **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
|
||||
>
|
||||
> 如有问题，截图反馈。
|
||||
Reference in New Issue
Block a user