 鄭沛軒
|
d742cf52f9
|
feat: BluePlayButton 內建 TTS 邏輯重構 + TypeScript 錯誤修復
重構亮點:
• BluePlayButton 內建完整 TTS 播放邏輯
• 移除 8 個組件中 97 行重複代碼
• 組件使用極度簡化：複雜配置 → 一行代碼
技術優化:
• 修復 TypeScript "Type 'never'" 錯誤
• 重新設計邏輯流程，清晰的條件分支
• 支援標準 TTS + 自定義播放兩種模式
使用簡化:
• 從: <BluePlayButton isPlaying={state} onToggle={handler} />
• 到: <BluePlayButton text="hello" />
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-02 16:51:45 +08:00 |
|
鄭沛軒
|
df1c2b92ef
|
feat: 全應用播放按鈕統一為藍底漸層設計 + 架構簡化
組件統一:
• 創建 BluePlayButton 統一組件 - 支援 sm/md/lg 三種尺寸
• 替換 10 個組件中的播放按鈕為統一的藍底漸層設計
• 移除 AudioPlayer 中間層抽象，直接使用 BluePlayButton
清理優化:
• 刪除未使用的 TTSButton 和 AudioPlayer 組件
• 簡化組件架構，每個組件內建 TTS 播放邏輯
• 統一 speechSynthesis API 使用方式
視覺統一:
• 藍底漸層 + 綠色播放中狀態 + 波紋動畫
• 響應式尺寸適配不同使用場景
• 完整的播放/暫停/禁用狀態設計
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-02 15:11:02 +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 |
|
鄭沛軒
|
5fae8c0ddf
|
feat: 完成詞卡詳情頁第三階段UI組件重構 - 累計減少27.3%
• UI組件模組化:
- FlashcardDetailHeader.tsx: 標題區組件 (75行)
- FlashcardContentBlocks.tsx: 內容區塊組件 (139行)
- 移除標題區複雜UI: 62行標題、統計、TTS邏輯
• 詞卡詳情頁面優化:
- 原始: 737行 → 當前: 536行 (減少27.3%)
- 架構: 3個Hook + 2個UI組件完成
- 編輯邏輯: 統一handleEditChange處理函數
• 第三階段進展:
- UI組件模組化基礎建立
- TTSButton集成，提升組件一致性
- 為後續完整組件替換奠定基礎
• 累計兩大頁面重構成果:
- 主頁面: 878行 → 305行 (減少65.3%)
- 詳情頁面: 737行 → 536行 (減少27.3%)
- 總體架構: 6個Hook + 7個組件體系
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-01 23:49:04 +08:00 |