T-50 Leaderboard
畫面用途
T-50 Leaderboard 為老師端的 學習積分監控中心。此頁面僅供教師存取，用於觀察學生在不同 Level 下的積分表現與排名競爭力。透過「全校排名」與「班級排名」的切換，老師可以了解班級在整體中的水平位置。
閱讀完整規格 ↓內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
School / Class
🎨 Figma: Leaderboard 🔗
🎯 功能定位
T-50 Leaderboard 為老師端的 學習積分監控中心。此頁面僅供教師存取，用於觀察學生在不同 Level 下的積分表現與排名競爭力。透過「全校排名」與「班級排名」的切換，老師可以了解班級在整體中的水平位置。
🧱 畫面結構
Web 佈局：12-col grid，1280px max-width，深色 Sidebar
Header:
Sidebar (深色):
🏠 Dashboard📈 Progress⚠️ Error Hub🏆 Trophy Room📊 Leaderboard
Main Content — Leaderboard:
- Filters:
[School Ranking] [Class Ranking]— Segmented Control[Exp (Effort)] [Mastery (Quality)]— Toggle[Level 3 ▾][Class: Grade 2-A ▾]— Dropdowns
- Ranking Table — DataTable:
- Columns:
Rank | Student | Class | Progress | Mastery | Points [!]圖標：積分極高但 Mastery < 50% 自動標註（虛假學習預警）- 點擊表頭可二次排序；點擊學生行 → T-21
- Columns:
- 權限隔離：School Ranking 中非管轄學生不可點擊；無 My Ranking 高亮
- Filters:
📦 區塊說明
| # | 區塊 | 元件 | 目的 | 行為 | 狀態 | 備註 |
|---|---|---|---|---|---|---|
| 1 | Ranking Scope | Segmented Control | 切換比較規模 | 選擇 School（跨班對比）或 Class（班內對比） | Active | 跨班對比有助於了解班級水平位置 |
| 2 | Metric View | Toggle Tab | 定義排行榜維度 | 切換 Points（積分排序）或 Mastery（掌握度排序） | Crucial | 掌握度排行根據認知權重公式計算 |
| 3 | Level Filter | Dropdown | 鎖定對比基準 | 選擇 1-16 Level 其中之一 | Required | 不同 Level 的掌握度不可橫向直接比對 |
| 4 | Ranking Table | DataTable | 數據核心展示 | 顯示名次、進度、掌握度與積分。點擊表頭可二次排序 | Normal | — |
| 5 | Mastery Col | Data + Visual | 質量指標 | 展示該 Level 的掌握百分比（動態分母） | Dynamic | 使用加權公式計算 |
| 6 | Progress Col | Progress Bar | 輔助參考 | 展示當前 Session 開放進度 | Static | 用於判斷「高進度、低掌握」現象 |
| 7 | Alert [!] | Icon | 虛假學習預警 | 若積分極高但掌握度低於 50% 則自動標註 | Warning | 提示老師該生可能在「盲目刷題」 |
📊 排行榜排序邏輯
A. 經驗值排行榜（Points Leaderboard）
- 排序依據： 學生在該 Level 中累積的所有經驗值（DH + SS + TR）。
- 教學意義： 表彰學生的 勤奮度。適合激勵中後段學生。
B. 掌握度排行榜（Mastery Leaderboard）
- 排序依據： 基於「已開放 Session」的單字熟練度加權。
- 計算公式： (各個 Box 的數量 × 係數) / (Opened Sessions 總單字數 × 0.9) × 100%
- 教學意義： 表彰學生的 學習效率與吸收率。適合發掘潛在的領先學員。
係數 0.9 設置在 config/env 中，Mastery 上限 100%。
[設計稿參考]
🔁 交互流程圖
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| Normal | 數據載入 | 根據權限加載對應班級與 Level 排名 |
| School Mode | 選擇 School Ranking | 表格顯示 Class 欄位 |
| Class Mode | 選擇 Class Ranking | 表格欄位精簡 |
| Empty State | 無積分數據 | 顯示「No data in this Level yet.」 |
| Access Limited | 全校排名中非管轄班級學生 | 顯示「匿名」或僅名稱與班級，不可點擊進入詳情 |
🔎 邏輯自我檢查
- 權限隔離： 此頁面完全剔除「當前用戶高亮（My Ranking）」邏輯，因為使用者為老師而非學生。
- 數據關聯： 積分組成來源（DH, SS, TR）與錯誤分析模組（T-30 系列）一致，確保數據在全站具有單一事實來源。
- 交互導向性： 加入了跳轉 T-21 的 Action，使排行榜不只是靜態列表，而是老師進行學生個案分析的入口。
- Level 邏輯： 由於一個班級內可能存在不同 Level 的學生，Level Filter 對老師至關重要，已確保其為最高層級的篩選條件。
- 非管轄班級權限： 全校排名中，非管轄班級學生僅顯示名稱與班級，無法點擊進入 T-21 詳情。