我做了一个离线法语背词网站：Le Vocabulaire

最近我做了个给自己用的法语单词网站，叫 Le Vocabulaire。
这是一个很典型的个人项目：不追求复杂，只追求每天真的会打开用。

线上地址：https://fr.legionc.xyz

我想解决的问题

我想要一个工具，满足三件事：

  1. 手机上打开就能学
  2. 没网也能学
  3. 不用注册登录，不折腾账号体系

所以这个项目从一开始就定成了纯前端路线。

现在有的功能

Cards（单词卡）

  • 内置 414 个 A1 词汇，14 个主题
  • 卡片翻转、滑动切换、键盘切换
  • 法语发音（Web Speech API）
  • 三种学习顺序：Sequential / Shuffle / Smart Shuffle

Quiz（测验）

  • 选择题 + 拼写题混合
  • 可配置题量、主题、范围、题型比例
  • 流程固定为 config -> active -> result

Stats（统计）

  • 今日进度
  • 总体掌握率
  • 连续学习天数
  • 主题掌握度 + 最近测验记录

Settings（设置）

  • 每日目标
  • 发音语速
  • 题型比例
  • 亮/暗/跟随系统主题
  • 学习数据导入导出与重置

技术选型（刻意保持简单）

  • Vue 3 + Vite + Pinia
  • 静态词库：words.json
  • 学习进度：localStorage
  • 发音：Web Speech API
  • 部署：Cloudflare Pages

没有后端，没有数据库，也没有登录系统。
我希望它像一个“打开即用的学习器”而不是“要维护的系统”。

这次我比较满意的地方

  1. 离线优先
    词库和进度都在本地，断网也能完整使用。

  2. 健壮性处理
    对 localStorage 做了清洗和边界校验，避免历史脏数据把页面搞挂。

  3. 学习连续性
    会记住卡片页的主题、筛选、顺序和当前位置，刷新后能接着学。

小结

这不是一个大项目，但它很“个人”：
范围小、目标清晰、每天都能用。