jettcheng1018
/
dramaling-vocab-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dramaling-vocab-learning/AI生成頁面重新設計計劃.md

4.5 KiB
Raw Blame History

AI 生成頁面重新設計計劃

設計目標

將當前的兩階段界面 (輸入 → 按鈕 → 結果頁面) 重新設計為統一的單頁面界面

新的布局設計

桌面版布局 (左右分欄)

┌─────────────────────────────────────────────────────────────┐
│ AI 智能生成詞卡                     [你的程度 A2 ⚙️]        │
├─────────────────────┬───────────────────────────────────────┤
│ 左側：輸入區          │ 右側：結果顯示區                        │
│ • 文字輸入框          │ • 句子分析結果 (有結果時顯示)            │
│ • 分析按鈕            │ • 詞彙統計                             │
│ • 歷史記錄            │ • 互動詞彙                             │
│                     │ • 保存提醒                             │
└─────────────────────┴───────────────────────────────────────┘

手機版布局 (上下分區)

┌─────────────────────────────────────┐
│ AI 智能生成詞卡    [你的程度 A2 ⚙️] │
├─────────────────────────────────────┤
│ 輸入區                               │
│ • 文字輸入框                         │
│ • 分析按鈕                           │
├─────────────────────────────────────┤
│ 結果顯示區 (展開/摺疊)               │
│ • 句子分析結果                       │
│ • 詞彙統計                           │
│ • 保存提醒                           │
└─────────────────────────────────────┘

功能增強

1. 統一界面設計

  • 移除視圖切換：不再使用 showAnalysisView 狀態
  • 固定雙欄布局：輸入區和結果區同時可見
  • 即時結果顯示：分析完成後立即在右側顯示

2. 歷史記錄系統

  • localStorage 多記錄：保存最近 5-10 次分析記錄
  • 歷史查詢列表：在左側輸入區下方顯示
  • 快速切換：點擊歷史記錄可立即載入該分析結果
  • 記錄格式： 
    {
  id: timestamp,
  textInput: "原始輸入文字...",
  sentenceAnalysis: {...},
  sentenceMeaning: "翻譯",
  createdAt: Date,
  saved: boolean // 是否已保存詞卡
}

3. 保存提醒系統

  • 警告訊息：「⚠️ 請及時保存詞卡，避免查詢紀錄消失」
  • 未保存計數：顯示當前分析中有多少詞彙未保存
  • 批量保存：「保存所有重點詞彙」按鈕
  • 視覺提醒：未保存的詞彙有特殊標記

技術實施

1. 布局重構

  • 移除條件渲染：{!showAnalysisView ? ... : ...}
  • 使用 Grid/Flexbox：實現響應式左右分欄
  • 固定結構：輸入區和結果區始終存在

2. 狀態管理優化

  • 移除 showAnalysisView 狀態
  • 新增 analysisHistory 狀態：管理歷史記錄
  • 新增 savedWords 狀態：追踪已保存的詞彙

3. localStorage 擴展

  • 升級快取結構：從單一記錄改為記錄陣列
  • 自動清理：超過最大數量時移除最舊記錄
  • 資料完整性：確保向後兼容性

4. 用戶體驗改進

  • 空狀態設計：結果區域在無分析時的友好提示
  • 載入狀態：分析中的視覺反饋
  • 成功狀態：分析完成的視覺確認

視覺設計原則

1. 一致性

  • 保持與詞卡管理頁面的設計語言一致
  • 使用相同的顏色系統和組件樣式

2. 易用性

  • 清楚的操作流程指引
  • 重要功能突出顯示
  • 減少用戶的操作步驟

3. 響應式

  • 桌面版左右分欄
  • 平板版適當調整比例
  • 手機版改為上下堆疊

實施優先級

  1. Phase 1：重構基本布局 (左右分欄)
  2. Phase 2：實現歷史記錄系統
  3. Phase 3：添加保存提醒功能
  4. Phase 4：優化響應式設計和動畫