dramaling-vocab-learning/智能複習系統-前端重構計劃.md

智能複習系統 - 前端重構計劃 (基於現有實現)

重大發現: 7種複習方法UI已在 /app/learn/page.tsx 完整實現！ 重構目標: 將手動模式切換改為智能自動選擇 開發週期: 1-2週 (大幅縮短)

---

🎉 現況分析：UI已完成95%

✅ 已完成的優秀實現

• 翻卡記憶: 3D翻卡動畫 + 動態高度計算
• 詞彙選擇: 4選項界面 + 即時反饋
• 例句填空: 動態輸入框 + 圖片顯示
• 詞彙聽力: AudioPlayer整合 + 選項布局
• 例句口說: VoiceRecorder完整整合
• 例句重組: 拖放式重組 + 雙區域設計
• 例句聽力: UI框架完成 (邏輯開發中)

✅ 完善的基礎設施

• 音頻功能: AudioPlayer + VoiceRecorder 成熟
• 響應式設計: 手機/平板/桌面全適配
• 狀態管理: 複雜的答題邏輯已實現
• 動畫效果: 翻卡、按鈕、反饋動畫完整
• 錯誤處理: 回報功能、模態框等

---

🔧 重構策略：智能化升級

📅 第一階段：移除手動選擇 (3-4天)

主要修改點

// 1. 移除模式切換按鈕組 (lines 337-410)
// 原有：7個手動切換按鈕
{/* Mode Toggle */}
<div className="flex justify-center mb-6">
  <div className="bg-white rounded-lg shadow-sm p-1 inline-flex flex-wrap">
    // 刪除這些按鈕...
  </div>
</div>

// 改為：純顯示當前題型
<ReviewTypeIndicator
  currentMode={reviewMode}
  userLevel={currentCard.userLevel}
  wordLevel={currentCard.wordLevel}
/>

新增自動選擇邏輯

// 2. 替換 mock data 為真實API
const loadNextCard = async () => {
  const card = await flashcardsService.getNextReviewCard()
  const selectedMode = await flashcardsService.getOptimalReviewMode(
    card.id, card.userLevel, card.wordLevel
  )

  setCurrentCard(card)
  setMode(mapReviewTypeToMode(selectedMode))  // 系統自動設定
}

📅 第二階段：API整合和邏輯完善 (3-4天)

擴展現有 flashcardsService

// 新增到 lib/services/flashcards.ts
async getDueFlashcards(): Promise<ApiResponse<Flashcard[]>>
async getNextReviewCard(): Promise<ApiResponse<FlashcardExtended>>
async getOptimalReviewMode(cardId: string, userLevel: number, wordLevel: number): Promise<ApiResponse<{selectedMode: ReviewType}>>
async submitReview(id: string, reviewData: ReviewSubmission): Promise<ApiResponse<ReviewResult>>

新增智能複習工具

// 新增 lib/utils/masteryCalculator.ts
export function calculateCurrentMastery(baseMastery: number, lastReviewDate: string): number
export function getReviewTypesByDifficulty(userLevel: number, wordLevel: number): ReviewType[]
export function isA1Learner(userLevel: number): boolean

📅 第三階段：測試和優化 (2-3天)

功能測試

• 四情境自動適配正確性
• A1學習者保護機制
• 間隔重複算法整合
• 音頻功能穩定性

性能優化

• API請求優化
• 狀態更新效率
• 組件渲染優化

---

📊 重構 vs 新建對比

項目	新建方案	重構方案 (實際)
UI開發	3-4週	0週 (已完成)
音頻功能	1-2週	0週 (已完成)
響應式設計	1週	0週 (已完成)
核心邏輯	2週	1週 (重構)
API整合	1週	3-4天 (擴展)
測試	1週	3-4天 (整合測試)
總時程	3-4個月	1-2週

---

🎯 重構重點任務

高優先級 (P0)

1. 移除手動模式切換 - 改為 ReviewTypeIndicator 純顯示
2. 整合到期詞卡API - 替換 mock data
3. 實現自動題型選擇 - 後端API整合
4. 完成例句聽力 - 補完選項生成邏輯

中優先級 (P1)

5. 新增實時熟悉度顯示 - MasteryIndicator 組件
6. A1學習者保護 - 自動限制題型邏輯
7. 四情境適配 - 難度自動判斷
8. 復習結果提交 - 間隔重複算法整合

低優先級 (P2)

9. 學習統計面板 - 進度追蹤可視化
10. 性能優化 - 組件懶加載等
11. 錯誤處理增強 - 邊界條件完善

---

🏆 預期成果

技術成果

• ✅ 保留所有現有優秀UI設計
• ✅ 實現零選擇負擔的智能體驗
• ✅ 整合間隔重複算法
• ✅ A1學習者自動保護機制

用戶體驗提升

• 從"手動選擇7種模式"→"系統自動提供最適合的題型"
• 從"固定mock詞卡"→"真實到期詞卡智能排程"
• 從"簡單計分"→"科學的熟悉度追蹤"
• 從"通用體驗"→"個人化適配體驗"

商業價值

• 開發成本大幅降低 (1-2週 vs 3-4個月)
• 用戶體驗顯著提升 (零選擇負擔)
• 技術風險極低 (基於成熟代碼)
• 上線時間大幅提前

---

結論: 您已經完成了最困難的UI開發工作！現在只需要將優秀的UI升級為智能化邏輯，就能實現業界領先的零選擇負擔複習體驗。