126 lines
5.1 KiB
Markdown
126 lines
5.1 KiB
Markdown
---
|
||
author: claude
|
||
created_at: 2026-06-27
|
||
purpose: 统一小程序实现心愿页面中所有 AI 消息卡片的功能按钮，并修复 story-card 展开失效 bug
|
||
---
|
||
|
||
# AI 消息卡片功能按钮统一设计
|
||
|
||
## 背景
|
||
|
||
在小程序「实现心愿」页面（`mini-program/src/pages/main/ScriptView.vue`）中：
|
||
|
||
1. **第一个 AI 回复卡片**（`story-card`）拥有完整的功能按钮：展开/收起、复制、换个方向、不像我、继续生成、播放。
|
||
2. **后续 AI 消息**（`result-chat-list`）只有基础的展开/收起，缺少复制、换个方向、不像我、继续生成、播放。
|
||
3. **story-card 展开失效**：当用户触发过重新生成（`resultHasScriptReplies` 为 `true`）后，`<template v-if="!resultHasScriptReplies">` 会隐藏整个故事正文和底部展开按钮，导致点击展开无效果。
|
||
|
||
## 目标
|
||
|
||
- 每条 AI 回复消息卡片都拥有完整的功能按钮（展开/收起、复制、换个方向、不像我、继续生成、播放）
|
||
- 修复 story-card 展开失效的 bug
|
||
- 所有按钮功能正常可用
|
||
|
||
## 方案选择
|
||
|
||
采用 **方案 A：在现有单文件组件内修复 + 扩展**
|
||
|
||
- 不提取独立组件，保持现有文件结构
|
||
- 改动最小、风险低、不引入新文件
|
||
- 后续如有更复杂的差异化需求再升级
|
||
|
||
## 详细设计
|
||
|
||
### 1. 修复 story-card 展开失效
|
||
|
||
**根因**：`ScriptView.vue` 第 192 行的条件包裹
|
||
|
||
```vue
|
||
<template v-if="!resultHasScriptReplies">
|
||
<scroll-view v-if="storyCollapsed" ...>
|
||
<text class="story-body">{{ displayedResultContent }}</text>
|
||
</scroll-view>
|
||
<text v-else class="story-body">{{ displayedResultContent }}</text>
|
||
<view class="collapse-row" @click="toggleStoryCollapse">...</view>
|
||
</template>
|
||
```
|
||
|
||
当 `resultHasScriptReplies` 为 `true`（有 `kind: 'script'` 的消息）时，整个故事正文和底部展开按钮被隐藏。
|
||
|
||
**修复**：去掉 `<template v-if="!resultHasScriptReplies">` 条件包裹，让故事正文始终由 `storyCollapsed` 控制展开/收起。
|
||
|
||
**副作用**：story-card 始终显示完整故事正文，与 result-chat-list 中的 script 消息内容重复。这是预期行为——两个卡片独立操作各自内容。
|
||
|
||
### 2. 给每条 assistant 消息加功能按钮组
|
||
|
||
**布局**：在每条 assistant 消息的内容 + 展开/收起按钮之后，追加一行网格按钮组，2 列布局（与 story-card 的 `.result-actions` 一致）。
|
||
|
||
**按钮清单**（按顺序）：
|
||
|
||
| 按钮 | 作用 | 实现方式 |
|
||
|---|---|---|
|
||
| 复制 | 复制该消息正文到剪贴板 | `uni.setClipboardData` |
|
||
| 换个方向 | 进入「换方向」修订确认 | 复用现有 `changeDirection()` |
|
||
| 不像我 | 进入「不像我」修订确认 | 复用现有 `notLikeMe()` |
|
||
| 继续生成 | 收起故事 + 聚焦输入框 | 复用现有 `continueInChat()` |
|
||
| 播放 | 播放 TTS 音频 | 复用 `ttsPlayer.playSource`，传 `currentResult.id` |
|
||
|
||
**按钮条件**：
|
||
- 展开/收起、复制：所有 assistant 消息都有
|
||
- 换个方向、不像我、继续生成、播放：所有 assistant 消息都有（本质上是全局操作，作用在 `currentResult` 上）
|
||
- 正在 `pending` 的 assistant 消息不显示按钮组（保持现有逻辑，`isAssistantMessage` 已排除 `pending`）
|
||
|
||
### 3. 新增/修改的事件处理器
|
||
|
||
1. **`copyMessageContent(message)`**（新增）：
|
||
- 复制 `message.content` 到剪贴板
|
||
- 空内容时 `showToast` 提示「暂无可复制内容」
|
||
- 埋点 `script_message_copy_click`
|
||
|
||
2. **`playMessageTts(message)`**（新增）：
|
||
- 调用 `ttsPlayer.playSource(currentResult.value?.id || '')`
|
||
- 所有消息都播放同一个故事的 TTS（TTS 基于 `currentResult` 生成）
|
||
- 埋点 `script_message_tts_click`
|
||
|
||
3. **`toggleMessageCollapse(message)`**（修改）：
|
||
- 补充埋点 `script_message_collapse_toggle`（与 `toggleStoryCollapse` 对齐）
|
||
|
||
### 4. 样式
|
||
|
||
为消息卡片内的按钮组新建 `.message-actions` 样式，复用 `.result-actions` 和 `.action-btn` 的视觉风格：
|
||
|
||
```css
|
||
.message-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 14rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
```
|
||
|
||
按钮直接复用 `.action-btn` 类名，确保视觉与主卡片一致。展开/收起按钮（`.message-toggle`）保留现有金色调样式，与功能按钮组做视觉区分。
|
||
|
||
### 5. 边界情况
|
||
|
||
| 场景 | 行为 |
|
||
|---|---|
|
||
| 空内容的 assistant 消息 | 复制按钮 `showToast` 提示「暂无可复制内容」；其他按钮正常可用 |
|
||
| pending 中的消息 | 不显示按钮组（现有逻辑） |
|
||
| user 消息 | 不显示按钮组 |
|
||
| 无 `currentResult` 时的播放 | 按钮仍可点击，`playSource` 会走内部兜底（传空 id） |
|
||
|
||
## 修改范围
|
||
|
||
仅修改一个文件：`mini-program/src/pages/main/ScriptView.vue`
|
||
|
||
### 模板修改
|
||
1. 去掉第 192 行 `<template v-if="!resultHasScriptReplies">` 条件包裹
|
||
2. 在 `result-chat-list` 的 assistant 消息中添加功能按钮组
|
||
|
||
### 脚本修改
|
||
1. 新增 `copyMessageContent(message)` 方法
|
||
2. 新增 `playMessageTts(message)` 方法
|
||
3. 修改 `toggleMessageCollapse(message)` 补充埋点
|
||
|
||
### 样式修改
|
||
1. 新增 `.message-actions` 样式
|