jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
291 Commits 1 Branch 0 Tags 150 MiB
Commit Graph

11 Commits

Author SHA1 Message Date
鄭沛軒 6a5831bb16 docs: 新增 Generate 頁面重構分析報告與複習功能流程圖 
- 新增 Generate 頁面過度重構分析報告 (詳細說明問題與解決方案)
- 新增複習功能前後端系統流程圖 (系統架構文檔)
- 修正 generate 頁面慣用語彈窗統一為 WordPopup 組件
- 簡化 popupPositioning 工具保持向後兼容

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-06 16:56:37 +08:00
鄭沛軒 262312b02a feat: 實現慣用語彈窗智能定位 + 簡化 WordPopup 組件 
## 慣用語彈窗智能定位系統
- ✅ 創建智能定位工具 (popupPositioning.ts)
- ✅ 自動檢測可用空間，防止彈窗被底部遮蔽
- ✅ 智能選擇彈出方向 (上方/下方/居中)
- ✅ 響應式適配：桌面智能定位 + 手機底部modal
- ✅ 修正底部慣用語點擊體驗問題

## WordPopup 組件簡化
- 🔧 移除未使用的 useState import
- 🔧 簡化過度的響應式設計 (移除多處 sm: 斷點)
- 🔧 替換 ContentBlock 為簡單 div 結構
- 🔧 簡化條件渲染邏輯 (IIFE → 簡單 &&)
- ✅ 統一字體大小，與慣用語彈窗保持一致

## 技術改進
- 📱 設備檢測：自動適配移動/桌面體驗
- 🎯 智能定位：邊界檢測 + 動態位置計算
- 🧹 代碼簡化：減少複雜度，提升維護性
- 🎨 設計統一：兩種彈窗風格對齊

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-06 00:42:05 +08:00
鄭沛軒 2a2c47da48 fix: 修正圖片載入失敗 + 清理未使用的 CSS 檔案 
## 修正圖片載入問題
- ✅ 移除 flashcardUtils.ts 中的硬編碼端口
- ✅ 使用統一的 API_CONFIG.BASE_URL 配置
- ✅ 圖片 URL 現在自動跟隨後端配置
- ✅ 添加圖片載入失敗的錯誤處理

## 代碼清理
- 🗑️ 移除未使用的 review-simple/globals.css
- 🗑️ 移除對應的 CSS import
- ✅ 所有組件使用 Tailwind CSS，保持一致性

## 技術改進
- 🔧 消除硬編碼，提升維護性
- ⚙️ 統一配置管理，環境變數驅動
- 🛡️ 更好的錯誤處理和用戶體驗

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-05 05:14:25 +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
鄭沛軒 2edd8d03ce feat: 完成前端工具函數提取與圖片生成功能修復 
## 工具函數庫建立

### 🛠️ **統一Flashcard工具庫**
- 新建 `/lib/utils/flashcardUtils.ts` (94行)
- 提取重複的工具函數：詞性轉換、CEFR顏色、熟練度處理
- 統一圖片URL處理邏輯、時間格式化、統計計算

### 🧹 **代碼重複消除**
- flashcards/page.tsx: 898行 → 878行 (清理重複函數)
- flashcards/[id]/page.tsx: 移除重複的工具函數定義
- 建立代碼復用機制，減少維護成本

### 🔧 **圖片生成功能修復**
- 修正API端點路徑: `/api/imagegeneration/` → `/api/ImageGeneration/`
- 修復生成、狀態查詢、取消請求三個端點
- 後端API測試通過，功能恢復正常

### ✅ **架構改善成果**
- 編譯100%成功，無TypeScript錯誤
- 建立統一的工具函數管理機制
- 為後續大規模組件重構奠定基礎
- 提升代碼可維護性和復用性

前端工具層優化完成，準備進行組件層重構！

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-01 19:20:52 +08:00
鄭沛軒 9011f93dfe feat: 完成前端大規模架構重組與術語統一 
## 主要完成項目

### 🏗️ Hooks架構重組
- 刪除62.5%死代碼hooks (5個檔案)
- 重組為功能性資料夾結構 (flashcards/, review/)
- 修復所有import路徑和類型錯誤

### 🧹 Lib資料夾優化
- 移除未使用檔案：cn.ts, performance/, errors/, studySession.ts
- 統一API配置管理，建立中央化配置
- 清理硬編碼URL，提升可維護性

