演示数据为手工构造，非真实经营数据

12 类通用组件库

原生 Custom Elements + Shadow DOM，暗色默认。每个组件都可独立注入数据；以下为真实交互态，不是静态截图。

← 返回入口

1. KPI 卡 · 较昨日变化

kpi-card.ts → <wb-kpi-card>

2. 图表 · SVG 手绘骨架

chart.ts → <wb-chart>

3. 桌台状态网格

table-grid.ts → <wb-table-grid>

4. 菜品卡 · 双价目

dish-card.ts → <wb-dish-card>

5. 订单列表

order-list.ts → <wb-order-list>

6. KDS 卡 · 开始/出品

kds-card.ts → <wb-kds-card>

7. 语音按钮 · 长按

voice-button.ts → <wb-voice-button>

长按 420ms 进入聆听，松开发送；短按提示长按。

8. 确认弹窗

confirm-dialog.ts → <wb-confirm-dialog>

不可逆操作二次确认，返回 Promise<boolean>。

9. 空状态

empty-state.ts → <wb-empty-state>

10. Toast · 3 秒消失

toast.ts → <wb-toast>

顶部 Toast，成功/警告/错误三类；错误自动 3 秒消失。

11. 骨架屏

skeleton.ts → <wb-skeleton>

12. 分栏布局 · 侧边栏 + 主内容

split-layout.ts → <wb-split-layout>
侧边栏
导航项最小 44px
移动端自动折叠
主内容区

默认插槽承载页面内容；与 page-shell 组合组成 9 角色工作台。

组件 API、事件与令牌见 docs/WORKBENCH_INTEGRATION.md。所有可点击元素最小 44×44px（本页可点击控件均有显式 min-height/min-width）。