# 學習地圖功能規格文檔 (Web版)

## 📋 功能概述

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

### 主要功能
- 階段化學習路徑，從基礎到進階的順序解鎖機制
- 可視化進度追蹤，清晰展示學習成就和剩餘目標
- 多元化關卡類型，包含對話、詞彙、語法、聽力等訓練
- 個人化學習建議，基於用戶表現調整學習路徑
- 社交競爭元素，好友進度對比和排行榜功能

### Web端特色功能
- **全景地圖視圖**: 利用大螢幕展示完整學習路徑
- **縮放互動地圖**: 支援滑鼠縮放和拖拽導航
- **多層級檢視**: 可切換總覽、階段、詳細三個層級
- **進度對比分析**: 圖表化顯示學習進度和預期目標
- **批量操作**: 可同時規劃多個學習目標
- **學習路徑客製化**: 用戶可自訂學習順序和重點

### 適用場景
- 桌面環境的學習規劃和進度管理
- 需要整體學習策略規劃的深度用戶
- 教師或家長監督學習進度
- 長期學習目標的追蹤和調整

### 與其他功能的關聯
- **詞彙學習系統**: 根據地圖進度解鎖詞彙包
- **對話練習系統**: 按階段開放對話情境
- **成就系統**: 完成關卡獲得徽章和獎勵
- **道具商店**: 使用道具加速解鎖或重置進度
- **分析系統**: 學習軌跡數據用於個性化建議

## 💻 涉及的Web頁面

### 主要頁面
1. **Page_Map_Overview_W** - 學習地圖總覽頁面 (Web版)
2. **Page_Map_Stage_Details_W** - 階段詳情與規劃頁面 (Web版)
3. **Page_Map_Level_Details_W** - 關卡詳情頁面 (Web版)
4. **Page_Map_Progress_Analytics_W** - 進度分析儀表板 (Web版)
5. **Page_Achievement_Gallery_W** - 成就展示廳 (Web版)

### Web專用頁面
1. **Page_Learning_Path_Planner_W** - 學習路徑規劃器 (Web專用)
2. **Page_Progress_Comparison_W** - 進度對比分析頁面 (Web專用)
3. **Page_Study_Schedule_Manager_W** - 學習排程管理器 (Web專用)

### 輔助畫面
1. **Modal_Level_Preview_W** - 關卡預覽模態視窗
2. **Modal_Achievement_Details_W** - 成就詳情模態視窗
3. **Panel_Quick_Progress_W** - 快速進度面板
4. **Tooltip_Level_Info_W** - 關卡資訊提示框

## 🎯 詳細頁面規格

### Page_Map_Overview_W - 學習地圖總覽頁面 (Web版)

#### 功能說明
- **頁面目的**: 在大螢幕上展示完整的學習地圖，提供直觀的進度概覽
- **進入條件**: 從主選單進入或設為用戶主頁
- **退出條件**: 進入具體關卡或其他功能模組

#### Web版佈局特點
- **地圖主區域**: 占螢幕75%，支援縮放和拖拽的互動地圖
- **進度側邊欄**: 右側25%，顯示整體統計和快速導航
- **頂部工具列**: 包含視圖切換、搜索、篩選等功能
- **底部狀態列**: 顯示當前學習狀態和下一個建議目標

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 學習階段列表 | Array | 是 | [] | 階段陣列 | 地圖主區域顯示 |
| 當前學習階段 | Number | 是 | 1 | 1-13階段 | 高亮顯示 |
| 整體完成進度 | Number | 是 | 0 | 0-100% | 進度條顯示 |
| 已完成關卡數 | Number | 是 | 0 | >=0 | 統計卡片顯示 |
| 已解鎖關卡數 | Number | 是 | 1 | >=1 | 統計卡片顯示 |
| 總獲得星級 | Number | 是 | 0 | >=0 | 星級統計顯示 |
| 近期學習活動 | Array | 是 | [] | 活動陣列 | 側邊欄時間軸 |
| 推薦下一步 | Object | 否 | null | 建議物件 | 底部建議區域 |
| 地圖縮放級別 | Number | 是 | 1.0 | 0.5-3.0 | 控制地圖顯示範圍 |
| 篩選條件 | Object | 否 | {} | 篩選物件 | 頂部篩選器 |

#### Web版互動元素

| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---------|---------|----------|--------|----------|------|
| 地圖縮放控制 | 按鈕組+滾輪 | 滑鼠滾輪/+- | +/- | 0.5x-3x縮放 | 支援滑鼠縮放 |
| 地圖拖拽 | 拖拽區域 | 滑鼠拖拽 | 方向鍵 | 移動視窗 | 支援鍵盤導航 |
| 關卡點擊 | 地圖節點 | 點擊/Enter | Enter | 正常→選中 | 顯示關卡詳情 |
| 階段跳轉 | 導航按鈕 | 點擊/數字鍵 | 1-9 | - | 快速跳轉到階段 |
| 視圖切換 | 標籤組 | 點擊/Tab | Tab | 總覽↔詳細 | 切換顯示模式 |
| 搜索關卡 | 搜索框 | 輸入/Ctrl+F | Ctrl+F | - | 關卡名稱搜索 |
| 進度篩選 | 下拉選單 | 點擊/F | F | 全部→篩選 | 按完成狀態篩選 |
| 全螢幕地圖 | 按鈕 | 點擊/F11 | F11 | 正常↔全螢幕 | 沉浸式地圖檢視 |
| 重置視圖 | 按鈕 | 點擊/R | R | - | 恢復預設視圖 |

#### Web版使用者操作流程
1. **地圖瀏覽**: 頁面載入 → 查看整體進度 → 使用縮放和拖拽探索地圖
2. **關卡選擇**: 點擊關卡節點 → 預覽關卡資訊 → 決定開始學習或跳過
3. **進度規劃**: 查看推薦路徑 → 設定學習目標 → 規劃學習排程
4. **成就查看**: 瀏覽已獲得成就 → 查看未完成挑戰 → 設定新的成就目標

### Page_Learning_Path_Planner_W - 學習路徑規劃器 (Web專用)

#### 功能說明
- **頁面目的**: 允許用戶客製化學習路徑，規劃個人化學習計畫
- **進入條件**: 從地圖總覽點擊"規劃學習"或快捷鍵Ctrl+P
- **退出條件**: 保存學習計畫或取消規劃

#### Web專有功能
- **拖拽式規劃**: 可拖拽關卡重新排序學習順序
- **時間估算**: 自動計算完成規劃所需的學習時間
- **衝突檢測**: 自動檢測學習計畫中的前置條件衝突
- **多計畫管理**: 可建立多個學習計畫並比較選擇

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 計畫名稱 | String | 是 | "我的學習計畫" | 1-50字 | 頁面頂部輸入框 |
| 目標完成時間 | Date | 否 | - | 未來日期 | 日期選擇器 |
| 每日學習時間 | Number | 是 | 30 | 15-180分鐘 | 滑桿選擇器 |
| 選中關卡列表 | Array | 是 | [] | 關卡ID陣列 | 中央規劃區域 |
| 學習優先級 | Object | 是 | {} | 優先級設定 | 關卡屬性設定 |
| 預計完成時間 | Number | 是 | 0 | >=0天 | 自動計算顯示 |
| 衝突警告 | Array | 否 | [] | 衝突陣列 | 警告提示區域 |
| 計畫狀態 | String | 是 | "草稿" | 狀態枚舉 | 狀態指示器 |

### Page_Progress_Comparison_W - 進度對比分析頁面 (Web專用)

#### 功能說明
- **頁面目的**: 提供詳細的學習進度分析，包含歷史對比和預測
- **進入條件**: 從進度統計點擊"詳細分析"或快捷鍵Ctrl+A
- **退出條件**: 返回地圖或關閉分析頁面

#### Web專有分析功能
- **時間序列分析**: 學習進度的時間變化趨勢
- **能力雷達圖**: 不同技能領域的平衡發展分析
- **目標達成預測**: 基於當前進度預測目標完成時間
- **同儕比較**: 與相似程度學習者的進度對比

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 分析時間範圍 | DateRange | 是 | 最近3個月 | 有效範圍 | 時間選擇器 |
| 進度趨勢數據 | Array | 是 | [] | 時間序列 | 折線圖顯示 |
| 技能平衡分析 | Object | 是 | {} | 技能評分 | 雷達圖顯示 |
| 學習效率指標 | Number | 是 | 0 | 0-100 | 效率評分卡片 |
| 目標達成預測 | Object | 否 | null | 預測數據 | 預測圖表 |
| 同儕排名 | Number | 否 | - | 排名數字 | 排名顯示器 |
| 學習建議 | Array | 是 | [] | 建議陣列 | 建議列表 |

## 🌐 Web端技術特點

