开发预览更新于 2026-05-10

StatusBar 状态栏

编辑器底栏。三段（左 / 中 / 右）槽位，6 种语义色调。

基础用法

支持以数组形式传入 leftItems / centerItems / rightItems，或使用具名插槽（Vue: #left/#center/#right）/ slot prop（React: leftSlot/centerSlot/rightSlot）替换。整条 tone 染色（如 error），单 item 也可单独设 tone。

编辑器主区

<CfStatusBar :left-items="left" :center-items="center" :right-items="right" />

<CfStatusBar leftItems={left} centerItems={center} rightItems={right} />

6 种 tone

tone 整条染色，例如 error 让整条标红示意 build failed。

<CfStatusBar :tone="'error'" :left-items="items" />

<CfStatusBar tone="error" leftItems={items} />

API

属性	类型	默认值	说明
`size`	`'sm' \| 'md'`	`'md'`	20 / 24 px 高
`tone`	`'default' \| 'accent' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	整条染色
`leftItems` / `centerItems` / `rightItems`	`StatusBarItem[]`	`[]`

StatusBarItem：{ id, label, tone?, shortcut?, disabled? }。

事件：item-click(id, item)。