468 lines
14 KiB
Markdown
468 lines
14 KiB
Markdown
---
|
||
author: claude
|
||
created_at: 2026-06-27
|
||
purpose: AI 消息卡片功能按钮统一实现计划
|
||
---
|
||
|
||
# AI 消息卡片功能按钮统一实现计划
|
||
|
||
> **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:** 统一小程序实现心愿页面中所有 AI 消息卡片的功能按钮，并修复 story-card 展开失效 bug
|
||
|
||
**Architecture:** 在现有单文件组件 `ScriptView.vue` 内修复 + 扩展，不提取独立组件，保持现有文件结构
|
||
|
||
**Tech Stack:** Vue 3, UniApp, 微信小程序
|
||
|
||
---
|
||
|
||
## 文件结构
|
||
|
||
**修改：**
|
||
- `mini-program/src/pages/main/ScriptView.vue` - 主页面组件（模板 + 脚本 + 样式）
|
||
|
||
---
|
||
|
||
### Task 1: 修复 story-card 展开失效 bug
|
||
|
||
**Files:**
|
||
- Modify: `mini-program/src/pages/main/ScriptView.vue:192-210`
|
||
|
||
- [ ] **Step 1: 移除 resultHasScriptReplies 条件包裹**
|
||
|
||
打开 `mini-program/src/pages/main/ScriptView.vue`，找到第 192 行的 `<template v-if="!resultHasScriptReplies">`，删除这个条件包裹标签和对应的 `</template>` 闭合标签（第 210 行）。
|
||
|
||
修改前：
|
||
```vue
|
||
<template v-if="!resultHasScriptReplies">
|
||
<scroll-view
|
||
v-if="storyCollapsed"
|
||
class="story-body-scroll"
|
||
scroll-y
|
||
:enhanced="true"
|
||
:show-scrollbar="true"
|
||
>
|
||
<text class="story-body" :selectable="true" :user-select="true">{{ displayedResultContent }}</text>
|
||
</scroll-view>
|
||
<text v-else class="story-body" :selectable="true" :user-select="true">{{ displayedResultContent }}</text>
|
||
<view class="collapse-row" @click="toggleStoryCollapse">
|
||
<text class="collapse-row-text">{{ storyCollapsed ? '展开全文' : '收起全文' }}</text>
|
||
<view class="collapse-chevron" :class="{ down: storyCollapsed }">
|
||
<view></view>
|
||
<view></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
修改后：
|
||
```vue
|
||
<scroll-view
|
||
v-if="storyCollapsed"
|
||
class="story-body-scroll"
|
||
scroll-y
|
||
:enhanced="true"
|
||
:show-scrollbar="true"
|
||
>
|
||
<text class="story-body" :selectable="true" :user-select="true">{{ displayedResultContent }}</text>
|
||
</scroll-view>
|
||
<text v-else class="story-body" :selectable="true" :user-select="true">{{ displayedResultContent }}</text>
|
||
<view class="collapse-row" @click="toggleStoryCollapse">
|
||
<text class="collapse-row-text">{{ storyCollapsed ? '展开全文' : '收起全文' }}</text>
|
||
<view class="collapse-chevron" :class="{ down: storyCollapsed }">
|
||
<view></view>
|
||
<view></view>
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
- [ ] **Step 2: 验证修复**
|
||
|
||
在微信开发者工具中编译运行，进入「实现心愿」页面：
|
||
1. 输入心愿并生成故事
|
||
2. 点击「继续生成」创建 script 类型消息
|
||
3. 点击 story-card 的展开/收起按钮，验证故事正文能正确展开和收起
|
||
4. 确认控制台无报错
|
||
|
||
- [ ] **Step 3: 提交代码**
|
||
|
||
```bash
|
||
git add mini-program/src/pages/main/ScriptView.vue
|
||
git commit -m "fix: 修复 story-card 展开失效 bug
|
||
|
||
移除 resultHasScriptReplies 条件包裹，让故事正文始终由 storyCollapsed 控制展开/收起"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: 添加新方法支持消息卡片功能
|
||
|
||
**Files:**
|
||
- Modify: `mini-program/src/pages/main/ScriptView.vue` (script 部分)
|
||
|
||
- [ ] **Step 1: 添加 copyMessageContent 方法**
|
||
|
||
在 `toggleMessageCollapse` 方法之后（约第 450 行），添加复制消息内容的方法：
|
||
|
||
```javascript
|
||
const copyMessageContent = (message) => {
|
||
const content = message?.content || ''
|
||
if (!content.trim()) {
|
||
uni.showToast({ title: '暂无可复制内容', icon: 'none' })
|
||
return
|
||
}
|
||
uni.setClipboardData({
|
||
data: content,
|
||
success: () => {
|
||
uni.showToast({ title: '已复制', icon: 'success' })
|
||
}
|
||
})
|
||
analytics.track('script_message_copy_click', {
|
||
message_id: message?.id || '',
|
||
content_length: content.length
|
||
}, { eventType: 'script', pagePath })
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 添加 playMessageTts 方法**
|
||
|
||
在 `copyMessageContent` 方法之后，添加播放 TTS 的方法：
|
||
|
||
```javascript
|
||
const playMessageTts = (message) => {
|
||
const scriptId = currentResult.value?.id || ''
|
||
ttsPlayer.playSource(scriptId)
|
||
analytics.track('script_message_tts_click', {
|
||
message_id: message?.id || '',
|
||
script_id: scriptId
|
||
}, { eventType: 'script', pagePath })
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: 修改 toggleMessageCollapse 方法添加埋点**
|
||
|
||
找到 `toggleMessageCollapse` 方法（约第 442-450 行），在方法开头添加埋点代码：
|
||
|
||
修改前：
|
||
```javascript
|
||
const toggleMessageCollapse = (message) => {
|
||
collapsedMessageIds.value[message.id] = !isMessageCollapsed(message)
|
||
}
|
||
```
|
||
|
||
修改后：
|
||
```javascript
|
||
const toggleMessageCollapse = (message) => {
|
||
collapsedMessageIds.value[message.id] = !isMessageCollapsed(message)
|
||
analytics.track('script_message_collapse_toggle', {
|
||
message_id: message?.id || '',
|
||
collapsed: collapsedMessageIds.value[message.id]
|
||
}, { eventType: 'script', pagePath })
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: 验证方法添加**
|
||
|
||
在微信开发者工具中编译运行，确认控制台无语法错误。新方法暂时不会被调用，后续任务会在模板中使用。
|
||
|
||
- [ ] **Step 5: 提交代码**
|
||
|
||
```bash
|
||
git add mini-program/src/pages/main/ScriptView.vue
|
||
git commit -m "feat: 添加消息卡片功能方法
|
||
|
||
- copyMessageContent: 复制消息内容到剪贴板
|
||
- playMessageTts: 播放故事 TTS 音频
|
||
- toggleMessageCollapse: 添加展开/收起埋点"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: 在 result-chat-list 中添加功能按钮组
|
||
|
||
**Files:**
|
||
- Modify: `mini-program/src/pages/main/ScriptView.vue:245-270`
|
||
|
||
- [ ] **Step 1: 在 assistant 消息中添加功能按钮组**
|
||
|
||
找到 `result-chat-list` 部分（约第 245-270 行），在消息内容和展开/收起按钮之后、时间戳之前，添加功能按钮组。
|
||
|
||
修改前：
|
||
```vue
|
||
<view
|
||
v-for="(message, index) in resultMessages"
|
||
:key="message.id"
|
||
class="result-chat-list"
|
||
>
|
||
<view
|
||
v-if="isAssistantMessage(message)"
|
||
class="chat-bubble assistant"
|
||
>
|
||
<text class="message-content">{{ getMessageContent(message) }}</text>
|
||
<view class="message-toggle" @click="toggleMessageCollapse(message)">
|
||
<text>{{ isMessageCollapsed(message) ? '展开全文' : '收起全文' }}</text>
|
||
<view class="collapse-chevron" :class="{ down: isMessageCollapsed(message) }">
|
||
<view></view>
|
||
<view></view>
|
||
</view>
|
||
</view>
|
||
<text class="message-time">{{ formatMessageTime(message.createdAt) }}</text>
|
||
</view>
|
||
<!-- user message -->
|
||
</view>
|
||
```
|
||
|
||
修改后：
|
||
```vue
|
||
<view
|
||
v-for="(message, index) in resultMessages"
|
||
:key="message.id"
|
||
class="result-chat-list"
|
||
>
|
||
<view
|
||
v-if="isAssistantMessage(message)"
|
||
class="chat-bubble assistant"
|
||
>
|
||
<text class="message-content">{{ getMessageContent(message) }}</text>
|
||
<view class="message-toggle" @click="toggleMessageCollapse(message)">
|
||
<text>{{ isMessageCollapsed(message) ? '展开全文' : '收起全文' }}</text>
|
||
<view class="collapse-chevron" :class="{ down: isMessageCollapsed(message) }">
|
||
<view></view>
|
||
<view></view>
|
||
</view>
|
||
</view>
|
||
<view class="message-actions">
|
||
<view class="action-btn" @click="copyMessageContent(message)">
|
||
<text>复制</text>
|
||
</view>
|
||
<view class="action-btn" @click="changeDirection">
|
||
<text>换个方向</text>
|
||
</view>
|
||
<view class="action-btn" @click="notLikeMe">
|
||
<text>不像我</text>
|
||
</view>
|
||
<view class="action-btn" @click="continueInChat">
|
||
<text>继续生成</text>
|
||
</view>
|
||
<view class="action-btn primary" @click="playMessageTts(message)">
|
||
<text>▶ 播放</text>
|
||
</view>
|
||
</view>
|
||
<text class="message-time">{{ formatMessageTime(message.createdAt) }}</text>
|
||
</view>
|
||
<!-- user message -->
|
||
</view>
|
||
```
|
||
|
||
**说明：**
|
||
- 按钮组使用 `.message-actions` 容器，2 列网格布局
|
||
- 复制、换个方向、不像我、继续生成使用 `.action-btn` 样式
|
||
- 播放按钮使用 `.action-btn.primary` 样式（主色调突出）
|
||
- 所有按钮都调用 Task 2 中定义的方法或复用现有方法
|
||
|
||
- [ ] **Step 2: 验证按钮组显示**
|
||
|
||
在微信开发者工具中编译运行：
|
||
1. 进入「实现心愿」页面，生成故事
|
||
2. 点击「继续生成」创建 assistant 消息
|
||
3. 验证每条 assistant 消息下方显示 5 个功能按钮（复制、换个方向、不像我、继续生成、播放）
|
||
4. 验证按钮布局为 2 列网格
|
||
|
||
- [ ] **Step 3: 验证按钮功能**
|
||
|
||
逐个测试按钮功能：
|
||
1. **复制**：点击后应复制消息内容，显示「已复制」提示
|
||
2. **换个方向**：点击后应进入「换方向」修订确认流程
|
||
3. **不像我**：点击后应进入「不像我」修订确认流程
|
||
4. **继续生成**：点击后应收起故事并聚焦输入框
|
||
5. **播放**：点击后应播放故事 TTS 音频
|
||
|
||
确认控制台无报错，所有功能正常。
|
||
|
||
- [ ] **Step 4: 提交代码**
|
||
|
||
```bash
|
||
git add mini-program/src/pages/main/ScriptView.vue
|
||
git commit -m "feat: 在 result-chat-list 中添加功能按钮组
|
||
|
||
为每条 assistant 消息添加完整功能按钮：
|
||
- 复制：复制消息内容到剪贴板
|
||
- 换个方向：进入换方向修订确认
|
||
- 不像我：进入不像我修订确认
|
||
- 继续生成：收起故事并聚焦输入框
|
||
- 播放：播放故事 TTS 音频"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: 添加消息按钮组样式
|
||
|
||
**Files:**
|
||
- Modify: `mini-program/src/pages/main/ScriptView.vue` (style 部分)
|
||
|
||
- [ ] **Step 1: 添加 .message-actions 样式**
|
||
|
||
在 `<style scoped>` 部分（约第 1500 行之后），找到 `.message-toggle` 样式附近，添加按钮组样式：
|
||
|
||
```css
|
||
.message-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 16rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
|
||
.message-actions .action-btn {
|
||
padding: 16rpx 24rpx;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 2rpx solid rgba(255, 255, 255, 0.15);
|
||
border-radius: 16rpx;
|
||
color: #e0e0e0;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.message-actions .action-btn:active {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.message-actions .action-btn.primary {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-color: transparent;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.message-actions .action-btn.primary:active {
|
||
opacity: 0.85;
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: 验证样式效果**
|
||
|
||
在微信开发者工具中编译运行：
|
||
1. 进入「实现心愿」页面，生成故事
|
||
2. 点击「继续生成」创建 assistant 消息
|
||
3. 验证按钮样式：
|
||
- 按钮组为 2 列网格布局
|
||
- 普通按钮为半透明白色背景，圆角边框
|
||
- 播放按钮为主色调渐变（紫色）
|
||
- 点击时有缩放反馈效果
|
||
4. 验证按钮在不同屏幕尺寸下的响应式表现
|
||
|
||
- [ ] **Step 3: 提交代码**
|
||
|
||
```bash
|
||
git add mini-program/src/pages/main/ScriptView.vue
|
||
git commit -m "style: 添加消息按钮组样式
|
||
|
||
- .message-actions: 2 列网格布局，间距 16rpx
|
||
- .action-btn: 半透明白色背景，圆角边框，点击反馈
|
||
- .action-btn.primary: 主色调渐变（紫色），白色文字"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 5: 最终验证和边界情况测试
|
||
|
||
**Files:**
|
||
- 无需修改文件，仅做验证
|
||
|
||
- [ ] **Step 1: 测试 story-card 展开/收起**
|
||
|
||
在微信开发者工具中编译运行：
|
||
1. 进入「实现心愿」页面
|
||
2. 输入心愿并生成故事
|
||
3. 点击 story-card 的「展开全文」按钮，验证故事正文展开
|
||
4. 点击「收起全文」按钮，验证故事正文收起
|
||
5. 点击「继续生成」创建 script 类型消息
|
||
6. 再次点击 story-card 的展开/收起按钮，验证功能正常（之前会失效）
|
||
|
||
**预期结果：** 所有展开/收起操作正常工作
|
||
|
||
- [ ] **Step 2: 测试 assistant 消息功能按钮**
|
||
|
||
继续在上一步的基础上：
|
||
1. 验证每条 assistant 消息下方显示 5 个功能按钮
|
||
2. 点击「复制」按钮，验证复制成功提示
|
||
3. 点击「换个方向」按钮，验证进入修订确认流程
|
||
4. 点击「不像我」按钮，验证进入修订确认流程
|
||
5. 点击「继续生成」按钮，验证故事收起且输入框获得焦点
|
||
6. 点击「播放」按钮，验证 TTS 音频播放
|
||
|
||
**预期结果：** 所有按钮功能正常
|
||
|
||
- [ ] **Step 3: 测试边界情况**
|
||
|
||
测试以下边界场景：
|
||
|
||
**场景 1：空内容的 assistant 消息**
|
||
- 手动构造一条空内容的 assistant 消息（或等待 AI 返回空内容）
|
||
- 点击「复制」按钮
|
||
- **预期：** 显示「暂无可复制内容」提示
|
||
|
||
**场景 2：pending 状态的 assistant 消息**
|
||
- 生成故事后，快速点击「继续生成」
|
||
- 观察正在加载的 assistant 消息（pending 状态）
|
||
- **预期：** pending 消息不显示功能按钮组
|
||
|
||
**场景 3：user 消息**
|
||
- 查看用户发送的消息
|
||
- **预期：** user 消息不显示功能按钮组
|
||
|
||
**场景 4：无 currentResult 时的播放**
|
||
- 如果可能，测试在未生成故事时点击播放按钮
|
||
- **预期：** 按钮仍可点击，TTS 播放器内部处理空 id
|
||
|
||
- [ ] **Step 4: 验证埋点**
|
||
|
||
打开微信开发者工具的控制台，查看埋点日志：
|
||
1. 点击 assistant 消息的展开/收起按钮，验证 `script_message_collapse_toggle` 埋点
|
||
2. 点击「复制」按钮，验证 `script_message_copy_click` 埋点
|
||
3. 点击「播放」按钮，验证 `script_message_tts_click` 埋点
|
||
|
||
**预期结果：** 所有埋点正确触发，包含正确的参数
|
||
|
||
- [ ] **Step 5: 检查控制台错误**
|
||
|
||
在整个测试过程中，持续关注微信开发者工具的控制台：
|
||
- 确认无 Vue 警告
|
||
- 确认无 JavaScript 错误
|
||
- 确认无网络请求错误
|
||
|
||
**预期结果：** 控制台干净，无任何错误
|
||
|
||
- [ ] **Step 6: 最终提交（如有修改）**
|
||
|
||
如果在前面的测试中发现了需要修复的问题，修复后提交：
|
||
|
||
```bash
|
||
git add mini-program/src/pages/main/ScriptView.vue
|
||
git commit -m "fix: 修复最终验证中发现的问题
|
||
|
||
[描述修复的具体问题]"
|
||
```
|
||
|
||
如果测试全部通过，无需额外提交。
|
||
|
||
- [ ] **Step 7: 创建 Pull Request（可选）**
|
||
|
||
如果项目使用 PR 流程，创建 PR 合并这些更改：
|
||
|
||
```bash
|
||
git push origin HEAD
|
||
```
|
||
|
||
然后在代码托管平台创建 PR，标题：
|
||
```
|
||
feat: 统一 AI 消息卡片功能按钮并修复 story-card 展开失效
|
||
```
|
||
|
||
PR 描述包含：
|
||
- 修复 story-card 展开失效 bug
|
||
- 为每条 assistant 消息添加完整功能按钮组
|
||
- 添加相应的样式和埋点
|
||
- 所有功能已通过测试
|