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

StatusBar 状态栏

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

基础用法

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

背景

编辑器主区

<script setup lang="ts">
import { CfStatusBar } from '@chufix-design/vue';
const left = [
  { id: 'branch', label: '⎇ main' },
  { id: 'sync', label: '↑ 0 ↓ 0' },
  { id: 'errors', label: '✗ 0', tone: 'error' as const },
  { id: 'warnings', label: '⚠ 3', tone: 'warning' as const },
];
const center = [
  { id: 'cursor', label: 'Ln 142, Col 18' },
  { id: 'indent', label: 'Spaces: 2' },
  { id: 'eol', label: 'LF' },
  { id: 'lang', label: 'TypeScript' },
];
const right = [
  { id: 'live', label: '● Live' },
];
</script>

<template>
  <div style="border: 1px solid var(--line-1); border-radius: var(--r-6); overflow: hidden;">
    <div style="height: 80px; background: var(--bg-inset); display: flex; align-items: center; justify-content: center; color: var(--fg-3);">编辑器主区</div>
    <CfStatusBar :left-items="left" :center-items="center" :right-items="right" />
  </div>
</template>

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

6 种 tone

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

背景

<script setup lang="ts">
import { CfStatusBar } from '@chufix-design/vue';
const tones = ['default', 'accent', 'success', 'warning', 'error', 'info'] as const;
const items = [
  { id: '1', label: '⎇ main' },
  { id: '2', label: 'TypeScript' },
  { id: '3', label: 'UTF-8' },
];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 4px;">
    <div v-for="t in tones" :key="t" style="border: 1px solid var(--line-1); border-radius: var(--r-4); overflow: hidden;">
      <CfStatusBar :tone="t" :left-items="items" :right-items="[{ id: '0', label: t }]" />
    </div>
  </div>
</template>

<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)。