組合源碼 · 這個應用在程式裡長這樣點擊展開
// src/scenarios/registry.tsx
{
id: 'ecommerce-growth',
name: '電商成長儀表',
industry: 'ecommerce',
scenarios: [
'data-chart',
'kpi-dashboard',
'catalog-grid',
],
description: '深度趨勢 + 核心指標 + 熱銷商品',
}
// 渲染只需:
import { getIndustry } from '@/scenarios/industries';
import { getScenario } from '@/scenarios/registry';
const ctx = getIndustry('ecommerce');
const data_chart = getScenario('data-chart')!.render(ctx);
const kpi_dashboard = getScenario('kpi-dashboard')!.render(ctx);
const catalog_grid = getScenario('catalog-grid')!.render(ctx);
沒有 bespoke 元件、沒有複製貼上。換產業只要改
industry 那一行。趨勢圖表 · data-chart
今日 GMV · 近 14 天
NT$ 128,400
▲ 18% vs 上週期訂單數
92筆
轉換率
3.4%
客單價
NT$ 1,395
KPI 指標總覽 · kpi-dashboard
店舖概況
即時 KPI · 對比昨日
今日 GMV
NT$ 128,400
▲ 18%
訂單數
92筆
▲ 11%
轉換率
3.4%
▲ 0.6%
客單價
NT$ 1,395
▲ 5%
卡片網格 · catalog-grid
商品庫 · 卡片檢視
6 項 · 網格 3 欄
價格 ↑最新
上架中
#01
日系寬版亞麻襯衫
米白 / M / 現貨 24
NT$ 1,480
選品組低庫存
#02
復古金框圓眼鏡
霧金 / 標準 / 現貨 8
NT$ 990
選品組草稿
#03
小牛皮極簡托特包
焦糖 / L / 預購
NT$ 3,680
設計已售完
#04
義大利小牛皮樂福鞋
黑 / 41 / 現貨 0
NT$ 4,280
採購上架中
#05
日本製帆布後背包
墨綠 / 標準 / 現貨 16
NT$ 2,180
選品組低庫存
#06
仿舊直筒牛仔褲
深藍 / 30 / 現貨 3
NT$ 1,680
選品組