# 詞彙學習功能規格文檔 (Web版)

## 📋 功能概述

**功能名稱**: 詞彙學習訓練系統 (Web端)  
**建立日期**: 2025-09-09  
**最後更新**: 2025-09-09  
**負責團隊**: 前端Web/設計/開發  
**對應Mobile規格**: `../mobile/02_詞彙學習功能規格.md`

### 主要功能
- 漸進式詞彙學習路徑：介紹→練習→測試→複習
- 多維度練習模式：選擇題、圖片匹配、句子應用
- 流暢度評估系統：反應時間與正確率綜合評判
- 間隔複習機制：基於遺忘曲線的智能複習安排
- 個人化學習調整：根據表現動態調整難度和內容

### Web端特色功能
- **快捷鍵操作**: 支援鍵盤快捷鍵提升學習效率
- **大螢幕優化**: 利用桌面螢幕空間展示更多學習內容
- **多視窗支援**: 可同時開啟多個學習模組進行對比學習
- **高級統計面板**: 詳細的學習數據可視化分析

### 適用場景
- 辦公室或家中的深度學習時段
- 需要大量文字輸入的詞彙練習
- 詳細學習數據分析和複習規劃
- 多螢幕環境下的沉浸式學習

### 與其他功能的關聯
- **情境對話系統**: 為對話提供詞彙基礎，指定詞彙在對話中使用
- **學習地圖系統**: 按階段解鎖詞彙學習內容  
- **複習系統**: 整合間隔複習演算法，安排詞彙複習
- **成就系統**: 詞彙掌握里程碑和學習成就追蹤

## 💻 涉及的Web頁面

### 主要頁面
1. **Page_Vocab_Introduction_W** - 詞彙介紹主頁面 (Web版)
2. **Page_Vocab_Choice_Practice_W** - 詞彙選擇練習頁面 (Web版)
3. **Page_Vocab_Fluency_Matching_W** - 圖片匹配練習頁面 (Web版)
4. **Page_Vocab_Fluency_Reorganize_W** - 句子重組練習頁面 (Web版)
5. **Page_Vocab_Review_Main_W** - 詞彙複習主頁面 (Web版)

### 結果反饋頁面
1. **Page_Vocab_Choice_Results_W** - 選擇題結果分析 (Web版)
2. **Page_Vocab_Fluency_Results_W** - 流暢度練習綜合結果 (Web版)
3. **Page_Vocab_Analytics_Dashboard_W** - 詞彙學習分析儀表板 (Web專用)

## 🎯 詳細頁面規格

### Page_Vocab_Introduction_W - 詞彙介紹主頁面 (Web版)

#### 功能說明
- **頁面目的**: 在桌面環境中為用戶介紹新詞彙，提供豐富的學習資源和互動體驗
- **進入條件**: 從學習地圖選擇詞彙學習關卡，或透過瀏覽器書籤直接進入
- **退出條件**: 完成詞彙介紹進入練習階段，或關閉瀏覽器標籤

#### Web版特有功能
- **多列布局**: 左側詞彙資訊，右側相關詞彙和例句
- **詞典整合**: 滑鼠懸停即時顯示釋義，右鍵查詢外部詞典
- **筆記功能**: 內建筆記編輯器，支援Markdown格式
- **書籤管理**: 瀏覽器書籤整合，快速收藏重要詞彙

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 目標詞彙文字 | String | 是 | - | 1-50字 | 始終顯示，大字體標題 |
| 音標顯示 | String | 是 | - | IPA音標格式 | 詞彙下方，支援點擊複製 |
| 中文定義 | String | 是 | - | 10-100字 | 主要定義區域 |
| 英文定義 | String | 否 | - | 10-200字 | 進階模式顯示，可切換 |
| 詞性標記 | String | 是 | - | n./v./adj.等 | 色彩編碼顯示 |
| 例句1-5 | String | 是 | - | 10-100字 | 多例句並列顯示 |
| 使用情境說明 | String | 是 | - | 20-200字 | 獨立區塊顯示 |
| 相關詞彙推薦 | Array | 否 | [] | 詞彙陣列 | 右側面板顯示 |
| 詞頻統計 | Number | 否 | - | 1-5星評級 | 使用頻率指示 |
| 用戶筆記 | String | 否 | - | 不限長度 | 可摺疊筆記區域 |
| 學習進度 | Number | 是 | 0 | 0-100% | 進度條顯示 |

#### Web版互動元素

| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---------|---------|----------|--------|----------|------|
| 發音播放按鈕 | 按鈕 | 點擊/空白鍵 | Space | 正常→播放中 | 支援重複播放和語速調節 |
| 慢速發音按鈕 | 按鈕 | 點擊/Shift+Space | Shift+Space | 正常→播放中 | 0.5x-1.5x語速調節 |
| 例句發音按鈕 | 按鈕 | 點擊/數字鍵1-5 | 1-5 | 正常→播放中 | 每個例句對應數字鍵 |
| 收藏按鈕 | 按鈕 | 點擊/Ctrl+D | Ctrl+D | 未收藏↔已收藏 | 整合瀏覽器書籤 |
| 相關詞彙按鈕 | 按鈕 | 點擊/右鍵新標籤 | Ctrl+Click | - | 支援新標籤開啟 |
| 筆記編輯器 | 文本區域 | 點擊/Ctrl+N | Ctrl+N | 收合→展開 | 支援Markdown語法 |
| 詞典查詢按鈕 | 按鈕 | 右鍵選單 | F1 | - | 新視窗開啟外部詞典 |
| 開始練習按鈕 | 按鈕 | 點擊/Enter | Enter | - | 主要行動按鈕 |
| 跳過介紹按鈕 | 按鈕 | 點擊/Shift+Enter | Shift+Enter | - | 快速通道 |

#### Web版使用者操作流程
1. **快速瀏覽**: 頁面載入 → 自動播放發音 → 快速瀏覽定義和例句
2. **深度學習**: 展開筆記編輯器 → 記錄重點 → 查詢相關詞彙 → 使用快捷鍵快速操作
3. **多標籤學習**: 右鍵開啟相關詞彙 → 多標籤對比學習 → 統一管理學習進度
4. **鍵盤操作**: 全程使用快捷鍵 → 提升學習效率 → 無需使用滑鼠

### Page_Vocab_Analytics_Dashboard_W - 詞彙學習分析儀表板 (Web專用)

#### 功能說明
- **頁面目的**: 提供詳細的詞彙學習數據分析和可視化圖表
- **進入條件**: 從詞彙學習結果頁面點擊"詳細分析"，或從主選單進入
- **退出條件**: 返回學習模組或關閉頁面

#### Web版專有功能
- **多維度數據視覺化**: 雷達圖、趨勢圖、熱力圖等豐富圖表
- **自訂報告**: 用戶可選擇時間範圍和分析維度
- **數據匯出**: 支援CSV、PDF格式匯出
- **印刷友善格式**: 優化列印版面配置

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 時間範圍選擇器 | DateRange | 是 | 最近7天 | 有效日期範圍 | 頁面頂部，始終可見 |
| 整體學習統計 | Object | 是 | - | 統計物件 | 卡片式布局顯示 |
| 詞彙掌握度分布圖 | Chart | 是 | - | 圖表數據 | 圓餅圖顯示 |
| 學習進度趨勢圖 | Chart | 是 | - | 時間序列數據 | 折線圖顯示 |
| 錯誤分析熱力圖 | Chart | 是 | - | 矩陣數據 | 熱力圖顯示 |
| 詞彙分類統計 | Table | 是 | - | 表格數據 | 可排序表格 |
| 學習建議清單 | Array | 是 | - | 建議陣列 | 列表形式顯示 |
| 薄弱點識別 | Array | 是 | - | 詞彙陣列 | 標籤雲顯示 |

#### Web版互動元素

| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---------|---------|----------|--------|----------|------|
| 時間範圍篩選器 | 日期選擇器 | 點擊/Tab導航 | T | 收合→展開 | 支援快速預設範圍 |
| 圖表縮放控制 | 按鈕組 | 滑鼠滾輪/+- | +/- | - | 支援圖表放大縮小 |
| 數據篩選器 | 下拉選單 | 點擊/方向鍵 | F | - | 多選篩選條件 |
| 匯出按鈕 | 按鈕 | 點擊/Ctrl+E | Ctrl+E | 正常→處理中 | 背景處理匯出 |
| 列印按鈕 | 按鈕 | 點擊/Ctrl+P | Ctrl+P | - | 優化列印格式 |
| 全螢幕按鈕 | 按鈕 | 點擊/F11 | F11 | 正常↔全螢幕 | 沉浸式分析模式 |
| 數據表格排序 | 表格標題 | 點擊/方向鍵 | ↑/↓ | 升序↔降序 | 支援多列排序 |
| 圖表類型切換 | 選項卡 | 點擊/數字鍵 | 1-5 | - | 快速切換圖表類型 |

