T-10 Class Schedule and Progress

教師端安排課程設計規格

畫面用途

1. 排期總覽： 一覽所有 Session 的當前鎖定/解鎖狀態，快速掌握班級進度。

Class Schedule 🔗 ↗

原型與規格有待確認事項，請一併閱讀正文中的差異說明。

閱讀完整規格 ↓

內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限

🎨 Figma: Class Schedule 🔗

🎯 功能定位

1. 排期總覽： 一覽所有 Session 的當前鎖定/解鎖狀態，快速掌握班級進度。
2. Schedule Planner： 透過 Modal 設定 Interval 與 Skip，批次安排後續 Session 的開放日期。
3. 即時開關： 每個 Session 右側提供 Lock/Unlock Toggle，支援手動快速切換。
4. 連鎖開啟邏輯： 確保教學連續性。若開啟第 N 單元，則 1 至 N-1 單元自動同步開啟。

🧱 畫面結構

Web 佈局：12-col grid，1280px max-width，深色 Sidebar

• Header:

  • "Hello, Sandra!" — 問候語 + 教師名稱
  • [Class 3A ▾] — T-02 班級切換 Dropdown
  • [🔔] [👤] → T-03 / T-04

• Sidebar (深色，圖標式):

  • Home User Clock Calendar Chart Trophy

• Main Content — Course Calendar:

  • [📅 Schedule Planner] → 開啟 T-10-A Modal，進行 Interval 排期與 Skip 管理
  • Session Table — DataTable:
    • Columns: Session | Title | Date | Lock Toggle
    • Row: S 1-1 | Greetings | 2026/03/29 | Toggle (Unlocked)
    • Row: S 2-1 | Numbers | 2026/03/29 | Toggle (Unlocked)
    • Row: S 3-1 | Family | (lock icon) | Toggle (Locked)
    • Row: S 4-1 | School | - | Toggle (Locked)
    • Row: S 5-1 | Family | - | Toggle (Locked)
    • Row: S 6-1 | Numbers | - | Toggle (Locked)
    • Row: S 7-1 | Family | - | Toggle (Locked)
    • Row: S 8-1 | School | - | Toggle (Locked)
    • Row: S 9-1 | Greetings | - | Toggle (Locked)
    • Row: S 10-1 | Numbers | - | Toggle (Locked)
    • Date - 表示尚未透過 Schedule Planner 排期
    • Lock Toggle：切換開關樣式（Unlocked = 已開放 / Locked = 鎖定）

📦 區塊說明

#	區塊	元件	行為/交互	備註
1	Schedule Planner 按鈕	Button ([📅 Schedule Planner])	開啟 T-10-A Modal，進行 Interval 排期與 Skip 管理	排期儲存後 Date 欄自動填充
2	Session Table	DataTable	唯讀顯示 Session 編號、標題、排定日期	Date 由 Schedule Planner 自動寫入，不可在此手動編輯
3	Lock Toggle	Toggle Switch	切換 Session 的 Locked / Unlocked 狀態	手動解鎖觸發連鎖開啟邏輯（彈窗確認）；Block 設定與班級綁定，學生轉班不影響
4	Lock 圖標	Icon	表示該 Session 尚未經 Schedule Planner 排期	顯示在 Date 欄位，排期後替換為具體日期

🔁 交互流程與連鎖邏輯

排期 → 自動解鎖

流程圖

正在載入流程圖…

手動解鎖與連鎖邏輯

流程圖

正在載入流程圖…

⚙️ 狀態管理

狀態	觸發條件	畫面表現
Unlocked	Date 已到達或手動解鎖	Toggle 開啟狀態，Date 顯示具體日期
Locked (已排期)	Date 尚未到達	Toggle 關閉狀態，Date 顯示未來日期
Locked (未排期)	尚未透過 Schedule Planner 設定	Toggle 關閉狀態，Date 顯示 - + 鎖圖標
Toggle 操作中	切換 Toggle 觸發連鎖確認	彈窗等待確認

🔎 邏輯自我檢查

• Sequential Guard（連續性保護）： 資料庫寫入時，若 session_id = N 狀態為 Unlocked，則所有 id < N 的單元 status 強制更新為 Unlocked。
• Time Sync： 系統採用伺服器時間，避免學生更改手機本地時間來破解進度。
• Global Store： 緩存班級的 Current_Max_Session_ID，供出題演算法（A-40）調用。
• Date 不可手動編輯： Session Table 的 Date 欄位為唯讀，所有日期由 Schedule Planner（T-10-A）統一管理寫入。
• Block 與班級綁定： Block 的設定與班級綁定，學生轉移到別的班級則不影響。
• Q: 學生正在練習時老師解鎖新單元，數據會丟失嗎？
  • A: 不會，學生下次進入練習或刷新畫面時，新題庫會自動載入。

---