Empty
表示暂无内容并提供下一步。中文惯用名：空状态。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.empty |
| 名称 | Empty |
| 二级分类 | 数据展示（data-display） |
| 用途 | 表示暂无内容并提供下一步 |
| 描述 | 中文惯用名：空状态。 |
预览
静态结构：Empty 渲染为 data-slot="empty" 居中容器：data-slot="empty-header" 内可选 data-slot="empty-title"（标题）与 data-slot="empty-description"（辅助说明，弱化色文本）；children 存在时另渲染 data-slot="empty-content" 操作区，为 DSL 子树经 Renderer children 机制渲染（如「新建记录」按钮）。title / description 均缺省时不渲染对应节点。
DSL 结构
{
"type": "Empty",
"props": {
"title": "暂无数据",
"description": "当前筛选条件下没有匹配的记录，可调整条件后重试。"
},
"children": [
{
"type": "Button",
"props": {
"text": "新建记录",
"variant": "primary",
"size": "small"
}
}
]
}何时用
何时使用
- 确定无数据可展示时的占位：筛选无结果、列表为空、尚未创建任何内容。
- 需要引导用户下一步动作：children 传操作按钮（「新建记录」「清除筛选」）。
- 需要给出无数据原因的说明（description），避免用户以为页面出错。
何时不用
- 数据正在加载、结构已知：使用 Skeleton（骨架屏）——确定无数据用 Empty，加载中结构占位用 Skeleton。
- 请求失败或无权访问：使用 Result / Alert 类反馈组件，Empty 只表达「没有数据」而非「出错了」。
- 局部无数据的极简场景（表格空行、下拉无匹配）：组件内部已有的空态足以承担，不必再套 Empty。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 标题 + 说明（缺省） | 居中标题 + 弱化说明文案 | 告知无数据并解释原因 |
| 带操作区 | 说明下方追加 children 操作按钮 | 引导用户下一步（新建、清除筛选） |
| 仅标题 | 只有一行标题（description 缺省） | 紧凑容器内的极简空态 |
| 仅说明 | 只有描述文案（title 缺省） | 标题已由外层容器提供的场景 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 空状态标题；缺省不渲染 |
description | string | — | 辅助说明文案（弱化色）；缺省不渲染 |
children | ReactNode | — | 操作区（DSL 子树经 Renderer children 机制渲染）；缺省不渲染操作区 |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 区分三种状态：加载中用 Skeleton、确定无数据用 Empty、请求失败用 Result / Alert——不要把失败伪装成空数据。
- description 说明「为什么没有」与「怎么办」（如「当前筛选条件下没有匹配的记录，可调整条件后重试」）。
- 操作区只给一个主行动（清除筛选 / 新建），多个入口会稀释引导效果。
- 空态文案与上下文一致：不同筛选条件导致的空态应带上当前条件的关键信息。
- 表格、下拉等组件自带空态时不要叠加 Empty，避免双重占位与视觉噪音。
正例
- ✓ 列表无结果：title「暂无数据」+ description 说明筛选条件 + children「清除筛选」按钮。
- ✓ 尚无内容：description「还没有创建任何报表」+ primary「新建记录」引导创建。
- ✓ 加载失败区分：失败场景改用 Result 并给重试入口，不混用 Empty。
反例
- ✕ 数据仍在加载时就展示 Empty，用户以为真的没有数据（应使用 Skeleton）。
- ✕ 请求失败 / 无权限时展示 Empty，掩盖了真实错误并缺少重试入口。
- ✕ 在 Table 空态上再套一层 Empty，出现两处「暂无数据」。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。