269 lines
6.6 KiB
Markdown
269 lines
6.6 KiB
Markdown
# 複習功能極簡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小時內*
|
||
*策略: 極簡主義 + 快速迭代* |