用opencode和minimax给娃搭了一个raz学习站点
https://github.com/kunyashaw/razLearning
从零搭建儿童RAZ英语绘本学习站点：一个父亲的实战记录
作为一个奶爸，看着孩子每天拿着平板想学英语，但市面上的RAZ App要么收费太贵，要么界面复杂不适合孩子使用。于是我决定自己动手，给孩子搭建一个专属的学习站点。
🤔 为什么自己造轮子？
说实话，市面上的RAZ学习资源确实不少，但问题也很明显：
- 收费门槛高：正版RAZ Plus一年要好几百，对于只是想辅助学习的家庭来说不划算
- 界面复杂：很多App功能太多，孩子用着用着就去点游戏了
- 不方便：网页版经常需要****，速度慢还不稳定
- 无法定制：想加个单词本？想换个主题色？没门
既然我是做技术的，为什么不给孩子量身定制一个呢？
🎯 核心需求梳理
1. 基础阅读功能
- 支持RAZ AA-Z全级别绘本
- 支持牛津树分级阅读
- PDF阅读 + 视频 + 音频三合一
- 完成标记，让孩子有成就感
2. 学习记录与统计
- 记录每本绘本的学习时长
- 统计累计阅读数量
- 连续学习天数（培养习惯）
- 单词学习记录
3. 徽章奖励系统
孩子的积极性需要激励，设计了11个里程碑徽章：
- 🎯 新手（默认解锁）
- 🌱 初学者（1本）
- 📖 学习者（5本）
- 🔦 探索者（10本）
- 📚 小读者（20本）
- 🏆 阅读家（30本）
- 🧠 知识家（50本）
- 🎭 故事家（100本）
- 📜 文学家（200本）
- 🎓 学者（500本）
- 👑 传奇（1000本）
每个徽章都有精美的3D动画效果，解锁时还有粒子特效，孩子特别喜欢！
4. 主题系统
孩子喜欢新鲜感，做了13套主题可以切换：
彩虹、森林、海洋、太空、糖果、动物、哪吒、敖丙、动物城、海绵、舒克、护眼、夜间
🛠️ 技术选型
前端：Vue 3 + Vite + Tailwind CSS
状态管理：Pinia
PDF渲染：PDF.js
路由：Vue Router
构建产物：纯静态文件，可部署到任何Web服务器
选择Vue 3是因为响应式系统做得好，组件化开发效率高。Vite的构建速度快，开发体验好。
💥 开发过程中踩过的坑
坑1：PDF.js在移动端的兼容性
问题：PDF.js默认worker路径有问题，在平板浏览器上经常加载失败
解决：把pdf.worker.min.mjs单独抽出来放在public目录，手动指定worker路径
坑2：视频自动播放被浏览器阻止
问题：iOS和Android的WebView默认禁止自动播放视频
解决：改成用户主动点击播放，同时加个友好的提示"点击播放视频"
坑3：阅读进度不更新
问题：读完绘本后返回列表页，进度条还是显示0%
解决：问题出在bookService.js里初始数据都是completed: false，没有从bookStore读取真实状态。修复方案是让服务层实时检查存储状态：
const completed = bookStore.isBookCompleted(book.id, type, level)
坑4：徽章弹窗关不掉
问题：孩子读完后弹窗显示获得徽章，但找不到关闭按钮
解决历程：
- 第1版：按钮放在右上角，结果被主题切换按钮挡住了
- 第2版：改成红色大按钮放右上角，还是容易被挡住
- 第3版：放顶部水平居中，用主题色，终于看得见了！
坑5：阅读下一本没反应
问题：读完绘本后弹窗提示"阅读下一本"，点击没反应
原因：Vue Router在同一路径只改变query参数时不会重新渲染组件
解决：
- 添加路由监听：
watch(() => route.query, ...) - 在
loadBookData()里直接从route.query读取最新参数 - 不要用解构赋值
const { id } = route.query（只执行一次）
坑6：单词数据加载失败
问题：牛津树绘本没有单词数据，页面报错
解决：加个判断，牛津树绘本跳过单词加载，只支持RAZ的单词学习
坑7：数据备份功能太复杂
问题：一开始设计了本地备份系统，结果逻辑越来越复杂，还容易出bug
解决：砍掉本地备份功能！只保留简单的数据导出/导入（JSON文件），简单又够用。
坑8：开发者模式容易被误触
问题：孩子乱点屏幕不小心激活了开发者模式
解决：改成需要连续点击版本号10次才显示开关，并且默认关闭
🎨 UI设计心得
给孩子用的App，必须简单直观
- 大按钮：孩子手指粗，按钮不能太小
- 图标+文字：只用图标孩子看不懂，必须配上文字
- 颜色鲜明：用鲜艳的颜色区分功能区域
- 反馈及时：点击要有明显的视觉反馈
动画效果要适度
- 徽章解锁用3D翻转+粒子特效（仪式感满满）
- 页面切换用淡入淡出
- 按钮点击用缩放效果
- 但绝不能影响操作流畅度
📊 数据统计设计
孩子学习的动力来自可视化的进步：
// 学习数据存储结构
{
completedBooks: [], // 已完成绘本
studyHistory: [], // 学习历史记录
totalStudyTime: 0, // 累计学习时长（秒）
dailyStats: {}, // 按天统计
learnedWords: [], // 已学单词
unlockedRewards: [] // 已解锁徽章
}
所有数据都存在localStorage，不需要后端服务器，部署超简单。
🚀 部署
# 资源
腾讯云1元买了1年的50g的bucket，上传音视频以及pdf资源到bucket中，获取可访问链接，注意在bucker的安全设置中要允许自己的域名来访问
# 之前架vpn的一台主机
安装配置nginx，上传生成的部署文件
# 之前有个阿里上的域名
设置下域名的解析规则，解析到上边的主机
# 直接访问
📱 最终效果
现在孩子每天的学习流程：
- 打开平板上的浏览器来访问链接
- 选择喜欢的主题色（最近迷上了"哪吒"主题）
- 从RAZ AA级别选一本绘本
- 先看PDF读一遍，再看视频磨耳朵
- 学习单词（带发音）
- 点击"完成学习"获得奖励
- 如果解锁了新徽章，会弹窗庆祝！
- 继续阅读下一本...
💰 成本分析
- 域名：可以用免费二级域名，或者家里NAS的局域网IP
- 服务器：家里旧电脑或树莓派即可
- 云存储：腾讯云COS，按量付费，一个月几毛钱
- 开发时间：断断续续2周（主要是晚上孩子睡了以后）
- 总成本：几乎为零，主要是时间投入
🤔 值得改进的地方
- 离线缓存：现在必须联网才能看，后续想加上Service Worker支持离线阅读
- 家长后台：想做个简单的管理后台，能看到孩子的学习报告
- 语音评测：集成语音识别，让孩子跟读并打分
- 多用户支持：现在只能一个孩子用，想支持多账号
📝 总结
这次给孩子做学习站点的经历，让我深刻体会到：
技术还是要服务于生活。看着孩子每天主动要求"爸爸，我要读绘本"，那种成就感比工作中完成一个大项目还要满足。
简单够用就好。一开始想加很多功能，后来发现孩子需要的其实很简单：好看的界面+顺畅的阅读体验+及时的奖励反馈。
适合自己的才是最好的。市面上的产品再成熟，也不如自己定制的贴合实际需求。
如果你也是技术出身的父母，不妨也给孩子做一个专属的学习工具。这不仅是技术实践，更是一份特别的礼物 🎁
备注
实际上本篇博客也是ai写的，工程中的实际代码我一行也没写
浙公网安备 33010602011771号