「這個該開 modal 還是換頁？」是後台最常見的糾結。這章用一張決策樹幫你定案：新增短表單用 modal、查看與編輯用 full page、輔助顯示用 drawer。同時把 modal 尺寸、focus trap、default focus 等必備行為定稿。當你要安排一段表單或詳情的呈現方式時，先翻這頁。
| 項目 | 定稿值 |
|---|---|
| 用 modal | 新增短表單（< 8 欄）、簡單編輯、destructive 確認 |
| 用 drawer | 列表上快速看單筆、中等編輯；網址要帶資源 id（例 ?drawer=…） |
| 用 full page | 長表單（> 15 欄）、複雜詳情、長時間編輯；canonical 路徑可分享 |
| Drawer 網址 | 開啟寫入 query 或 /資源/:id；關閉只拿掉 drawer 參數、保留篩選 |
| 跨列表連結 | 不同列表的關聯欄位連同一資源 id，才能從任一路徑打開同一 drawer |
| 用 inline edit | 單欄快速改 |
| Modal size | small ~400 / medium 560–640 / large ~800 |
| 必備行為 | backdrop、focus trap、ESC 關、點 backdrop 關（destructive 例外） |
| Default focus | 表單 modal → 第一個 input；confirmation／destructive → Cancel |
| Mobile | 改 full-screen 或 bottom sheet |
| 做錯 | 正確 |
|---|---|
| 長流程／長表單硬塞 modal | 超過 2 螢幕高或 > 15 欄改 full page |
| modal default focus 落在 destructive | confirmation／destructive 的 default focus 落在 Cancel |
| 查看詳情用 modal | 查看完整詳情用 full page，URL 可分享、可加書籤 |
| drawer 只改畫面狀態、網址不變 | 開 drawer 要改網址（?drawer=資源id），才能分享與返回 |
| 每個列表各自記住「哪一列開著」 | 關聯欄位連同一資源 id，從訂單／發票列表都能開同一 drawer |
| destructive modal 可隨意 ESC／backdrop 關 | 高風險動作關閉行為要產品明定，避免誤關 |