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

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

---

## 一、优化原则

1. **不改动核心业务逻辑**：不重构已完成的 38 个功能
2. **前端优先**：多数优化集中在前端代码修改
3. **增量实施**：每次只改 1 个页面/模块，不改总体结构
4. **极简改动**：优先用 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 个操作按钮（生成全部音频/合并音频/合并视频/生成全部视频/公开），信息过载，视觉压力大。

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

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

**核心修改**：
```html
<!-- 旧：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 秒。

**方案**：
1. 移除 `setTimeout` 超时逻辑
2. 改为 **WebSocket 推送**（推荐）或背靠背轮询（无超时限制）
3. 用户离开页面后自动停止轮询

**后端新增**：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`

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

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

---

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

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

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

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

```html
<!-- 新增最近收听区域 -->
<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 个模板/难度/人群/风格/领域/特殊要求/规模），对新手不友好。

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

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

---

#### OPT-05：睡眠定时器

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

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

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

```typescript
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：全局骨架屏覆盖

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

**方案**：
1. 创建通用骨架屏组件 `SkeletonList.vue`：支持行数/列数/卡片类型配置
2. 在以下页面集成：history/index.vue，album/index.vue，albums/index.vue，search/index.vue
3. 使用现有 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 页面很长，用户输入文本后要滚动到底部再点生成，体验差。

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

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

---

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

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

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

**后端新增**：`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，视觉单调。

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

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

---

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

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

**方案**：
1. 在章节详情页增加左滑/右滑手势事件
2. 左滑 → 下一章，右滑 → 上一章
3. 切换时增加横向滑动动画过渡
4. 利用 `@touchstart` / `@touchmove` / `@touchend` 事件

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

---

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

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

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

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

---

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

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

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

**新增文件**：
- `my-uniapp-vue3/src/pages/feedback/index.vue`
- `my-uniapp-vue3/src/pages.json`（添加路由）
- 后端 `/api/feedback` API

---

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

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

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

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

---

#### OPT-14：全局过渡动画

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

**方案**：
1. 页面切换：增加 `uni.navigateTo` 的默认滑动动画
2. 列表项：使用 `transition-group` 或 CSS animation 实现列表项逐行入场
3. 按钮：增加 `: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 格式时间戳 |

---

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

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

---

## 七、验收标准

每个优化完成后，确认：

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