12 KiB

Raw Blame History

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

📋 功能概述

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

主要功能

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

Web端特色功能

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

適用場景

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

與其他功能的關聯

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

💻 涉及的Web頁面

主要頁面

Page_Map_Overview_W - 學習地圖總覽頁面 (Web版)
Page_Map_Stage_Details_W - 階段詳情與規劃頁面 (Web版)
Page_Map_Level_Details_W - 關卡詳情頁面 (Web版)
Page_Map_Progress_Analytics_W - 進度分析儀表板 (Web版)
Page_Achievement_Gallery_W - 成就展示廳 (Web版)

Web專用頁面

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

輔助畫面

Modal_Level_Preview_W - 關卡預覽模態視窗
Modal_Achievement_Details_W - 成就詳情模態視窗
Panel_Quick_Progress_W - 快速進度面板
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版使用者操作流程

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

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接口規格