整体构思

1. 项目定位

这是一个面向个人英语学习的轻量级 Web 应用。

核心目标不是做传统的“单词背诵”或者“番茄钟”，而是：

把用户平时遇到的、觉得值得记住的英语句子保存下来，并根据用户实际掌握程度，自动安排后续复习。（英语句子间隔复习系统）

用户可以记录：

英语句子
中文含义
发音/音标
单词或短语解释
句子来源
自己的备注
录音（后续可扩展）

系统根据用户每次复习的表现，动态决定下一次什么时候复习。

2. 核心使用场景

例如用户在 YouTube、电影、文章或者日常交流中遇到：

I was wondering if you could help me.

用户觉得这句话很好，于是点击「加入复习」。

系统保存这句话。

之后系统不会要求用户每天把所有句子重新看一遍，而是根据掌握程度安排：

第一次学习
    ↓
第一次复习
    ↓
用户评价：记得很清楚
    ↓
延长复习间隔
    ↓
第二次复习
    ↓
用户评价：有点忘了
    ↓
缩短复习间隔
    ↓
再次复习

最终形成一个个人化的英语句子知识库。

3. 产品核心理念

3.1 不要求每天全部复习

例如用户拥有 500 个句子，今天系统可能只安排 12 个，明天 8 个，后天 15 个。

系统根据复习时间和掌握程度动态生成 Review Queue。

4. 复习系统

每一个句子都有自己的复习状态：

sentence_id
    ↓
学习次数
    ↓
掌握程度
    ↓
当前间隔
    ↓
下一次复习时间

状态可以设计为：

NEW：新句子
LEARNING：学习中
REVIEW：复习中
MATURE：已经熟练

5. 复习评价

每次复习结束后提供简单评价：

评价	含义
Again	完全忘记
Hard	想了一会儿才想起来
Good	正常记得
Easy	非常熟悉

系统根据评价计算下一次复习时间。

6. 间隔重复算法

第一版不需要直接复制复杂的 Anki 算法，可以先实现简单版本：

第一次：10分钟
第二次：1天
第三次：3天
第四次：7天
第五次：14天
第六次：30天
第七次：60天

如果选择 Again，则降低间隔；如果选择 Easy，则明显增加间隔。

后续可以升级为更加成熟的 Spaced Repetition 算法。

7. Web 页面设计

7.1 响应式设计

必须支持：

Desktop
Laptop
iPad
Android 手机
iPhone

采用 Responsive Design。

不能简单地把 PC 页面缩小到手机上。

手机端需要针对触摸操作重新调整：

导航
卡片
按钮
间距
字体
信息层级

8. UI 风格

整体风格：

简洁、现代、安静、偏学习工具，而不是娱乐 App。

避免：

大量渐变
大量动画
过多颜色
复杂 Dashboard
花哨卡片
不必要的装饰

9. 页面结构

第一版建议包含以下核心页面。

Dashboard

显示：

今日待复习数量
新句子数量
Learning 数量
Review 数量
已完成数量
学习连续天数（后续可选）

核心操作：

[ Start Review ]

Review

一次显示一个英语句子：

I was wondering if you could help me.

点击：

[ Show Answer ]

显示：

不知道你是否可以帮我一下。

/aɪ wəz ˈwʌndərɪŋ ɪf.../

然后：

Again     Hard     Good     Easy

Sentence Library

支持：

搜索
分类
标签
排序
编辑
删除
查看学习状态
查看下次复习时间

Add Sentence

快速添加：

English Sentence
________________________

Chinese Meaning
________________________

Pronunciation
________________________

Notes
________________________

Tags
________________________

[ Save ]

10. 用户认证

因为数据不能只保存在浏览器 LocalStorage 中，所以需要线上数据存储。

第一版支持：

注册
登录
退出登录

可以先采用：

Email + Password

后续可以增加：

Google Login
Apple Login
GitHub Login

密码不能明文存储。

11. Cloudflare 技术架构

项目计划以 Cloudflare 为主要基础设施。

