AI有声书 v2 - 用户体验优化开发计划

基于 2026-05-07 全面页面审查制定当前状态：feature_list.json 中 38 个功能已全部完成

一、优化原则

不改动核心业务逻辑：不重构已完成的 38 个功能
前端优先：多数优化集中在前端代码修改
增量实施：每次只改 1 个页面/模块，不改总体结构
极简改动：优先用 CSS/交互优化，避免大改 Vue 组件

二、优化项目总览

优先级	编号	名称	涉及页面	预估工时
P0	OPT-01	书籍列表操作按钮合并 → 下拉菜单	book-generator/index.vue	3h
P0	OPT-02	音频/视频生成轮询超时修复（30s→无超时）	book-generator/index.vue, chapter-detail.vue	2h
P0	OPT-03	首页增加"最近收听"模块	index/index.vue	3h
P1	OPT-04	创建书籍增加"简洁模式"	book-generator/create.vue	4h
P1	OPT-05	播放器增加睡眠定时器	player/index.vue	2h
P1	OPT-06	全局骨架屏覆盖	所有列表页	3h
P1	OPT-07	生成按钮固定底部（减少滚动）	create/index.vue	1h
P1	OPT-08	书籍一键"完整生成"流程	book-generator/detail.vue	4h
P2	OPT-09	首页卡片封面升级（文字海报）	index/index.vue	2h
P2	OPT-10	章节详情页手势滑动切换	chapter-detail.vue	2h
P2	OPT-11	"我的"页面增加动态内容卡片	mine/index.vue	2h
P2	OPT-12	"意见反馈"独立页面	mine/index.vue + 新页面	2h
P2	OPT-13	会员中心套餐选中态动画	member/index.vue	1h
P2	OPT-14	加载状态过渡动画（全局）	全局 CSS 微调	1.5h
P3	OPT-15	搜索页增加热门搜索词缓存	search/index.vue	1h
P3	OPT-16	Tab 页面返回按钮修复	book-generator/index.vue	0.5h
P3	OPT-17	播放器歌词时间轴真实化	player/index.vue + 后端	3h
P3	OPT-18	操作确认弹窗（防误触）	book-generator/detail.vue + chapter-detail.vue	1.5h

三、详细实施方案

P0 - 必须优化（核心体验问题）

OPT-01：书籍列表操作按钮合并

问题：每本书下方 5 个操作按钮（生成全部音频/合并音频/合并视频/生成全部视频/公开），信息过载，视觉压力大。

方案：

将 5 个按钮合并为 2 个主要按钮 + 1 个"更多"下拉菜单
主按钮：生成内容（根据状态自动显示：生成音频/继续生成/已完成），公开/取消公开
更多菜单：合并音频、合并视频、生成全部视频
根据状态动态显隐：音频未完成时不显示视频相关按钮

修改文件：my-uniapp-vue3/src/pages/book-generator/index.vue

核心修改：

<!-- 旧：5个独立按钮 -->
<!-- 新：2个主导按钮 + 1个ActionSheet -->
<view class="book-actions">
  <button class="primary-btn" @click="handlePrimaryAction(book)">
    {{ getPrimaryActionText(book) }}
  </button>
  <button class="publish-btn" @click="handleTogglePublish(book)">
    {{ book.isPublished ? '🔒 已公开' : '🌐 公开' }}
  </button>
  <button class="more-btn" @click="showMoreActions(book)">···</button>
</view>
<!-- 更多操作 ActionSheet -->
<uni-action-sheet v-if="showSheet" :visible="showSheet" @click="handleSheetAction" />

OPT-02：轮询超时修复

问题：音频/视频生成轮询有 30 秒超时，长音频生成远超 30 秒。

方案：

移除 setTimeout 超时逻辑
改为 WebSocket 推送（推荐）或背靠背轮询（无超时限制）
用户离开页面后自动停止轮询

后端新增：WebSocket 事件 audio_generation_complete、video_generation_complete

修改文件：

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

server/src/modules/book-generator/book-generator.store.ts

// 旧代码（有30s超时）：
setTimeout(() => { clearAudioPollTimer(book.id); ... }, 30000);

// 新代码（无超时，页面卸载时清理）：
onUnmounted(() => { clearAudioPollTimer(book.id); });

OPT-03：首页增加"最近收听"模块

问题：首页仅展示公开书籍，新用户看不到自己的内容，没有个性化。

方案：

页面分为两部分：上部分"最近收听"（水平滚动卡片），下部分"热门推荐"（现有公开书籍列表）
"最近收听"数据来源：从 player/progress API 获取用户最近的播放记录
未登录时只显示"热门推荐"

修改文件：my-uniapp-vue3/src/pages/index/index.vue

<!-- 新增最近收听区域 -->
<view v-if="isLoggedIn && recentAudios.length > 0" class="recent-section">
  <text class="section-title">最近收听</text>
  <scroll-view scroll-x class="recent-scroll">
    <view v-for="item in recentAudios" :key="item.id" class="recent-card">
      <view class="recent-cover">...</view>
      <text class="recent-title">{{ item.title }}</text>
      <text class="recent-progress">{{ formatProgress(item.progress) }}</text>
    </view>
  </scroll-view>
