# Introduction（引言）

鐵代謝與血基質（heme）合成相關疾患涵蓋從缺鐵性貧血到 sideroblastic anemia、porphyrias 等多重診斷，其疾病機制橫跨腸道吸收、巨噬細胞回收、骨髓利用與肝臟調節，是血液內科教學的難點之一。傳統 PowerPoint 投影片難以呈現多步驟代謝路徑與多回饋環，常使學員陷入「單一概念能背、整體流程不通」的困境。本專案以互動式網頁形式呈現相關疾病，幫助學員建立完整概念地圖。

# Methods（方法）

實作以 Vue 為前端框架，著重於互動效果：使用者可點擊代謝路徑上的節點查看相關酵素、回饋環與致病突變；可切換至特定疾病視圖，觀察該疾病在路徑上的位置與下游效應。資料層採用結構化 JSON，使路徑與疾病知識可獨立維護，便於後續更新與多語言支援。

設計重點為「以結構代替記憶」：透過視覺化與互動，讓學員從拓樸的視角理解疾病，而非只記憶條列式特徵。整體靜態部署即可，無需後端，便於分享與長期維運。

# Results（結果）

互動式教材可在課堂上作為教師講解的視覺化輔助，亦可作為學員自學的資源。對於即將參加血液內科專科考試或進階考試者，本工具提供傳統文字教材外的補充形式，特別有助於熟悉 porphyrias 等記憶負擔較重的子主題。

# Discussion（討論）

本專案展示了現代前端框架在醫學教育的應用潛力：互動性能直接服務於學習目標，而非僅是炫技。限制方面，Vue 應用維護需要前端工程能力，對非工程背景使用者較難貢獻內容；醫學知識內容需要持續被同儕檢視。未來可加入測驗模組、多語言版本與 AI 教練式問答。

# 連結

• GitHub：htlin222/disorders-of-Iron-metabolism-and-heme-synthesis
• 主要語言：Vue
• 最後更新：2026-04-09