179 lines
4.6 KiB
Markdown
179 lines
4.6 KiB
Markdown
# 複習功能診斷檢查清單
|
||
|
||
## 📋 功能驗證檢查清單
|
||
|
||
### ✅ 已完成項目
|
||
|
||
- [x] **前端編譯狀況**
|
||
- [x] `/review` 頁面成功編譯 (`✓ Compiled /review in 1011ms`)
|
||
- [x] 頁面可正常訪問 (HTTP 200)
|
||
- [x] 測試參數可正常傳遞 (`?test=true`)
|
||
|
||
- [x] **Mock 數據系統建立**
|
||
- [x] 創建 `reviewMockData.ts` 文件
|
||
- [x] 定義 3 張測試詞卡 (hello, beautiful, important)
|
||
- [x] 設置 `isTestMode()` 檢測函數
|
||
|
||
- [x] **Store 測試模式支援**
|
||
- [x] ReviewDataStore 支援 Mock 數據
|
||
- [x] TestResultStore 支援測試模式（跳過API）
|
||
|
||
### 🔄 待驗證項目
|
||
|
||
#### 1. 基礎功能驗證
|
||
- [ ] **頁面載入流程**
|
||
- [ ] 訪問 `http://localhost:3000/review?test=true`
|
||
- [ ] 檢查控制台日誌是否顯示測試模式
|
||
- [ ] 驗證 Mock 數據是否成功載入
|
||
|
||
- [ ] **Store 狀態驗證**
|
||
- [ ] ReviewDataStore.dueCards 是否包含 Mock 數據
|
||
- [ ] TestQueueStore 是否正確初始化測驗隊列
|
||
- [ ] ReviewSessionStore 是否設置當前卡片
|
||
|
||
#### 2. 組件渲染驗證
|
||
- [ ] **基礎組件顯示**
|
||
- [ ] Navigation 組件正常顯示
|
||
- [ ] ProgressTracker 顯示進度
|
||
- [ ] ReviewRunner 載入測驗內容
|
||
|
||
- [ ] **測驗組件驗證**
|
||
- [ ] FlipMemoryTest 正確渲染
|
||
- [ ] VocabChoiceTest 正確渲染
|
||
- [ ] 測驗內容顯示正確的詞卡資料
|
||
|
||
#### 3. 交互功能驗證
|
||
- [ ] **翻卡記憶測試**
|
||
- [ ] 卡片可正常翻轉
|
||
- [ ] 信心度選擇功能
|
||
- [ ] 提交答案功能
|
||
|
||
- [ ] **詞彙選擇測試**
|
||
- [ ] 4個選項正確生成
|
||
- [ ] 選項包含正確答案
|
||
- [ ] 選擇答案功能
|
||
|
||
- [ ] **導航控制**
|
||
- [ ] 跳過按鈕功能
|
||
- [ ] 繼續按鈕功能
|
||
- [ ] 測驗切換邏輯
|
||
|
||
#### 4. 狀態管理驗證
|
||
- [ ] **答題流程**
|
||
- [ ] 答題後狀態更新
|
||
- [ ] 分數正確計算
|
||
- [ ] 進度正確更新
|
||
|
||
- [ ] **測驗隊列管理**
|
||
- [ ] 下一題正確載入
|
||
- [ ] 完成狀態正確標記
|
||
- [ ] 隊列結束處理
|
||
|
||
### 🔍 手動測試步驟
|
||
|
||
#### 步驟1: 基礎載入測試
|
||
```bash
|
||
# 1. 訪問測試模式的複習頁面
|
||
open http://localhost:3000/review?test=true
|
||
|
||
# 2. 打開瀏覽器開發者工具 (F12)
|
||
# 3. 查看 Console 標籤，確認日誌顯示：
|
||
# 🧪 [測試模式] 使用 Mock 數據
|
||
# ✅ [測試模式] 載入Mock數據成功: 3 張詞卡
|
||
```
|
||
|
||
#### 步驟2: 組件渲染測試
|
||
```bash
|
||
# 預期看到的UI元素：
|
||
- Navigation 頂部導航
|
||
- ProgressTracker 進度條 (顯示 0/X 測驗)
|
||
- 測驗內容區域
|
||
- 導航按鈕區域
|
||
```
|
||
|
||
#### 步驟3: 功能交互測試
|
||
```bash
|
||
# 翻卡記憶測試：
|
||
1. 點擊卡片進行翻轉
|
||
2. 選擇信心度 (1-5)
|
||
3. 檢查是否出現"繼續"按鈕
|
||
4. 點擊繼續到下一題
|
||
|
||
# 詞彙選擇測試：
|
||
1. 查看4個選項
|
||
2. 選擇其中一個選項
|
||
3. 檢查答案反饋
|
||
4. 點擊繼續到下一題
|
||
```
|
||
|
||
### 🐛 常見問題診斷
|
||
|
||
#### 問題1: 頁面空白或載入失敗
|
||
**檢查項目:**
|
||
- [ ] 控制台是否有 JavaScript 錯誤
|
||
- [ ] 網路請求是否失敗
|
||
- [ ] React 組件是否正確掛載
|
||
|
||
#### 問題2: Mock 數據未載入
|
||
**檢查項目:**
|
||
- [ ] URL 是否包含 `?test=true` 參數
|
||
- [ ] isTestMode() 函數是否正確檢測
|
||
- [ ] MockData 路徑是否正確
|
||
|
||
#### 問題3: 測驗組件不顯示
|
||
**檢查項目:**
|
||
- [ ] TestQueueStore 是否正確初始化
|
||
- [ ] currentCard 是否設置正確
|
||
- [ ] 組件 import 是否正確
|
||
|
||
#### 問題4: 按鈕無反應
|
||
**檢查項目:**
|
||
- [ ] 事件處理函數是否綁定
|
||
- [ ] 狀態更新是否正確
|
||
- [ ] disabled 狀態是否正確
|
||
|
||
### 📊 成功標準
|
||
|
||
**階段1完成標準:**
|
||
- [ ] 頁面成功載入，無 JavaScript 錯誤
|
||
- [ ] Mock 數據正確載入 (3張詞卡)
|
||
- [ ] 至少1種測驗模式可正常顯示和交互
|
||
- [ ] 基本導航功能正常 (繼續/跳過)
|
||
|
||
**階段2完成標準:**
|
||
- [ ] 2種核心測驗模式 (flip-memory, vocab-choice) 完全正常
|
||
- [ ] 完整答題流程無錯誤
|
||
- [ ] 分數和進度正確統計
|
||
- [ ] 測驗完成後正確顯示結果
|
||
|
||
### 🔧 調試工具和技巧
|
||
|
||
#### React DevTools 使用
|
||
```bash
|
||
# 1. 安裝 React Developer Tools 瀏覽器擴展
|
||
# 2. 打開 Components 標籤
|
||
# 3. 查看組件樹和 props/state
|
||
# 4. 監控 Hook 狀態變化
|
||
```
|
||
|
||
#### Zustand DevTools
|
||
```bash
|
||
# 1. 檢查 Store 狀態
|
||
# 2. 監控 action 執行
|
||
# 3. 查看狀態變化歷史
|
||
```
|
||
|
||
#### 控制台日誌分析
|
||
```bash
|
||
# 重要日誌標識：
|
||
🔍 - 數據載入相關
|
||
🧪 - 測試模式相關
|
||
✅ - 成功操作
|
||
❌ - 錯誤狀況
|
||
🔄 - 狀態更新
|
||
```
|
||
|
||
---
|
||
|
||
**檢查清單更新日期:** 2025-10-02
|
||
**下次更新:** 完成階段1驗證後 |