FEATURE_CHECKLIST.md 4.4 KB

P0 和 P1 功能前端实现检查清单

✅ 已完成并可见的功能

1. 播放页面 (pages/player/index.vue)

  • 下载按钮 - 底部操作栏,点击下载音频
  • 播放模式切换 - 播放控制区第一个按钮,显示 🔁/🔀 图标
    • 顺序播放 🔂
    • 列表循环 🔁
    • 单曲循环 🔂
    • 随机播放 🔀

2. 历史记录页面 (pages/history/index.vue)

  • 搜索框 - 顶部搜索栏,可以输入关键字搜索
  • 清除搜索 - 搜索框右侧的 ✕ 按钮
  • 编辑模式 - 点击右上角"编辑"进入
  • 批量下载 - 编辑模式下,选择多个音频后点击"下载"
  • 批量删除 - 编辑模式下,选择多个音频后点击"删除"
  • 全选/取消 - 编辑模式下的全选按钮

3. 书籍生成页面 (pages/book-generator/index.vue)

  • 批量操作按钮 - 完整内容区域右上角的"批量"按钮
  • 批量操作栏 - 点击批量后显示:
    • 全选/取消全选
    • 重新生成(选中章节数)
    • 删除(选中章节数)
    • 取消

4. 章节详情页面 (pages/book-generator/chapter-detail.vue)

  • 编辑按钮 - 章节元数据区域的"✏️ 编辑"按钮
  • 编辑模式 - 点击编辑后显示 textarea 编辑框
  • 保存/取消 - 编辑模式下的操作按钮
  • 字数统计 - 自动更新

📍 功能位置指引

音频下载功能

在哪里看到?

  1. 打开任意一个已生成音频的书籍
  2. 进入章节详情页
  3. 点击"播放音频"
  4. 在播放页面底部可以看到"下载"按钮

或者:

  1. 进入"历史记录"页面
  2. 点击右上角"编辑"
  3. 勾选多个音频
  4. 点击"下载"按钮进行批量下载

播放模式功能

在哪里看到?

  1. 打开播放页面
  2. 在播放控制区(播放/暂停按钮左侧)
  3. 第一个按钮就是播放模式切换
  4. 点击可以切换:顺序→循环→单曲→随机

搜索功能

在哪里看到?

  1. 进入"历史记录"页面
  2. 顶部就是搜索框
  3. 输入关键字,按回车搜索
  4. 点击 ✕ 清除搜索

批量操作(书籍章节)

在哪里看到?

  1. 进入"书籍生成"页面
  2. 点击任意一本书查看详情
  3. 滚动到"完整内容"区域
  4. 右上角有"批量"按钮
  5. 点击后显示批量操作栏

章节内容编辑

在哪里看到?

  1. 进入书籍详情页
  2. 点击任意一个level=3的小节
  3. 进入章节详情页
  4. 在章节标题右侧(音频/视频标签旁边)有"✏️ 编辑"按钮
  5. 点击后进入编辑模式

🔍 快速测试步骤

测试 1: 音频下载(单音频)

  1. 访问: http://localhost:5173/#/pages/history/index
  2. 找到任意有音频的记录
  3. 点击进入播放页面
  4. 看到底部的"下载"按钮了吗?✅
  5. 点击下载,应该显示下载进度

测试 2: 批量下载

  1. 访问: http://localhost:5173/#/pages/history/index
  2. 点击右上角"编辑"
  3. 勾选2-3个音频
  4. 看到"下载 (3)"按钮了吗?✅
  5. 点击批量下载

测试 3: 播放模式

  1. 进入任意播放页面
  2. 看到播放控制区的模式按钮了吗?✅
  3. 点击切换,应该显示:顺序→循环→单曲→随机
  4. 每次切换都有提示

测试 4: 历史记录搜索

  1. 访问: http://localhost:5173/#/pages/history/index
  2. 顶部搜索框输入关键字
  3. 按回车,列表应该过滤 ✅
  4. 点击 ✕ 清除搜索

测试 5: 章节批量操作

  1. 访问: http://localhost:5173/#/pages/book-generator/index
  2. 点击一本书查看详情
  3. 在"完整内容"区域右上角看到"批量"按钮 ✅
  4. 点击后显示批量操作栏

测试 6: 章节内容编辑

  1. 进入章节详情页(level=3的小节)
  2. 在标题旁边看到"✏️ 编辑"按钮 ✅
  3. 点击后出现编辑框
  4. 修改内容后点击"保存"

⚠️ 如果看不到功能

可能原因:

  1. 页面没有刷新 - 硬刷新浏览器 (Ctrl+Shift+R)
  2. 前端没有重新编译 - 重启开发服务器
  3. 缓存问题 - 清除浏览器缓存
  4. 路由问题 - 确保访问的是正确的页面

解决方法:

# 重启前端开发服务器
cd my-uniapp-vue3
npm run dev:h5

📸 功能截图位置

所有功能都应该在以下页面可见:

  • /pages/player/index - 下载 + 播放模式
  • /pages/history/index - 搜索 + 批量下载
  • /pages/book-generator/index - 章节批量操作
  • /pages/book-generator/chapter-detail - 章节编辑