組合源碼 · 這個應用在程式裡長這樣點擊展開
// src/scenarios/registry.tsx
{
id: 'ecommerce-ops',
name: '電商營運後台',
industry: 'ecommerce',
scenarios: [
'kpi-dashboard',
'catalog-grid',
'data-table',
],
description: '商品庫 + 訂單轉換 + 銷售趨勢',
}
// 渲染只需:
import { getIndustry } from '@/scenarios/industries';
import { getScenario } from '@/scenarios/registry';
const ctx = getIndustry('ecommerce');
const kpi_dashboard = getScenario('kpi-dashboard')!.render(ctx);
const catalog_grid = getScenario('catalog-grid')!.render(ctx);
const data_table = getScenario('data-table')!.render(ctx);
沒有 bespoke 元件、沒有複製貼上。換產業只要改
industry 那一行。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
選品組資料表格 · data-table
商品表單檢視
Filter·Sort·Group
| ID | 商品 | 狀態 | SKU | 售價 | 分類 | 金額 |
|---|---|---|---|---|---|---|
| sku-A01 | 日系寬版亞麻襯衫 米白 / M / 現貨 24 | 上架中 | 選品組 | 服飾 | — | NT$ 1,480 |
| sku-A02 | 復古金框圓眼鏡 霧金 / 標準 / 現貨 8 | 低庫存 | 選品組 | 配件 | — | NT$ 990 |
| sku-A03 | 小牛皮極簡托特包 焦糖 / L / 預購 | 草稿 | 設計 | 包袋 | — | NT$ 3,680 |
| sku-A04 | 義大利小牛皮樂福鞋 黑 / 41 / 現貨 0 | 已售完 | 採購 | 鞋款 | — | NT$ 4,280 |
| sku-A05 | 日本製帆布後背包 墨綠 / 標準 / 現貨 16 | 上架中 | 選品組 | 包袋 | — | NT$ 2,180 |
| sku-A06 | 仿舊直筒牛仔褲 深藍 / 30 / 現貨 3 | 低庫存 | 選品組 | 服飾 | — | NT$ 1,680 |