Commit Graph

7 Commits

Author SHA1 Message Date
鄭沛軒 cb3309295b feat: 完成前端詞卡圖片整合與詞性簡寫顯示
🎉 前端詞卡管理功能完全整合後端圖片資料

**圖片整合功能**:
-  更新Flashcard介面:添加exampleImages、hasExampleImage、primaryImageUrl欄位
-  取代硬編碼映射:getExampleImage和hasExampleImage改用API資料
-  詞卡列表頁面:完全使用動態圖片資料顯示
-  詞卡詳細頁面:修復資料載入邏輯使用列表API獲取圖片資訊

**詞性簡寫顯示**:
-  全域詞性轉換函數:getPartOfSpeechDisplay()
-  標準英語縮寫:noun→n., verb→v., adjective→adj.等
-  複合詞性處理:preposition/adverb→prep./adv.
-  應用到所有詞性顯示位置:列表和詳細頁面

**系統整合成果**:
-  完全移除硬編碼圖片映射依賴
-  前端直接使用後端API返回的圖片URL
-  支援AI生成圖片的即時顯示
-  Mock資料相容性:添加圖片欄位避免錯誤

前端詞卡管理系統現已完全整合AI圖片生成功能!

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-25 01:57:04 +08:00
鄭沛軒 724ba391b2 feat: 實現優雅的角落通知系統取代惱人的 alert 彈窗
🎨 新增 Toast 通知組件:
- 位置:右上角固定位置,不阻擋主要內容
- 動畫:優雅的滑入/滑出動畫 (300ms)
- 自動消失:3秒後自動消失,無需手動點擊
- 手動關閉:可點擊 X 按鈕立即關閉
- 響應式設計:在手機上自動調整寬度

🎯 支援多種通知類型:
- success:  綠色成功通知(收藏、保存、刪除成功)
- error:  紅色錯誤通知(操作失敗、網路錯誤)
- warning: ⚠️ 黃色警告通知(重複詞卡、數據警告)
- info: ℹ️ 藍色資訊通知(提示信息)

🔄 全面替換所有 alert 調用:
- 詞卡管理頁面:收藏切換、創建、刪除、編輯操作
- AI 生成頁面:詞卡保存成功、重複檢測、錯誤處理
- 詞卡詳細頁面:更新、刪除、收藏操作反饋

🚀 用戶體驗大幅提升:
- 移除煩人的阻擋式 alert 彈窗
- 實現非侵入式的操作反饋
- 保持操作流程的連續性和流暢度
- 提供視覺上更加現代和優雅的交互體驗

修復編譯問題並重新啟動前端,確保所有功能正常運作。

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-24 04:55:31 +08:00
鄭沛軒 c6d5bb6ce3 feat: 完成詞卡管理功能前後端完整整合
🎯 後端 API 增強:
- 擴展搜尋功能支援例句內容 (Example 和 ExampleTranslation)
- 新增進階篩選查詢參數 (cefrLevel, partOfSpeech, masteryLevel)
- 建立完整的 FlashcardDto.cs 含資料驗證規則
- 查詢效能優化:新增 AsNoTracking() 提升效能
- 實現三級掌握度篩選邏輯 (high ≥80%, medium 60-79%, low <60%)

🖥️ 前端功能完善:
- FlashcardsService 支援完整進階篩選參數
- FlashcardForm 新增 CEFR 等級選擇器 (A1-C2)
- 統一詞性格式使用英文值 (noun, verb, adjective 等)
- 詞卡頁面整合後端篩選,移除前端重複邏輯
- 實現 300ms 搜尋防抖處理
- 快速篩選按鈕分離 C1/C2 等級選項
- AI 生成頁面支援完整 CEFR 等級儲存

🔗 完整 API 整合:
- 詞卡詳細頁面修復 import 錯誤並完整整合後端 API
- ClickableTextV2 修復 userLevel 和 compareCEFRLevels 函數問題
- 所有 CRUD 操作 (創建、讀取、更新、刪除、收藏) 完全整合
- 前後端型別定義完全一致,確保型別安全

📋 文檔完善:
- 建立後端 API 開發計劃文檔含完整技術規格
- 所有文檔引用標注清楚,便於開發者理解

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-24 04:21:06 +08:00
鄭沛軒 fd58f43b9b refactor: 完成前端組件重命名,統一使用flashcards服務
🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-24 01:21:42 +08:00
鄭沛軒 be236f7216 refactor: 移除卡組功能,簡化詞卡管理系統
- 完全移除卡組分類功能,簡化詞卡管理邏輯
- 詞卡管理頁面只保留"所有詞卡"和"收藏詞卡"兩個tab
- 移除卡組相關界面元素和統計信息
- 詞卡列表顯示創建時間取代卡組信息
- 詞卡詳細頁面移除開始學習按鈕
- CEFR標籤移至卡片右上角,移除"CEFR"文字前綴
- 底部操作按鈕採用平均延展布局(flex-1)
- 強化搜尋和收藏功能作為主要組織方式
- 創建詞卡管理系統簡化規格文檔
- 專注詞彙學習本質,降低管理複雜度

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-20 19:29:00 +08:00
鄭沛軒 080cbe14a6 refactor: 優化詞卡詳細頁面設計並修正TypeScript錯誤
- 刪除左上角藍色圓圈頭像,讓詞彙標題更突出
- 調整詞性位置到音標左邊,邏輯順序更合理
- 統一播放按鈕樣式,參考學習功能翻卡模式設計
- 刪除右上角多餘的收藏星星,保持CEFR標籤純粹
- 修正TypeScript類型錯誤,確保編譯正常
- 簡化API邏輯,使用假資料確保穩定展示
- 統一詞彙和例句的播放按鈕為學習功能風格

設計現在更加簡潔清晰,與學習功能完全一致。

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-20 18:52:08 +08:00
鄭沛軒 0b871a9301 feat: 創建詞卡詳細頁面與完善導航功能
- 新增詞卡詳細頁面 (/flashcards/[id]) 採用學習功能風格設計
- 實現完整的詞卡詳細展示,包含學習統計、內聯編輯功能
- 修正Next.js 15的params處理,使用React.use()解包Promise
- 更新詞卡列表的導航邏輯,點擊詳細按鈕跳轉到詳細頁面
- 添加假資料支援,確保所有詞卡都能正常顯示詳細頁面
- 實現內聯編輯功能,支援翻譯、定義、例句的即時編輯
- 整合收藏功能到詞卡詳細頁面
- 提供開始學習和刪除詞卡的快速操作
- 採用漸層背景和彩色區塊設計,與學習功能保持一致

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-20 18:40:39 +08:00