fix: 實現方案二 - 凍結互動句子顯示，保留舊分析結果

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

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

Co-Authored-By: Claude <noreply@anthropic.com>

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="點擊播放整個句子"