T-01 Teacher Dashboard

教師端班級概覽設計規格

畫面用途

老師端班級學習分析首頁，用於快速掌握整個班級的學習活躍度與學習成果。

Teacher Dashboard 🔗 ↗

閱讀完整規格 ↓

內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限

🎨 Figma: Teacher Dashboard 🔗

T-02 Class Switch Panel 為 T-01 Dashboard 的下拉組件，內嵌於此 Figma Frame 中，無獨立 Frame。

🎯 功能定位

老師端班級學習分析首頁，用於快速掌握整個班級的學習活躍度與學習成果。

此畫面提供教師以下核心能力：

• KPI 總覽： Active Rate / Session Mastery / Questions Practiced / 單字纍積量 四大指標。
• 詞彙成長追蹤： 三層曲線圖（Curriculum / Review / Mastered），可切換 total / month / week 時間維度。
• Session 單字結構： 當前與下個 Session 的 Words / Vocab / Sents 比例對比，hover 顯示具體數量。
• Session Mastery 趨勢： TTL / Discovery Hub / Speak Studio 三條曲線，預設定位到有數據的最後部分。
• Trophy 摘要： pending / pass / fail / progress 四項指標，支援 total / month / latest 時間選擇。
• Questions Practiced： Total / Discovery Hub / Speak Studio 三線 + Curriculum 參考線，DH 藍色 / SS 粉紅色。
• Cognitive Distribution： 五階段分佈（Not Started → Mastered），每 Session 的全班比例堆疊。
• Alert 預警： 當 Active Rate / Mastery / 不活躍學生數等指標達到閾值時觸發預警。

🧱 畫面結構

Web 佈局：12-col grid，1280px max-width，深色 Sidebar

• Header:

  • "Hello, Sandra!" — 問候語 + 教師名稱
  • [Class 3A ▾] — T-02 班級切換 Dropdown
  • [🔔] [👤] → T-03 / T-04

• Sidebar (深色，圖標式):

  • Home User Clock Calendar Chart Trophy

• Main Content — 由上至下:

KPI Cards × 4（頂部橫排）：

• Active Rate: 88% — 活躍學生比例
• Session Mastery: 72% — 班級平均掌握度
• Questions Practiced: 1.2k — 累計練習次數
• 單字纍積量: 450 — 全班累積詞彙

單字纍積量 (Vocabulary Accumulation) — 三層曲線圖：

• 三條曲線（由上到下）：Curriculum（淺色）→ Review（中間色）→ Mastered（深色）
• x 軸時間切換：total（Sep/Oct/Nov/Dec/Jan/Feb/Mar）/ month（30/25/20/15/10/5/today）/ week（Tue/Wed/Thu/Fri/Sat/Sun/Mon）

當前 Session vs 下個 Session 單字結構 — 堆疊柱狀圖：

• 兩個柱子並排：Current Session / Next Session
• 每根柱子按 Words / Vocab / Sents 比例堆疊
• hover 顯示各類別的具體數量

Session Mastery — 三線折線圖：

• 三條線：TTL（全部） / DH（Discovery Hub） / SS（Speak Studio）
• 預設進入後定位到「後面有數據的靠後部分」（自動捲動到最新有數據的 Session）
• y 軸：Mastery %

Trophy 摘要：

• 四個指標卡片：Pending（未做）/ Pass（合格）/ Fail（不合格）/ Progress（進行中）
• 時間選擇器：[total ▾] / [month ▾] / [latest ▾]
• 點擊任一卡片顯示對應比例；hover 顯示對應學生名單

Questions Practiced — 三線 + 參考線折線圖：

• 右上選項：[total ▾] / [discovery ▾] / [speak ▾]
• 主線條（下方填色）：total / discovery / speak
• 參考線（無下方填色）：curriculum
• 主色規則：Discovery Hub → 藍色 / Speak Studio → 粉紅色
• x 軸固定顯示過去 30 天日期

Cognitive Distribution — 堆疊柱狀圖：

• 五階段：⚪ Not Started / 🌱 Emerging / 🌿 Developing / 🌳 Proficient / 🏆 Mastered
• 每 Session 一根柱子，顯示全班學生在各階段的百分比分佈

📦 區塊說明

#	區塊	元件	行為/交互	備註
1	KPI Cards	Card × 4	唯讀顯示 Active Rate / Session Mastery / Questions Practiced / 單字纍積量	數據每 24h 刷新
2	單字纍積量	Multi-line Chart	三層曲線 + x 軸切換 total/month/week	Curriculum：課堂實際總量 / Review：總單字 - Box0 / Mastered：Box4+
3	當前 vs 下個 Session 單字	Stacked Bar Chart × 2	Words / Vocab / Sents 堆疊，hover 顯示具體數量	Current Session vs Next Session 並排
4	Session Mastery	Multi-line Chart	TTL / DH / SS 三條線，預設定位到最後有數據處	Hover 顯示詳細 Tooltip
5	Trophy 摘要	Stat Cards × 4 + Time Selector	pending/pass/fail/progress 四項，total/month/latest 切換	點擊顯示比例，hover 顯示學生
6	Questions Practiced	Multi-line + Reference Line Chart	total/discovery/speak 填色線 + curriculum 參考線	DH=藍色 / SS=粉紅 / x 軸固定 30 天
7	Cognitive Distribution	Stacked Bar Chart	5 階段分佈，每 Session 全班比例	按 Box 定義分組

⚙️ 數據定義

Active Rate

定義： 一周 2 天使用 app，至少進行 1 次練習。（可配置參數見 09-規則配置.md §9 Active 行為定義）

Session Mastery

三條線對應三種範圍：

