前言
在 Day 13 與 Day 19 中，我們在後端實作了 BCMA（條碼給藥核對）的防錯狀態機與資料庫行級鎖。然而，當我們將這套邏輯推到床邊第一線時，真正的挑戰往往來自硬體互動與人機界面（HCI）。

在病房推車或手持 PDA 上，護理師並不會在畫面上慢慢點擊「搜尋病人」或「手動敲入 10 碼藥品代碼」。臨床標準流程是拿起外接條碼掃描槍（或透過 PDA 側邊實體掃描鍵），對著病患手圈與藥包連續扣下板機。

此時前端必須解決三個硬體整合難題：
1.條碼槍鍵盤模擬（HID Keyboard Emulation）攔截： 實體掃描器通常被系統識別為高速輸入的鍵盤，前端如何在沒有聚焦在特定輸入框的情況下，全域攔截這串高速字串？
2.零延遲多感官反饋（Multi-sensory Feedback）： 護理師在掃描時視線通常停留在病患手圈或藥包上，系統必須透過「不同頻率的蜂鳴聲（Audio Beep）」與高對比視覺提示，第一時間告知是成功還是核對衝突。
3.前端狀態機與後端 API 聯調： 如何將掃描事件與 Day 19 的給藥 API 無縫串聯？

今天我們將實作完整的前端條碼監聽器、音訊合成警示系統，以及條碼給藥核對的操作面板！

一、外接掃描器原理：全域按鍵攔截演算法
市售醫療級掃描槍（不論是 Honeywell、Zebra 還是藍牙無線槍）預設大多採用 HID POS / Keyboard 模式。當它讀取條碼時，會以極短的時間間隔（字元間隔通常小於 20ms）模擬按下一連串按鍵，並在末尾發送一個 Enter（Key Code 13）結尾。

為防止護理師必須先用手指點擊輸入框才能掃描，我們實作全域監聽類別 BarcodeScanListener：
二、臨床多感官反饋：Web Audio API 蜂鳴聲產生器
在吵雜或昏暗的病房中，護理師不能只盯著螢幕。我們使用瀏覽器原生的 Web Audio API 合成出兩種具備明確臨床心理暗示的音效，無需載入任何外部 MP3 檔案：
1.成功嗶聲（Success Beep）： 輕快的雙升調高頻音（1200Hz ➔ 1600Hz，80ms）。
2.核對失敗警報（Error Buzzer）： 沉重的低頻長音或斷續雙音（250Hz，300ms）。

三、前端操作組件：BarcodeAdministerModal.vue
現在我們將條碼攔截、音效回饋與前述的五對原則狀態機整合進 Vue 3 組件：
四、前後端聯調測試場景驗證
在本地啟動前後端後，我們可進行三個臨床測試場景模擬：
場景 A：標準正常給藥流程
1.開啟給藥面板，初始狀態進入 Step 1，指示燈呼吸跳動提示「等待掃描手圈」。
2.掃描病患手圈條碼 M1150904：系統瞬間響起輕快雙升頻嗶聲，第一步亮起綠色勾勾，焦點自動過渡至 Step 2。
3.掃描藥包健保條碼 AC12345678：系統再次嗶聲確認，狀態躍升至 Step 3，下方「確認給藥」大按鈕變為可點選之翠綠色。
4.護理師點選確認給藥：後端回傳 200 OK，生成 MedicationAdministration Resource，視窗自動關閉。

場景 B：拿錯鄰床病患藥物（防錯攔截）
掃描病患手圈 M1150904 通過。
1.在第二步誤掃了隔壁床病患的抗生素條碼 BC98765432。
2.即時反饋： 系統立即發出低頻鋸齒波長鳴警報，頂部標題瞬間切換為深紅警戒色，畫面中央跳出紅色警告橫幅：
3.藥品條碼不符！當前掃描為 [BC98765432]，預期為 [Amoxicillin 500mg / AC12345678]
4.狀態維持在第二步，嚴格阻擋護理師點選完成給藥。

小結
今天我們完成了臨床床邊操作最具體感的硬體整合：
1.實作了基於字元輸入微秒間隔的全域 BarcodeScanListener，解決實體掃描槍在 Web 端免聚焦捕捉問題。
2.運用 Web Audio API 打造了符合醫療心理暗示的雙頻音效反饋系統（成功嗶聲與警戒長鳴）。
3.打造了 BarcodeAdministerModal.vue 視覺化面板，將前後端防錯狀態機緊密銜接，大幅降低了床邊人為失誤機率。

至此，系統的操作體驗已趨於完善。明天 Day 25 我們將跨入醫療資安的核心防線：醫療資安防護（一）：病患隱私去識別化（De-identification）實務——遵循 HIPAA 安全港法則與動態資料脫敏！