diff --git a/frontend/app/review-simple/components/SimpleFlipCard.tsx b/frontend/app/review-simple/components/SimpleFlipCard.tsx index 594e6de..c8a3cc6 100644 --- a/frontend/app/review-simple/components/SimpleFlipCard.tsx +++ b/frontend/app/review-simple/components/SimpleFlipCard.tsx @@ -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" > - 下一張 → + 下一張 )} diff --git a/note/智能複習/複習功能極簡MVP重寫計劃.md b/note/智能複習/複習功能極簡MVP重寫計劃.md deleted file mode 100644 index fa8e685..0000000 --- a/note/智能複習/複習功能極簡MVP重寫計劃.md +++ /dev/null @@ -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 - } - - return ( -
-
- - -
-
- ) -} -``` - ---- - -## ✅ **MVP成功標準** - -### **功能標準** -- [ ] 頁面正常載入 (不是404) -- [ ] 可以翻轉詞卡查看內容 -- [ ] 可以選擇信心度 (1-5) -- [ ] 可以導航到下一張卡片 -- [ ] 完成後顯示統計結果 - -### **技術標準** -- [ ] 無編譯錯誤 -- [ ] 無運行時錯誤 -- [ ] 響應式設計 (手機/桌面) -- [ ] 基本動畫效果 - -### **時間標準** -- 🎯 **總開發時間**: 2小時內 -- 🎯 **可用MVP**: 1小時內 - ---- - -## 🔮 **MVP後的擴展路線** - -### **第二版擴展** -- 添加詞彙選擇測驗 -- 簡單的API集成 -- 基礎的進度保存 - -### **第三版擴展** -- 增加更多測驗類型 -- 引入簡單的狀態管理 (但不是Zustand) -- 基礎的個性化 - -### **長期擴展** -- 根據實際使用情況決定 -- 只在真正需要時添加複雜功能 -- 保持每個版本都是可用狀態 - ---- - -## 💡 **關鍵成功因素** - -1. **抗拒過度設計** - 只實現真正需要的功能 -2. **保持簡單** - 寧可重複代碼也不要複雜抽象 -3. **快速迭代** - 每30分鐘有可見進展 -4. **持續可用** - 每個階段都是工作狀態 - -**目標**: 2小時內有一個完全可用的複習功能,替代目前壞掉的複雜版本! - ---- - -*計劃制定時間: 2025-10-03* -*預計完成: 2小時內* -*策略: 極簡主義 + 快速迭代* \ No newline at end of file diff --git a/note/智能複習/智能複習系統-技術實作架構規格書.md b/note/智能複習_old/智能複習系統-技術實作架構規格書.md similarity index 100% rename from note/智能複習/智能複習系統-技術實作架構規格書.md rename to note/智能複習_old/智能複習系統-技術實作架構規格書.md diff --git a/note/智能複習/智能複習系統-文檔索引.md b/note/智能複習_old/智能複習系統-文檔索引.md similarity index 100% rename from note/智能複習/智能複習系統-文檔索引.md rename to note/智能複習_old/智能複習系統-文檔索引.md diff --git a/note/智能複習/智能複習系統-測試規格書.md b/note/智能複習_old/智能複習系統-測試規格書.md similarity index 100% rename from note/智能複習/智能複習系統-測試規格書.md rename to note/智能複習_old/智能複習系統-測試規格書.md diff --git a/note/智能複習/智能複習系統-演算法規格書.md b/note/智能複習_old/智能複習系統-演算法規格書.md similarity index 100% rename from note/智能複習/智能複習系統-演算法規格書.md rename to note/智能複習_old/智能複習系統-演算法規格書.md diff --git a/note/智能複習/智能複習系統-產品需求規格書.md b/note/智能複習_old/智能複習系統-產品需求規格書.md similarity index 100% rename from note/智能複習/智能複習系統-產品需求規格書.md rename to note/智能複習_old/智能複習系統-產品需求規格書.md diff --git a/note/智能複習/複習功能MVP到成品迭代策略.md b/note/智能複習_old/複習功能MVP到成品迭代策略.md similarity index 100% rename from note/智能複習/複習功能MVP到成品迭代策略.md rename to note/智能複習_old/複習功能MVP到成品迭代策略.md diff --git a/note/智能複習/詞彙學習-UI設計規範.md b/note/智能複習_old/詞彙學習-UI設計規範.md similarity index 100% rename from note/智能複習/詞彙學習-UI設計規範.md rename to note/智能複習_old/詞彙學習-UI設計規範.md diff --git a/note/智能複習/過度工程詳解與避免策略.md b/note/智能複習_old/過度工程詳解與避免策略.md similarity index 100% rename from note/智能複習/過度工程詳解與避免策略.md rename to note/智能複習_old/過度工程詳解與避免策略.md diff --git a/note/複習系統/產品需求規格.md b/note/複習系統/產品需求規格.md new file mode 100644 index 0000000..0002e19 --- /dev/null +++ b/note/複習系統/產品需求規格.md @@ -0,0 +1,38 @@ + +### **US-001: 智能複習排程** +**作為**學習者 +**我希望**系統能根據我的學習表現智能安排復習時間 +**以便**我能在最佳時機復習,提高學習效率 + +### **US-002: 逾期復習處理** +**作為**忙碌的學習者 +**我希望**即使沒有按時復習,系統也能合理調整復習計劃 +**以便**我能重新回到正軌,不會因偶爾延遲而影響整體學習進度 + +### **US-007: 聽力和口說練習** +**作為**想要提升聽說能力的學習者 +**我希望**能進行詞彙聽力練習和例句朗讀練習 +**以便**全面提升我的語言技能 + +- ✅ **詞彙選擇題** (vocab-choice): 定義匹配的客觀測試 +- ✅ **例句口說題** (sentence-speaking): 發音和表達練習 + + + +- 進度條 = (今日完成)/(今日完成+今日到期) + +- 卡片延緩註記 +新增: +1. 當使用者點選跳過時,將卡片註記一個延遲註記 +2. 當使用者答錯時,將卡片註記一個延遲註記 +判斷: +撈出下一個複習卡片時,會排除有延遲註記的卡片 +修改: +當使用者答對題目時,會消除延遲註記 + +- 下一次複習時間 = 2^成功複習次數 + + +- 詞彙選擇題: +暫時先做假的,前端就直接固定塞apple orange banana這三個詞彙當選項 +