 鄭沛軒
|
4866ff8e9c
|
feat: 優化詞卡管理頁面體驗
- 重新設計手機版詞卡布局，圖片放左上角，翻譯在詞彙下方
- 新增播放按鈕到詞卡列表，桌面版在音標旁，手機版在詞性旁
- 移除手機版音標顯示，精簡界面
- 調整 CEFR 和詞性標籤位置，底部左右分布更合理
- Logo 導航從儀表板改為詞卡頁面，保持導航一致性
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-08 01:11:53 +08:00 |
|
鄭沛軒
|
3b6b52c0d4
|
feat: 統一詞性簡寫顯示並修復複習日期問題
- 統一全站詞性顯示為標準簡寫格式 (n., v., adj., adv.)
- 修復詞卡詳細頁面 1970/1/1 日期顯示問題：
* 後端 GetFlashcard API 添加複習記錄查詢
* 前端添加安全的日期格式化處理
- 重新設計手機版詞卡管理頁面：
* 優化 FlashcardCard 手機版布局，解決擠壓問題
* 重新設計 SearchControls 導航為垂直分層布局
- 移除過時的掌握度顯示，簡化界面
- 改進詞卡詳細頁面間距，增加視覺舒適度
現在詞卡管理和詳細頁面在手機版和桌面版都有更好的用戶體驗。
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-07 17:23:55 +08:00 |
|
鄭沛軒
|
5167d91090
|
feat: 修復圖片生成服務 + 統一播放按鈕設計 + API 完善
後端修復:
• 修復圖片生成 DI Scope 問題 - 解決 ObjectDisposedException
• FlashcardsController 統一 API 格式 - 添加圖片和複習屬性
• Repository 正確載入圖片關聯數據
前端優化:
• 統一播放按鈕為藍底漸層設計 (w-10 h-10)
• 修復圖片顯示邏輯 - 正確構建完整 URL
• FlashcardDetailHeader 防護性編程 - 避免 NaN 錯誤
• 優化圖片顯示比例 - 正方形容器避免變形
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-02 03:58:03 +08:00 |
|
鄭沛軒
|
7965632335
|
fix: 修復FlashcardCard組件布局，恢復原始設計
## 🔧 布局修復
### ❌ **問題識別**
- FlashcardCard組件改變了原有的UI設計
- 從橫向列表布局錯誤改為卡片式布局
- 與原始用戶體驗不一致
### ✅ **修復內容**
- 恢復原始的橫向布局 (圖片左，內容右，按鈕最右)
- 保持原有的響應式圖片尺寸設計
- 恢復正確的內容結構：詞彙標題、翻譯、統計信息
- 維持原有的操作按鈕樣式和位置
### 🎯 **重構原則確立**
- 重構 = 改善代碼結構，保持用戶體驗
- 組件化應該只分離邏輯，不改變UI設計
- 模組化的目標是可維護性，不是重新設計
### 📊 **最終成果**
- 主頁面：878行 → 712行 (19%代碼減少)
- FlashcardCard組件化成功，保持原始樣式
- 編譯100%通過，視覺效果與原版一致
學會了正確的重構方式：代碼結構改善 + 用戶體驗保持！
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-01 21:39:23 +08:00 |
|
鄭沛軒
|
076bc8e396
|
feat: 建立前端組件重構基礎設施
## 🏗️ 重構基礎設施建立
### 📦 **新組件創建**
- FlashcardCard.tsx (137行) - 完整的詞卡卡片組件
- PaginationControls.tsx (109行) - 可復用的分頁控制組件
### 📁 **統一組件架構**
- components/flashcards/ - 詞卡相關組件
- components/shared/ - 共享基礎組件
- 遵循Next.js 13+ App Router最佳實踐
### 🛠️ **工具函數庫擴展**
- flashcardUtils.ts - 統一的詞卡處理工具
- 支援顏色處理、格式化、統計計算等功能
### 📋 **重構準備完成**
- 完整的4天拆分計劃已制定
- Day 1基礎組件創建完成
- 組件架構整合完成
- 為後續大規模重構奠定基礎
### ⚠️ **後續工作**
主頁面實際重構 (878行→120行) 待後續專項時間完成
前端重構基礎設施就緒，準備進行大規模組件拆分！
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-01 20:05:00 +08:00 |