### 互動地圖技術
- **SVG地圖渲染**: 使用SVG繪製可縮放的學習地圖
- **Canvas效能優化**: 大量節點使用Canvas渲染提升效能
- **虛擬化滾動**: 大型地圖的效能最佳化
- **響應式縮放**: 根據螢幕大小自動調整地圖比例

### 資料視覺化
- **D3.js圖表**: 進度分析的豐富圖表支援
- **Chart.js整合**: 簡單統計圖表的快速實現
- **動畫過渡**: 流暢的數據變化動畫效果
- **互動式圖表**: 可點擊、縮放、篩選的圖表

### 本地存儲最佳化
- **IndexedDB**: 離線地圖數據和進度快取
- **LocalStorage**: 用戶偏好設定和視圖狀態
- **SessionStorage**: 臨時學習計畫和操作記錄
- **WebSQL備援**: 舊瀏覽器的資料存儲支援

## ⌨️ Web版快捷鍵系統

### 地圖導航快捷鍵
- `↑↓←→` - 地圖移動
- `+/-` - 地圖縮放
- `R` - 重置視圖
- `F11` - 全螢幕模式
- `Space` - 回到當前學習位置
- `Home` - 回到地圖起始位置
- `End` - 跳到最遠解鎖位置

### 關卡操作快捷鍵
- `Enter` - 開始選中的關卡
- `Tab` - 切換到下一個可用關卡
- `Shift + Tab` - 切換到上一個關卡
- `1-9` - 跳轉到對應階段
- `Ctrl + Click` - 多選關卡（規劃模式）

### 功能操作快捷鍵
- `Ctrl + F` - 搜索關卡
- `Ctrl + P` - 開啟學習規劃器  
- `Ctrl + A` - 開啟進度分析
- `Ctrl + S` - 保存當前計畫
- `F` - 開啟篩選選項
- `H` - 顯示/隱藏幫助信息

## 📊 Web版業務邏輯差異

### 進度管理增強
- **批量操作**: 可同時重置或重新挑戰多個關卡
- **智慧推薦**: 基於桌面用戶學習模式的個性化推薦
- **長期規劃**: 支援週期性和長期學習目標設定
- **詳細統計**: 比Mobile版更豐富的進度分析

### 社交功能擴展
- **學習小組**: 可建立或加入學習小組
- **進度分享**: 一鍵分享學習成就到社交媒體
- **競賽功能**: 參與線上學習競賽和挑戰
- **導師模式**: 高級用戶可指導新用戶

### 客製化功能
- **佈景主題**: 多種地圖主題和顏色方案
- **顯示偏好**: 可調整地圖元素的顯示方式
- **通知設定**: 靈活的學習提醒和成就通知
- **資料匯出**: 學習進度和統計的多格式匯出

## 🧪 Web版測試要點

### 地圖互動測試
- [ ] 地圖縮放流暢度測試 (0.5x-3x)
- [ ] 大型地圖拖拽效能測試
- [ ] 關卡點擊響應速度測試
- [ ] 多關卡選擇準確性測試
- [ ] 快捷鍵功能完整性測試

### 視覺化效能測試
- [ ] 大量數據點圖表渲染測試
- [ ] 動畫過渡流暢度測試
- [ ] 多圖表同時顯示效能測試
- [ ] 響應式佈局適配測試

### 資料同步測試  
- [ ] 離線模式功能完整性測試
- [ ] 多標籤頁資料同步測試
- [ ] 學習進度即時更新測試
- [ ] 成就解鎖通知準確性測試

### 瀏覽器相容性測試
- [ ] Chrome SVG渲染正確性
- [ ] Firefox Canvas效能表現
- [ ] Safari 動畫效果流暢度
- [ ] Edge 資料存儲功能正常

## 📝 Web端開發注意事項

### 前端技術選型
- 地圖渲染使用SVG + Canvas混合方案
- 狀態管理使用Redux/MobX處理複雜地圖狀態
- 動畫使用Framer Motion或React Spring
- 圖表使用D3.js + Chart.js組合方案

### 效能最佳化策略
- 地圖節點使用虛擬化渲染
- 大型數據集使用Web Workers處理
- 圖片資源使用WebP格式和懶載入
- 關卡數據使用增量載入策略

### 使用者體驗設計
- 提供地圖使用教學和引導
- 支援無障礙設備和鍵盤導航
- 提供多種視圖模式適應不同用戶
- 實現智慧的學習路徑推薦系統

---

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