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(null) const [selectedWord, setSelectedWord] = useState(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() { + {/* 當有文本但無分析結果時顯示提示 */} + {!sentenceAnalysis && textInput.trim() && !isAnalyzing && ( +
+
💡
+

請點擊「分析句子」查看文本的詳細分析

+

分析將包含詞彙解釋、語法檢查和翻譯

+
+ )} + {/* 分析結果區域 */} {sentenceAnalysis && (