From adf9ef0394eeb53261aacd4367bf31a85eeb28de 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, 8 Oct 2025 01:27:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=B5=B1=E4=B8=80=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E9=A0=81=E9=9D=A2=E5=B8=83=E5=B1=80=EF=BC=8C=E8=A7=A3=E6=B1=BA?=
 =?UTF-8?q?=E6=8E=92=E7=89=88=E4=B8=8D=E4=B8=80=E8=87=B4=E5=95=8F=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修復AI生成頁面的雙層容器問題，移除多餘的max-w-4xl限制
- 統一所有頁面使用相同的容器設定 (max-w-7xl mx-auto px-4 sm:px-6 lg:px-8)
- 統一背景色為藍色漸層，保持視覺一致性
- 統一標題樣式為響應式設計 (text-2xl sm:text-3xl)
- 清理未使用的導入和變數

所有頁面標題和內容位置現在完全對齊

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/flashcards/page.tsx |  2 +-
 frontend/app/generate/page.tsx   | 16 ++++++++--------
 frontend/app/profile/page.tsx    |  4 ++--
 frontend/app/review/page.tsx     | 10 +++++-----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/app/flashcards/page.tsx b/frontend/app/flashcards/page.tsx
index b2644bb..6fe323e 100644
--- a/frontend/app/flashcards/page.tsx
+++ b/frontend/app/flashcards/page.tsx
@@ -126,7 +126,7 @@ function FlashcardsContent({ showForm, setShowForm }: { showForm: boolean; setSh
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       {/* Navigation */}
       <Navigation />
 
diff --git a/frontend/app/generate/page.tsx b/frontend/app/generate/page.tsx
index 613da61..a9e2ae1 100644
--- a/frontend/app/generate/page.tsx
+++ b/frontend/app/generate/page.tsx
@@ -6,7 +6,7 @@ import { Navigation } from '@/components/shared/Navigation'
 import { WordPopup } from '@/components/word/WordPopup'
 import { useToast } from '@/components/shared/Toast'
 import { flashcardsService } from '@/lib/services/flashcards'
-import { compareCEFRLevels, getLevelIndex, getTargetLearningRange } from '@/lib/utils/cefrUtils'
+import { getLevelIndex, getTargetLearningRange } from '@/lib/utils/cefrUtils'
 import { useWordAnalysis } from '@/hooks/word/useWordAnalysis'
 import { API_CONFIG } from '@/lib/config/api'
 import Link from 'next/link'
@@ -34,7 +34,7 @@ interface GrammarCorrection {
 
 function GenerateContent() {
   const toast = useToast()
-  const { findWordAnalysis, getWordClass, shouldShowStar } = useWordAnalysis()
+  const { findWordAnalysis, getWordClass } = useWordAnalysis()
   const [textInput, setTextInput] = useState('')
   const [isAnalyzing, setIsAnalyzing] = useState(false)
   const [showAnalysisView, setShowAnalysisView] = useState(false)
@@ -232,13 +232,13 @@ function GenerateContent() {
   }, [])
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
       <Navigation />
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {!showAnalysisView ? (
-          <div className="max-w-4xl mx-auto">
-            <h1 className="text-3xl font-bold mb-8">AI 智能生成詞卡</h1>
+          <>
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-8">AI 智能生成詞卡</h1>
 
             {/* Content Input */}
             <div className="bg-white rounded-xl shadow-sm p-4 sm:p-6 mb-6">
@@ -316,10 +316,10 @@ function GenerateContent() {
                 })()}
               </div>
             </div>
-          </div>
+          </>
         ) : (
           /* 重新設計的句子分析視圖 - 簡潔流暢 */
-          <div className="max-w-4xl mx-auto">
+          <>
             {/* 語法修正面板 - 如果需要的話 */}
             {grammarCorrection && grammarCorrection.hasErrors && (
               <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6 mb-6">
@@ -490,7 +490,7 @@ function GenerateContent() {
                 <span>分析新句子</span>
               </button>
             </div>
-          </div>
+          </>
         )}
 
         {/* 慣用語彈窗 - 使用統一的 WordPopup */}
diff --git a/frontend/app/profile/page.tsx b/frontend/app/profile/page.tsx
index 5c06c25..356daa5 100644
--- a/frontend/app/profile/page.tsx
+++ b/frontend/app/profile/page.tsx
@@ -338,10 +338,10 @@ export default function ProfilePage() {
       <Navigation />
 
       <div className="py-8">
-        <div className="max-w-6xl mx-auto px-4">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           {/* 頁面標題 */}
           <div className="mb-8">
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">個人檔案</h1>
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">個人檔案</h1>
             <p className="text-gray-600">管理您的帳戶資訊和學習偏好設定</p>
           </div>
 
diff --git a/frontend/app/review/page.tsx b/frontend/app/review/page.tsx
index ab5bb75..bfdd99d 100644
--- a/frontend/app/review/page.tsx
+++ b/frontend/app/review/page.tsx
@@ -44,7 +44,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="bg-white rounded-xl shadow-lg p-8 text-center">
               <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
               <h2 className="text-xl font-semibold text-gray-700">載入詞卡中...</h2>
@@ -64,7 +64,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="bg-white rounded-xl shadow-lg p-8 text-center">
               <div className={`text-4xl mb-4 ${isAuthError ? 'text-yellow-500' : 'text-red-500'}`}>
                 {isAuthError ? '🔒' : '⚠️'}
@@ -111,7 +111,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="bg-white rounded-xl shadow-lg p-8 text-center">
               {/* 歡迎圖標 */}
               <div className="mb-6">
@@ -190,7 +190,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div className="bg-white rounded-xl shadow-lg p-8 text-center">
               {/* 慶祝圖標 */}
               <div className="mb-6">
@@ -278,7 +278,7 @@ export default function ReviewPage() {
       <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
         <Navigation />
         <div className="py-8">
-          <div className="max-w-4xl mx-auto px-4">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <QuizResult
               score={score}
               totalCards={flashcards.length}