### 📝 術語統一 Study→Review
- API端點：/study/* → /review/*
- 客戶端：studyApiClient → reviewApiClient
- 配置項：STUDY → REVIEW
- 註釋更新：StudyRecord → ReviewRecord

### ✅ 技術成果
- 前端編譯100%成功，無錯誤
- 減少檔案數量31% (lib資料夾)
- 消除重複代碼和架構冗餘
- 建立企業級前端架構標準

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-01 16:15:17 +08:00
鄭沛軒 7aa4f3e1fc refactor: 統一CEFR工具函數，移除重複代碼 
## 重構內容
- 建立統一的 lib/utils/cefrUtils.ts 工具函數庫
- 移除 app/generate/page.tsx 中重複的 CEFR 轉換邏輯
- 移除 components/ClickableTextV2.tsx 中重複的比較函數
- 統一 CEFR_LEVELS 常數定義和類型安全

## 改善效果
- 減少60+行重複代碼
- 提升代碼維護性和一致性
- 增強TypeScript類型安全
- 實現單一真實來源原則 (Single Source of Truth)

## 包含的工具函數
- cefrToNumeric: 字串轉數字
- numericToCefr: 數字轉字串
- compareCEFRLevels: 等級比較
- getLevelIndex: 獲取索引
- getTargetLearningRange: 學習範圍建議
- isValidCEFRLevel: 等級驗證

## 額外新增
- frontend-code-analysis-report.md: 前端程式碼診斷報告

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-10-01 03:04:14 +08:00
鄭沛軒 9f47be50d7 feat: 建立企業級Learn功能前端架構 
## 架構重新設計
- 實現4層分離架構：UI層、組件層、狀態層、服務層
- 建立Zustand狀態管理中心，替代複雜的useState邏輯
- 建立完整的7種測驗類型組件庫，獨立且可復用

## 核心組件完成
- TestRunner.tsx: 測驗執行統一管理器
- 7種測驗組件: FlipMemory、VocabChoice、SentenceFill、SentenceReorder、聽力、口說
- 完整錯誤處理體系: 分類處理、自動重試、降級備份

## 狀態管理架構
- useLearnStore: 核心學習狀態和業務邏輯
- useUIStore: UI控制狀態管理
- 智能狀態恢復機制完整實現

## 技術改進
- 頁面代碼從2428行減少到215行 (91.1%減少)
- 模組化設計：1個巨型檔案 → 15個專門模組
- 企業級錯誤處理和容災機制
- 充分利用現有組件庫，避免重複開發

## 文檔完善
- 建立完整前端架構說明文檔
- 文檔重組和交叉引用系統
- 統一文檔導航入口

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-09-27 17:37:45 +08:00
鄭沛軒 599af6a6b0 refactor: 重構學習頁面為標準模組化架構 
## 重構成果
- 將 page.tsx 從 2428 行重構為 229 行 (90.6% 代碼減少)
- 建立標準 Next.js 架構：hooks 和 components 全域化
- 創建完整備份系統，保留原始實作以供參考

## 新的模組化架構
- `/hooks/learn/` - 4個專用狀態管理 hooks
- `/components/learn/` - 4個可復用 UI 組件
- `/lib/utils/` - CEFR 工具函數
- `/app/learn/page.tsx` - 純路由邏輯

## 技術改進
- 消除代碼重複和複雜狀態管理
- 實現關注點分離和單一職責原則
- 提升開發體驗和可維護性
- 支持未來功能擴展和團隊協作

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-09-27 15:06:54 +08:00
鄭沛軒 52ae910276 feat: 實現純CEFR字符串智能複習系統和完整四情境對照表 
- 將雙欄位架構改為純CEFR字符串架構，消除資料冗余
- 後端API改為接收CEFR字符串，使用即時轉換進行計算
- 前端完全使用CEFR等級進行智能選擇和顯示
- 新增完整四情境對照表，突出顯示當前情境和建議複習方式
- 優化沒有到期詞卡時的用戶體驗，提供專用提示頁面
- 修復例句重組結果閃爍重置問題
- 修復AudioPlayer在p標籤內的HTML結構錯誤

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

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-09-25 21:05:54 +08:00
鄭沛軒 3ef5ea8ffe feat: 實現智能複習系統前端核心重構 
## 🎯 重構完成項目

### ✅ 移除手動模式切換
- 刪除7個手動切換按鈕 (lines 337-410)
- 改為系統自動選擇模式
- 保留所有優秀的UI設計和互動邏輯

### ✅ 新增智能化組件
- **ReviewTypeIndicator**: 純顯示當前系統選擇的題型
- **MasteryIndicator**: 實時熟悉度顯示，支援衰減指示
- **masteryCalculator**: 四情境適配邏輯 + 熟悉度計算

### ✅ API服務擴展
- 擴展 flashcardsService 新增6個智能複習方法
- getDueFlashcards: 取得到期詞卡
- getNextReviewCard: 取得下一張復習詞卡
- getOptimalReviewMode: 系統自動選擇題型
- submitReview: 提交復習結果並更新間隔
- generateQuestionOptions: 生成題目選項

### ✅ 狀態管理升級
- 從固定 mock data 改為動態 API 數據
- 新增 ExtendedFlashcard 接口支援智能複習欄位
- 實現自動選擇邏輯和四情境適配
- 整合復習結果提交和熟悉度更新

### ✅ 例句聽力功能補完
- 新增例句選項自動生成邏輯
- 實現例句聽力答題和結果反饋
- 移除"開發中"標記，功能正式可用

## 🌟 核心價值實現
- **零選擇負擔**: 用戶無需手動選擇，系統自動提供最適合的題型
- **四情境適配**: A1學習者自動保護，簡單/適中/困難詞彙智能匹配
- **7種題型完整**: 所有複習方法UI和邏輯都已完成
- **實時熟悉度**: 動態計算和顯示學習進度

## 🎨 UI設計保留
- ✅ 精美的3D翻卡動畫
- ✅ 完整的音頻播放和錄音功能
- ✅ 響應式設計和流暢互動
- ✅ 詳細的答題反饋和錯誤處理

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

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