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"
|
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>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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