产品后台.

高密度工业工作台。IBM Plex,近黑主按钮,绿色只做状态与选中。下面是调用方法;再往下是组件样式与场景预览。

在真实场景中查看

同一套 product token 落到工作台骨架——侧栏、主区表格、近黑 CTA。

Namespace Source Flow Broker Sink
Namespace Create
NameStatusUpdated
plant-a / line-1Active2m ago
plant-a / line-2Active1h ago
lab / mqtt-bridgeIdleYesterday

组件样式

对齐 surfaces/tier0-product/components.mdtokens/core.css primitive。

Primary Highlight Secondary

Button

主操作近黑;强调用 #CCF368 + #333。禁止白底小按钮铺满 #B2ED1D

.tier0-btn-product-primary · .tier0-btn-lime
Selected Running Idle

Tag / Status

绿 tag 表示选中/高亮,不等于 success。行 hover 用 #F0FBD2

--fx-green-1 · --fx-deep-green
TopicQoS
factory/line/temp1
factory/line/press0

Table / List

表头克制;行操作低噪音;截断 + tooltip。密度优先于装饰。

surfaces/tier0-product/components.md
Search namespace…
BrokerConnected · 12 topics

Form · Card

白/浅底 + 细边框;卡片圆角 10px;边框分层优先于重阴影。

--radius-card · --fx-border