整体结构：

                    Internet
                       │
                       ▼
                  Cloudflare
                       │
          ┌────────────┴────────────┐
          │                         │
          ▼                         ▼
     Cloudflare Pages         Cloudflare Workers
          │                         │
          ▼                         ▼
      Vue Web App              API / Auth
                                    │
                                    ▼
                              Cloudflare Storage

12. 前端

推荐技术栈：

Vue 3
TypeScript
Vite
Tailwind CSS

要求：

响应式
组件化
PC / Mobile / Tablet 全部适配
代码结构清晰
后期容易扩展

13. 后端

使用：

Cloudflare Workers

Worker 负责：

用户认证
API
用户数据读取
用户数据写入
复习算法
Review Queue 生成
权限验证

例如：

GET /api/reviews/today

返回今天需要复习的句子。

14. 数据存储

需要线上数据库，而不是 LocalStorage。

第一版优先考虑：

Cloudflare D1

用于关系型数据：

users
sentences
reviews
tags

Cloudflare KV 更适合：

缓存
Session
简单 Key-Value 数据

因此推荐：

D1
↓
主要业务数据

KV
↓
缓存 / Session / 特定 Key-Value 数据

而不是把所有业务数据都设计成 KV。

15. 数据库设计

users

id
email
password_hash
created_at
updated_at

sentences

id
user_id
content
translation
pronunciation
notes
source
created_at
updated_at

reviews

id
sentence_id
user_id

status

interval
ease_factor

review_count
correct_count

last_review_at
next_review_at

created_at
updated_at

16. API 设计

认证：

POST /api/auth/register
POST /api/auth/login
POST /api/auth/logout
GET  /api/auth/me

句子：

GET    /api/sentences
POST   /api/sentences
GET    /api/sentences/:id
PUT    /api/sentences/:id
DELETE /api/sentences/:id

复习：

GET  /api/reviews/today
POST /api/reviews/:id/answer

统计：

GET /api/stats

17. 认证安全

密码不能直接存入数据库。

应该：

用户密码
   ↓
Password Hash
   ↓
数据库

登录时：

Password
   ↓
Hash / Verify
   ↓
验证成功
   ↓
创建 Session

前端不能自己决定用户身份。

所有涉及用户数据的 API 都应该由 Worker 验证身份，并确保：

用户 A 不能读取或修改用户 B 的句子。

18. Cloudflare 免费计划原则

项目采用：

Free Tier First

原则。

即：

能静态化 → 静态化
能缓存 → 缓存
不需要实时计算 → 不实时计算
不需要数据库查询 → 不查询
不需要 API → 不调用 API

避免一开始设计成高成本架构。

19. 第一版 MVP

第一版只实现：

注册 / 登录
添加英语句子
查看自己的句子
开始今日复习
显示句子
查看答案
选择 Again / Hard / Good / Easy
自动计算下一次复习时间
保存复习记录
Dashboard 显示今日复习数量

做到这一步，产品就已经可以真正使用。

20. 后续扩展

第一版稳定后，再考虑：

AI

自动生成：

中文解释
语法分析
重点单词
使用场景
类似句子

发音

支持：

TTS
用户录音
自己的发音
AI 发音评分

浏览器扩展

选中文字：

选中文字
↓
右键
↓
Add to Review

直接加入复习系统。

iOS / Safari

后续可以支持：

Share
↓
Add to English Review

21. 产品闭环

最终形成：

发现好句子
      ↓
加入系统
      ↓
第一次学习
      ↓
系统自动安排复习
      ↓
用户复习
      ↓
系统判断掌握程度
      ↓
重新计算复习时间
      ↓
长期积累
      ↓
形成个人英语语料库

核心不是：

“每天学习多少？”

而是：

“我真正想记住的英语，有没有在快要忘记的时候再次遇到它？”

22. 推荐最终技术栈

Frontend
├── Vue 3
├── TypeScript
├── Vite
└── Tailwind CSS

Backend
└── Cloudflare Workers

Database
└── Cloudflare D1

Key-Value / Cache
└── Cloudflare KV

Deployment
└── Cloudflare Pages

Domain
└── Cloudflare DNS

Authentication
└── Workers Session / Auth

整体目标：

尽量依赖 Cloudflare 免费资源，保持架构简单、成本低、可扩展，同时保证数据真正在线保存。