fix: 統一 Generate 頁面導航體驗

- 在標準 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

@@ -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">
+      <Navigation />
-        <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>
 
       <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>
+  )
 }

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 (