</view>

P1 - 重要优化

OPT-04：创建书籍简洁模式

问题：创建表单有 12+ 参数（书名/副标题/描述/6 个模板/难度/人群/风格/领域/特殊要求/规模），对新手不友好。

方案：

增加"随填写随推断"机制：填写书名+描述后，AI 自动推荐难度/人群/风格/领域
表单默认只显示：书名、描述、规模、难度（4 个必填项）
其他参数折叠到"高级选项"，点击展开
模板选择改为"智能推荐"按钮：点击后 AI 根据书名+描述推荐最适合的模板

修改文件：my-uniapp-vue3/src/pages/book-generator/create.vue

OPT-05：睡眠定时器

问题：播放器缺少睡眠定时功能，这是所有音频类 App 的标配。

方案：

播放器页面增加睡眠定时按钮（闹钟图标）
选项：15分钟 / 30分钟 / 60分钟 / 当前播放结束
倒计时显示在播放器顶部
时间到自动暂停播放 + 保存当前进度

修改文件：my-uniapp-vue3/src/pages/player/index.vue（后端无需修改）

const sleepTimer = ref<{ remaining: number; total: number } | null>(null);
let sleepTimerInterval: ReturnType<typeof setInterval> | null = null;

function startSleepTimer(minutes: number) {
  sleepTimer.value = { remaining: minutes * 60, total: minutes * 60 };
  sleepTimerInterval = setInterval(() => {
    if (sleepTimer.value) {
      sleepTimer.value.remaining--;
      if (sleepTimer.value.remaining <= 0) {
        clearInterval(sleepTimerInterval!);
        audioStore.pause();
        sleepTimer.value = null;
        uni.showToast({ title: '睡眠定时已到，自动暂停', icon: 'none' });
      }
    }
  }, 1000);
}

OPT-06：全局骨架屏覆盖

问题：目前仅首页有骨架屏，其他列表页（历史记录、书籍列表、专辑列表等）是空白→内容的突变。

方案：

创建通用骨架屏组件 SkeletonList.vue：支持行数/列数/卡片类型配置
在以下页面集成：history/index.vue，album/index.vue，albums/index.vue，search/index.vue
使用现有 Skeleton.vue 组件扩展

修改文件：

my-uniapp-vue3/src/components/Skeleton.vue（增强）
my-uniapp-vue3/src/pages/history/index.vue
my-uniapp-vue3/src/pages/album/index.vue
my-uniapp-vue3/src/pages/albums/index.vue

OPT-07：生成按钮固定底部

问题：create 页面很长，用户输入文本后要滚动到底部再点生成，体验差。

方案：

将"生成音频"按钮改为 position: fixed; bottom: 0; 固定定位
内容区增加对应的底部 padding 避免被遮挡
生成按钮增加不透明度过渡（没文本时半透明不可点，有文本时完全显示）

修改文件：my-uniapp-vue3/src/pages/create/index.vue

OPT-08：书籍一键"完整生成"

问题：当前流程：创建→开始生成→生成全部音频→合并音频→生成全部视频→合并视频→公开，需要用户手动操作 6 步。

方案：

在书籍详情页增加"一键完整生成"按钮
点击后自动按序执行：内容生成 → 等待完成 → 生成全部音频 → 等待完成 → 合并音频 → 生成全部视频 → 等待完成 → 合并视频
进度通过 WebSocket/轮询实时展示
用户可随时取消，已完成的步骤保留

后端新增：POST /api/book-generator/batch-generate（编排整个流程）

修改文件：

my-uniapp-vue3/src/pages/book-generator/detail.vue
my-uniapp-vue3/src/utils/book-generator-api.ts
server/src/modules/book-generator/book-generator.controller.ts

P2 - 体验提升

OPT-09：首页卡片封面升级

问题：当前封面是纯色渐变色 + 📖 emoji，视觉单调。

方案：

利用书籍标题首字母/关键词生成文字海报（类似 Apple Books 风格）
文字海报：标题首字母特大+半透明，书名小字，渐变色背景
纯 CSS 实现（文字渲染 + 渐变背景），无需额外资源

修改文件：my-uniapp-vue3/src/pages/index/index.vue

OPT-10：章节详情页手势切换

问题：阅读章节内容后，需要点击"下一章"按钮才能继续，不够流畅。

方案：

在章节详情页增加左滑/右滑手势事件
左滑 → 下一章，右滑 → 上一章
切换时增加横向滑动动画过渡
利用 @touchstart / @touchmove / @touchend 事件

修改文件：my-uniapp-vue3/src/pages/book-generator/chapter-detail.vue

OPT-11："我的"页面增加动态内容

问题：当前是纯静态菜单列表，缺乏活力和个性化。

方案：

在菜单上方增加"今日创作概况"卡片：今日生成音频数/书籍数/使用额度
增加"最近的创作"：最近 3 条生成记录预览（可点击跳转）
非会员用户显示"升级会员"推广卡片

