Commit Graph

7 Commits

Author SHA1 Message Date
鄭沛軒 b9f89361d9 feat: 重新設計AI生成頁面為統一界面
重大更新:
- 完全重新設計為上下流式統一界面,無需切換頁面
- 移除showAnalysisView狀態,左側輸入右側即時顯示結果
- 添加句子播放按鈕,支援整句語音播放
- 實現localStorage分析結果持久化,跳頁後保留內容
- 統一WordPopup所有區塊顏色為灰色主題,保持視覺一致
- 優化詞彙統計顯示,移除多餘的進度條
- 添加保存提醒警告,避免查詢紀錄消失
- 程度指示器整合到頁面標題區域

用戶體驗大幅提升:
- 更直觀的操作流程
- 更豐富的互動功能
- 更一致的視覺設計
- 更好的數據持久化

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-08 03:11:42 +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
鄭沛軒 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
鄭沛軒 184c84d944 refactor: 完成 Hook 和類型定義重構 + import 路徑更新
## Word 模組重構完成
- 📁 移動 useWordAnalysis Hook 到 hooks/word/
- 📄 移動 WordAnalysis 類型到 lib/types/word/
- 🧹 清理空目錄和錯放的文件
-  更新所有 import 路徑

## Import 路徑統一更新
-  WordPopup: 更新 Hook 和類型引用
-  ClickableTextV2: 更新 Hook 和類型引用
-  review/page.tsx: 更新重構後的組件路徑
-  review-design/page.tsx: 更新重構後的組件路徑

## 架構標準化完成
- 🎯 components/ 只放純組件
- 🪝 hooks/ 放自定義 Hook
- 📋 lib/types/ 放類型定義
-  符合 React 項目最佳實踐

功能驗證: 所有頁面正常編譯運行

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-03 16:30:35 +08:00
鄭沛軒 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
鄭沛軒 6600dbf33a feat: 完成ClickableTextV2組件重構 + 多頁面組件優化
重構成果:
1. ClickableTextV2: 413→114行 (減少72%)
2. Flashcards頁面: 305→277行 (減少9%)
3. 新建10個通用組件,大幅提升重用性

ClickableTextV2重構亮點:
- 建立word組件模組 (types.ts, useWordAnalysis Hook, WordPopup)
- 重用現有Modal + ContentBlock組件
- 業務邏輯與UI完全分離
- 編譯通過,功能完整

通用組件庫建立:
- LoadingState, ErrorState (全站通用狀態)
- StatisticsCard, ContentBlock (多色彩變體)
- ValidatedTextInput, TabNavigation (表單與導航)
- FlashcardActions, EditingControls等詞卡專用組件

Bundle優化:
- flashcards詳情頁: 8.62KB→6.36KB
- flashcards列表頁: 12.1KB→10.4KB

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-02 00:53:23 +08:00