From 3fdd8bd6c38a624c60d3ee02479b43a75d40076b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Sat, 27 Sep 2025 18:42:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?=E7=9A=84Learn=E2=86=92Review=E8=B7=AF=E7=94=B1=E7=B5=B1?=
 =?UTF-8?q?=E4=B8=80=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 路由統一化
- 移除重複的 /app/learn/ 目錄
- 統一使用 /review 路由作為用戶訪問入口
- 更新 Navigation.tsx 路由：/learn → /review

## 用戶界面更新
- Dashboard按鈕：「開始今日學習」→「開始今日複習」
- Navigation標籤：「學習」→「複習」
- 路由跳轉全部指向 /review

## 統一化成果
- 用戶訪問：http://localhost:3000/review
- 語義一致：從路由到組件都使用review概念
- 架構清晰：不再有learn/review混淆
- 專業性提升：使用正確的教育學術術語

## 功能驗證
- /review 路由正常運作 (HTTP 200)
- /dashboard 和 /flashcards 功能完整
- Navigation導航正確跳轉
- 用戶體驗無縫切換

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/dashboard/page.tsx    |   4 +-
 frontend/app/learn/page.tsx        | 216 -----------------------------
 frontend/components/Navigation.tsx |  22 ++-
 3 files changed, 21 insertions(+), 221 deletions(-)
 delete mode 100644 frontend/app/learn/page.tsx

diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
index fddec7f..9423dc7 100644
--- a/frontend/app/dashboard/page.tsx
+++ b/frontend/app/dashboard/page.tsx
@@ -46,10 +46,10 @@ function DashboardContent() {
           <p className="text-gray-600">今天有 {stats.todayReview} 個單字等待複習，繼續加油！</p>
           <div className="mt-4 flex gap-3">
             <Link
-              href="/learn"
+              href="/review"
               className="bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-hover transition-colors"
             >
-              開始今日學習
+              開始今日複習
             </Link>
             <Link
               href="/generate"
diff --git a/frontend/app/learn/page.tsx b/frontend/app/learn/page.tsx
deleted file mode 100644
index 93cf57b..0000000
--- a/frontend/app/learn/page.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useRouter } from 'next/navigation'
-import { Navigation } from '@/components/Navigation'
-import LearningComplete from '@/components/LearningComplete'
-import { Modal } from '@/components/ui/Modal'
-
-// 新架構組件
-import { ProgressTracker } from '@/components/review/ProgressTracker'
-import { TaskListModal } from '@/components/review/TaskListModal'
-import { LoadingStates } from '@/components/review/LoadingStates'
-import { ReviewRunner } from '@/components/review/ReviewRunner'
-
-// 狀態管理
-import { useReviewStore } from '@/store/useReviewStore'
-import { useUIStore } from '@/store/useUIStore'
-import { ReviewService } from '@/lib/services/review/reviewService'
-
-export default function LearnPage() {
-  const router = useRouter()
-
-  // Zustand stores
-  const {
-    mounted,
-    isLoading,
-    currentCard,
-    dueCards,
-    testItems,
-    completedTests,
-    totalTests,
-    score,
-    showComplete,
-    showNoDueCards,
-    error,
-    setMounted,
-    loadDueCards,
-    initializeTestQueue,
-    resetSession
-  } = useReviewStore()
-
-  const {
-    showTaskListModal,
-    showReportModal,
-    modalImage,
-    reportReason,
-    reportingCard,
-    setShowTaskListModal,
-    closeReportModal,
-    closeImageModal,
-    setReportReason
-  } = useUIStore()
-
-  // 初始化
-  useEffect(() => {
-    setMounted(true)
-    initializeSession()
-  }, [])
-
-  // 初始化學習會話
-  const initializeSession = async () => {
-    try {
-      await loadDueCards()
-
-      if (dueCards.length > 0) {
-        const cardIds = dueCards.map(c => c.id)
-        const completedTests = await ReviewService.loadCompletedTests(cardIds)
-        initializeTestQueue(completedTests)
-      }
-    } catch (error) {
-      console.error('初始化複習會話失敗:', error)
-    }
-  }
-
-  // 重新開始
-  const handleRestart = async () => {
-    resetSession()
-    await initializeSession()
-  }
-
-  // 載入狀態
-  if (!mounted || isLoading) {
-    return (
-      <LoadingStates
-        isLoadingCard={isLoading}
-        isAutoSelecting={true}
-      />
-    )
-  }
-
-  if (showNoDueCards) {
-    return (
-      <LoadingStates
-        showNoDueCards={true}
-        onRestart={handleRestart}
-      />
-    )
-  }
-
-  if (!currentCard) {
-    return <LoadingStates isLoadingCard={true} />
-  }
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-      <Navigation />
-
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        {/* 進度追蹤 */}
-        <ProgressTracker
-          completedTests={completedTests}
-          totalTests={totalTests}
-          onShowTaskList={() => setShowTaskListModal(true)}
-        />
-
-        {/* 測驗執行器 */}
-        <ReviewRunner />
-
-        {/* 任務清單Modal */}
-        <TaskListModal
-          isOpen={showTaskListModal}
-          onClose={() => setShowTaskListModal(false)}
-          testItems={testItems}
-          completedTests={completedTests}
-          totalTests={totalTests}
-        />
-
-        {/* 學習完成 */}
-        {showComplete && (
-          <LearningComplete
-            score={score}
-            mode={'flip-memory'} // 可以從store獲取
-            onRestart={handleRestart}
-            onBackToDashboard={() => router.push('/dashboard')}
-          />
-        )}
-
-        {/* 圖片Modal */}
-        {modalImage && (
-          <div
-            className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
-            onClick={closeImageModal}
-          >
-            <div className="relative max-w-4xl max-h-[90vh] mx-4">
-              <img
-                src={modalImage}
-                alt="放大圖片"
-                className="max-w-full max-h-full rounded-lg"
-              />
-              <button
-                onClick={closeImageModal}
-                className="absolute top-4 right-4 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
-              >
-                ✕
-              </button>
-            </div>
-          </div>
-        )}
-
-        {/* 錯誤回報Modal */}
-        <Modal
-          isOpen={showReportModal}
-          onClose={closeReportModal}
-          title="回報錯誤"
-          size="md"
-        >
-          <div className="p-6">
-            <div className="mb-4">
-              <p className="text-sm text-gray-600 mb-2">
-                單字：{reportingCard?.word}
-              </p>
-            </div>
-
-            <div className="mb-4">
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                錯誤類型
-              </label>
-              <select
-                value={reportReason}
-                onChange={(e) => setReportReason(e.target.value)}
-                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-              >
-                <option value="">請選擇錯誤類型</option>
-                <option value="translation">翻譯錯誤</option>
-                <option value="definition">定義錯誤</option>
-                <option value="pronunciation">發音錯誤</option>
-                <option value="example">例句錯誤</option>
-                <option value="image">圖片錯誤</option>
-                <option value="other">其他</option>
-              </select>
-            </div>
-
-            <div className="flex gap-2">
-              <button
-                onClick={closeReportModal}
-                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
-              >
-                取消
-              </button>
-              <button
-                onClick={() => {
-                  console.log('Report submitted:', { card: reportingCard, reason: reportReason })
-                  closeReportModal()
-                }}
-                disabled={!reportReason}
-                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                送出回報
-              </button>
-            </div>
-          </div>
-        </Modal>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/frontend/components/Navigation.tsx b/frontend/components/Navigation.tsx
index a8fd633..101fa03 100644
--- a/frontend/components/Navigation.tsx
+++ b/frontend/components/Navigation.tsx
@@ -5,8 +5,12 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useAuth } from '@/contexts/AuthContext'
 