修改文件：my-uniapp-vue3/src/pages/mine/index.vue

OPT-12：意见反馈独立页面

问题：当前用 uni.showModal 显示反馈联系方式，交互简陋。

方案：

新建 pages/feedback/index.vue 页面
表单字段：反馈类型（功能建议/Bug 报告/其他）、标题、详细描述、联系方式
支持截图上传
提交后保存到服务器

新增文件：

my-uniapp-vue3/src/pages/feedback/index.vue
my-uniapp-vue3/src/pages.json（添加路由）
后端 /api/feedback API

OPT-13：会员套餐选中态动画

问题：套餐选中后仅有边框颜色变化，视觉反馈不够明显。

方案：

选中时增加缩放（scale: 1.02）和阴影增强动画
选中标记（✓）从中心放大出现的动画
CSS transition 即可实现，无需 JS

修改文件：my-uniapp-vue3/src/pages/member/index.vue

OPT-14：全局过渡动画

问题：页面切换、列表项加载、状态变化缺少微动效。

方案：

页面切换：增加 uni.navigateTo 的默认滑动动画
列表项：使用 transition-group 或 CSS animation 实现列表项逐行入场
按钮：增加 :active 缩放到 0.96 的反馈

修改文件：my-uniapp-vue3/src/App.vue（全局 CSS）+ 各组件

P3 - 锦上添花

编号	名称	说明	工时
OPT-15	搜索热词缓存	搜索结果展示同时，本地缓存热门搜索词提升性能	1h
OPT-16	Tab 页面返回按钮修复	book-generator/index.vue 作为 Tab 页不应显示返回按钮	0.5h
OPT-17	歌词时间轴真实化	后端在生成音频时返回真实时间戳，替代前端字数估算	3h
OPT-18	操作确认弹窗	批量删除、生成全部等操作前弹出确认	1.5h

四、实施路线图

第一阶段：P0 紧急修复（预计 8h）

Day 1: OPT-02（轮询超时修复，2h）
Day 2: OPT-01（操作按钮合并，3h）
Day 3: OPT-03（首页最近收听，3h）

第二阶段：P1 重要优化（预计 14h）

Day 4-5: OPT-04（创建书籍简洁模式，4h）
Day 5:   OPT-05（睡眠定时器，2h）
Day 6:   OPT-06（全局骨架屏，3h）
Day 6:   OPT-07（生成按钮固定，1h）
Day 7-8: OPT-08（一键完整生成，4h）

第三阶段：P2 体验提升（预计 8.5h）

Day 9:   OPT-09（封面升级，2h）+ OPT-14（全局动画，1.5h）
Day 9-10: OPT-10（手势切换，2h）+ OPT-13（套餐动画，1h）
Day 10:  OPT-11（我的页面动态卡片，2h）+ OPT-12（反馈页面，2h）

第四阶段：P3 锦上添花（预计 6h）

Day 11: OPT-15（热词缓存）+ OPT-16（返回按钮）+ OPT-17（歌词）+ OPT-18（确认弹窗）

五、后端配套变更摘要

优化项	后端变更
OPT-02	WebSocket 推送生成完成事件
OPT-03	提供用户最近播放记录 API
OPT-08	`POST /api/book-generator/batch-generate` 编排接口
OPT-12	`POST /api/feedback` 反馈提交接口
OPT-17	TTS 生成时返回 LRC 格式时间戳

六、不涉及的范围（本次优化不做）

数据库表结构重构
整套 UI 框架替换（如升级到 uni-ui 新版）
后端微服务化/架构改造
用户权限/认证体系改动
国际化/多语言支持
性能压测/CDN 部署

七、验收标准

每个优化完成后，确认：

页面正常加载无报错
原有功能不受影响
优化项按预期生效
新元素适配夜间模式（如适用）
H5 + 小程序两端兼容

优化开发计划.md 14 KB Постоянная ссылка История Исходник

AI有声书 v2 - 用户体验优化开发计划

一、优化原则

二、优化项目总览

三、详细实施方案

P0 - 必须优化（核心体验问题）

OPT-01：书籍列表操作按钮合并

OPT-02：轮询超时修复

OPT-03：首页增加"最近收听"模块

P1 - 重要优化

OPT-04：创建书籍简洁模式

OPT-05：睡眠定时器

OPT-06：全局骨架屏覆盖

OPT-07：生成按钮固定底部

OPT-08：书籍一键"完整生成"

P2 - 体验提升

OPT-09：首页卡片封面升级

OPT-10：章节详情页手势切换

OPT-11："我的"页面增加动态内容

OPT-12：意见反馈独立页面

OPT-13：会员套餐选中态动画

OPT-14：全局过渡动画

P3 - 锦上添花

四、实施路线图

第一阶段：P0 紧急修复（预计 8h）

第二阶段：P1 重要优化（预计 14h）

第三阶段：P2 体验提升（预计 8.5h）

第四阶段：P3 锦上添花（预计 6h）

五、后端配套变更摘要

六、不涉及的范围（本次优化不做）

七、验收标准

优化开发计划.md 14 KB

Постоянная ссылка История Исходник