Alune 组件

ErrorState

呈现失败、可选反馈与宿主重试回调。

使用方式

默认发布反馈并显示空状态；嵌入独立状态演示时可传 announce=false。onRetry 由宿主重新加载数据，组件不调用业务 API。

import { ErrorState } 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

ErrorState

默认发布反馈并显示空状态；嵌入独立状态演示时可传 announce=false。onRetry 由宿主重新加载数据，组件不调用业务 API。

查看 ErrorState 实现 ↗

ErrorStateProps

属性 / 方法	类型	默认值	必填	说明
`title`	`string`	`'无法加载当前页面'`	否	标题或主文案。
`description`	`string \| null`	`—`	否	辅助说明。
`onRetry`	`(() => void)`	`—`	否	重试回调，状态更新由宿主负责。
`announce`	`boolean`	`true`	否	是否同时发布反馈。

查看 ErrorStateProps 实现 ↗

交互与使用限制

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

默认发布反馈并显示空状态；嵌入独立状态演示时可传 announce=false。onRetry 由宿主重新加载数据，组件不调用业务 API。

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

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