dramaling-vocab-learning

Commit Graph

Author	SHA1	Message	Date
鄭沛軒	70bf3f8fed	feat: 完善通知系統堆疊效果並添加分頁 emoji 🎨 Toast 通知系統改進： - 實現智能通知堆疊：新通知推動舊通知下移而不覆蓋 - 優化動畫邏輯：只有最新通知從右側滑入，舊通知僅平滑移位 - 新增位置追蹤：每個通知按堆疊順序計算垂直位置 (80px 間隔) - 修復閃爍問題：防止舊通知重複執行入場動畫 - 限制通知數量：最多顯示 5 個通知，自動移除最舊的 - 改進動畫細節：分離入場動畫和位置移動動畫 📚 視覺設計優化： - 為「所有詞卡」分頁添加 📚 書籍 emoji - 完善分頁視覺層次：📚 所有詞卡與 ⭐ 收藏詞卡形成完美對比 - 提升學習應用的視覺識別度和用戶友善性 🚀 用戶體驗提升： - 支援快速連續操作：每個動作都有自己的通知反饋 - 非侵入式設計：通知不會阻擋用戶操作流程 - 平滑的視覺效果：所有動畫過渡自然流暢 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-24 14:34:01 +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

Author

SHA1

Message

Date

鄭沛軒

70bf3f8fed

feat: 完善通知系統堆疊效果並添加分頁 emoji

🎨 Toast 通知系統改進：
- 實現智能通知堆疊：新通知推動舊通知下移而不覆蓋
- 優化動畫邏輯：只有最新通知從右側滑入，舊通知僅平滑移位
- 新增位置追蹤：每個通知按堆疊順序計算垂直位置 (80px 間隔)
- 修復閃爍問題：防止舊通知重複執行入場動畫
- 限制通知數量：最多顯示 5 個通知，自動移除最舊的
- 改進動畫細節：分離入場動畫和位置移動動畫

📚 視覺設計優化：
- 為「所有詞卡」分頁添加 📚 書籍 emoji
- 完善分頁視覺層次：📚 所有詞卡 與 ⭐ 收藏詞卡 形成完美對比
- 提升學習應用的視覺識別度和用戶友善性

🚀 用戶體驗提升：
- 支援快速連續操作：每個動作都有自己的通知反饋
- 非侵入式設計：通知不會阻擋用戶操作流程
- 平滑的視覺效果：所有動畫過渡自然流暢

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

Co-Authored-By: Claude <noreply@anthropic.com>

2025-09-24 14:34:01 +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

2 Commits