From 4d0f1ea3a5260e327eb184b3fb397316800158b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Thu, 9 Oct 2025 00:04:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AF=A6=E7=8F=BE=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=E4=BA=8C=20-=20=E5=87=8D=E7=B5=90=E4=BA=92=E5=8B=95=E5=8F=A5?=
 =?UTF-8?q?=E5=AD=90=E9=A1=AF=E7=A4=BA=EF=BC=8C=E4=BF=9D=E7=95=99=E8=88=8A?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=E7=B5=90=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除自動清除分析結果的邏輯，保留舊分析結果不被刪除
- 修改互動句子部分使用 lastAnalyzedText 而非 textInput，避免跟隨新輸入變化
- 修改播放按鈕使用 lastAnalyzedText，確保播放的是已分析的文本
- 添加智能狀態指示器，清楚標示當前顯示的分析對象
- 當輸入與分析不匹配時提供橙色警告提示，引導用戶重新分析
- 當輸入與分析匹配時顯示綠色確認狀態

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

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

diff --git a/frontend/app/generate/page.tsx b/frontend/app/generate/page.tsx
index bdca39e..e2a3fa7 100644
--- a/frontend/app/generate/page.tsx
+++ b/frontend/app/generate/page.tsx
@@ -90,18 +90,6 @@ function GenerateContent() {
     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 () => {
@@ -332,6 +320,30 @@ function GenerateContent() {
         {sentenceAnalysis && (
           <div className="space-y-6">
 
+            {/* 狀態指示器 */}
+            <div className={`border rounded-lg p-3 ${
+              textInput.trim() !== lastAnalyzedText ?
+                'bg-amber-50 border-amber-200' :
+                'bg-green-50 border-green-200'
+            }`}>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">
+                  {textInput.trim() !== lastAnalyzedText ?
+                    '⚠️ 顯示的是舊文本的分析結果' :
+                    '✅ 當前文本的分析結果'
+                  }
+                </span>
+                <code className="text-xs bg-white px-2 py-1 rounded border">
+                  「{lastAnalyzedText}」
+                </code>
+                {textInput.trim() !== lastAnalyzedText && (
+                  <span className="text-xs text-amber-600 ml-2">
+                    點擊「分析句子」查看新文本的分析
+                  </span>
+                )}
+              </div>
+            </div>
+
             {/* 語法修正面板 */}
             {grammarCorrection && grammarCorrection.hasErrors && (
               <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
@@ -397,7 +409,7 @@ function GenerateContent() {
               <div className="border rounded-lg p-6 mb-6 bg-gradient-to-r from-gray-50 to-blue-50 relative">
                 <div className="flex items-start gap-4 mb-4">
                   <div className="flex-1 text-xl leading-relaxed">
-                    {textInput.split(/(\s+)/).map((token, index) => {
+                    {lastAnalyzedText.split(/(\s+)/).map((token, index) => {
                       const cleanToken = token.replace(/[^\w']/g, '')
                       if (!cleanToken || /^\s+$/.test(token)) {
                         return <span key={index} className="whitespace-pre">{token}</span>
@@ -425,7 +437,7 @@ function GenerateContent() {
                   </div>
                   <div className="flex-shrink-0 mt-1">
                     <BluePlayButton
-                      text={textInput}
+                      text={lastAnalyzedText}
                       lang="en-US"
                       size="md"
                       title="點擊播放整個句子"