全状态组件库 · State Gallery

app://sync/resources

同步资源中67%

STATE / 01 · LOADING

Loading

已知进度的等待：让用户看见任务正在向前走。

触发场景上传文件、导入数据、安装更新、批量导出等可估量耗时的操作。

恢复操作

showLoading({
  type: "determinate",
  value: 0.67,
  label: "同步资源…"
})

app://query?q=latest

正在请求，请稍候

STATE / 02 · SPINNER

Spinner

不确定时长的旋转等待，适合短请求。

触发场景首次拉取列表、提交表单后的瞬时等待、刷新局部面板。

恢复操作

返回总览

if (pending && !progress) {
  return <Spinner label="正在请求…" />
}

app://feed

STATE / 03 · SKELETON

Skeleton

内容未到先占位，用闪烁条稳住页面结构。

触发场景信息流、个人主页、详情卡等布局已知、数据稍后到达的页面。

恢复操作

{loading
  ? <Skeleton rows={3} avatar />
  : <Feed items={data} />}

app://inbox

盒子是空的

还没有任何项目，创建第一条开始。

STATE / 04 · EMPTY

Empty

空盒子加图标：成功请求后，这里确实什么都没有。

触发场景新账号、已清空列表、筛选结果为零、尚未配置的工作区。

恢复操作

if (!items.length) {
  return <Empty
    icon="box"
    cta="创建第一条" />
}

app://orders/checkout

请求失败

无法完成结账，错误码 PAY_TIMEOUT。请检查后重试。

STATE / 05 · ERROR

Error

红边错误提示：这次操作没有成功，但页面还在。

触发场景校验失败、接口 4xx、权限不足、支付超时等可就地修复的错误。

恢复操作

catch (err) {
  notify.error({
    border: "danger",
    code: err.code,
    retry: true
  })
}

app://pages/missing

404

你要找的页面已经搬走，或从未存在。

回家

STATE / 06 · 404

404

大字号缺页，并给出明确的回家路径。

触发场景错误 URL、已删除资源、过期分享链接、拼写错误的路由。

恢复操作

返回首页

if (!route.match(path)) {
  render(<NotFound
    title="404"
    home="/" />)
}

app://api/v1/report

500

服务出错，不是你的问题。

GET /api/v1/report 500
upstream timeout after 15000ms
request_id=8f2c-19aa

STATE / 07 · 500

500

服务器内部出错：展示故障，把责任从用户身上拿开。

触发场景未捕获异常、依赖宕机、网关超时、发布中断导致的 5xx。

恢复操作

onError(500, (req) => {
  return ServerError({
    id: req.id,
    retry: true
  })
})

app://offline

网络已断开

检查连接后点重连。

STATE / 08 · OFFLINE

Offline

断网状态：明确告知连接丢失，并提供重连入口。

触发场景飞行模式、Wi-Fi 掉线、弱网超时、浏览器 offline 事件。

恢复操作

window.addEventListener("offline", () => {
  showOffline({ reconnect: ping })
})

app://status/maintenance

预计恢复 02:47:19

系统维护中，部分写入已暂停。

STATE / 09 · MAINTENANCE

Maintenance

维护中带倒计时占位，告诉用户还要等多久。

触发场景计划内升级、数据库迁移、发布窗口、紧急热修封网。

恢复操作

查看状态页

if (status === "maintenance") {
  return <Maintenance
    eta={window.endAt} />
}