密度系統

AppFuse Web 提供三級密度系統，讓同一組元件適應不同使用場景 — 從寬鬆的表單佈局到緊湊的資料密集型介面。

三級密度

密度	高度	字體大小	適用場景
comfortable	48px	16px (`text-base`)	一般表單、主要操作區域（預設值）
compact	40px	14px (`text-sm`)	資料密集型介面、篩選列
tight	32px	14px (`text-sm`)	表格內嵌操作、與純文字環境搭配

預設值

元件的預設密度為 comfortable（48px），提供最舒適的觸控與點擊體驗。tight 密度僅 Button 支援，適合表格內嵌等空間受限的場景。

各組件密度映射

Button

密度	DaisyUI Class	高度	字體
comfortable	`btn-lg`	48px	`text-base` (16px)
compact	`btn-md`	40px	`text-sm` (14px)
tight	`btn-sm`	32px	`text-sm` (14px)

<Button density="comfortable">確認送出</Button>  {/* 48px - 表單主按鈕 */}
<Button density="compact">篩選</Button>           {/* 40px - 工具列 */}
<Button density="tight">編輯</Button>              {/* 32px - 表格內 */}

Input

密度	DaisyUI Class	高度	字體
comfortable	`input-lg`	48px	`text-base` (16px)
compact	`input-md`	40px	`text-sm` (14px)

<Input density="comfortable" label="客戶名稱" />  {/* 48px */}
<Input density="compact" label="搜尋" />            {/* 40px */}

Select

密度	高度	字體
comfortable	48px (`min-h-[3rem]`)	`text-base` (16px)
compact	40px (`min-h-[2.5rem]`)	`text-sm` (14px)

Checkbox

密度	DaisyUI Class	控件尺寸	標籤字體
comfortable	`checkbox-sm`	20px	`text-base` (16px)
compact	`checkbox-xs`	16px	`text-sm` (14px)

Radio

密度	DaisyUI Class	控件尺寸	標籤字體
comfortable	`radio-sm`	20px	`text-base` (16px)
compact	`radio-xs`	16px	`text-sm` (14px)

Switch

密度	DaisyUI Class	控件尺寸	標籤字體
comfortable	`toggle-sm`	33px	`text-base` (16px)
compact	`toggle-xs`	26px	`text-sm` (14px)

DataTable

密度	Cell Padding	說明
comfortable	預設值	標準表格間距
compact	`p-2` (8px)	緊湊表格，不縮小字體

備註

DataTable 不使用 table-sm

DataTable 的 compact 模式僅縮減 padding，不使用 DaisyUI 的 table-sm class，避免被強制設定 12px 字體。

密度對齊原則

同一表單中的元件應使用相同密度，確保視覺對齊：

// ✅ Do：同一表單統一密度
<Input density="compact" label="姓名" />
<Select density="compact" label="類別" />
<Button density="compact">送出</Button>

// ❌ Don't：混用不同密度
<Input density="comfortable" label="姓名" />
<Select density="compact" label="類別" />
<Button density="tight">送出</Button>

觸控目標規範

無論視覺尺寸為何，所有可互動元件的有效觸控區域必須至少 44 × 44px（WCAG 2.5.5）。

對於視覺尺寸小於 44px 的控件（如 compact 密度的 Checkbox 16px、Radio 16px），框架透過透明偽元素擴展觸控區域：

/* Checkbox compact：16px + 28px padding = 44px 觸控區域 */
checkbox-xs relative
  after:absolute after:-inset-[14px]
  after:content-[""] after:rounded-full

/* Checkbox comfortable：20px + 24px padding = 44px 觸控區域 */
checkbox-sm relative
  after:absolute after:-inset-3
  after:content-[""] after:rounded-full

這確保即使在 compact 模式下，使用者在行動裝置上仍能輕鬆點擊。

使用場景指引

場景	建議密度	原因
新增/編輯表單	comfortable	欄位數較少，著重操作體驗
搜尋與篩選列	compact	減少垂直空間佔用
表格內嵌操作	tight (Button)	與表格文字高度對齊
資料密集型頁面	compact	畫面可顯示更多資訊
行動裝置	comfortable	確保足夠的觸控區域

三級密度​

各組件密度映射​

Button​

Input​

Select​

Checkbox​

Radio​

Switch​

DataTable​

密度對齊原則​

觸控目標規範​

使用場景指引​

相關文件​