AI ERP 元件庫
所有 Blade Component 依據 Claude DESIGN.md 設計系統實作，支援 dark mode（點左下切換）， 遵循 ring-based shadow、warm neutrals、Noto Serif/Sans TC 字型體系。
Layout 版面
<x-layout.sidebar>
動態側邊導覽列，深色背景搭配 warm silver 文字。（左側已在使用）
<x-layout.page>
頁面框架，包 sidebar + header + main。本展示頁本身就是個 page layout。
Chat 聊天
<x-chat.bubble> · <x-chat.typing>
這個月的營收是多少？
高信心 97%
本月總營收為 NT$1,234,567，較上月成長 12.3%。
中信心 82%
建議確認：您是指 本月已出貨 還是 本月下單 的訂單？
檢視產生的 SQL
SELECT SUM(total_amount) FROM orders WHERE MONTH(created_at) = MONTH(NOW());
—— 2 分鐘前 ——
<x-chat.input>
<x-chat.quick-actions>
<x-chat.confidence>
高信心 98%
中信心 82%
低信心 45%
<x-chat.result-table>（聊天內嵌）
高信心 96%
最近 3 筆訂單：
| 客戶 | 金額 | 日期 |
|---|---|---|
| 永豐科技 | 128500 | 2026-04-08 |
| 順豐貿易 | 96200 | 2026-04-09 |
| 昇達電子 | 203780 | 2026-04-10 |
<x-chat.result-number>
高信心 99%
本月營收
NT$1,234,567
▲ 12.4%
Data 資料
<x-data.stat-card>
本月營收
NT$1,234,567
▲ 12.3%
待出貨訂單
42
▼ 8.0%
活躍客戶
128
▲ 5.0%
庫存週轉率
3.2x
<x-data.table>
共 3 筆
| 客戶名稱 | 消費金額 | 操作 | |
|---|---|---|---|
| 永豐科技 | contact@yongfong.tw | NT$128,500 |
|
| 順豐貿易 | info@sunfong.tw | NT$96,200 |
|
| 昇達電子 | sales@shengda.tw | NT$203,780 |
|
<x-data.pagination>
顯示 46–60 筆，共 237 筆
<x-data.empty-state>
📭 目前沒有符合條件的資料
新增客戶
Form 表單
Email 格式不正確
UI 基礎
<x-ui.button>
<x-ui.badge>
預設
已完成
處理中
逾期
<x-ui.alert>
查詢結果可能包含未出貨訂單。
Schema 已成功建立。
您的查詢配額剩餘 20%。
連線超時，請稍後再試。
<x-ui.modal>
<x-ui.loading> (skeleton)
<x-ui.toast>
實際使用時 toast 會 teleport 到 body 右上角，自動 3 秒消失。每次點擊重新計時。
已成功儲存變更
<x-ui.tooltip>
頂部提示
底部提示
左側提示
右側提示
Build 建構 (Phase 2)
<x-build.industry-picker>
<x-build.module-checklist>
<x-build.module-card> · <x-build.column-row>
客戶
customers
編號
*
id
int
客戶名稱
*
name
string
Email
email
string
統編
tax_id
string
關聯
→ orders (has_many)
<x-build.schema-preview>
客戶
customers
編號
*
id
int
客戶名稱
*
name
string
Email
email
string
統編
tax_id
string
關聯
→ orders (has_many)
訂單
orders
訂單編號
*
id
int
客戶編號
*
customer_id
int
訂單金額
*
total_amount
decimal
建立日期
*
created_at
datetime
關聯
→ customers (belongs_to)
<x-build.confirm-dialog>
CRUD 動態 (Phase 2)
<x-crud.dynamic-table>
員工
共 2 筆
| 姓名 | 年齡 | 入職日期 | 操作 |
|---|---|---|---|
| 王大明 | 28 | 2024-03-15 |
|
| 李小華 | 35 | 2022-08-01 |
|
<x-crud.dynamic-form>
Onboarding (Phase 3)
<x-onboarding.progress>
步驟 2 / 4
50%
1
2
3
4
<x-onboarding.step>
1
選擇產業
已完成：零售業
2
勾選模組
請從推薦清單中勾選您需要的模組。
3
確認 Schema
AI 會根據您的選擇產生建議 schema。
Billing 訂閱 (Phase 3)
<x-billing.plan-card>
Starter
NT$1,280/月- 1 位使用者
- 每月 500 次查詢
- 基礎模組
- Email 支援
推薦方案
Pro
NT$4,800/月- 5 位使用者
- 每月 5,000 次查詢
- 全部模組
- 優先客服
- Chat-to-build
Enterprise
聯繫報價- 無限使用者
- 無限查詢
- 專屬 LLM 額度
- SLA 99.9%
- SSO
<x-billing.usage-bar>
本月查詢次數
3,250 / 5,000
資料儲存量
824 / 1,000
API 請求
4,950 / 5,000
Admin 管理 (Phase 3)
<x-admin.tenant-card>
永豐科技
電子零售
訂閱方案
Pro
使用者
12
最近使用：2026-04-11 09:23
順豐貿易
貿易
訂閱方案
Starter
使用者
3
最近使用：2026-04-10 17:48
昇達電子
製造
訂閱方案
Enterprise
使用者
48
最近使用：2026-03-28 11:05
<x-admin.trend-chart>
查詢量
新增訂單
月營收 (千)