仅桌面端保证样式

EmptyState 统一空态

列表、搜索、详情等场景的统一空态：图标 + 标题 + 描述 + 动作区。default 纵向适合页面级空态，compact 横向适合卡片/列表内嵌。

基础用法

暂无订单

当前筛选条件下没有匹配的订单，调整筛选后重试

  <eb-empty-state
    title="暂无订单"
    description="当前筛选条件下没有匹配的订单，调整筛选后重试"
  />

紧凑模式

size 取 compact 时横向排布，高度更小，适合嵌在表格和卡片内：

暂无审批记录

  <div style="border:1px solid var(--eb-border-color);border-radius:8px;padding:16px">
    <eb-empty-state size="compact" title="暂无审批记录" />
  </div>

语义色调

tone 决定图标底色，用于区分普通空态与告警、出错：

没有找到结果

换个关键词试试

库存不足

以下 3 个商品需要补货

  <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">
    <eb-empty-state icon="search" tone="primary" title="没有找到结果" description="换个关键词试试" />
    <eb-empty-state icon="inbox" tone="warning" title="库存不足" description="以下 3 个商品需要补货" />
  </div>

动作区与自定义图标

actions 插槽放后续动作，icon 插槽可完全替换图标区：

加载失败

网络异常，请稍后重试

  <eb-empty-state icon="inbox" tone="danger" title="加载失败" description="网络异常，请稍后重试">
    <template #actions>
      <eb-button size="small" type="primary">重新加载</eb-button>
      <eb-button size="small">返回列表</eb-button>
    </template>
  </eb-empty-state>

EmptyState Props

参数	说明	类型	默认值
icon	图标名	string	box
title	空态标题	string
description	补充描述	string
size	default 纵向页面级 / compact 横向紧凑	default \| compact	default
tone	图标底色语义	default \| primary \| success \| warning \| danger	default

EmptyState Slots

参数	说明	类型	默认值
icon	自定义图标区	—	—
title	自定义标题	—	—
description	自定义描述	—	—
actions	动作区	—	—

EmptyState 统一空态 ​

基础用法 ​

紧凑模式 ​

语义色调 ​