# 书架显示听书功能说明

## 功能概述

修改了书架页面，使其能够同时显示书籍和听书。当用户在听书详情页面点击"加入书架"后，听书会显示在书架页面中。

## 实现的功能

### 1. 合并显示书籍和听书
- ✅ 书架页面同时加载书籍书架和听书书架的数据
- ✅ 书籍和听书合并显示在"我的书架"区域
- ✅ 显示总数（书籍 + 听书）
- ✅ 按添加时间排序（最新添加的在前）

### 2. 类型标识
- ✅ 听书在封面右上角显示"听书"标签
- ✅ 在列表视图中，听书标题旁显示"听书"标签
- ✅ 区分书籍和听书的进度显示方式

### 3. 进度显示
- ✅ 书籍：显示阅读进度百分比（如：50%）
- ✅ 听书：显示"继续收听"或"开始收听"
- ✅ 根据是否有收听记录显示不同的文本

### 4. 跳转功能
- ✅ 点击书籍：跳转到书籍详情页
- ✅ 点击听书：跳转到听书详情页
- ✅ 自动识别类型并跳转到对应的详情页面

### 5. 最近阅读/收听
- ✅ 合并显示最近阅读的书籍和最近收听的听书
- ✅ 按最后阅读/收听时间排序
- ✅ 显示前3条记录

## 数据流程

### 1. 加载数据
```
用户打开书架页面
    ↓
检查用户是否登录
    ↓
同时调用两个API：
  - GET /api/bookshelf/list (书籍书架)
  - GET /api/audiobook-bookshelf/list (听书书架)
    ↓
合并数据并排序
    ↓
显示在页面上
```

### 2. 数据格式

#### 书籍数据
```javascript
{
  id: 1,
  title: '西游记',
  author: '吴承恩',
  image: 'https://...',
  progress: 50,  // 阅读进度（百分比）
  type: 'book',
  lastReadTime: '2024-01-01 10:00:00',
  addedAt: '2024-01-01 09:00:00'
}
```

#### 听书数据
```javascript
{
  id: 1,
  title: '西游记（听书版）',
  author: '吴承恩',
  narrator: '张老师',
  image: 'https://...',
  progressText: '继续收听',  // 或 '开始收听'
  type: 'audiobook',
  lastListenedChapterId: 5,
  lastListenedPosition: 100,
  addedAt: '2024-01-01 09:00:00',
  updatedAt: '2024-01-01 10:00:00'
}
```

## 页面展示

### 我的书架区域
- 网格布局显示所有项目（书籍 + 听书）
- 每个项目显示：
  - 封面图片
  - 标题
  - 进度信息（书籍显示百分比，听书显示"继续收听"）
  - 听书标签（仅听书显示）

### 最近阅读区域
- 列表布局显示最近阅读/收听的3条记录
- 每条记录显示：
  - 封面图片（小尺寸）
  - 标题和类型标签
  - 作者
  - 进度信息

## 代码修改

### 1. 数据模型
- 添加了 `audiobooks` 数组存储听书数据
- 添加了 `allItems` 数组存储合并后的所有项目
- 添加了 `recentItems` 数组存储最近阅读/收听的记录

### 2. 加载逻辑
- 使用 `Promise.all` 同时加载书籍和听书数据
- 错误处理：如果其中一个API失败，不影响另一个
- 数据合并和排序逻辑

### 3. 显示逻辑
- 根据 `type` 字段区分书籍和听书
- 根据类型显示不同的进度信息
- 根据类型显示不同的标签

### 4. 跳转逻辑
- `goToDetail` 方法根据类型跳转到不同的详情页
- 书籍跳转到 `/pages/book-detail/book-detail`
- 听书跳转到 `/pages/listen-detail/listen-detail`

## 使用场景

### 场景1：添加听书到书架
1. 用户在听书详情页面点击"加入书架"
2. 听书被添加到数据库
3. 用户返回书架页面
4. 书架页面自动刷新，显示新添加的听书

### 场景2：查看书架
1. 用户打开书架页面
2. 页面同时加载书籍和听书
3. 显示所有项目，听书有特殊标识
4. 点击听书可以跳转到听书详情页

### 场景3：继续收听
1. 用户在书架页面看到听书
2. 点击听书进入详情页
3. 如果有收听记录，显示"继续收听"
4. 可以继续从上次位置收听

## 注意事项

1. **数据同步**：页面显示时会自动刷新数据，确保显示最新的书架内容
2. **错误处理**：如果某个API失败，不会影响另一个API的数据显示
3. **性能优化**：使用 `Promise.all` 并行加载数据，提高加载速度
4. **类型识别**：通过 `type` 字段区分书籍和听书，确保跳转到正确的详情页

## 测试建议

1. **添加听书测试**
   - 在听书详情页添加听书到书架
   - 返回书架页面，检查是否显示
   - 检查听书标签是否正确显示

2. **显示测试**
   - 同时有书籍和听书时，检查是否正确合并显示
   - 检查排序是否正确（最新的在前）
   - 检查总数是否正确

3. **跳转测试**
   - 点击书籍，检查是否跳转到书籍详情页
   - 点击听书，检查是否跳转到听书详情页

4. **进度显示测试**
   - 检查书籍是否正确显示阅读进度
   - 检查听书是否正确显示"继续收听"或"开始收听"

## 后续优化建议

1. **搜索功能**：实现搜索书架中的书籍和听书
2. **分类显示**：可以按类型筛选（只看书籍或只看听书）
3. **批量操作**：支持批量删除等操作
4. **进度同步**：在播放听书时同步更新书架中的进度信息
5. **排序选项**：支持按不同方式排序（添加时间、最后阅读时间等）