A-22 Class Student List
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
班級學生名單
🎨 Figma: node-3807-6615 🔗
🎯 功能定位
使用者： Admin / Super Admin
A-22 用於管理特定班級內的學生成員清單。管理員可在此查看目前班級的組成狀況，並透過彈窗 (Modal) 從學校學生庫中批次勾選學生「加入」本班，或將特定學生從本班「移除」。此操作僅改變學生的班級歸屬關係，不會影響 A-10 中的帳號原始數據。
🧱 畫面結構
| 區域 | 說明 |
|---|---|
| Header | Nihao Admin Dashboard > Class Management > [Class Name] > Students, [👤] |
| Summary | Class Info, Total Students, School, Zone |
| Toolbar | [+ Add Students] 按鈕, [🔍 Search Students in this class...] |
| Student Table | ID, Student Name, Gender, Joined Date, Actions [Remove] |
| Modal (Add Students) | 搜尋/過濾 → 勾選學生 → [🛡️ Teacher Assignment Sync] 選項 → [Add Selected] |
📦 區塊說明
| 區塊 | 元件 | 目的 | 行為 | 狀態 | 備註 |
|---|---|---|---|---|---|
| Header | Back Navigation | 返回上級 | 點擊回到 A-21 或 A-20 | Normal | 保持導航路徑清晰 |
| Summary | Class Stats | 狀態確認 | 顯示總人數、校區與學校 | 靜態 | 確保管理員未進錯班級 |
| Action | [+ Add Students] Button | 成員擴充 | 點擊開啟「全校學生選取」彈窗 | Normal | 提供多位學生添加，含擔當老師變更選項 |
| Search | Filter Input | 班內搜尋 | 即時過濾當前列表 | Focus | 支援 ID 或姓名關鍵字 |
| Data Table | Student List | 成員清單 | 展示學生 ID、姓名、加入時間 | Normal | 依加入時間由新到舊排序 |
| Actions | Remove Button | 成員移除 | 點擊觸發二次確認彈窗 | Danger | 僅移除班級關聯，不刪除帳號 |
| Modal List | Selection List | 跨班分配 | 支援多選學生進行批次加入 | Checkbox | 僅顯示同校區/學校的學生 |
Modal: Add Students to Class 畫面設計
- Select Students from [School Name]
- [🔍 Search by Name/Email...], [Gender: All ▾], [Status: No Class Only ☐]
- 勾選列表：Display Name, Name (Real), Gender, Current Classes, Formal Grade
- [🛡️ Teacher Assignment Sync] 勾選框：將此班級的老師設定為所選學生的「擔當老師」
- Selected: N Students, [Cancel], [Add Selected]
🔁 交互流程圖
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| 正常 | 班級有學生 | 完整顯示學生列表 |
| 空狀態 | 班級目前無學生 | 「This class has no students. Click '+' to add from school database.」 |
| 移除中 | 點擊 [Remove] 後 | 行項目變半透明，顯示 Removing... |
| 人數上限 | 班級達人數上限 | [+ Add] 按鈕禁用並提示原因 |
| 彈窗加載中 | Modal 打開 | 學生列表分頁加載或無限滾動 |
🔎 邏輯自我檢查
- 多班級支持： 學生支持多選班級。A-22 的設計確保了「加入」操作不會強制退掉學生的其他班級，而是「增量」關聯。
- 數據流向： 移除操作後，該學生在 A-10 (User Management) 的 class_ids 欄位應自動同步減少一個 ID。
- 操作安全性： Remove 是高頻操作，必須具備二次確認。
- 性能： 彈窗中的學生列表應具備分頁或無限滾動，應對上千人的學校規模。
- 範疇限制： 彈窗內學生列表根據班級所在 School_ID 與 Zone_ID 預過濾，普通管理員不可跨校區拉取學生。
📊 Class Analytics（= T-01 Teacher Dashboard）
從 A-22 頁面進入 Class Analytics，顯示該班級的完整 Dashboard，內容與教師端 T-01 Teacher Dashboard 完全一致。
🎨 Figma: node-3828-12169 🔗
| 權限 | 範圍 |
|---|---|
| Admin | 可查看管轄 Zone 內班級的 Class Analytics |
| Super Admin | 可查看全部班級的 Class Analytics |