findings.md 2.3 KB

OPT-01: 书籍列表操作按钮合并 → 下拉菜单

任务目标

将书籍卡片中的 5 个操作按钮合并为 2 个主导按钮 + 1 个"更多"下拉菜单。

状态

  • 状态: 已完成
  • 完成时间: 2026/05/07

实现摘要

模板修改 (第57-85行)

  • 将原来的 5 个按钮合并为 3 个按钮:
    • primary-btn (flex: 1) - 生成内容(根据状态显示不同文案)
    • publish-btn (width: 180rpx) - 公开/取消公开
    • more-btn (width: 80rpx) - 更多操作

脚本修改 (第344-384行)

  • 新增 showMoreActions(book) 函数
  • 使用 uni.showActionSheet API 显示下拉菜单
  • 菜单项动态显隐:
    • 合并音频: canMergeAudio(book) 时显示
    • 合并视频: canMergeVideo(book) 时显示
    • 生成全部视频: 音频完成且视频未完成时显示

样式修改 (第424-433行)

  • .book-actions: 改为水平布局 display: flex; gap: 12rpx;
  • .primary-btn: flex: 1 自适应宽度,绿色渐变背景
  • .publish-btn: 固定宽度 180rpx,紫色渐变背景
  • .more-btn: 固定宽度 80rpx,灰色背景
  • 新增夜间模式媒体查询适配

修改文件

  • my-uniapp-vue3/src/pages/book-generator/index.vue

验收检查

  • 页面正常加载无报错
  • 原有功能不受影响(音频/视频生成、合并、公开功能保持不变)
  • 新元素适配夜间模式
  • H5 + 小程序两端兼容 (uni.showActionSheet 为通用 API)

后续修复 (2026/05/07)

[MEDIUM] 添加"重新生成视频"选项

  • 位置: showMoreActions 函数
  • 修改: 在 videoStatus.status === 'completed' 时显示"🔄 重新生成视频"选项
  • 处理逻辑: 与"生成全部视频"相同,调用 handleGenerateAllVideo(book)

[LOW] 操作菜单增加 loading 反馈

  • 位置: uni.showActionSheetsuccess 回调
  • 修改:
    • 合并音频时设置 mergingAudio.value[book.id] = true 并显示 loading toast
    • 合并视频时设置 mergingVideo.value[book.id] = true 并显示 loading toast
  • 目的: 让用户明确感知操作已提交

[LOW] 夜间模式补充 .primary-btn.publish-btn

  • 位置: CSS 媒体查询
  • 修改:
    • .primary-btn: 夜间模式调整为 #059669#047857
    • .publish-btn: 夜间模式调整为 #4338ca#4f46e5