背景

女儿上幼儿园之前。我跟老婆说得很坚定：幼儿园阶段不卷，快乐教育。结果话说得很轻松，真正到上学看到其他同学也报了没忍住给她报了英语外教班。老实说，

上课本身倒没什么问题。真正让我头疼的是课后复习。每次上完课，老师都会在群里发当天的学习内容。有单词、有句型、有字母，还有课堂视频和家庭作业。从比如来看，

📆 LG1————————————👩‍🏫教学目标
一、复习Student book—《Classroom》. 主要词汇+句型
window 🪟door 🚪desk 桌子chair 🪑book 📖
二、学习《Super A娱乐》P12 Letter Cc❤️学习Letter Cc 字母❤️学习关于字母c的单词
1️⃣cat 猫🐱 2️⃣cap 帽子🧢 3️⃣cake 蛋糕🍰 4️⃣car 汽车🚗❤️相关句型学习三、课前口语对话四、书写练习————————————
🌞:1️⃣口语作业💬朗读《Super A娱乐》P12关于字母c的单词————————————今天课堂宝贝们都很活跃👏 请回家之后多听音频磨耳朵进行复习哟！❤️请各位宝贝一定要完成作业噢💕💕

从或者来看，

📆 ————————————👩‍🏫教学目标.Free Talk：课前问答.复习字母A所学内容.❤️学习字母B这些内容—字母B的学习—初步识别字母B的样子—关于字母b的主要单词学习
1️⃣bee 蜜蜂🐝 2️⃣ball 球 3️⃣balloon 气球🎈 4️⃣bear 熊🐻拓展词汇：box 📦 bike 🚴—句型学习：B is for __—句型理解性输入：
I see a bee. I have a ball. The balloon is big. The bear is brown. 书写练习————————————
🌞:口语作业💬听音频 朗读《Super A娱乐 book》P8————————————今天课堂宝贝们都很活跃👏 请回家之后多听音频磨耳朵进行复习哟！怎么说呢，❤️请各位宝贝一定要完成作业噢💕💕

老师整理得其实已经很详细了但它更像一份“课堂记录”。并不是一个适合5 岁孩子反复练习的产品。

使用者痛点

• 老师发来的信息冗长，包含大量与复习无关的教学目标、课堂小结等；怎么说呢，
• 家长需要在群聊里手动定位视频片段。孩子注意力短，一会儿就跑去玩了；
• 仅想复习 cat/cap/cake/car 四个单词，却必须把整段课堂视频从头到尾播放一遍；
• 使用百词斩、欧陆词典等 App 时出现“内容太多不聚焦”“解释过于复杂”“缺少合适图例”等问题；
• 现有工具页面操作繁琐，孩子容易点错；其实，跨设备同步困难，其实，

我最开始的复习方式很朴素：找到老师发的视频。点开，再拉回到要复习的位置，播一遍，停下来跟读，再继续。一两次还好，次数多了就发现效率极低。

需求

我没有一上来就想做打卡、积分、排行榜，也没有打算造一个儿童版百词斩。我先把需求压到最小，

老师每次发来的内容虽然很长。但真正需要反复复习的主要只有两类：

单词 + 句子

像“教学目标”“课堂小结”“书写练习”“请各位宝贝完成作业”这些对家长有用，却不应该出现在孩子的复习卡片里。

我把 App 的主要流程梳理为：

老师发来课堂内容 → 提取英文单词和句子 → 补充中文、Emoji 或图片 → 逐张播放并朗读 → 记录当天复习进度

我补充了几个实际使用时绕不开的要求：

. 内容必须按上课日期组织

每节课学的主题不同。今天是 Letter B。下一节可能是 Letter C，再下一节又换成水果。内容不能混成一个越来越长的单词本，而要按日期创建“复习日”。切换日期后继续上一次的进度。其实，

. 一张卡片只做一件事

每张卡片只显示一个字母、单词或句子。并保留英文、中文、图片和发音。孩子只需看当前内容、听发音，接下来点“下一个”。

. 打开即能听，最好还能自动轮播

页面切换到新卡片后自动朗读。也可以开启“学习模式”：朗读当前内容 → 停顿几秒 → 自动跳到下一张。

. 图片要简单、直观。而且允许替换

Emoji 是优先考虑方案： - 不需要下载 - 不占存储 - 加载快 如 cat 🐱,bee 🐝,chair 🪑…老实说，

但 Emoji 并不能覆盖所有单词。所以还要支持联网查图还有本地上传自定义图片。

. 多设备同步共享同一份内容

If data only lives in localStorage。switching phone loses everything. 所以必须配备轻量级云端存储，实现全家共享。

实现

Vue Vite TypeScript Element Plus Supabase GitHub Pages

. 把老师原文和生成内容分开存储

Add a review day 时我保留两份数据：

• teacherText: 老师完整原文，仅用于以后核对；
• generatedContent: 用于生成卡片的单词/句子。

This separation prevents “教学目标”“家庭作业”等干扰信息进入题库。老实说，

// 示例结构化文本
Words
bee 蜜蜂🐝
ball 球
balloon 气球🎈
bear 熊🐻
Sentences
B is for __
I see a bee.
I have a ball.
The balloon is big.
The bear is brown.

// 简化解析函数示例
export function parseReviewText {
let currentCategory;const parsed = rawText.split.flatMap(line => {
const heading = line.trim.replace;if $/i.test) { currentCategory = "word";return，}
if $/i.test) { currentCategory = "sentence";return，}
return parseReviewLine.map(item => ({
...item。category: currentCategory || item.category,}));})，return assignContextualEmojis);}

