docs(skill): 更新 UI 統一規範,新增對話框滾動規則
All checks were successful
Koori-ERP-Deploy-System / deploy-demo (push) Successful in 47s
Koori-ERP-Deploy-System / deploy-production (push) Has been skipped

This commit is contained in:
2026-01-19 15:42:55 +08:00
parent 6bd52fe3db
commit ed6fb37ec3

View File

@@ -706,6 +706,32 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
--- ---
## 11.4 對話框 (Dialog) 滾動與佈局
當對話框內容可能超出螢幕高度時(如長表單或詳細資料),**請勿使用 `ScrollArea`**,應直接在 `DialogContent` 使用原生的 `overflow-y-auto`
**原因**`ScrollArea` 在 Flex 佈局計算高度時容易失效或導致雙重滾動條。以及與原生捲動行為不一致。
```tsx
// ❌ 錯誤:使用 ScrollArea 或固定高度計算
<DialogContent className="max-w-3xl">
<ScrollArea className="h-[500px]">
{/* 內容 */}
</ScrollArea>
</DialogContent>
// ✅ 正確:直接使用 overflow-y-auto 與 max-h
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
<DialogHeader>...</DialogHeader>
<form className="p-6">
{/* 內容會自動滾動 */}
</form>
<DialogFooter>...</DialogFooter>
</DialogContent>
```
---
## 12. 檢查清單 ## 12. 檢查清單
在開發或審查頁面時,請確認以下項目: 在開發或審查頁面時,請確認以下項目: