109 lines
4.5 KiB
Markdown
109 lines
4.5 KiB
Markdown
# 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**：優化響應式設計和動畫 |