EmptyState 空状态

空状态

业务组件在能力缺失时降级到空状态，这个组件就是那条验收标准的落点。

<pt-empty-state heading="还没有任何报表">创建第一个报表后，这里会列出它们。</pt-empty-state>

业务组件在能力缺失时必须降级到空状态或提示，不能抛未捕获异常 —— 这个组件就是那条验收标准的落点。

图标媒体位

media-variant="icon" 把图标放进 40px 的圆角底色方块。没有内容的插槽不留空白。

<pt-empty-state heading="没有匹配的结果" media-variant="icon">
  <span slot="icon">🔍</span>
  换个关键词，或者把筛选条件放宽一些。
  <pt-button slot="actions" variant="secondary" size="sm">清空筛选</pt-button>
</pt-empty-state>

标题与描述插槽

title 插槽有内容时替代 heading；描述可以用 description 插槽或默认插槽，里面直接放的链接带下划线。

<pt-empty-state>
  <span slot="title">还没有项目</span>
  <span slot="description">从模板开始，或者</span>
  <a href="#">查看入门指南</a>
</pt-empty-state>

结构

虚线框里纵向居中：上半是媒体位（icon 插槽）、标题、描述一组，下半是操作区（actions 插槽）。 没有内容的插槽不留空白 —— 外壳整块藏起来，不会多出一截间距或一个空的底色方块； 内容后加进来（框架条件渲染、异步数据）时自动显示。

• 标题默认取 heading，没给时是当前 locale 的「暂无数据」；title 插槽有内容时替代它，可以放富文本。
• 描述用 description 插槽或默认插槽都行（默认插槽是旧写法，继续兼容），两者同时用时默认插槽排在后面。 描述里直接放的 <a> 颜色随正文、带下划线。
• 操作区里的按钮横排，放不下时折行。

媒体位

media-variant 两档：default 不加外壳；icon 把图标放进 40px 的圆角底色方块，图标 24px。 default 下没写尺寸的 <svg> 兜底成 32px，放插画时自己给尺寸。

宽度与内边距

宿主占满容器宽度（width: 100%），需要更窄时在宿主上写 max-width。 内边距按组件自己的宽度切换：窄于 768px 是 24px，宽于等于 768px 是 48px。 用的是容器查询而不是视口断点 —— 空状态多半放在卡片、侧栏、下拉面板里，视口宽不代表它宽。

标题字重是 500，不是 kit 其它标题的 600（照源包，见排版 · 字重）。

API

属性

属性	Attribute	类型	默认值	说明
heading	heading	string | undefined	—	标题。默认取当前 locale 的「暂无数据」；title 插槽有内容时以插槽为准
mediaVariant	media-variant	"default" | "icon"	'default'	媒体位样式：default 不加外壳，icon 放进 40px 圆角底色方块、图标 24px

插槽

名称	说明
（默认）	描述文案（与 description 插槽等价，兼容旧写法；两者可同时用，默认插槽在后）
actions	操作区
description	描述文案
icon	媒体位：图标或插画。`media-variant="icon"` 时放进 40px 的底色方块
title	标题，有内容时替代 heading 文字

可定制的内部元素（::part()）

part	说明
actions	操作区
base	外层容器（虚线框）
description	描述
media	媒体位
title	标题