專案

一般

配置概況

動作

Feature #155

已結束
SC SC

實作軟組織損傷互動式人體圖 (Soft Tissue Body Map)

Feature #155: 實作軟組織損傷互動式人體圖 (Soft Tissue Body Map)

是由 Sashiba Chou約 2 個月 前加入. 於 約 2 個月 前更新.

狀態:
Closed
優先權:
Normal
被分派者:
開始日期:
2026-02-08
完成日期:
2026-02-08
完成比例:

100%

預估工時:
5:00 小時
耗用工時:

概述

h1. 功能說明

新增「軟組織」分頁,提供互動式 SVG 人體圖,讓急診醫師可直接點選身體部位記錄軟組織損傷。

h1. 主要功能

  • 前面 (Anterior) 視圖:以真實人體 PNG 為底圖,疊加 SVG 可點擊區域,紅色描邊標示各部位邊界
  • 後面 (Posterior) 視圖:SVG 輪廓圖,區域命名對應背面解剖結構
  • 放大檢視 (Zoom):SVG 輪廓圖,頭部、左右手(掌面/背面)、左右腳(背面/底面)、口腔可點擊放大,細分更小區域
  • 損傷記錄:點選部位後彈出損傷類型選擇器 (Abrasion/Laceration/Contusion/Burn/Swelling/Tenderness/Deformity),可附加備註
  • 損傷列表:右側即時顯示已記錄損傷,支援逐筆刪除或全部清除

h1. 技術細節

  • SVG 路徑涵蓋頭、頸、胸、腹、骨盆、恥骨、雙側肩/上臂/肘/前臂/腕/手、雙側大腿/膝/小腿/踝/腳
  • 前面視圖覆蓋層樣式:透明填充 + 紅色描邊 (rgba(220,38,38,0.8), width 2),hover 半透明白、受傷半透明紅
  • 使用 Radix UI Dialog 實現放大與損傷選擇彈窗
  • 資料透過 react-hook-form 整合至 TraumaAssessment 表單 schema

h1. 影響範圍

  • 新增 softTissueInjuries 欄位至 Zod schema
  • TraumaAssessment 主表單新增第四個分頁「軟組織」
動作

匯出至 PDF Atom