共用元件 shell v1
UX 規格 §6 的互動行為與附錄 D 的 AI 標示，全部做成可以點的範例。要用哪一個就複製哪一段的 HTML。
按鈕（UX §6.1／§6.6）
Hover 加深 10%、Active 加深 20% 且 scale .98
訊息層級與 Toast（UX §6.7）
成功
採購單 PO-2026-0142 已送出審核。警告
信用額度已使用 92%，接近上限。錯誤
統一編號格式錯誤（須為 8 碼數字）。資訊
採購單已發送給供應商，等待回覆。AI 操作通知
AI 依安全庫存預警建立了 2 張採購建議單（草稿），待您確認。確認對話框（UX §6.4 五種場景）
用原生 <dialog>：Esc 可關、焦點會鎖在對話框內（§8.1）
狀態 Badge（PRD §6 狀態字典十種）
AI 標示（UX 附錄 D）
AI 生成草稿
AI 建議
AI 自動填入
信心 92%
信心 74%
信心 48%
AI 審核建議
信心 88%
- 供應商「宏昌精密」近 12 個月履約率 96%，交期準時率 92%。
- 單價 NT$ 1,280 較最近三次採購均價低 3%，價格合理。
- 交貨日 2026-08-22 落在供應商平均前置期（10 天）之內。
建議僅供參考。UX §1.3：AI 不可觸發最終審核，「通過／駁回」一律由人操作，且會寫入稽核日誌。
AI 標示異常：進貨數量 120 超過採購數量 100（+20%），須主管審核
表單視圖與驗證（UX §6.2；桌面雙欄 → 平板/行動單欄）
| 單號 | 供應商 | 金額 | 交貨日 | 狀態 |
|---|
空狀態（UX §6.10 三種）
載入中、進度與分頁籤（UX §6.1／§6.8）
處理中，請稍候…
處理中，請稍候（約 8 秒）
品項明細放這裡。
附件清單放這裡。
審核紀錄放這裡。
單頁分區（UX §1.2：不用多步驟精靈）
1
供應商
選定後自動帶入統一編號與付款條件
- 供應商
- 宏昌精密工業股份有限公司
- 統一編號
- 28471056
- 付款條件
- 月結 30 天
2
品項
品項表格放這裡。
次要操作放底部（UX §1.2）