## 🌐 Web端技術特點

### 響應式設計
- **桌面優先**: 1200px以上寬度的最佳化設計
- **平板適應**: 768px-1199px的平板橫向模式支援
- **快捷鍵系統**: 完整的鍵盤操作支援
- **無障礙設計**: 符合WCAG 2.1 AA標準

### 效能最佳化
- **懶載入**: 圖片和音頻按需載入
- **快取策略**: 離線學習內容快取
- **預載入**: 預先載入下一個詞彙內容
- **CDN加速**: 音頻和圖片資源CDN分發

### 瀏覽器整合
- **書籤同步**: 與瀏覽器書籤系統整合
- **歷史記錄**: 學習歷程納入瀏覽器歷史
- **標籤管理**: 支援多標籤同時學習
- **快捷鍵**: 瀏覽器原生快捷鍵支援

## ⌨️ Web版快捷鍵一覽

### 通用快捷鍵
- `Space` - 播放/暫停詞彙發音
- `Shift + Space` - 播放慢速發音
- `1-5` - 播放對應例句發音
- `Enter` - 確認/下一步
- `Esc` - 取消/返回
- `Tab` - 焦點移動
- `Ctrl + D` - 收藏詞彙
- `Ctrl + N` - 開啟/關閉筆記
- `F1` - 開啟詞典查詢

### 學習過程快捷鍵
- `A/B/C/D` - 選擇對應選項
- `Ctrl + Enter` - 提交答案
- `Shift + Enter` - 跳過題目
- `Ctrl + R` - 重新開始
- `Ctrl + H` - 顯示提示

### 分析頁面快捷鍵
- `T` - 開啟時間範圍選擇器
- `F` - 開啟篩選器
- `Ctrl + E` - 匯出數據
- `Ctrl + P` - 列印報告
- `F11` - 全螢幕模式
- `+/-` - 縮放圖表

## 📊 Web版業務邏輯差異

### 學習會話管理
- **多標籤支援**: 可同時進行多個學習會話
- **會話暫存**: 瀏覽器關閉前自動保存學習進度
- **跨裝置同步**: 透過帳戶同步學習狀態
- **離線模式**: 支援離線學習，上線後同步

### 數據分析增強
- **實時圖表**: 學習過程中即時更新統計圖表
- **歷史對比**: 可對比不同時間段的學習表現
- **詳細報告**: 比Mobile版更詳盡的分析報告
- **數據匯出**: 支援學習數據的多格式匯出

## 🧪 Web版測試要點

### 瀏覽器相容性測試
- [ ] Chrome 90+ 功能完整性
- [ ] Firefox 85+ 功能完整性  
- [ ] Safari 14+ 功能完整性
- [ ] Edge 90+ 功能完整性

### 響應式測試
- [ ] 1920x1080 桌面解析度最佳化
- [ ] 1366x768 筆電解析度適配
- [ ] 1024x768 平板橫向模式
- [ ] 縮放至50%-200%正常顯示

### 快捷鍵測試
- [ ] 所有定義快捷鍵正常工作
- [ ] 快捷鍵與瀏覽器原生功能不衝突
- [ ] 焦點管理和鍵盤導航順序正確
- [ ] 無障礙輔助工具相容性

### 效能測試
- [ ] 頁面載入時間 < 3秒
- [ ] 音頻播放延遲 < 200ms
- [ ] 圖表渲染流暢度 >= 30fps
- [ ] 記憶體使用量合理範圍

## 📝 Web端開發注意事項

### 前端開發
- 使用現代JavaScript框架 (React/Vue/Angular)
- 圖表庫選用 D3.js 或 Chart.js
- 音頻播放使用 Web Audio API
- 響應式設計使用 CSS Grid 和 Flexbox

### 用戶體驗
- 首屏載入優化，關鍵內容優先載入
- 快捷鍵提示和幫助系統
- 錯誤處理和離線狀態提示
- 學習進度的視覺化反饋

### 整合注意事項
- PWA支援，可安裝為桌面應用
- 通知API整合，支援桌面通知
- 資料同步策略，離線優先設計
- SEO優化，學習內容可被搜尋引擎索引

---

**文檔狀態**: 🟢 已完成  
**最後更新**: 2025-09-09  
**版本**: v1.0  
**相關文檔**: 
- `../mobile/02_詞彙學習功能規格.md` - 對應的Mobile版規格
- `../common/業務規則.md` - 共同業務邏輯
- `../common/數據模型.md` - 數據結構定義
- `../common/API規格.md` - API接口規格