Alune 组件

StatusBadge

用文字和颜色共同表达状态。

使用方式

语义状态由宿主传入状态和回调，适合在不同应用和文档中复用。先完成快速开始中的 Provider 与样式配置。

import { StatusBadge } from '@alune/ui';

接入要求见快速开始，选择依据见交互与无障碍规范。

运行示例

运行与复制源码来自同一 TSX 文件。浮层、状态和主题独立于文档；所有回调只更新本地模拟数据。

查看运行源码

源码文件

import { useState } from 'react';
import { StatusBadge, RefBadge, CountBadge, EmptyState, LoadingState, ErrorState } from '@alune/ui';

export default function Example() {
  const [attempts, setAttempts] = useState(0);
  return (
    <div className="example">
      <section className="example-group">
        <h2 className="example-title">连接与工作区状态</h2>
        <div className="example-row">
          <StatusBadge status="connected" label="已连接" />
          <StatusBadge status="dirty" label="有更改" />
          <StatusBadge status="offline" label="离线" />
        </div>
        <div className="example-row">
          <RefBadge value="HEAD" />
          <RefBadge value="tag: v0.6.0" />
          <RefBadge value="origin/main" />
        </div>
        <div className="example-row">
          <span>
            需要关注的仓库 <CountBadge>3</CountBadge>
          </span>
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">空内容</h2>
        <div className="example-panel">
          <EmptyState title="暂无记录" description="完成操作后显示内容。" />
        </div>
        <div className="example-panel">
          <EmptyState compact title="此远端暂无开放中的 PR/MR" />
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">加载中</h2>
        <div className="example-panel">
          <LoadingState label="正在加载示例…" />
        </div>
      </section>
      <section className="example-group">
        <h2 className="example-title">失败与重试</h2>
        <div className="example-panel">
          <ErrorState
            title="示例加载失败"
            description="请重试"
            announce={false}
            onRetry={() => setAttempts((n) => n + 1)}
          />
        </div>
      </section>
      <p className="example-status" role="status">
        重试次数：{attempts}
      </p>
    </div>
  );
}

API

StatusBadge

StatusBadge 是通用组合成员，具体属性见关联 Props 表，运行效果见上方示例。

查看 StatusBadge 实现 ↗

StatusBadgeProps

属性 / 方法	类型	默认值	必填	说明
`status`	`string`	`—`	是	状态关键字，同时保留文字表达。
`label`	`string`	`—`	否	可访问名称或展示文案。
`subtle`	`boolean`	`false`	否	弱化状态外观。

查看 StatusBadgeProps 实现 ↗

交互与使用限制

为每个操作提供可访问名称，为输入关联 label；使用语义化组件和清晰焦点。不要只靠颜色传达状态，禁用与等待时避免重复执行。

宿主负责状态、业务操作、错误处理与真实内容。组件不读取业务 store、路由或 Electron。示例中的反馈和等待均为本地模拟。

键盘、焦点、风险确认与通知策略的完整约定见交互规范。

查看实现 ↗ 编辑文档 ↗ 设计与验收