T-03 Message Center

教師端班級概覽設計規格

畫面用途

1. 異常預警：即時推送觸發 Alert 預警的學生名單。

Message Center 🔗 ↗Broadcast 🔗 ↗

閱讀完整規格 ↓

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

訊息中心

🎨 Figma: Message Center 🔗

🎯 功能定位

異常預警： 即時推送觸發 Alert 預警的學生名單。
成果匯報： 檢定挑戰（Trophy Room）結束後的自動報告提醒。
進度同步： 自動排期（T-10）成功解鎖單元的系統確認。
高效處理： 提供「一鍵跳轉」，讓老師從訊息直接進入 T-21（學生詳情）或 T-42（檢定分析）。

🧱 畫面結構

訊息中心為獨立全屏頁面，集中展示所有系統通知與預警。

Header:
- Message Center — 頁面標題
- [Mark All Read] — 一鍵全部標記已讀（Ghost Button）
Filter Tabs:
- [All] [⚠️ Alerts] [⚙️ System] [📢 Notice] — 切換過濾訊息類型
- Alerts：來自 T-01 Teacher Dashboard 設定的 Alert 預警
- System：管理員（普通管理員 / 超級管理員）發出的通知
- Notice：教師發出的通知
Message List（按日期分組，Today / Yesterday / Older）:
- [!!] High Risk Alert — Mastery < 30% 或 14 天不活躍 → T-21
- [!] Warning Alert — Mastery < 50% 或 7 天不活躍 → T-21
- [🏆] Challenge Completed — 檢定完成報告（完成度/通過率/平均分） → T-42
- [📅] System — Session 解鎖通知 → T-10
- [⚙️] Admin Notice — 管理員公告 → Modal Popup
Sidebar（深色）:
- 🏠 Dashboard 📈 Progress ⚠️ Error Hub 🏆 Trophy Room 📊 Leaderboard
- 底部：班級快捷切換器

📦 區塊說明

#	區塊	元件	行為/交互	備註
1	過濾標籤	Tabs	切換 All / Alerts / System / Notice，過濾訊息列表	幫助老師快速定位特定類型訊息
2	訊息卡片 - 嚴重預警	Message Card ([!!])	顯示學生姓名、掌握度、缺席天數	點擊 [View >] 跳轉 T-21
3	訊息卡片 - 系統通知	Message Card ([⚙️])	顯示管理員發出的公告	Modal Popup
4	訊息卡片 - 教師通知	Message Card ([📢])	顯示教師發出的班級/個人通知	Modal Popup
5	全部已讀	Button (Ghost)	一鍵標記所有訊息為已讀	Ghost Button

📋 訊息類型對照表

類型圖標	類別名稱	觸發邏輯與顯示指標	跳轉目標
[!!]	嚴重預警	Mastery < 30% 或 14 天不活躍。顯示學生姓名、當前掌握度、缺席天數	T-21
[!]	警告	Mastery < 50% 或 7 天不活躍。顯示學生姓名、預警原因	T-21
[⚙️]	System（管理員發出）	管理員（普通 / 超級）透過 A-91 發出的系統公告	Modal
[📢]	Notice（教師發出）	教師透過 Broadcast 發出的班級或個人通知	Modal

🔁 交互流程圖

流程圖

正在載入流程圖…

flowchart TD A["T-03 Message Center"] --> B{"點擊訊息卡片"} B -->|"!! Alert"| C["T-21 Student Detail"] B -->|"⚙️ System"| D["Modal Popup"] B -->|"📢 Notice"| E["Modal Popup"] A --> F["點擊 Mark All as Read"] F --> G["所有訊息標記已讀"] A --> H{"選擇過濾 Tab"} H -->|"All"| I["顯示全部"] H -->|"⚠️ Alerts"| J["僅顯示預警"] H -->|"⚙️ System"| K["僅顯示管理員公告"] H -->|"📢 Notice"| L["僅顯示教師通知"]

⚙️ 狀態管理

狀態	觸發條件	畫面表現
正常	訊息列表載入	按時間分組顯示訊息卡片
未讀訊息	新訊息到達	卡片左側藍色細線，背景淡藍色。導航欄 🔔 顯示未讀數量
已讀訊息	點擊 [View >]	背景變純白，標題變灰
嚴重預警	[!!] 類型訊息	紅點閃爍或深紅色 Badge
空狀態	無訊息	顯示「No messages yet」
Mark All Read	點擊全部已讀	所有訊息瞬間變為已讀狀態

🔎 邏輯自我檢查

Badge 邏輯： 頂部導航欄 🔔 圖標顯示未讀訊息總數。Smart Filtering: [!!] 類型紅點可改為深紅色。
訊息溫度優化： 系統提示語應具備建議性，例如："Amy Zhang might be struggling with S 4-1. She hasn't practiced for 15 days. Time for a quick check-in?"
過濾有效性： Tab 過濾僅影響當前顯示，不改變未讀計數。

📢 T-03-A Broadcast

教師可透過 Broadcast 向班級或單個學生發送通知。包含兩個子頁面：廣播管理頁面與發送 Broadcast Modal。

🎨 Figma: Broadcast 🔗

📋 Broadcast 管理頁面

區域	說明
Broadcast Table	Type, Title, Publish Time, Target, Action [Edit] [Delete]

#	區塊	元件	行為/交互	備註
1	Action	[Edit]	僅未發送的通知可編輯	已發送通知 Edit 灰階禁用
2	Action	[Delete]	所有通知皆可刪除	需二次確認

管理規則： 已發送通知無法編輯但可刪除；尚未發送的通知可編輯和刪除。

設置項	說明
Type	目前僅 Notice
Target	班級 / 單個學生
Publish Time	可設定發送時間，或選擇「立刻發送」

#	區塊	元件	行為/交互	備註
1	Type	Dropdown	Notice	僅一個選項
2	Target	Radio Group	班級 or 單個學生	學生限於教師管轄班級內的學生
3	Publish Time	DateTime Picker	設定發送時間 or 立刻發送	—

⚠️ 限制： 教師僅可向自己管轄班級內的學生發送通知，非自己的學生無法選擇。

🔁 Broadcast 交互流程圖

流程圖

正在載入流程圖…

flowchart TD A["進入 Broadcast 管理頁面"] --> B["瀏覽通知列表"] B --> C{"已發送？"} C -->|"是"| D["可刪除，不可編輯"] C -->|"否"| E["可編輯 + 可刪除"] B --> F["點擊 + New Broadcast"] F --> G{"選擇 Target"} G -->|"班級"| H["選擇班級"] G -->|"學生"| I["搜尋並選擇學生"] H --> J["填寫內容 + 設定時間"] I --> J J --> M{"立刻發送？"} M -->|"是"| N["即時推送"] M -->|"否"| O["排程發送"] N --> P["返回列表"] O --> P

T-03 Message Center ​

🎯 功能定位 ​

🧱 畫面結構 ​

📦 區塊說明 ​

📋 訊息類型對照表 ​

🔁 交互流程圖 ​

⚙️ 狀態管理 ​

🔎 邏輯自我檢查 ​

📢 T-03-A Broadcast ​

📋 Broadcast 管理頁面 ​

📋 發送 Broadcast Modal ​

🔁 Broadcast 交互流程圖 ​

關聯畫面