State UI Kit

import { ProgressBar } from '@ui/state-kit';

<ProgressBar
  value={progress}
  striped
  animated
  showInfo={true}
  onCancel={() => abortController.abort()}
/>

<Button loading={isSubmitting} disabled={isSubmitting}>
  {isSubmitting ? (
    <Spinner size="sm" label="处理中..." />
  ) : (
    '确认提交'
  )}
</Button>

<template>
  <SkeletonGroup :loading="isLoading" animated>
    <template #skeleton>
      <SkeletonAvatar size="md" />
      <SkeletonText :rows="3" />
    </template>
    <RealCardContent :data="data" />
  </SkeletonGroup>
</template>

<Empty
  image="inbox"
  title="暂无数据"
  description="尝试调整筛选条件或创建一条新纪录"
>
  <Button type="primary" onClick={handleCreate}>立即新建</Button>
</Empty>

<Alert
  type="error"
  showIcon
  message="操作执行失败"
  description={error.message}
  action={<Button size="small" onClick={retry}>重试</Button>}
/>

<Result
  status="404"
  title="404"
  subTitle="抱歉，您访问的页面不存在。"
  extra={<Link to="/"><Button type="primary">返回主页</Button></Link>}
/>

class ServerErrorBoundary extends React.Component {
  render() {
    if (this.state.hasError) {
      return <ErrorScreen code={500} onRetry={this.handleReload} />;
    }
    return this.props.children;
  }
}

const { isOnline } = useNetworkStatus();

if (!isOnline) {
  return (
    <OfflineBanner
      bannerType="floating"
      onReconnect={syncOfflineCache}
    />
  );
}

<MaintenanceGuard
  :estimated-end="plannedEndTime"
  allow-whitelist-ip
  @notify="handleUserSubscribe"
>
  <AppRouterView />
</MaintenanceGuard>