Design System

Design System

確認配色與元件用。資料全部虛構，存在瀏覽器記憶體，重新整理就會還原。

色票

配色定義在 app/globals.css，元件只用語意變數。數字是上方文字對該底色的對比。

Aa 文字 8.9:1

primary

#00506e

Aa 文字 12.9:1

secondary

#eef8f8

Aa 文字 4.1:1

muted

#f1f3f7

Aa 文字 5.5:1

destructive

#ff7d39

Aa 文字 6.5:1

success

#83e254

Aa 文字 7.6:1

warning

#fed906

Aa 文字 10.0:1

background

#faf9fb

Aa 文字 10.5:1

card

#ffffff

border #e1e4ed

分隔線、卡片外框

input #6d758f

輸入框外框

ring #00506e

鍵盤 focus 外框

按鈕

危險操作一律用 DangerButton，不用 variant="destructive"。

表單元件

頁面只用 components/form/ 的元件。直接按「送出」看必填提示；填好再送出，會示範後端回傳的錯誤。錯誤狀態的橘色外框只有 2.55:1，還沒處理，見頁尾「待決定」。

°C

還沒有共用元件的欄位

用到時先在 components/form/ 加共用元件，再換掉這裡的範例。

搜尋與分頁

按 Enter 或「搜尋」才查詢。示範資料在前端篩選，正式頁面由後端查詢與分頁。手機上搜尋按鈕只留圖示，分頁只顯示第幾頁；請縮小視窗看。

病歷號姓名
A0001陳測試
A0002林範例
A0003黃虛構
A0004張示範
A0005李假名
A0006王樣本
A0007陳測試
A0008林範例
A0009黃虛構
A0010張示範
A0011李假名
A0012王樣本
A0013陳測試
A0014林範例
A0015黃虛構
A0016張示範
A0017李假名
A0018王樣本
A0019陳測試
A0020林範例

共 57 筆

列表與表單：生命徵象紀錄

寬螢幕用表格；手機改成卡片，避免左右捲動。新增時病患用可搜尋的下拉選單；編輯時病患不能更換。示範病患有 30 位，輸入「A」可以看到超過 20 位的提示。

  • A003　黃虛構
    2026-11-04 08:30
    體溫
    38.6 °C
    心跳
    126 次/分
    呼吸
    24 次/分
    血氧
    91 %
    血壓
    88/56 mmHg
  • A002　林範例
    2026-11-04 08:15
    體溫
    37.7 °C
    心跳
    104 次/分
    呼吸
    20 次/分
    血氧
    95 %
    血壓
    145/92 mmHg
  • A001　陳測試
    2026-11-04 08:00
    體溫
    36.8 °C
    心跳
    78 次/分
    呼吸
    16 次/分
    血氧
    98 %
    血壓
    122/78 mmHg

待決定

這頁看完後要一起討論的地方。

  • 輸入框錯誤狀態的橘色外框（aria-invalid:border-destructive）對比 2.55:1，未達 3:1。