A-20 Class Management
- P1新增 +1移除 −0
- P2新增 +1移除 −0
第一版式樣草案 · Markdown 來源：04-App畫面-管理員.mdGitHub 版本尚未推送；目前以本機手冊為準
取圖紀錄： QL APP，2026-10-18，版本
2410774734466577464；節點 722:7676 。學生 2x／Web 1x。圖片是目前設計稿，文字為 APlus 首版目標規格。
🎨 Figma: node-722-7676 (A-20/A-21/A-23 共用) 🔗
🎯 功能定位
使用者： Admin (管轄本校區) / Super Admin (管理所有校區)
班級管理的核心入口。在此管理員可快速瀏覽所有班級、指派老師，並監控每個班級所屬的 Category 與一個或多個 Level（依耶加正式課程表配置）。
在耶加 APlus 中，班級是連接「學生」、「老師」與「課程內容」的橋樑。本頁面負責定義班級的層級歸屬（校區 > 學校），並管理班級內的人員構成。
🧱 畫面結構
| 區域 | 說明 |
|---|---|
| Header | APlus Admin Dashboard > Class Management, [👤] |
| Sidebar | 深色側邊欄導航 |
| Toolbar | [+ Add Class] 按鈕 |
| Filter Bar | [🔍 Search by Class Name or ID...]、[Zone: All ▾]、[School: All ▾]、[Status: Active ▾] |
| Class Table | Class ID, Class Name, Zone, School, Status, 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] 按鈕應為禁用。
接送管理：A-24 Pickup Group Management；規則見 接送與點名規則。