# 听书书架功能说明

## 功能概述

实现了将听书添加到书架的功能，用户可以在听书详情页面点击"加入书架"按钮，将喜欢的听书添加到个人书架中，方便后续收听。

## 数据库设计

### 表结构：`user_audiobook_bookshelf`

| 字段名 | 类型 | 说明 |
|--------|------|------|
| id | INT(11) | 主键ID |
| user_id | INT(11) | 用户ID（外键关联users表） |
| audiobook_id | INT(11) | 听书ID（外键关联audiobooks表） |
| last_listened_chapter_id | INT(11) | 最后收听章节ID（外键关联audiobook_chapters表） |
| last_listened_position | INT(11) | 最后收听位置（秒） |
| added_at | DATETIME | 加入书架时间 |
| updated_at | DATETIME | 更新时间 |

**唯一约束**：`user_id` + `audiobook_id` 组合唯一，防止重复添加

## 后端接口

### 1. 添加听书到书架
- **接口地址**：`POST /api/audiobook-bookshelf/add`
- **请求参数**：
  ```json
  {
    "userId": 1,
    "audiobookId": 1
  }
  ```
- **响应**：返回书架记录信息

### 2. 从书架移除听书
- **接口地址**：`DELETE /api/audiobook-bookshelf/remove`
- **请求参数**：
  ```json
  {
    "userId": 1,
    "audiobookId": 1
  }
  ```
- **响应**：返回成功/失败信息

### 3. 获取用户听书书架列表
- **接口地址**：`GET /api/audiobook-bookshelf/list?userId=1`
- **响应**：返回用户听书书架列表（包含听书信息）

### 4. 检查听书是否在书架中
- **接口地址**：`GET /api/audiobook-bookshelf/check?userId=1&audiobookId=1`
- **响应**：返回布尔值（true/false）

### 5. 更新听书进度
- **接口地址**：`PUT /api/audiobook-bookshelf/progress`
- **请求参数**：
  ```json
  {
    "userId": 1,
    "audiobookId": 1,
    "lastListenedChapterId": 1,
    "lastListenedPosition": 100
  }
  ```
- **响应**：返回更新后的书架记录

## 前端功能

### 听书详情页面 (`listen-detail.vue`)

#### 功能特性
- ✅ 点击"加入书架"按钮，调用后端接口
- ✅ 检查用户是否登录（未登录提示跳转登录页）
- ✅ 检查听书是否已在书架中（显示不同状态）
- ✅ 加入成功后更新按钮状态（显示"已在书架"）
- ✅ 支持从书架移除（再次点击可移除）
- ✅ 错误提示和成功提示
- ✅ 页面显示时自动检查书架状态

#### 按钮状态
- **未在书架**：显示"加入书架"，白色背景
- **已在书架**：显示"已在书架"，灰色背景
- **点击已在书架**：从书架移除，恢复为"加入书架"状态

## 文件清单

### 后端文件
1. **数据库表**：`book/src/main/resources/db/audiobook_bookshelf_table.sql`
2. **实体类**：`book/src/main/java/com/yu/book/domain/UserAudiobookBookshelf.java`
3. **DTO**：`book/src/main/java/com/yu/book/dto/AudiobookBookshelfDTO.java`
4. **VO**：`book/src/main/java/com/yu/book/vo/AudiobookBookshelfVO.java`
5. **Mapper接口**：`book/src/main/java/com/yu/book/mapper/AudiobookBookshelfMapper.java`
6. **Mapper XML**：`book/src/main/resources/mapper/AudiobookBookshelfMapper.xml`
7. **Service**：`book/src/main/java/com/yu/book/service/AudiobookBookshelfService.java`
8. **Controller**：`book/src/main/java/com/yu/book/controller/AudiobookBookshelfController.java`

### 前端文件
1. **API方法**：`books/utils/api.js`（添加了5个听书书架相关API方法）
2. **详情页面**：`books/pages/listen-detail/listen-detail.vue`（实现了加入书架功能）

## 使用步骤

### 1. 创建数据库表

执行SQL脚本创建表：
```bash
mysql -u root -p books_db < book/src/main/resources/db/audiobook_bookshelf_table.sql
```

或者使用MySQL客户端工具执行 `audiobook_bookshelf_table.sql` 文件。

### 2. 启动后端服务

确保后端服务正常启动，新的接口会自动注册。

### 3. 前端测试

1. 打开小程序，进入"听书"模块
2. 点击任意听书，进入详情页面
3. 点击"加入书架"按钮
4. 如果未登录，会提示登录
5. 登录后，再次点击"加入书架"，应该成功添加到书架
6. 按钮状态变为"已在书架"，再次点击可以移除

## 注意事项

1. **用户登录**：添加听书到书架需要用户登录，未登录时会提示跳转登录页
2. **重复添加**：数据库有唯一约束，防止同一用户重复添加同一本听书
3. **数据同步**：页面显示时会自动检查书架状态，确保显示正确
4. **错误处理**：所有操作都有错误提示，用户体验友好

## 后续扩展

可以进一步实现的功能：
1. 在书架页面显示听书列表
2. 显示最后收听章节和进度
3. 继续收听功能（从上次位置继续）
4. 批量管理（批量删除等）
5. 书架分类（自定义分类）

## 问题排查

### 问题1：点击"加入书架"没有反应
- 检查用户是否已登录
- 检查网络请求是否正常
- 查看浏览器控制台是否有错误信息

### 问题2：按钮状态不更新
- 检查 `checkBookshelfStatus` 方法是否被调用
- 检查后端接口是否正常返回数据
- 查看页面 `onShow` 生命周期是否正常执行

### 问题3：数据库错误
- 检查表是否已创建
- 检查外键约束是否正确
- 检查用户ID和听书ID是否存在