From 55b229409fb462ad02c64299dae6e811cf004a63 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 23:56:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=BE=A9=20Generate=20?=
 =?UTF-8?q?=E9=A0=81=E9=9D=A2=E8=BC=B8=E5=85=A5=E5=92=8C=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E7=B5=90=E6=9E=9C=E4=B8=8D=E5=8C=B9=E9=85=8D=E7=9A=84=20UX=20?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 lastAnalyzedText 和 isInitialLoad 狀態追踪
- 實現智能清除機制：當用戶修改輸入文本時自動清除舊的分析結果
- 優化快取恢復邏輯，確保頁面重載時正確同步狀態
- 添加友善提示，當有文本但無分析結果時引導用戶點擊分析按鈕
- 確保輸入文本和顯示的分析結果始終保持一致

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/generate/page.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/frontend/app/generate/page.tsx b/frontend/app/generate/page.tsx
index 1888241..bdca39e 100644
--- a/frontend/app/generate/page.tsx
+++ b/frontend/app/generate/page.tsx
@@ -45,6 +45,10 @@ function GenerateContent() {
   const [selectedIdiom, setSelectedIdiom] = useState<string | null>(null)
   const [selectedWord, setSelectedWord] = useState<string | null>(null)
 
+  // UX 改善：追蹤分析狀態，避免輸入和結果不匹配
+  const [lastAnalyzedText, setLastAnalyzedText] = useState('')
+  const [isInitialLoad, setIsInitialLoad] = useState(true)
+
   // localStorage 快取函數
   const saveAnalysisToCache = useCallback((cacheData: any) => {
     try {
@@ -77,13 +81,28 @@ function GenerateContent() {
     const cached = loadAnalysisFromCache()
     if (cached) {
       setTextInput(cached.textInput || '')
+      setLastAnalyzedText(cached.textInput || '') // 同步記錄上次分析的文本
       setSentenceAnalysis(cached.sentenceAnalysis || null)
       setSentenceMeaning(cached.sentenceMeaning || '')
       setGrammarCorrection(cached.grammarCorrection || null)
       console.log('✅ 已恢復快取的分析結果')
     }
+    setIsInitialLoad(false) // 標記初始載入完成
   }, [loadAnalysisFromCache])
 
+  // 監聽文本變化，自動清除不匹配的分析結果
+  useEffect(() => {
+    if (!isInitialLoad && textInput !== lastAnalyzedText && sentenceAnalysis) {
+      // 清除所有分析結果
+      setSentenceAnalysis(null)
+      setSentenceMeaning('')
+      setGrammarCorrection(null)
+      setSelectedIdiom(null)
+      setSelectedWord(null)
+      console.log('🧹 已清除舊的分析結果，因為文本已改變')
+    }
+  }, [textInput, lastAnalyzedText, isInitialLoad, sentenceAnalysis])
+
   // 處理句子分析
   const handleAnalyzeSentence = async () => {
     // 清除舊的分析快取
@@ -157,6 +176,10 @@ function GenerateContent() {
       }
       saveAnalysisToCache(cacheData)
 
+      // 記錄此次分析的文本，並標記已完成初始化
+      setLastAnalyzedText(textInput)
+      setIsInitialLoad(false)
+
     } catch (error) {
       console.error('分析錯誤:', error)
       toast.error('分析過程中發生錯誤，請稍後再試。')
@@ -296,6 +319,15 @@ function GenerateContent() {
           </button>
         </div>
 
+        {/* 當有文本但無分析結果時顯示提示 */}
+        {!sentenceAnalysis && textInput.trim() && !isAnalyzing && (
+          <div className="bg-blue-50 border border-blue-200 rounded-xl p-6 text-center">
+            <div className="text-blue-600 mb-2">💡</div>
+            <p className="text-blue-800 font-medium">請點擊「分析句子」查看文本的詳細分析</p>
+            <p className="text-blue-600 text-sm mt-1">分析將包含詞彙解釋、語法檢查和翻譯</p>
+          </div>
+        )}
+
         {/* 分析結果區域 */}
         {sentenceAnalysis && (
           <div className="space-y-6">