A-01 Admin Dashboard
畫面用途
A-01 Admin Dashboard 為 Nihao Academy 管理員端（Admin Portal）的首頁監控畫面，用於提供系統運行狀態的全局監控（System Overview）。
閱讀完整規格 ↓內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
🎨 Figma: node-698-1189 🔗
🎯 功能定位
A-01 Admin Dashboard 為 Nihao Academy 管理員端（Admin Portal）的首頁監控畫面，用於提供系統運行狀態的全局監控（System Overview）。
使用者： Admin / Super Admin
此頁面提供管理員以下核心資訊：
- KPI 總覽： Total Users / Active Rate / Questions Practiced / Mastery Rate 四大指標，均附帶與 1 個月前的對比。
- Class Analytics 三層 Drill-down： 從 All Category → 單一 Category → 單一 Level → 單一 Class，逐步深入分析。
- Cognitive Distribution（最深層）： 在單一 Level 視圖下顯示所有班級平均的 5 階段分佈。
🧱 畫面結構
Web 佈局：12-col grid，1280px max-width，深色 Sidebar
Header:
Sidebar (深色):
DashboardUsersClassesCoursesRulesAnalytics
Global Filter Bar:
Period: [4 Weeks ▾] /Zone: [All Zones ▾]- 預設值：Period 4 Weeks，變更後全頁數據重讀
Main Content:
KPI Cards × 4（頂部橫排）：
Total Users: 12,450— 當前所有用戶，vs 1 個月前 ↑/↓ 百分比Active Rate: 78%— 一周 2 天使用 app，至少 1 次練習（定義同 T-01，可配置參數見 09-規則配置.md §9），vs 1 個月前Questions Practiced: 156K— 總練習數量，vs 1 個月前Mastery Rate: 68%— 整體 Mastery，vs 1 個月前
Class Analytics — 三層 Drill-down Chart：
L1：All Category 視圖
- Filter: [ All Category ] | [ - ]
- X 軸： Category 種類（EK / ES / NH 等）
- Y 軸： Mastery / Active Rate / Questions Practiced（最近 4 週）
- 圖表： 每 Category 顯示 4 根柱子（W1 / W2 / W3 / W4），三指標可切換
- Y 軸輔助線： 顯示所有 X 軸數據的平均值
L2：單一 Category 視圖
- Filter: [ ES ] | [ All Level ]（預設）
- X 軸： 該 Category 的各 Level（如 ES-Level 1 / ES-Level 2 / ES-Level 3）
- Y 軸： Mastery / Active Rate / Questions Practiced（最近 4 週）
- 圖表： 每 Level 顯示 4 根柱子（W1-W4）
- Y 軸輔助線： 顯示所有 X 軸數據的平均值
L3：單一 Level 視圖
- Filter: [ ES ] | [ ES-Level 2 ]
- X 軸： 該 Level 的所有 Class（可橫向滑動）
- Y 軸： Mastery / Active Rate / Questions Practiced（最近 4 週）
- 圖表： 每 Class 顯示 4 根柱子（W1-W4）
- Y 軸輔助線： 顯示所有 X 軸數據的平均值
L3 附加：Cognitive Distribution
- 僅在 L3（單一 Category + 單一 Level）時顯示
- 五階段堆疊柱狀圖：⚪ Not Started / 🌱 Emerging / 🌿 Developing / 🌳 Proficient / 🏆 Mastered
- 數據為該 Level 所有班級的平均分佈
📦 區塊說明
| # | 區塊 | 元件 | 行為/交互 | 備註 |
|---|---|---|---|---|
| 1 | Global Filter Bar | Period / Zone Dropdowns | 變更後全局數據重讀 | 預設 4 Weeks |
| 2 | KPI Cards | Card × 4 | 顯示 Total Users / Active Rate / Questions Practiced / Mastery Rate，附 vs 1 個月前對比箭頭 | 即時數據 |
| 3 | Class Analytics Chart | Grouped Bar Chart + 3 指標切換 | 三層 Drill-down（All Category → Category → Level → Class） | 每層 4 根柱子（W1-W4），Y 軸平均值參考線 |
| 4 | 指標切換 | Segmented Control | 切換 Mastery / Active Rate / Questions Practiced 視角 | 圖表 Y 軸連動變更 |
| 5 | Cognitive Distribution | Stacked Bar Chart | L3 時顯示，該 Level 所有 Class 平均的 5 階段分佈 | 階段定義同 T-01 |
⚙️ 數據定義
Active Rate
定義： 一周 2 天使用 app，至少進行 1 次練習。與 T-01 定義完全一致。可配置參數（天數閾值、計算窗口）見 09-規則配置.md §9 Active 行為定義。
KPI 對比規則
| KPI | 對比基準 | 顯示 |
|---|---|---|
| Total Users | vs 1 個月前 | ↑/↓ 百分比 + 箭頭 |
| Active Rate | vs 1 個月前 | ↑/↓ 百分點 + 箭頭 |
| Questions Practiced | vs 1 個月前 | ↑/↓ 百分比 + 箭頭 |
| Mastery Rate | vs 1 個月前 | ↑/↓ 百分點 + 箭頭 |
Class Analytics 指標定義
三項可切換指標：
| 指標 | 定義 | 對應 T-01/T-21 概念 |
|---|---|---|
| Mastery | 班級/Level/Category 平均 Mastery % | 同 Session Mastery |
| Active Rate | 一周 2 天使用 app，至少 1 次練習的比例。Zone/Class 級別警告閾值見 09-規則配置.md §7 | 同 Active Rate |
| Questions Practiced | 總練習數量 | 同 Questions Practiced |
Cognitive Distribution（L3 限定）
五階段定義與 T-01 完全一致：
| Box | 階段 | 符號 |
|---|---|---|
| B0 | Not Started | ⚪ |
| B1-2 | Emerging | 🌱 |
| B3-4 | Developing | 🌿 |
| B5-6 | Proficient | 🌳 |
| B7 | Mastered | 🏆 |
🔁 交互流程
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| 正常 | 所有 API 正常響應 | 卡片顯示即時數據，圖表完整渲染 |
| 加載中 | 數據請求或 Filter 變更 | 卡片與圖表顯示 Skeleton / Spinner |
| 空狀態 | 選擇的 Zone / Category / Level 無數據 | 「No data available for the selected filter」 |
| 錯誤 | API 請求失敗 | 錯誤提示 + Retry |
🔎 邏輯自我檢查
- KPI 對比基準統一： 所有 KPI 的對比基準均為「1 個月前」，確保一致性。
- Active Rate 跨平台一致： A-01 / T-01 / T-21 使用相同的 Active Rate 定義。閾值與窗口由伺服器端統一管理（09-規則配置.md §7、§9），各畫面僅讀取，不獨立設置。
- Class Analytics Drill-down 連動： 從 L1 → L2 → L3，每一層的 X 軸和數據自動切換，Y 軸平均值參考線同步更新。
- Cognitive Distribution 僅 L3 顯示： 最深層（單一 Level）才顯示班級平均分佈，L1/L2 不顯示。
- L3 橫向滑動： 當班級數量超過可視範圍時，支援橫向滑動。
- 無數據處理： 若選擇範圍無數據，顯示空狀態提示而非空白圖表。