間距與圓角 Layout

間距:4px 網格

所有間距使用 4 的倍數,以 Tailwind 的間距 class 撰寫(p-*、m-*、gap-*)。

Tailwind	實際大小	常見用途
gap-1 / p-1	4px	圖標與文字的間隔
gap-2 / p-2	8px	緊湊元素間隔(標籤群、圖標群)
gap-3 / p-3	12px	按鈕群(= EP 內建按鈕間距)、表單欄位間隔
gap-4 / p-4	16px	卡片內距、區塊間隔
gap-5 / p-5	20px	卡片之間的間距、寬鬆卡片內距
gap-6 / p-6	24px	大區塊間隔、頁面內距
gap-8 / p-8	32px	章節間隔
gap-10 / p-10	40px	頁面級大區塊間隔

原則

猶豫要用多大間距時:元素關係越近,間距越小。同一組資訊用 4/8px,不同組用 16/24px。

按鈕間距注意

Element Plus 對相鄰按鈕內建 12px 間距(.el-button + .el-button { margin-left: 12px })。 用 flex 排按鈕時請用 gap-3(12px)保持一致;注意內建間距和 gap 會疊加,兩者擇一,不要同時生效。

圓角 Radius

圓角對接 Element Plus 變數,和元件保持一致:

Tailwind	變數	大小	用途
rounded-el-sm	--el-border-radius-small	2px	標籤、小元素
rounded-el	--el-border-radius-base	4px	按鈕、輸入框(元件預設)
rounded-lg	—(Tailwind 內建)	8px	卡片、彈出層
rounded-2xl	—(Tailwind 內建)	16px	大卡片、行銷區塊
rounded-el-round	--el-border-radius-round	20px	膠囊形按鈕/標籤
rounded-full	—	圓形	頭像、圓形圖標按鈕

2px

4px

8px

16px

20px

圓形

陰影 Shadow

陰影同樣對接 Element Plus,深色模式自動調整:

Tailwind	變數	用途
shadow-el-lighter	--el-box-shadow-lighter	輕微浮起(卡片 hover)
shadow-el-light	--el-box-shadow-light	下拉選單、彈出層
shadow-el	--el-box-shadow	對話框、抽屜
shadow-el-dark	--el-box-shadow-dark	最強層級:提示框 Tooltip、需要特別突出的浮層

lighter

light

base

dark