鄭沛軒
|
33b291b505
|
feat: 完善詞卡管理頁面的搜尋和交互體驗
- 實現進階搜尋功能,支援CEFR等級、詞性、掌握度、收藏狀態篩選
- 新增搜尋結果高亮顯示,關鍵字會被黃色標記
- 重新設計右側操作按鈕,增大尺寸提升點擊體驗
- 修正tab高亮邏輯,避免多個tab同時亮起的問題
- 優化卡片交互邏輯,移除整卡點擊,只保留右側導航按鈕
- 修正例句圖片映射邏輯,確保所有詞卡都有對應圖片
- 添加完整的假資料展示六個CEFR等級效果
- 實現快速篩選按鈕,一鍵篩選常用條件
- 修正TypeScript類型錯誤,確保編譯正常
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-09-20 18:19:31 +08:00 |
鄭沛軒
|
4e69030bc2
|
feat: 實現完整的詞彙儲存功能與UI設計優化
- 新增後端批量詞卡保存API (POST /api/flashcards/batch)
- 實現前端詞卡選擇對話框組件 (CardSelectionDialog)
- 優化句子分析頁面設計,以句子為主體
- 重新設計ClickableTextV2詞彙popup,採用現代玻璃morphism風格
- 改進詞卡清單頁面,採用簡潔的清單設計
- 添加CEFR等級標註與六級顏色設計
- 新增收藏功能與收藏詞卡tab頁面
- 創建詞彙版型展示頁面 (vocab-designs)
- 建立完整的UI/UX設計規範文件
- 撰寫詞彙生成與儲存系統技術規格文件
- 使用假數據實現快速測試功能
- 優化例句圖片展示與播放按鈕設計
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-09-20 17:52:22 +08:00 |
鄭沛軒
|
715b735c4d
|
feat: 實現自動「未分類」預設卡組功能
- 新增 CardSet.IsDefault 欄位標識預設卡組
- 實現用戶註冊時自動創建「未分類」卡組
- 添加 ensure-default API 端點確保預設卡組存在
- 優化詞卡創建邏輯,支援自動歸類到預設卡組
- 改善前端表單處理,智能選擇預設卡組
- 修復預設卡組顯示對比度問題
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-09-17 13:41:30 +08:00 |
鄭沛軒
|
ca64e99eec
|
fix: 修復 flashcards 頁面 CSS 佈局偏移問題
🔧 佈局一致性修復:
- 移除 flashcards 頁面的額外 header 容器
- 統一所有頁面的容器結構
- 修復雙重 max-w-7xl mx-auto 容器造成的偏移
- 簡化 CSS 層次結構
📐 現在所有頁面都使用統一結構:
```
<div className="min-h-screen bg-gray-50">
<Navigation />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- 頁面內容 -->
</div>
</div>
```
✅ 解決的問題:
- flashcards 頁面不再偏右
- 所有頁面的對齊方式完全一致
- 減少不必要的容器嵌套
🎯 用戶現在看到的是完全一致的頁面佈局!
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-09-17 03:39:12 +08:00 |
鄭沛軒
|
b6ac4e7d6c
|
fix: 修復導航一致性問題,建立統一的 Navigation 組件
🔧 導航系統重構:
- 建立可重用的 Navigation 組件
- 統一所有頁面的頂部導航
- 修復 flashcards 頁面導航消失問題
- 更新 dashboard 頁面使用新組件
🎯 導航功能:
- DramaLing Logo(點擊回到 dashboard)
- 主要導航:儀表板、詞卡、學習、AI 生成
- 用戶資訊:頭像、用戶名、登出按鈕
- 當前頁面高亮顯示
🚀 用戶體驗改進:
- 所有頁面導航一致
- 清晰的視覺層次
- 響應式設計
- 平滑的互動效果
現在用戶可以在任何頁面輕鬆導航到其他功能!
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-09-17 03:26:01 +08:00 |
鄭沛軒
|
c9f920f17a
|
feat: 完成詞卡完整 CRUD 功能
🎯 詞卡管理系統現已功能完整:
- ✅ 新增詞卡:完整的表單介面,支援所有欄位
- ✅ 編輯詞卡:點擊編輯按鈕可修改詞卡內容
- ✅ 刪除詞卡:確認對話框防止誤刪
- ✅ 查看詞卡:完整的詞卡資訊展示
🔧 技術實作:
- 建立 FlashcardForm 可重用組件
- 支援新增和編輯模式
- 完整的表單驗證和錯誤處理
- 模態視窗 UI 設計
- 自動重新載入資料
📊 用戶體驗:
- 直觀的操作介面
- 即時回饋和錯誤提示
- 載入狀態顯示
- 響應式設計
🚀 DramaLing 現在是完全可用的詞卡管理應用!
用戶可以:建立帳號 → 管理詞卡集合 → 新增/編輯/刪除詞卡
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-09-17 03:11:24 +08:00 |
鄭沛軒
|
abc0b00641
|
feat: 完成前端詞卡功能整合,實現真實資料顯示
🎯 第一階段開發完成里程碑:
- ✅ 建立完整的 FlashcardsService API 整合層
- ✅ 重構 /flashcards 頁面使用真實後端資料
- ✅ 實作詞卡集合和詞卡列表顯示
- ✅ 添加載入狀態和錯誤處理
- ✅ 實作搜尋和篩選功能
- ✅ 集成 ProtectedRoute 認證保護
🚀 技術成果:
- 前端完全不再使用 mock 資料
- 真實的 API 調用和資料庫操作
- 用戶可以在 http://localhost:3000/flashcards 看到真實詞卡
- 響應式設計適配不同裝置
📊 功能驗證:
- 詞卡集合正確顯示(商務英語基礎)
- 詞卡資料正確載入(negotiate, meeting, presentation)
- 搜尋功能正常運作
- 詞卡詳情完整展示(發音、例句、熟練度)
🎯 下一步:實作詞卡 CRUD 操作和 AI 生成功能
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-09-17 02:58:11 +08:00 |
鄭沛軒
|
c94cf75838
|
feat: DramaLing 完整版本 - 韓劇單字學習應用
🚀 主要功能:
- 前後端分離架構(Next.js + .NET Core)
- 完整用戶認證系統(註冊、登入、JWT)
- 單字卡學習功能
- AI 輔助生成單字卡
- 多種學習模式(翻卡、選擇題、拼寫)
- 學習進度追蹤
- 響應式設計
🏗️ 技術棧:
- Frontend: Next.js 15, TypeScript, Tailwind CSS
- Backend: .NET Core 8, Entity Framework, SQLite
- 認證: JWT Bearer Token
- AI: Google Gemini API
- 資料庫: SQLite(測試)
🌟 特色:
- 完整的 CRUD 操作
- 安全的環境變數配置
- 乾淨的代碼結構
- 完善的錯誤處理
- RESTful API 設計
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-09-16 23:06:47 +08:00 |