階段 3:完成排班核心功能
以瀏覽器 localStorage 保存合成資料,逐一驗收點格排班、換班、休假與週檢視;本階段只確認同一瀏覽器重新整理後資料仍在,不要求跨裝置同步。
16
學完這一課,你會做到
- 完成排班、換班、休假與週檢視操作
- 用可觀察的驗收條件檢查核心流程
- 辨認畫面問題、資料問題與同步問題的差異
開始前先定位
你在這裡一日工作坊:本機四階段實作
先用 repo 內建的瀏覽器 localStorage 跑起模板、完成排班與客製規則;這一段不安裝資料庫,也不要求雲端同步。
完成證據Checkpoint 3
四項核心任務全部通過,重新整理後資料仍在,Claude App 與 Preview 沒有未處理錯誤;請 Claude 說明範圍後,單獨核准建立「完成核心排班流程」commit。若需要同步,再另行核准 push 並回…
本課先不做只測合成情境
測試資料要刻意包含空白、衝突與修改,但不得照抄真實醫師班表。即使只用姓氏或代號,若能和診所現況對照,就不屬於本課允許的合成資料。
本課名詞階段 3排班換班休假localStorage週檢視
四個核心任務
- 點選空白格,替王醫師(虛構)排入週一早診。
- 把同一格從早診改為午診,確認舊狀態沒有重複保留。
- 替林醫師(虛構)標記週三休假,確認休假與班別不會同時存在。
- 切換前後週,回到本週並重新整理,確認剛才的資料仍可讀取。
核心驗收表
| 功能 | 操作 | 通過標準 |
|---|---|---|
| 新增排班 | 空白格選班別 | 顯示正確人員、日期與班別 |
| 換班 | 變更既有班別 | 只保留最新狀態 |
| 休假 | 標記休假 | 清楚顯示且不可誤排 |
| 週檢視 | 前後週切換 | 日期範圍與內容一致 |
| 持久化 | 重新整理 | 合成資料仍存在 |

階段 3 完成畫面對照:同一張週班表中能清楚看到班別與休假兩種狀態。截圖示範王醫師週一早診、林醫師週三休假;你仍要親自測試換班、前後週與重新整理。
- 王醫師週一格顯示早診;換成午診後,同一格只能保留最新狀態。
- 林醫師週三格顯示休假,不能同時殘留班別。
- 截圖只能核對外觀;切週與重新整理後資料仍存在,才算完整通過。
Checkpoint 3
四項核心任務全部通過,重新整理後資料仍在,Claude App 與 Preview 沒有未處理錯誤;請 Claude 說明範圍後,單獨核准建立「完成核心排班流程」commit。若需要同步,再另行核准 push 並回 GitHub 網頁核對。
參考資料
介面與方案會改版;實際操作仍以各工具官方頁面為準。延伸資料用來幫助理解,不取代本課安全原則。
低壓力自我檢查
換班後畫面正確,但重新整理又回到舊狀態,這次驗收算通過嗎?
準備好再標記完成完成狀態會留在這台裝置,下次回來可接著學。