A-22 Class Student List
- P1新增 +1移除 −0
第一版式樣草案 · Markdown 來源：04-App畫面-管理員.mdGitHub 版本尚未推送；目前以本機手冊為準
取圖紀錄： QL APP，2026-10-18，版本
2410774734466577464；節點 3807:6615、3828:12169 。學生 2x／Web 1x。圖片是目前設計稿，文字為 APlus 首版目標規格。 設計稿待更新（F-33、F-38）： 圖中舊品牌、華語內容或待核對項目照實保留；請以本節英語文字規格為目標。設計修改後重新取圖。
班級學生名單
🎨 Figma: node-3807-6615 🔗
⚠️ Figma 待同步： 現有截圖僅顯示垃圾桶。目標設計需新增 [👁 View Analysis]，並將 Remove from Class 收進 [⋯] 選單。
🎯 功能定位
使用者： Admin / Super Admin
A-22 用於管理特定班級內的學生成員清單。管理員可在此查看目前班級的組成狀況，並透過彈窗 (Modal) 從學校學生庫中批次勾選學生「加入」本班，或將特定學生從本班「移除」。此操作僅改變學生的班級歸屬關係，不會影響 A-10 中的帳號原始數據。
🧱 畫面結構
| 區域 | 說明 |
|---|---|
| Header | APlus Admin Dashboard > Class Management > [Class Name] > Students, [👤] |
| Summary | Class Info, Total Students, School, Zone |
| Toolbar | [+ Add Students] 按鈕, [🔍 Search Students in this class...] |
| Student Table | School Student ID, Student Name, Gender, Joined Date, Actions [👁 View Analysis] [⋯] |
| 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 | 支援 School Student ID 或姓名關鍵字 |
| Data Table | Student List | 成員清單 | 展示 School Student ID、姓名、加入時間 | Normal | 依加入時間由新到舊排序 |
| Actions | [👁 View Analysis] | 個人分析 | 進入 A-11 Learning Analytics（= T-21），帶入 Student、Class 與返回路徑 | Normal | Admin 限管轄 Zone；Super Admin 可查看全部 |
| Actions | [⋯] → Remove from Class | 成員移除 | 展開選單後再點 Remove，觸發二次確認彈窗 | Danger | 僅解除班級關聯，不停用、不刪除帳號 |
| Modal List | Selection List | 跨班分配 | 支援多選學生進行批次加入 | Checkbox | 僅顯示同校區/學校的學生 |
View Analysis 導航規格
- [👁] 的可見標籤為
View Analysis；窄螢幕可只顯示圖標，但必須提供相同的aria-label與 Tooltip。 - 跳轉目標為 A-11 Student Learning Analytics，共用教師端 T-21 的資料定義，不另建一套管理員分析頁。
- 路由需保留
student_id、class_id與return_to=A-22；點擊 Back 時返回原班級、原分頁、搜尋字與滾動位置。 - 權限不足或學生已移出目前管轄範圍時，不開啟分析頁，顯示
You no longer have access to this student.。
Modal: Add Students to Class 畫面設計
- Select Students from [School Name]
- [🔍 Search by School Student ID/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.」 |
| 分析跳轉中 | 點擊 [👁 View Analysis] | 圖標顯示 Loading，防止重複跳轉 |
| 移除中 | 確認 Remove from Class 後 | 行項目變半透明，顯示 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 |