fix: 修復 Generate 頁面輸入和分析結果不匹配的 UX 問題

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
鄭沛軒 2025-10-08 23:56:32 +08:00
parent b5c94eaacd
commit 55b229409f
1 changed files with 32 additions and 0 deletions

View File

@ -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">