👆 点击上方图片打开 YouTube 视频
一个基于 Vue 3 + Vite 的分级阅读学习 web 应用，支持 RAZ 和牛津树两大绘本系列。
📚 为了方便测试，已上传 AA级 和 A级 各3本绘本，直接本地运行即可体验完整功能！
- 分级阅读 - 支持 RAZ (aa-Z) 和牛津树 (L1-L12) 分级绘本
- PDF 渲染 - 高性能 PDF 阅读器，支持缩放、翻页
- 语音合成 (TTS) - 将文本转换为语音播放
- 语音识别 (ASR) - 支持录音识别用户发音
- 自动播放 - 连续播放绘本内容
- 进度追踪 - 自动记录学习进度
- 奖励系统 - 完成绘本获得奖励徽章
- 主题切换 - 多主题皮肤可选
- Vue 3 + Composition API
- Vite 7 构建工具
- Pinia 状态管理
- Vue Router 路由
- Tailwind CSS 样式
- PDF.js PDF 渲染
npm installnpm run devnpm run build构建产物输出到 dist/ 目录
src/
├── components/ # 公共组件
│ ├── PDFViewer.vue
│ ├── RewardBadge.vue
│ └── ThemeModal.vue
├── views/ # 页面视图
│ ├── RazView.vue
│ ├── OxfordView.vue
│ └── BookView.vue
├── services/ # 业务服务
├── stores/ # Pinia 状态管理
└── utils/ # 工具函数
⚠️ 免责声明：本项目不提供绘本资源，会员绘本需自行购买。支持正版，建议通过闲鱼等平台购买 RAZ 电子版资源。
将绘本资源放在 myBooks/ 目录下：
myBooks/
├── raz/ # RAZ 绘本
│ ├── aa/ # 最低级别
│ │ ├── pdf/
│ │ │ └── 01_BookName.pdf
│ │ ├── audio/
│ │ │ └── 01_BookName.mp3
│ │ ├── video/
│ │ │ └── 01_BookName.mp4
│ │ └── cover/
│ │ └── 01_BookName.jpg
│ ├── a/ # 级别 a
│ ├── b/ # 级别 b
│ └── ... # 继续到 z, Z
├── oxford/ # 牛津树绘本
│ ├── L1/ # Level 1
│ │ ├── pdf/
│ │ │ └── 01_BookName.pdf
│ │ ├── audio/
│ │ ├── video/
│ │ │ ├── earTraining/ # 磨耳朵视频
│ │ │ └── bilingual/ # 双语讲解视频
│ │ └── cover/
│ └── L2/ # Level 2
│ └── ...
└── cover/ # 通用封面目录
| 类型 | 格式 | 示例 |
|---|---|---|
| PDF 文件 | {序号}_{书名}.pdf |
01_The Zoo.pdf |
| 音频文件 | {序号}_{书名}.mp3 |
01_The Zoo.mp3 |
| 视频文件 | {序号}_{书名}.mp4 |
01_The Zoo.mp4 |
| 封面图片 | {序号}_{书名}.jpg |
01_The Zoo.jpg |
- 序号：2 位数字，从
01开始 - 书名：首字母大写，单词间用空格
- 序号与书名之间用下划线
_分隔
还需要在项目根目录放置 books.json（RAZ）或 classified_oxford_books.json（牛津树）：
{
"name": "01_Vegetables",
"type": "raz",
"level": "A",
"relativePath": "raz\\a\\pdf\\01_Vegetables.pdf"
}- 闲鱼：搜索 "RAZ 电子书" 或 "RAZ Plus"
- 淘宝：RAZ 分级绘本 PDF 版
- 自己扫描：购买纸质书后自行扫描
💡 建议购买前先与卖家确认资源格式是否包含 PDF 和音频
MIT