Direct-Map 票 D 補完:骨骼圖關節熱區 + 腳趾二選(含熱區可點性實測校正,v0.6.1)¶

背景¶

#395 完成票 C/D 主體後,票 D 尚缺兩塊:關節熱區(脫臼的唯一入口 —— 骨骼圖
原本只有骨頭可點,關節傷無處記錄)與腳趾大/其他二選。本票補完,
Direct-Map 的功能面至此全數到位。設計:docs/icd10-directmap-design.md §5.2。

變更內容¶

1. frontend/src/components/body-map/BodySvgPaths.tsx — 關節熱區資料¶

• SKELETON_JOINTS:12 個關節(肩/肘/腕/髖/膝/踝 × 左右),含各自選項:
• 全部:脫臼(S43.0 / S53.1 / S63.0 / S73.0 / S83.1 / S93.0)
• 肩:+ 肩鎖關節脫臼(S43.1)|膝:+ 髕骨脫臼(S83.0)
• 踝:+ 雙踝骨折(S82.84)、三踝骨折(S82.85)
• id 以 joint_ 前綴 → payload 自動分流為 kind=joint(#395 的產生器已支援)

2. frontend/src/components/SkeletalTab.tsx — 熱區渲染與互動¶

• 熱區與骨頭同一 <svg>,自動沿用既有縮放/平移;點擊走既有 data-bone-id 委派
• category="joint" → 直接顯示該關節選項,不經分段、不顯示骨折型態
• 已記錄的關節熱區標紅;外移的熱區畫虛線指回解剖位置

3. 熱區可點性實測校正(過程中發現的兩個真問題)¶

• 問題一:熱區原畫在骨頭上層 → 膝關節圈完全蓋住髕骨,髕骨變成點不到
  (破壞既有功能)→ 改畫在骨頭之下,重疊處骨頭優先
• 問題二:改到下層後,以瀏覽器 elementFromPoint 逐點取樣量測發現
  12 個關節的圓心全被鄰近骨頭覆蓋 —— 使用者瞄準藍圈中心點下去會得到
  「該骨骨折」對話框,與視覺承諾不符
• 解法:掃描候選位置後,各關節向外側位移(肩 30 / 肘 45 / 腕 45 / 髖 38 /
  膝 50 / 踝 50 px)並以虛線指回解剖位置

4. 腳趾大/其他二選¶

BONE_SEGMENTS.phalanges_foot 已於 #395 備妥,熱區補完後自動生效
(S92.4 大腳趾 / S92.5 其他趾)

5. frontend/src/lib/version.ts — v0.6.1 + CHANGELOG¶

驗收標準¶

• 關節/腳趾 e2e 14 項全 PASS:
• 骨架上 12 個熱區、點髖關節直接出脫臼選項、不經分段也不顯示骨折型態
• 肩有「肩鎖關節脫臼」、踝有雙踝/三踝骨折
• 選後熱區標紅;payload kind=joint、partId 已去前綴
• 腳趾先跳大腳趾/其他趾、選定後顯示骨折型態、payload 帶 segment
• 檢視頁實際出現確定碼:髖脫臼 S73.00、大腳趾骨折 S92.40
• 熱區可點性:12/12 圓心可點、可點面積無低於門檻者(量測腳本實測)
• 回歸:C/D e2e 13 項全 PASS(髕骨點擊已恢復)、smoke 51 項全 PASS、
  npm run build 通過

備註¶

• smoke_test.py 無需增修:未動任何 API endpoint(關節走 #393 已覆蓋的
  structured_injuries 契約);圖上互動為純瀏覽器端,以 Playwright e2e 實測替代
• Direct-Map 功能面至此完成;剩票 E:330 案 A/B 回歸驗證(表定碼不得退步)
• 量測方法可重用:elementFromPoint 取樣統計「熱區實際可點面積 / 圓心是否被遮」,
  日後任何疊層互動(如軟組織圖加熱區)都應這樣驗