+interface NavigationProps {
+  showExitLearning?: boolean
+  onExitLearning?: () => void
+}
 
-export function Navigation() {
+export function Navigation({ showExitLearning = false, onExitLearning }: NavigationProps = {}) {
   const { user, logout } = useAuth()
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
@@ -14,7 +18,7 @@ export function Navigation() {
   const navItems = [
     { href: '/dashboard', label: '儀表板' },
     { href: '/flashcards', label: '詞卡' },
-    { href: '/learn', label: '複習' },
+    { href: '/review', label: '複習' },
     { href: '/generate', label: 'AI 生成' },
     { href: '/settings', label: '⚙️ 設定' }
   ]
@@ -60,7 +64,17 @@ export function Navigation() {
           </div>
 
           <div className="flex items-center space-x-4">
-            {/* 通知按鈕 - 桌面和手機都顯示 */}
+            {/* 複習模式的結束複習按鈕 */}
+            {showExitLearning ? (
+              <button
+                onClick={onExitLearning}
+                className="text-gray-600 hover:text-gray-900"
+              >
+                × 結束複習
+              </button>
+            ) : (
+              <>
+                {/* 通知按鈕 - 桌面和手機都顯示 */}
                 <button className="p-2 text-gray-600 hover:text-gray-900">
                   <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
@@ -80,6 +94,8 @@ export function Navigation() {
                     登出
                   </button>
                 </div>
+              </>
+            )}
           </div>
         </div>