Commit Graph

5 Commits

Author SHA1 Message Date
鄭沛軒 5a9e7f727c feat: 統一所有選擇題組件的選項布局和圖片功能
## 主要改動

### 響應式選項布局統一
- VocabChoiceTest: 改為2x2網格布局,支援響應式設計
- VocabListeningTest: 添加響應式斷點 (grid-cols-1 sm:grid-cols-2)
- SentenceListeningTest: 改為響應式2x2網格,移除選項標籤

### 圖片功能完善
- SentenceListeningTest: 新增exampleImage和onImageClick支援
- 添加完整的圖片顯示區塊和點擊處理
- review-design頁面: 為SentenceListeningTest傳遞圖片屬性

### 視覺一致性提升
- 所有選擇題組件採用相同的按鈕樣式和網格布局
- 統一文字置中對齊和font-medium字重
- 手機版自動切換為單列布局,提升觸控體驗
- 桌面版使用2x2網格,充分利用屏幕空間

### 響應式設計
- 小屏幕 (< 640px): 選項垂直單列排列
- 中等以上屏幕 (≥ 640px): 選項2x2網格排列
- 保持所有組件一致的響應式行為

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-28 00:18:10 +08:00
鄭沛軒 ceaf61c89b feat: 實現FlipMemoryTest動態高度自適應
- 移除固定600px高度限制,改為根據背面內容動態計算
- 新增useEffect監聽內容變化並自動調整卡片高度
- 實現響應式設計,不同屏幕尺寸有對應的最小高度
- 移除背面滾動條,改為完全展示所有內容
- 優化CSS動畫過渡效果,提升翻卡體驗
- 新增底部留白避免內容貼邊
- 清理舊的備份測試文件

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-27 21:57:47 +08:00
鄭沛軒 a1cf784805 feat: 優化FlipMemoryTest組件用戶體驗
- 將信心等級按鈕移到翻卡外面,裸露在背景上
- 移除按鈕數字,只顯示文字描述且字體更大
- 修復音頻播放按鈕點擊會觸發翻面的問題
- 增加翻卡容器高度至600px提供更多內容空間
- 翻卡背面只保留純學習內容(定義、例句、同義詞)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-27 21:42:37 +08:00
鄭沛軒 4aee37540b fix: 修復FlipMemoryTest翻卡組件顯示問題
- 修正翻卡容器結構,讓整個卡片翻轉而非僅內容
- 將卡片樣式從外層容器移到翻轉容器
- 增加容器高度從400px到500px以容納背面更多內容
- 為背面內容添加overflow-y-auto防止內容溢出
- 移除重複的卡片樣式,統一視覺效果

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-27 21:18:22 +08:00
鄭沛軒 afd0e660ef refactor: 完成Learn→Review重命名和Navigation死代碼清理
## Learn → Review 語義重命名
- 目錄結構: learn/ → review/ (內部架構)
- 測驗組件目錄: tests/ → review-tests/
- 狀態管理: useLearnStore → useReviewStore
- 服務層: LearnService → ReviewService
- 核心組件: TestRunner → ReviewRunner

## Navigation.tsx 死代碼清理
- 移除從未使用的 showExitLearning 和 onExitLearning props
- 刪除永不顯示的「結束複習」按鈕邏輯
- 簡化函數簽名,提升代碼可讀性
- 更新導航文字:「學習」→「複習」

## 架構優化成果
- 語義更精確:review(複習) 比 learn(學習) 更準確描述功能
- 代碼更清潔:移除16行左右的死代碼
- 用戶體驗保持:/learn 路由依然正常運作
- 維護性提升:組件職責更明確,擴展更容易

## 技術改進
- 保持完整的企業級4層架構
- 7種測驗組件完整重命名
- Zustand狀態管理語義優化
- 路由兼容性確保用戶無感知

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-27 18:18:43 +08:00