A-20 Class Management
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
🎨 Figma: node-722-7676 (A-20/A-21/A-23 共用) 🔗
🎯 功能定位
使用者： Admin (管轄本校區) / Super Admin (管理所有校區)
班級管理的核心入口。在此管理員可快速瀏覽所有班級、指派老師，並監控每個班級所屬的 Level（EK1-8, ES1-4, NH1-4）。
在 Nihao Academy 中，班級是連接「學生」、「老師」與「課程內容」的橋樑。本頁面負責定義班級的層級歸屬（校區 > 學校），並管理班級內的人員構成。
🧱 畫面結構
| 區域 | 說明 |
|---|---|
| Header | Nihao Admin Dashboard > Class Management, [👤] |
| Sidebar | 深色側邊欄導航 |
| Toolbar | [+ Add Class] 按鈕 |
| Filter Bar | [🔍 Search by Class Name or ID...], [Zone: All ▾], [School: All ▾] |
| Class Table | Class ID, Class Name, Zone, School, Students, Actions [E] [D] |
| Pagination | < Prev, 1, 2, 3... Next > |
📦 區塊說明
| 區塊 | 元件 | 目的 | 行為 | 狀態 | 備註 |
|---|---|---|---|---|---|
| Header | Add Class Button | 創建新班級 | 點擊跳轉至 A-21 班級編輯頁 | Normal | 需定義所屬校區與學校 |
| Filter | Search & Dropdowns | 快速定位班級 | 支援按名稱搜尋、校區/學校篩選 | Active | 聯動篩選列表內容 |
| Data Table | Class List | 班級清單概覽 | 顯示 ID、名稱、歸屬地與人數 | Normal | 點擊整行進入 A-22 成員管理 |
| Actions | [E] Edit / [D] Delete | 班級維護 | Edit 修改資訊 / Delete 移除 | Normal | 刪除前需確認班級內已無學生 |
| Metrics | Students Count | 監控規模 | 顯示該班級目前關聯的學生總數 | Static | 點擊數字可快速查看學生名單 |
🔁 交互流程圖
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| 正常 | 數據載入完成 | 表格顯示班級列表 |
| 加載中 | API 請求中 | Skeleton 佔位 |
| 空狀態 | 該學校無班級 | 「No classes found. Click 'Add Class' to start.」 |
| 層級篩選 | Zone 選定後 | School 下拉自動過濾 |
| Delete 禁用 | 班級內有學生 | [Delete] 按鈕禁用或提示錯誤 |
🔎 邏輯自我檢查
- 數據連動性： A-12 批量導入時填寫的 class_ids 必須能在此頁面正確呈現學生數量的增長。
- 權限檢查： 普通管理員僅能看到所屬 School 的班級，不可跨校查看。
- 唯一性： Class ID 為系統內部唯一標識，不可重複。
- 刪除限制： 若班級內仍有關聯學生，[Delete] 按鈕應為禁用。