A-21 Create Class
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
新增/編輯班級
🎨 Figma: node-722-7676 (A-20/A-21/A-23 共用) 🔗
🎯 功能定位
使用者： Admin / Super Admin
A-21 用於定義班級的物理與教學歸屬。除了校區、等級等基礎設定外，增加了 [Assigned Teachers] 區塊，支援一個班級掛鉤多位老師，這將決定哪些老師在 T-01 Teacher Portal 中能看到該班級的學生數據與進度。
🧱 畫面結構
| 區域 | 說明 |
|---|---|
| Header | Nihao Admin Dashboard > Class Management > Create Class, [👤] |
| Sidebar | 深色側邊欄導航 |
| Basic Info | Class Name, Class ID 輸入框 |
| Hierarchy Configuration | Zone, School, Category, Level 下拉選單 |
| Assigned Teachers | Tag-style Multi-select 搜尋框 |
| Status | Active / Inactive 切換 |
| Actions | [Save Class] 按鈕 |
📋 欄位與交互詳細定義
1. Hierarchy Configuration (層級聯動)
- Zone & School: 下拉選單。
- 連動邏輯： 當管理員選擇了特定的 School 後，下方 [Assigned Teachers] 的搜尋建議應優先過濾並顯示該 School 下屬的老師。
- ZoneAdmin 僅可以看到同一個 Zone 的老師，SuperAdmin 可以看到所有老師。
2. Assigned Teachers (老師多選邏輯)
- 組件樣式： 採用 Tag-style Multi-select (標籤式多選框)。
- 行為細節：
- 搜尋： 管理員輸入姓名或 Email 關鍵字，下拉選單會即時顯示匹配的老師。
- 新增： 點擊搜尋結果，該老師會以「標籤」形式加入框內。
- 移除： 點擊標籤旁的 x 即可取消該老師對此班級的管轄權限。
- 目的： 支援一班多師制（例如：外教 + 中教，或導師 + 助教）。
3. 數據連動說明
- Teacher Portal (T-01): 在 A-21 被選中的所有老師，登入系統後都會在「我的班級」列表中看到此班級。
- User Management (A-10): 這裡的設置會同步更新到學生的 teacher_emails 欄位（若學生屬於此班級），確保家長端看到的老師資訊正確。
🔁 交互流程圖
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| 新增模式 | 從 A-20 點擊 "+" | 空白表單 |
| 編輯模式 | 從 A-20 點擊 [E] | 載入現有數據 |
| 驗證錯誤 | 必填欄位為空 | 欄位標紅，提示訊息 |
| 保存中 | API 請求中 | 按鈕顯示 Loading |
| 保存成功 | API 成功 | Toast + 返回 A-20 |