# AI 生成頁面重新設計計劃

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

## 新的布局設計

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

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

## 功能增強

### 1. 統一界面設計
- **移除視圖切換**：不再使用 `showAnalysisView` 狀態
- **固定雙欄布局**：輸入區和結果區同時可見
- **即時結果顯示**：分析完成後立即在右側顯示

### 2. 歷史記錄系統
- **localStorage 多記錄**：保存最近 5-10 次分析記錄
- **歷史查詢列表**：在左側輸入區下方顯示
- **快速切換**：點擊歷史記錄可立即載入該分析結果
- **記錄格式**：
  ```javascript
  {
    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**：優化響應式設計和動畫