7.4 KiB

Raw Permalink Blame History

Generate 頁面 UX 改善計劃

🎯 問題描述

目前的問題

當用戶在 http://localhost:3001/generate 頁面輸入英文文本進行分析後：

第一次分析：用戶輸入文本 → 點擊「分析句子」→ 下方顯示分析結果 ✅
想要分析新文本時：用戶在輸入框中輸入新文本 → 舊的分析結果仍然顯示 ❌
用戶體驗問題：新輸入的文本和下方顯示的舊分析結果不匹配，造成混淆

期望的使用流程

用戶輸入文本
點擊「分析句子」→ 顯示對應的分析結果
當用戶開始輸入新文本時 → 自動清除舊的分析結果
用戶需要再次點擊「分析句子」才會顯示新文本的分析結果

🔧 解決方案

核心改善邏輯

添加智能清除機制：當用戶開始修改輸入文本時，自動清除之前的分析結果，避免新輸入和舊結果的不匹配。

技術實現方案

1. 新增狀態管理

// 新增以下狀態
const [lastAnalyzedText, setLastAnalyzedText] = useState('')
const [isInitialLoad, setIsInitialLoad] = useState(true)

2. 實現清除邏輯

// 監聽文本輸入變化
useEffect(() => {
  // 如果不是初始載入，且文本與上次分析的不同
  if (!isInitialLoad && textInput !== lastAnalyzedText) {
    // 清除分析結果
    setSentenceAnalysis(null)
    setSentenceMeaning('')
    setGrammarCorrection(null)
    setSelectedIdiom(null)
    setSelectedWord(null)
  }
}, [textInput, lastAnalyzedText, isInitialLoad])

3. 修改分析函數

const handleAnalyzeSentence = async () => {
  // ... 現有邏輯 ...

  // 分析成功後，記錄此次分析的文本
  setLastAnalyzedText(textInput)
  setIsInitialLoad(false)

  // ... 其他邏輯 ...
}

4. 優化快取邏輯

// 恢復快取時標記為初始載入
useEffect(() => {
  const cached = loadAnalysisFromCache()
  if (cached) {
    setTextInput(cached.textInput || '')
    setLastAnalyzedText(cached.textInput || '') // 同步記錄
    setSentenceAnalysis(cached.sentenceAnalysis || null)
    setSentenceMeaning(cached.sentenceMeaning || '')
    setGrammarCorrection(cached.grammarCorrection || null)
    setIsInitialLoad(false) // 標記快取載入完成
    console.log('✅ 已恢復快取的分析結果')
  } else {
    setIsInitialLoad(false) // 沒有快取也要標記載入完成
  }
}, [loadAnalysisFromCache])

📋 詳細修改步驟

步驟 1：新增狀態變數

在 GenerateContent 函數中新增：

const [lastAnalyzedText, setLastAnalyzedText] = useState('')
const [isInitialLoad, setIsInitialLoad] = useState(true)

步驟 2：添加文本變化監聽

在現有的 useEffect 後添加新的 useEffect：

// 監聽文本變化，自動清除不匹配的分析結果
useEffect(() => {
  if (!isInitialLoad && textInput !== lastAnalyzedText && sentenceAnalysis) {
    // 清除所有分析結果
    setSentenceAnalysis(null)
    setSentenceMeaning('')
    setGrammarCorrection(null)
    setSelectedIdiom(null)
    setSelectedWord(null)
    console.log('🧹 已清除舊的分析結果，因為文本已改變')
  }
}, [textInput, lastAnalyzedText, isInitialLoad, sentenceAnalysis])

步驟 3：修改 `handleAnalyzeSentence` 函數

在分析成功後添加：

// 在 setSentenceAnalysis(analysisData) 之後添加
setLastAnalyzedText(textInput)
setIsInitialLoad(false)

步驟 4：修改快取恢復邏輯

更新現有的快取恢復 useEffect：

useEffect(() => {
  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])

步驟 5：優化用戶體驗（可選）

在分析結果區域添加提示訊息，當沒有分析結果時顯示：

{/* 在分析結果區域前添加 */}
{!sentenceAnalysis && textInput && (
  <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>
  </div>
)}

🎨 預期效果

修改前（問題）

用戶輸入 "Hello world" → 分析 → 顯示結果
用戶修改為 "Good morning" → 舊的 "Hello world" 分析結果仍然顯示 ❌
造成混淆：新輸入 vs 舊結果不匹配

修改後（解決）

用戶輸入 "Hello world" → 分析 → 顯示結果
用戶修改為 "Good morning" → 自動清除舊分析結果 ✅
用戶點擊「分析句子」→ 顯示 "Good morning" 的新分析結果 ✅

🔍 技術細節

狀態管理邏輯

lastAnalyzedText: 記錄上次成功分析的文本內容
isInitialLoad: 區分頁面初始載入和用戶操作，避免載入時誤清除快取
清除條件: textInput !== lastAnalyzedText 且不是初始載入狀態

快取兼容性

✅ 保持現有的 localStorage 快取機制
✅ 頁面重新載入時正確恢復分析結果
✅ 只在用戶主動修改文本時才清除結果

邊界情況處理

頁面載入時: 不會意外清除快取的分析結果
空文本: 當用戶清空輸入框時，分析結果會被清除
相同文本: 如果用戶修改後又改回原來的文本，不會重複清除

📁 需要修改的文件

主要文件

frontend/app/generate/page.tsx - 實現所有邏輯修改

修改範圍

新增狀態變數 (2 行)
新增 useEffect 監聽 (約 10 行)
修改分析函數 (2 行)
修改快取邏輯 (2 行)
可選的 UI 提示 (約 8 行)

總計: 約 25 行代碼修改，影響範圍小，風險低

✅ 驗收標準

功能驗收

✅ 用戶輸入文本並分析後，修改輸入時舊結果立即消失
✅ 頁面重新載入時，快取的分析結果正確恢復
✅ 分析按鈕的狀態管理保持正常（loading、disabled 等）
✅ 語法修正面板的交互功能不受影響

用戶體驗驗收

✅ 新輸入和分析結果始終保持一致
✅ 沒有意外的結果清除或誤操作
✅ 清晰的視覺反饋，用戶知道何時需要重新分析

🚀 實施建議

開發順序

先實現核心邏輯 - 狀態管理和清除機制
測試基本功能 - 確保清除邏輯正常運作
優化快取邏輯 - 確保快取恢復不受影響
添加用戶提示 - 提升用戶體驗
全面測試 - 驗收所有功能點

測試重點

多次輸入不同文本的分析流程
頁面重新載入的快取恢復
語法修正功能的正常運作
詞彙彈窗和保存功能的正常運作

這個改善方案將顯著提升 Generate 頁面的用戶體驗，避免輸入和分析結果不匹配的混淆問題。

7.4 KiB Raw Permalink Blame History Unescape Escape