From 303f0ac727ae7e9d430c796b1b7d0bb8ffa7f0a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Wed, 17 Sep 2025 14:09:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B5=B1=E4=B8=80=20Generate=20?=
 =?UTF-8?q?=E9=A0=81=E9=9D=A2=E5=B0=8E=E8=88=AA=E9=AB=94=E9=A9=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在標準 Navigation 組件中添加「AI 生成」選項
- 將 Generate 頁面改為使用統一的 Navigation 組件
- 添加 ProtectedRoute 包裝確保安全性一致
- 移除自定義內聯導航，提升代碼維護性
- 確保所有頁面的導航體驗統一

現在所有頁面都有完整的響應式導航，包括手機版漢堡選單、用戶資訊和登出功能。

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/generate/page.tsx     | 28 ++++++++++++----------------
 frontend/components/Navigation.tsx |  3 ++-
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/frontend/app/generate/page.tsx b/frontend/app/generate/page.tsx
index 55d28c5..d659fdc 100644
--- a/frontend/app/generate/page.tsx
+++ b/frontend/app/generate/page.tsx
@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import Link from 'next/link'
+import { ProtectedRoute } from '@/components/ProtectedRoute'
+import { Navigation } from '@/components/Navigation'
 
-export default function GeneratePage() {
+function GenerateContent() {
   const [mode, setMode] = useState<'manual' | 'screenshot'>('manual')
   const [textInput, setTextInput] = useState('')
   const [extractionType, setExtractionType] = useState<'vocabulary' | 'smart'>('vocabulary')
@@ -109,21 +111,7 @@ export default function GeneratePage() {
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Navigation */}
-      <nav className="bg-white shadow-sm border-b">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between h-16">
-            <div className="flex items-center space-x-8">
-              <Link href="/dashboard" className="text-2xl font-bold text-primary">DramaLing</Link>
-              <div className="hidden md:flex space-x-6">
-                <Link href="/dashboard" className="text-gray-600 hover:text-gray-900">儀表板</Link>
-                <Link href="/flashcards" className="text-gray-600 hover:text-gray-900">詞卡</Link>
-                <Link href="/learn" className="text-gray-600 hover:text-gray-900">學習</Link>
-                <Link href="/generate" className="text-gray-900 font-medium">AI 生成</Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
+      <Navigation />
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {!showPreview ? (
@@ -561,4 +549,12 @@ export default function GeneratePage() {
       )}
     </div>
   )
+}
+
+export default function GeneratePage() {
+  return (
+    <ProtectedRoute>
+      <GenerateContent />
+    </ProtectedRoute>
+  )
 }
\ No newline at end of file
diff --git a/frontend/components/Navigation.tsx b/frontend/components/Navigation.tsx
index 70a5247..e6b8a5f 100644
--- a/frontend/components/Navigation.tsx
+++ b/frontend/components/Navigation.tsx
@@ -18,7 +18,8 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
   const navItems = [
     { href: '/dashboard', label: '儀表板' },
     { href: '/flashcards', label: '詞卡' },
-    { href: '/learn', label: '學習' }
+    { href: '/learn', label: '學習' },
+    { href: '/generate', label: 'AI 生成' }
   ]
 
   return (