修復內網 HTTP 部署下人體圖/骨骼圖 ICD-10 結果視窗複製鈕失效¶

背景¶

部署機(內網 HTTP)回報:軟組織人體圖與骨骼圖的「ICD-10」查詢結果視窗中,每列的複製按鈕按下去沒有任何反應,剪貼簿拿不到編碼。

ICD-10 快查頁的複製失效已在 v0.3.0 修過——當時改用共用 helper copyToClipboard(),非 secure context 下走 execCommand('copy') fallback。但同一個 fallback 在彈窗(Dialog)裡仍然是壞的:快查頁(頁面層)修好後,人體圖/骨骼圖(彈窗層)的問題被掩蓋至今。

根因¶

1. 內網 HTTP = 非 secure context,navigator.clipboard 不存在 → 一律走 execCommand('copy') fallback
2. fallback 把隱藏 textarea 掛在 document.body,但 ICD-10 結果視窗是 Radix Dialog,自帶 focus trap:焦點被強制留在彈窗內
3. textarea.select() 因此選不到內容 → execCommand('copy') 複製到空字串,無聲失敗(無錯誤、無提示)

儀器化實測(攔截 document.execCommand 記錄呼叫當下狀態;Playwright 以 LAN IP HTTP 訪問 = 與部署機同等條件):

變更內容¶

1. frontend/src/lib/utils.ts — 共用 copyToClipboard() fallback 修正¶

• 隱藏 textarea 改掛進開啟中的 dialog 內(activeElement.closest('[role="dialog"]')),焦點不離開 focus trap → select() 生效;無彈窗時照舊掛 document.body
• textarea 加 readonly(防行動裝置彈出鍵盤)
• 複製後還原原焦點元素,避免焦點殘留在已移除節點
• navigator.clipboard.writeText 被權限政策拒絕時也退到 fallback(原本直接 throw)

2. frontend/src/lib/version.ts — v0.4.2 + CHANGELOG¶

影響範圍(全專案 5 個複製點掃描)¶

修的是共用 helper,兩個彈窗一次修復;純前端變更,後端與 DB 零改動。

驗收標準¶

• 內網 HTTP(非 localhost)環境,軟組織 ICD-10 結果視窗複製鈕可正確複製編碼(已實測:選取 S80.211A)
• 骨骼圖 ICD-10 結果視窗同上(同一 helper,同一修復)
• 頁面層複製(快查頁、檢視頁)行為不變(對照組實測)
• HTTPS/localhost 環境走原生 navigator.clipboard,行為不變
• smoke test 41/41 全 PASS(backend API 零改動,符合預期)
• npm run build production 編譯 + TypeScript 檢查通過
• ESLint:本票修改檔案零新增警告(既有 3 個 error 為他檔舊債,不在本票範圍)

備註¶

• 部署:部署機只需更新前端(git pull + 重 build),後端不動;更新後版本徽章應顯示 v0.4.2
• smoke_test.py 無需增修:本票未動任何 API endpoint;複製為純瀏覽器端行為,HTTP 煙霧測試無法覆蓋,已以 Playwright 儀器化實測替代(維護規約判定:不適用)
• 後續若上 Playwright E2E(第 3 層測試,暫緩中),此案例(彈窗內複製 @ 非 secure context)值得收錄