docs: 整理複習功能文檔結構 + 完成極簡MVP開發
## 文檔整理 - 📁 重新組織複習系統文檔到 note/複習系統/ - 🧹 清理舊的智能複習文檔到 _old 目錄 - 📋 新增產品需求規格書 (階段性開發版本) ## 極簡MVP最終優化 - 🔧 按鈕文字微調: "下一張" (用戶友好) - ✅ 完整復用您的調教設計 - ✅ 真實API數據結構集成 ## 項目里程碑 從複雜壞掉的功能 → 專業可用的極簡MVP - 解決過度工程問題 - 保持設計品質 - 建立可迭代基礎 準備進入穩定使用和用戶驗證階段 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
dba7666626
commit
546db58146
|
|
@ -218,7 +218,7 @@ export function SimpleFlipCard({ card, onAnswer }: SimpleFlipCardProps) {
|
|||
}}
|
||||
className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors mt-4"
|
||||
>
|
||||
下一張 →
|
||||
下一張
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,269 +0,0 @@
|
|||
# 複習功能極簡MVP重寫計劃
|
||||
|
||||
## 🎯 **問題診斷**
|
||||
|
||||
### **現況困境**
|
||||
- ❌ **功能破壞**: 複習頁面返回404錯誤
|
||||
- ❌ **過度複雜**: 7種測驗模式 + 5個Zustand Store
|
||||
- ❌ **難以除錯**: 抽象層次太多，問題定位困難
|
||||
- ❌ **維護負擔**: 複雜架構的成本 > 實際價值
|
||||
|
||||
### **根本原因**
|
||||
```
|
||||
過度工程問題:
|
||||
複雜架構 (Store→Service→Component→Hook)
|
||||
+ 多模式切換 (7種測驗)
|
||||
+ 狀態同步 (5個Store依賴)
|
||||
= 不可維護的系統
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 **極簡MVP重寫方案**
|
||||
|
||||
### **設計理念**
|
||||
- **極簡主義**: 最少代碼實現核心功能
|
||||
- **直接有效**: 無複雜抽象，直觀易懂
|
||||
- **快速可用**: 1-2小時內完成可用版本
|
||||
- **逐步擴展**: 從簡單到複雜，每步可驗證
|
||||
|
||||
### **核心功能定義**
|
||||
```
|
||||
MVP功能範圍:
|
||||
✅ 載入詞卡 (3-5張測試數據)
|
||||
✅ 翻卡記憶 (最核心功能)
|
||||
✅ 基礎導航 (上一張/下一張)
|
||||
✅ 簡單計分 (答對/答錯統計)
|
||||
✅ 完成提示 (結束流程)
|
||||
|
||||
暫不實現:
|
||||
❌ 多種測驗模式
|
||||
❌ 複雜Store架構
|
||||
❌ 智能優先級
|
||||
❌ CEFR自適應
|
||||
❌ 測試模式切換
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📁 **極簡架構設計**
|
||||
|
||||
### **文件結構**
|
||||
```
|
||||
app/review-simple/
|
||||
├── page.tsx # 主頁面 (所有邏輯)
|
||||
├── components/
|
||||
│ ├── SimpleFlipCard.tsx # 翻卡組件
|
||||
│ ├── SimpleProgress.tsx # 進度顯示
|
||||
│ └── SimpleResults.tsx # 結果頁面
|
||||
└── data.ts # 靜態測試數據
|
||||
```
|
||||
|
||||
### **技術棧簡化**
|
||||
```
|
||||
❌ 移除: Zustand Store (5個)
|
||||
❌ 移除: 複雜Service層
|
||||
❌ 移除: 多種測驗模式
|
||||
❌ 移除: 複雜狀態同步
|
||||
|
||||
✅ 使用: React useState (簡單狀態)
|
||||
✅ 使用: 靜態數據 (避免API依賴)
|
||||
✅ 使用: 內聯邏輯 (直觀易懂)
|
||||
✅ 使用: CSS動畫 (基礎體驗)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 **實施計劃**
|
||||
|
||||
### **階段1: 基礎框架 (30分鐘)**
|
||||
1. **創建極簡頁面** `app/review-simple/page.tsx`
|
||||
- 基本的 React useState 狀態管理
|
||||
- 靜態詞卡數據 (3-5張)
|
||||
- 基礎布局和導航
|
||||
|
||||
2. **核心狀態設計**
|
||||
```tsx
|
||||
const [currentCardIndex, setCurrentCardIndex] = useState(0)
|
||||
const [isFlipped, setIsFlipped] = useState(false)
|
||||
const [score, setScore] = useState({ correct: 0, total: 0 })
|
||||
const [isComplete, setIsComplete] = useState(false)
|
||||
```
|
||||
|
||||
### **階段2: 翻卡功能 (30分鐘)**
|
||||
1. **SimpleFlipCard 組件**
|
||||
- 3D翻轉動畫 (純CSS)
|
||||
- 點擊翻轉邏輯
|
||||
- 詞卡內容顯示
|
||||
|
||||
2. **信心度選擇**
|
||||
```tsx
|
||||
const handleConfidence = (level: 1-5) => {
|
||||
setScore(s => ({
|
||||
correct: s.correct + (level >= 3 ? 1 : 0),
|
||||
total: s.total + 1
|
||||
}))
|
||||
nextCard()
|
||||
}
|
||||
```
|
||||
|
||||
### **階段3: 導航和完成 (30分鐘)**
|
||||
1. **SimpleProgress 組件** - 顯示 X/Y 進度
|
||||
2. **導航按鈕** - 上一張/下一張/跳過
|
||||
3. **SimpleResults 組件** - 完成統計和重新開始
|
||||
|
||||
### **階段4: 美化和優化 (30分鐘)**
|
||||
1. **基礎樣式** - Tailwind CSS美化
|
||||
2. **載入動畫** - 簡單的過渡效果
|
||||
3. **響應式** - 手機和桌面適配
|
||||
|
||||
---
|
||||
|
||||
## 💾 **靜態測試數據**
|
||||
|
||||
```tsx
|
||||
// app/review-simple/data.ts
|
||||
export const SIMPLE_CARDS = [
|
||||
{
|
||||
id: 1,
|
||||
word: 'hello',
|
||||
definition: 'a greeting',
|
||||
example: 'Hello, how are you?',
|
||||
translation: '你好'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
word: 'beautiful',
|
||||
definition: 'pleasing to look at',
|
||||
example: 'She has a beautiful smile.',
|
||||
translation: '美麗的'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
word: 'important',
|
||||
definition: 'having great value',
|
||||
example: 'This is very important.',
|
||||
translation: '重要的'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 **極簡MVP完整代碼預覽**
|
||||
|
||||
### **主頁面邏輯**
|
||||
```tsx
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import { SimpleFlipCard } from './components/SimpleFlipCard'
|
||||
import { SimpleProgress } from './components/SimpleProgress'
|
||||
import { SimpleResults } from './components/SimpleResults'
|
||||
import { SIMPLE_CARDS } from './data'
|
||||
|
||||
export default function SimpleReviewPage() {
|
||||
const [currentIndex, setCurrentIndex] = useState(0)
|
||||
const [score, setScore] = useState({ correct: 0, total: 0 })
|
||||
const [isComplete, setIsComplete] = useState(false)
|
||||
|
||||
const currentCard = SIMPLE_CARDS[currentIndex]
|
||||
const isLastCard = currentIndex >= SIMPLE_CARDS.length - 1
|
||||
|
||||
const handleAnswer = (confidence: number) => {
|
||||
const isCorrect = confidence >= 3
|
||||
setScore(s => ({
|
||||
correct: s.correct + (isCorrect ? 1 : 0),
|
||||
total: s.total + 1
|
||||
}))
|
||||
|
||||
if (isLastCard) {
|
||||
setIsComplete(true)
|
||||
} else {
|
||||
setCurrentIndex(i => i + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const restart = () => {
|
||||
setCurrentIndex(0)
|
||||
setScore({ correct: 0, total: 0 })
|
||||
setIsComplete(false)
|
||||
}
|
||||
|
||||
if (isComplete) {
|
||||
return <SimpleResults score={score} onRestart={restart} />
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-8">
|
||||
<div className="max-w-2xl mx-auto px-4">
|
||||
<SimpleProgress
|
||||
current={currentIndex + 1}
|
||||
total={SIMPLE_CARDS.length}
|
||||
score={score}
|
||||
/>
|
||||
<SimpleFlipCard
|
||||
card={currentCard}
|
||||
onAnswer={handleAnswer}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ **MVP成功標準**
|
||||
|
||||
### **功能標準**
|
||||
- [ ] 頁面正常載入 (不是404)
|
||||
- [ ] 可以翻轉詞卡查看內容
|
||||
- [ ] 可以選擇信心度 (1-5)
|
||||
- [ ] 可以導航到下一張卡片
|
||||
- [ ] 完成後顯示統計結果
|
||||
|
||||
### **技術標準**
|
||||
- [ ] 無編譯錯誤
|
||||
- [ ] 無運行時錯誤
|
||||
- [ ] 響應式設計 (手機/桌面)
|
||||
- [ ] 基本動畫效果
|
||||
|
||||
### **時間標準**
|
||||
- 🎯 **總開發時間**: 2小時內
|
||||
- 🎯 **可用MVP**: 1小時內
|
||||
|
||||
---
|
||||
|
||||
## 🔮 **MVP後的擴展路線**
|
||||
|
||||
### **第二版擴展**
|
||||
- 添加詞彙選擇測驗
|
||||
- 簡單的API集成
|
||||
- 基礎的進度保存
|
||||
|
||||
### **第三版擴展**
|
||||
- 增加更多測驗類型
|
||||
- 引入簡單的狀態管理 (但不是Zustand)
|
||||
- 基礎的個性化
|
||||
|
||||
### **長期擴展**
|
||||
- 根據實際使用情況決定
|
||||
- 只在真正需要時添加複雜功能
|
||||
- 保持每個版本都是可用狀態
|
||||
|
||||
---
|
||||
|
||||
## 💡 **關鍵成功因素**
|
||||
|
||||
1. **抗拒過度設計** - 只實現真正需要的功能
|
||||
2. **保持簡單** - 寧可重複代碼也不要複雜抽象
|
||||
3. **快速迭代** - 每30分鐘有可見進展
|
||||
4. **持續可用** - 每個階段都是工作狀態
|
||||
|
||||
**目標**: 2小時內有一個完全可用的複習功能，替代目前壞掉的複雜版本！
|
||||
|
||||
---
|
||||
|
||||
*計劃制定時間: 2025-10-03*
|
||||
*預計完成: 2小時內*
|
||||
*策略: 極簡主義 + 快速迭代*
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
|
||||
### **US-001: 智能複習排程**
|
||||
**作為**學習者
|
||||
**我希望**系統能根據我的學習表現智能安排復習時間
|
||||
**以便**我能在最佳時機復習，提高學習效率
|
||||
|
||||
### **US-002: 逾期復習處理**
|
||||
**作為**忙碌的學習者
|
||||
**我希望**即使沒有按時復習，系統也能合理調整復習計劃
|
||||
**以便**我能重新回到正軌，不會因偶爾延遲而影響整體學習進度
|
||||
|
||||
### **US-007: 聽力和口說練習**
|
||||
**作為**想要提升聽說能力的學習者
|
||||
**我希望**能進行詞彙聽力練習和例句朗讀練習
|
||||
**以便**全面提升我的語言技能
|
||||
|
||||
- ✅ **詞彙選擇題** (vocab-choice): 定義匹配的客觀測試
|
||||
- ✅ **例句口說題** (sentence-speaking): 發音和表達練習
|
||||
|
||||
|
||||
|
||||
- 進度條 = (今日完成)/(今日完成+今日到期)
|
||||
|
||||
- 卡片延緩註記
|
||||
新增：
|
||||
1. 當使用者點選跳過時，將卡片註記一個延遲註記
|
||||
2. 當使用者答錯時，將卡片註記一個延遲註記
|
||||
判斷：
|
||||
撈出下一個複習卡片時，會排除有延遲註記的卡片
|
||||
修改：
|
||||
當使用者答對題目時，會消除延遲註記
|
||||
|
||||
- 下一次複習時間 = 2^成功複習次數
|
||||
|
||||
|
||||
- 詞彙選擇題：
|
||||
暫時先做假的，前端就直接固定塞apple orange banana這三個詞彙當選項
|
||||
|
||||
Loading…
Reference in New Issue