Empty
空状态占位。镜像 Semi Design：image / darkModeImage 接受插画节点(imageSlot)、SVG 精灵对象 { id, viewBox, url } 或图片 URL 字符串；darkModeImage 存在时监听 data-theme 在暗色下切换插画；title 用 Typography.Title（有图 heading=4，无图 heading=6+字重 400）；description 为 div；layout 支持 vertical / horizontal。插画由独立 illustrations 资产提供（对齐 @douyinfe/semi-illustrations）。
如何引入
import { Empty } from '@chenzy-design/svelte';基础用法
通过 imageSlot 传入插画节点，darkModeImageSlot 提供暗色适配；插画默认 150×150。
功能建设中
当前功能暂未开放，敬请期待。
自定义
通过 children 添加动作按钮，引导用户下一步行动。
空状态标题
开始创建你的第一个仪表盘吧！
不使用图片
不传插画时 title 降为 heading=6 + 常规字重，仅呈现文案。
暂未找到匹配的筛选结果
试试更换关键词或重置筛选条件。
不同布局
layout="horizontal" 插画在左、文案在右，适合长描述文本。
创建成功
这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。这是一段很长的描述文本，当文本过长的时候推荐使用这种布局形式。
占位图插画
内置 8 类扁平插画（含亮/暗两套），覆盖成功 / 失败 / 无权限 / 无内容 / 404 / 无结果 / 建设中 / 神游。
创建成功
加载失败
没有权限
暂无内容，请添加
页面404
搜索无结果
建设中
神游四方
API 参考
Empty
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
image | 占位图：SVG 精灵对象或图片 URL；自定义节点用 imageSlot | { id?; viewBox?; url? } | string | undefined |
darkModeImage | 暗色模式占位图，响应 data-theme 变化 | { id?; viewBox?; url? } | string | undefined |
title | 标题 | string | undefined |
description | 内容描述 | string | undefined |
imageStyle | 占位图容器（.cd-empty-image）内联样式 | string | undefined |
layout | 布局方式 | 'vertical'|'horizontal' | 'vertical' |
class | — | string | '' |
style | — | string | undefined |
children | 动作区（footer） | Snippet | undefined |
imageSlot | 自定义插画节点（等价 Semi image 传 ReactNode） | Snippet | undefined |
darkModeImageSlot | 暗色自定义插画节点 | Snippet | undefined |
Accessibility
| ARIA role | none |
- 插画 SVG aria-hidden=true
- 外部图片 <img> 带 alt（取 description，缺省 "empty"）
- 标题与描述为可读文本
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-empty-description-text-default | var(--cd-color-text-1) | 描述文字颜色 |