. 中文翻译、Emoji 与句子自动补齐

• 优先使用浏览器内置翻译； 按理说，若不可用再调用在线翻译 API，并缓存结果。
• E​moji 策略层级：
  1. 保留原文中已有 Emoji；
  2. 本地映射表匹配；
  3. If sentence contains already‑seen word，则重用该 word 的 Emoji；
  4. No match → 使用占位图标。
• Pseudo‑implementation:

function buildReviewItem{
const explicitEmoji = extractReviewEmoji;return {
至于id，createReviewId,english,chinese。category:inferCategory,emoji:explicitEmoji||pickEmoji
};}

. 当 Emoji 不够用时联网查图

If built‑in emoji cannot convey meaning accurately,card provides an image selector that pulls pictures from Openverse first and falls back to Wikimedia Commons.

async function fetchReferenceImages{
if{
try{ return await fetchOpenverseReferenceImages;}
catch{ return await fetchCommonsReferenceImages;}
}
return fetchCommonsReferenceImages;}

If both public sources fail,users can upload ir own picture;client compresses it to ≤720 px on long side and converts to WebP before storing in Supabase Storage.

E​moji → Openverse/Wikimedia → 本地上传 的三层兜底策略保证任何单词都有合适可视化。老实说，

. 发音采用浏览器原生 speechSynsis

const utterance = new SpeechSynsisUtterance;utterance.lang = 'en-US';utterance.pitch = 1;utterance.rate = 0.9;// 稍慢更适合跟读
window.speechSynsis.speak;

This free solution eliminates额外付费 TTS 服务，同时满足重复聆听需求。

. 本地优先 + 云端同步

• The review data & progress are first written into localStorage,guaranteeing offline usability.
• A lightweight Supabase backend provides cross‑device sync.
• The front‑end never exposes Supabase service‑role key;all write operations go through an Edge Function that validates a family edit code.
• A `revision` 字段实现乐观锁，同步冲突时提示使用者先拉取当前版本再保存。

部署上的坑

I originally tried to host both front‑end and backend on Cloudflare . Although free tier looked attractive。service proved unstable in my network environment – pages sometimes failed to load while functions returned timeouts.

The uncertainty cost more time than solving any actual bug,so I switched data layer to Supabase:

• D1 ➜ PostgreSQL;
`
• P​ages Functions ➜ Supabase Edge Function;
`
• C​ontent images ➜ Supabase Storage;
`
• D​ata tables enable Row Level Security;write operations require an edit code;
`
• E​very record carries a `revision` number for conflict detection.
` The static front‑end remains a Vite build deployed on GitHub Pages via GitHub Actions: yaml - name: Build 至于run，pnpm build 从env来看，VITE_REVIEW_SYNC_URL: ${{ vars.VITE_REVIEW_SYNC_URL }}
• name这方面。Deploy to GitHub Pages uses的观点是，actions/deploy-pages@v4

Because GitHub Pages serves site under a repository sub‑path,Vite’s base must be set accordingly:

ts const base = process.env.VITE_DEPLOY_TARGET === 'github-pages' '/vancy-learn-english/' : '/';说起来，

Resulting architecture

GitHub Pages ←→ Vue 静态页面 Supabase PostgreSQL ←→ 保存复习内容 & revision 控制 Supabase Storage ←→ 保存自定义图片文件 Supabase Edge Function←→ 前端统一读写入口

Even with occasional access hiccups in China。app always falls back to local cache so daily review never被阻断。

效果

整体效果

设置界面

转化内容展示

自定义图片上传

学习模式演示

"打开页面后孩子看到的是当前复习日的一张大卡片。中间是 Emoji 或参考图片，下方是英文和中文。按理说，卡片切换时自动朗读，也可以进入学习模式。让它按照设置好的间隔自动轮播。"  — 父亲视角描述体验感受。

• "按日期切换老师当天的学习内容"
.
• "粘贴老师原文，一键提取并整理单词/句子".
• "新增/编辑/删除任意复习日".
• "调节自动播放间隔".
• "为不合适的单词更换 Emoji 或上传本地图片".
• "跨设备同步。让全家共享同一套卡片"
. \

对比之前 以前想让女儿复习 Letter B，需要打开群聊 → 找视频 → 拖动进度条 → 手动暂停 → 跟读，每一步都可能被孩子分心。现在只要打开对应日期页面：

txt bee → ball → balloon → bear I see a bee. I have a ball...

“一键播放+自动轮播”。没有积分程序，没有复杂排行榜，只是把原本费时费力的操作变成孩子愿意自己点击几下就能完成的小任务。

完成这个 App 后我越 来越确信。好软件不一定功能最多，而是 精准解决使用者痛点。对于商业产品我们关注规模与增长，但个人工具只需 省掉每天十分钟低效重复操作 就已经足够有价值。

关键不是 Vue / Supabase / AI 某个技术点，而是先把 痛点说清楚 ：

txt 我不需要另一套英语课程。我只需要把老师今天教的单词和句子，变成孩子愿意反复听的卡片。

需求收敛后实现自然简洁。话说回来，AI 降低了“只能为自己服务的软件”开发成本。而我的前端经验让它从原型快速迭代成为长期可用、跨设备同步且易维护的小工具。

再看项目地址，github.com/mjsong07/vancy-learn-english/…<\/a>\ 再看在线地址。

完美不是无可增添，而是无可删减。<\/b\

---