jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
118 Commits 1 Branch 0 Tags 150 MiB
C# 49.4%
TypeScript 49.3%
JavaScript 0.5%
Shell 0.5%
HTML 0.2%
Other 0.1%
Go to file
鄭沛軒 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
backend/DramaLing.Api feat: 完成詞卡管理功能前後端完整整合 2025-09-24 04:21:06 +08:00
docs feat: 完成詞卡管理功能前後端完整整合 2025-09-24 04:21:06 +08:00
frontend feat: 實現優雅的角落通知系統取代惱人的 alert 彈窗 2025-09-24 04:55:31 +08:00
note docs: 重組文檔結構並整理架構文件 2025-09-23 20:27:05 +08:00
scripts feat: 建立完整的架構治理系統 2025-09-23 20:25:19 +08:00
.gitignore chore: 忽略 Claude Code 個人設定檔案 2025-09-17 16:13:13 +08:00
ARCHITECTURE_CHECKLIST.md feat: 建立完整的架構治理系統 2025-09-23 20:25:19 +08:00
ARCHITECTURE_GOVERNANCE.md feat: 建立完整的架構治理系統 2025-09-23 20:25:19 +08:00
FLASHCARD_FIX_SUMMARY.md fix: 完全修復詞卡頁面 - 移除 CardSets 概念衝突 2025-09-23 21:08:39 +08:00
FLASHCARD_PAGE_ISSUE_REPORT.md fix: 完全修復詞卡頁面 - 移除 CardSets 概念衝突 2025-09-23 21:08:39 +08:00
FLASHCARD_SAVE_DEVELOPMENT_PLAN.md docs: 更新智能詞卡功能開發計劃和前端API配置 2025-09-24 00:16:19 +08:00
NEXT_OPTIMIZATION_PLAN.md feat: 啟用智能快取系統，實現 57,200 倍性能提升 2025-09-23 19:50:53 +08:00
OPTIMIZATION_SUMMARY.md feat: 實施全面的程式碼架構優化 2025-09-23 19:00:17 +08:00
README.md feat: DramaLing 完整版本 - 韓劇單字學習應用 2025-09-16 23:06:47 +08:00
SERVICES_OPTIMIZATION_SUMMARY.md feat: 建立完整的架構治理系統 2025-09-23 20:25:19 +08:00
start-dotnet-api.sh feat: DramaLing 完整版本 - 韓劇單字學習應用 2025-09-16 23:06:47 +08:00
start-frontend.sh feat: DramaLing 完整版本 - 韓劇單字學習應用 2025-09-16 23:06:47 +08:00

README.md

🎬 DramaLing - AI 英語詞彙學習平台

專案狀態: 🔄 後端重寫中 (.NET Core) 開發週期: 6 週 (2025-09-16 ~ 2025-10-27) 技術棧: Next.js + .NET Core + PostgreSQL + Gemini AI 目標: 100 個活躍用戶，40% 留存率

🏗️ 架構概覽

Frontend (Next.js 15)     Backend (.NET Core 8)
http://localhost:3001  ←→  http://localhost:5000
        ↓                         ↓
   React Pages            ASP.NET Core Web API
   Tailwind CSS           Entity Framework Core
        ↓                         ↓
                PostgreSQL (Supabase)
                Google Gemini AI

🚀 快速開始

前端啟動 (已完成)

./start-frontend.sh
# 前端運行在: http://localhost:3001

後端啟動 (.NET Core)

# 1. 啟動 .NET API
./start-dotnet-api.sh

# 2. API 端點
# http://localhost:5000/api/flashcards
# http://localhost:5000/swagger (API 文檔)
# http://localhost:5000/health (健康檢查)

📁 專案結構 (前後端分離)

dramaling-vocab-learning/
├── frontend/              # Next.js 前端專案 (完成)
│   ├── app/              # 前端頁面
│   │   ├── dashboard/    # 儀表板頁面
│   │   ├── flashcards/   # 詞卡管理
│   │   ├── learn/        # 學習頁面
│   │   ├── generate/     # AI 生成
│   │   └── login/register/ # 認證頁面
│   │
│   ├── public/           # 靜態資源
│   ├── package.json      # 前端依賴
│   ├── tailwind.config.ts # 樣式配置
│   ├── next.config.mjs   # Next.js 配置
│   └── tsconfig.json     # TypeScript 配置
│
├── backend/               # .NET Core 後端專案 (開發中)
│   └── DramaLing.Api/    # API 專案
│       ├── Controllers/  # API 控制器
│       ├── Services/     # 業務邏輯
│       ├── Models/       # 數據模型
│       ├── Data/         # Entity Framework
│       └── Program.cs    # 啟動配置
│
├── docs/                 # 專案文檔
│   ├── 01_requirement/   # 需求文檔
│   ├── 02_design/        # 設計文檔
│   └── 03_development/   # 開發文檔
│
├── README.md             # 專案說明
├── start-frontend.sh     # 前端啟動腳本
└── start-dotnet-api.sh   # 後端啟動腳本

🎯 核心功能

✅ 已完成 (前端)

  • 🎨 完整 UI/UX - 所有頁面設計完成
  • 📱 響應式設計 - 支援手機/平板/桌面
  • 🎯 學習模式 - 翻卡、選擇題、填空、聽力、口說
  • 🤖 AI 生成界面 - 智能詞卡生成流程
  • 📊 統計儀表板 - 學習進度追蹤

🔧 開發中 (後端)

  • 🏗️ ASP.NET Core API - 高性能 RESTful API
  • 🧠 SM-2 學習算法 - 間隔重複記憶系統
  • 🤖 AI 服務整合 - Google Gemini API
  • 📊 統計分析 - 多維度學習數據
  • 🔒 JWT 認證 - 安全的用戶系統

📈 開發進度

Phase 1: 前端 Prototype     ✅ 100% 完成
Phase 2: 後端重寫 (.NET)    🔧 80% 完成
Phase 3: 前後端整合         ⏳ 待開始
Phase 4: 測試與部署         ⏳ 待開始

🎨 前端預覽

瀏覽器打開：http://localhost:3001

主要頁面：

  • / - 產品首頁
  • /dashboard - 學習儀表板
  • /flashcards - 詞卡管理
  • /learn - 智能學習模式
  • /generate - AI 詞卡生成

🔧 開發者指南

文檔位置

  • 後端開發計劃: docs/03_development/api/backend-development-plan.md
  • 專案結構: docs/03_development/setup/folder-structure.md
  • .NET 重寫計劃: docs/03_development/dotnet-rewrite-plan.md

技術亮點

  • 🚀 性能: .NET Core 比 Node.js 快 30-50%
  • 🛡️ 型別安全: C# 強型別系統
  • 🏢 企業級: 成熟的架構和工具鏈
  • 🔧 維護性: 清晰的專案結構

注意: 目前正在從 Next.js API Routes 重寫為 .NET Core Web API，以獲得更好的性能和維護性。