• TTL： 全部 Session 的整體 Mastery
• DH： Discovery Hub（聽、讀練習）的 Mastery
• SS： Speak Studio（口說練習）的 Mastery

預設進入後定位到「後面有數據的靠後部分」。

單字纍積量

三層曲線，由淺到深：

層級	定義	視覺
Curriculum	課堂實際的總量	淺色，曲線永遠最高
Review	用 app 練到的總量 = 總單字 - Box0	中間色，曲線永遠在中間
Mastered	精熟的總量 = Box4+	深色，曲線永遠最低

x 軸選項：

• total：Sep / Oct / Nov / Dec / Jan / Feb / Mar
• month：30 / 25 / 20 / 15 / 10 / 5 / today
• week：Tue / Wed / Thu / Fri / Sat / Sun / Mon

當前 Session 與下個 Session 單字結構

按 Words / Vocab / Sents 三類比例劃分。hover 時顯示具體數量。

Trophy 情況

指標	定義
Pending	尚未進行的 Challenge
Pass	合格的 Challenge
Fail	不合格的 Challenge
Progress	進行中的 Challenge

時間選擇：

• total — 全部歷史
• month — 最近 1 個月
• latest — 最新一次 Challenge

點擊顯示對應比例；hover 顯示對應學生名單。

Questions Practiced

線條	說明	視覺
total	全部練習量	主線，下方填色
discovery	Discovery Hub 練習量	主線，下方填色，藍色
speak	Speak Studio 練習量	主線，下方填色，粉紅色
curriculum	課程參考線	虛線，無下方填色

x 軸固定顯示過去 30 天日期。

Cognitive Distribution

Box	階段	符號
B0	Not Started	⚪
B1-2	Emerging	🌱
B3-4	Developing	🌿
B5-6	Proficient	🌳
B7	Mastered	🏆

🔁 交互流程

流程圖

正在載入流程圖…

🚨 Alert 條件

Alert 總表

#	條件	等級	粒度	說明
1	Active Rate < 60%	⚠️ Warning	班級級	連續 2 週 Active Rate 低於 60% 觸發。Active 定義：一周 2 天使用 app，至少 1 次練習。伺服器端參數： alert_1_active_rate_threshold / active_rate_window_days，見 09-規則配置.md §7
2	完全不活躍學生 > 30%	🔴 Critical	班級級	當週完全無任何練習記錄的學生比例超過 30%。此為 Alert 1 的升級——不是練不夠，是完全不練。Alert 1 + Alert 2 同時觸發時，僅顯示 Alert 2。伺服器端參數： alert_2_inactive_threshold，見 09-規則配置.md §7
3	Session Mastery < 30%	🔴 Critical	班級級	任一 Session 全班平均 Mastery 低於 30%。若 < 15%，升級為「緊急」並推送給 Admin。伺服器端參數： alert_3_mastery_threshold，見 09-規則配置.md §7
4	Trophy Fail Rate > 50%	🔴 Critical	班級級	最近一次 Challenge 超過半數不合格。伺服器端參數： alert_4_trophy_fail_threshold，見 09-規則配置.md §7
5	連續 14 天不活躍	🔴 Critical	學生級	個別學生連續 14 天無任何練習記錄。自動推送通知建議（學生 / 家長 / 老師），需立即聯繫。伺服器端參數： alert_5_consecutive_inactive_days，見 09-規則配置.md §7

Alert 層級關係

Alert 1 (⚠️ Warning) → Active Rate 下降
       │
       └── 升級條件：完全不活躍學生 > 30%
              │
              └── Alert 2 (🔴 Critical) → 覆蓋 Alert 1

Alert 2 和 Alert 1 不會同時顯示。
當 Alert 2 觸發時，以 Alert 2（Critical）替代 Alert 1（Warning）。

Alert 5（學生級）獨立於 Alert 1/2（班級級），兩者並行。

以上 Alert 1~5 閾值（60%、30%、30%、50%、14 天）均為可配置參數，由 Super Admin 在 09-規則配置.md §7 中調整，修改後即時生效。

觸發後建議動作

Alert	建議動作
1	查看不活躍學生名單，課堂提醒或聯繫家長
2	🔴 立即聯繫不活躍學生家長，檢查是否 App 技術問題或學習意願下降
3	檢查該 Session 的教學安排，是否需要調整練習策略或增加複習
4	分析失敗學生的共同弱項，安排針對性補強
5	個別聯繫該學生 / 家長，了解未使用 App 的原因

⚙️ 狀態管理

狀態	觸發條件	畫面表現
正常	數據載入完成	顯示完整 Dashboard
加載中	頁面首次載入或時間維度切換	Skeleton Loading
空狀態	無學生數據或選擇範圍無數據	引導提示
錯誤	API 請求失敗	錯誤提示 + Retry
Alert 觸發	滿足 Alert 條件	對應區塊標記 ⚠️ 或 🔴，點擊跳轉詳情

🔎 邏輯自我檢查

• Active Rate 定義統一： 一周 2 天使用 app，至少 1 次練習。同一公式用於 T-01 / T-21 / A-01。
• 單字纍積量層級關係： Curriculum ≥ Review ≥ Mastered 恆成立（Mastered = Box4+ ⊆ Review = Box1+ ⊆ Curriculum = 全部）。
• Session Mastery 定位： 預設進入後自動捲動到最後一個有數據的 Session 位置。
• Questions Practiced 顏色： Discovery Hub 藍色，Speak Studio 粉紅色。curriculum 參考線無填色。
• Cognitive Distribution 分母： 全班總人數（非活躍學生數）。
• Trophy hover： 四個指標卡片 hover 時即時查詢對應學生名單。

---