我的书单功能模块
概述
本模块是从nuttyreading项目迁移并升级到Vue3+TypeScript+Pinia+TailwindCSS+WotUI+i18n技术栈的"我的书单"功能。
功能列表
1. 书单列表 (pages/book/index.vue)
- ✅ 显示用户已购买的所有书籍
- ✅ 分页加载
- ✅ 空状态处理
- ✅ 支持跳转到详情、阅读器、听书、书评页面
- ✅ iOS平台自动隐藏书评按钮
2. 书籍详情 (pages/book/detail.vue)
- ✅ 显示书籍封面、标题、作者、简介
- ✅ 显示阅读数、听书数、购买数统计
- ✅ 显示前2条书评（非iOS）
- ✅ 显示相关推荐书籍
- ✅ 根据购买状态显示不同操作按钮
- ✅ 购买弹窗
3. 书评系统 (pages/book/review.vue)
- ✅ 评论列表展示
- ✅ 发表评论（富文本编辑器）
- ✅ 点赞/取消点赞
- ✅ 回复评论
- ✅ 删除评论
- ✅ 分页加载更多
- ✅ Emoji支持（待完善）
4. 阅读器 (pages/book/reader.vue)
- ✅ 上下滚动模式
- ✅ 左右翻页模式
- ✅ 字体大小调节（8个级别）
- ✅ 主题切换（5种主题）
- ✅ 章节目录
- ✅ 阅读进度保存和恢复
- ✅ 图片内容显示
- ✅ 试读限制提示
5. 听书功能
章节列表 (pages/book/listen/index.vue)
- ✅ 显示书籍信息
- ✅ 章节列表
- ✅ 章节锁定状态
- ✅ 音频文件检查
音频播放器 (pages/book/listen/player.vue)
- ✅ 音频播放/暂停
- ✅ 进度条控制
- ✅ 快进/快退（15秒）
- ✅ 上一章/下一章
- ✅ 播放速度调节（0.5x - 2x）
- ✅ 自动播放下一章
- ✅ 封面旋转动画
技术栈
- 框架: Vue3 Composition API
- 语言: TypeScript
- 状态管理: Pinia
- UI组件: WotUI
- 样式: SCSS + TailwindCSS
- 国际化: vue-i18n
文件结构
pages/book/
├── index.vue # 书单列表
├── detail.vue # 书籍详情
├── review.vue # 书评页面
├── reader.vue # 阅读器
└── listen/
├── index.vue # 听书章节列表
└── player.vue # 音频播放器
components/book/
├── CustomNavbar.vue # 自定义导航栏
├── BookCard.vue # 书籍卡片
└── CommentList.vue # 评论列表
api/modules/
└── book.ts # 书籍API
stores/
└── book.ts # 书籍状态管理
types/
└── book.d.ts # 类型定义
API接口
所有API接口保持与原项目完全一致：
bookAbroad/home/getbooks- 获取我的书单bookAbroad/home/getBookInfo- 获取书籍详情bookAbroad/home/getBookReadCount- 获取统计数据bookAbroad/home/getRecommendBook- 获取推荐书籍bookAbroad/getBookAbroadCommentTree- 获取评论列表bookAbroad/insertBookAbroadComment- 发表评论bookAbroad/insertBookAbroadCommentLike- 点赞bookAbroad/delBookAbroadCommentLike- 取消点赞bookAbroad/delBookAbroadComment- 删除评论bookAbroad/home/getBookChapter- 获取章节列表bookAbroad/home/getBookChapterContent- 获取章节内容bookAbroad/home/getBookReadRate- 获取阅读进度bookAbroad/home/insertBookReadRate- 保存阅读进度
国际化
支持中文和英文两种语言，所有文本通过i18n配置管理。
翻译键
book.*- 书单相关details.*- 详情相关listen.*- 听书相关common.*- 通用文本
平台适配
iOS特殊处理
- 书评功能在iOS平台自动隐藏
- 使用条件编译
#ifdef APP-PLUS判断平台
刘海屏适配
- 所有页面自动适配状态栏高度
- 使用
uni.getSystemInfoSync().safeArea获取安全区域
使用说明
1. 从书单列表进入
uni.navigateTo({
url: '/pages/book/index'
})
2. 直接进入书籍详情
uni.navigateTo({
url: `/pages/book/detail?id=${bookId}`
})
3. 进入阅读器
// 已购买
uni.navigateTo({
url: `/pages/book/reader?isBuy=0&bookId=${bookId}`
})
// 试读
uni.navigateTo({
url: `/pages/book/reader?isBuy=1&bookId=${bookId}&count=${freeChapterCount}`
})
4. 进入听书
uni.navigateTo({
url: `/pages/book/listen/index?bookId=${bookId}`
})
注意事项
- 不要修改API接口：所有接口地址和参数必须与原项目保持一致
- UI组件使用WotUI：不要使用uView或uni-ui组件
- 国际化文本：所有文本必须通过i18n配置，不能硬编码
- iOS平台：注意书评功能的隐藏处理
- 类型安全：充分利用TypeScript类型检查
待优化项
- Emoji选择器组件需要集成完整的Emoji库
- 阅读器可以添加更多主题
- 音频播放器可以添加播放列表功能
- 可以添加书签功能
- 可以添加笔记功能
测试清单
- 书单列表加载和分页
- 书籍详情所有信息显示
- 书评发表、点赞、删除
- 阅读器两种模式切换
- 阅读器字体和主题设置
- 阅读进度保存和恢复
- 听书播放控制
- 听书速度调节
- iOS平台书评隐藏
- 试读/试听限制
- 国际化文本切换
更新日志
v1.0.0 (2024-01-XX)
- ✅ 完成从Vue2到Vue3的迁移
- ✅ 完成TypeScript类型定义
- ✅ 完成Pinia状态管理
- ✅ 完成WotUI组件替换
- ✅ 完成国际化配置
- ✅ 完成所有功能页面