ChuFix UI v0.11.0
开发预览 更新于 2026-05-10

Empty 空状态

列表 / 表格 / 搜索结果为空时的占位组件，可带操作按钮，3 档尺寸。

基础用法

不传 props 显示默认图标和「暂无数据」。

背景 视口
暂无数据
src/App.vue 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty />
  </div>
</template>
import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty />
    </>
  );
}
import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty />
    </>
  );
}

自定义文案

title 是主文案，description 是副文案。两者都可作为 prop 或同名 slot 提供。

背景 视口
还没有项目
创建你的第一个项目来开始使用础件。
src/App.vue 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    />
  </div>
</template>
import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
      />
    </>
  );
}
import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
      />
    </>
  );
}

操作按钮

action 插槽（Vue）/ action prop（React）放跳转或新建按钮 — 让用户从空状态有路径回到正常状态。

背景 视口
还没有项目
创建你的第一个项目来开始使用础件。
src/App.vue 
<script setup lang="ts">
import { CfEmpty, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    >
      <template #action>
        <CfButton variant="primary" size="sm">+ 新建项目</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<script setup>
import { CfEmpty, CfButton } from '@chufix-design/vue';
</script>
<template>
  <div style="width: 100%; max-width: 32rem;">
    <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
    >
      <template #action>
        <CfButton variant="primary" size="sm">+ 新建项目</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
      action={<CfButton variant="primary" size="sm">+ 新建项目</CfButton>}
      />
    </>
  );
}
import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty
      title="还没有项目"
      description="创建你的第一个项目来开始使用础件。"
      action={<CfButton variant="primary" size="sm">+ 新建项目</CfButton>}
      />
    </>
  );
}

状态插图

默认图标来自 CfStatusIllustration。可以在 icon 插槽（Vue）/ icon prop（React）里换成搜索、上传、错误等不同状态。

背景 视口
没有搜索结果
换个关键词或清空筛选条件试试。
还没有文件
拖拽文件到这里，或点击上传。
src/App.vue 
<script setup lang="ts">
import { CfEmpty, CfStatusIllustration } from '@chufix-design/vue';
</script>
<template>
  <div class="empty-illustration-demo">
    <CfEmpty title="没有搜索结果" description="换个关键词或清空筛选条件试试。">
      <template #icon>
        <CfStatusIllustration variant="search" />
      </template>
    </CfEmpty>
    <CfEmpty title="还没有文件" description="拖拽文件到这里，或点击上传。">
      <template #icon>
        <CfStatusIllustration variant="upload" />
      </template>
    </CfEmpty>
  </div>
</template>
<style scoped>
.empty-illustration-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
</style>
<script setup>
import { CfEmpty, CfStatusIllustration } from '@chufix-design/vue';
</script>
<template>
  <div class="empty-illustration-demo">
    <CfEmpty title="没有搜索结果" description="换个关键词或清空筛选条件试试。">
      <template #icon>
        <CfStatusIllustration variant="search" />
      </template>
    </CfEmpty>
    <CfEmpty title="还没有文件" description="拖拽文件到这里，或点击上传。">
      <template #icon>
        <CfStatusIllustration variant="upload" />
      </template>
    </CfEmpty>
  </div>
</template>
<style scoped>
.empty-illustration-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
</style>
import { CfEmpty, CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty
      title="没有搜索结果"
      description="换个关键词或清空筛选条件试试。"
      icon={<CfStatusIllustration variant="search" />}
      />
      <CfEmpty
      title="还没有文件"
      description="拖拽文件到这里，或点击上传。"
      icon={<CfStatusIllustration variant="upload" />}
      />
    </>
  );
}
import { CfEmpty, CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty
      title="没有搜索结果"
      description="换个关键词或清空筛选条件试试。"
      icon={<CfStatusIllustration variant="search" />}
      />
      <CfEmpty
      title="还没有文件"
      description="拖拽文件到这里，或点击上传。"
      icon={<CfStatusIllustration variant="upload" />}
      />
    </>
  );
}

自定义图片

整页空状态可以直接传 image，适合接入品牌插画、AI 生成图片、业务 SVG 或 CDN 图片；小图标则继续用 icon slot / prop。

背景 视口
还没有发布记录
可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。
src/App.vue 
<script setup lang="ts">
import { CfButton, CfEmpty } from '@chufix-design/vue';

const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
  <ellipse cx="80" cy="132" rx="46" ry="7" fill="#E8EEF7"/>
  <rect x="26" y="32" width="108" height="82" rx="14" fill="#F8FAFC" stroke="#D7E3F2" stroke-width="2"/>
  <path d="M26 52h108" stroke="#E2EAF5" stroke-width="2"/>
  <circle cx="40" cy="42" r="2" fill="#B7C6DA"/>
  <circle cx="48" cy="42" r="2" fill="#B7C6DA"/>
  <circle cx="56" cy="42" r="2" fill="#B7C6DA"/>
  <rect x="44" y="66" width="54" height="8" rx="4" fill="#DDEBFF"/>
  <rect x="44" y="84" width="40" height="7" rx="3.5" fill="#E6ECF5"/>
  <rect x="44" y="100" width="50" height="7" rx="3.5" fill="#E6ECF5"/>
  <circle cx="116" cy="108" r="18" fill="#ECFDF3" stroke="#64C48D" stroke-width="2"/>
  <path d="M107 108.5l6 6 12-13" stroke="#16834F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`)}`;
</script>
<template>
  <div style="width: 100%; max-width: 34rem;">
    <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。"
      :image="image"
      image-alt=""
      size="lg"
    >
      <template #action>
        <CfButton variant="primary" size="sm">创建发布记录</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
<script setup>
import { CfButton, CfEmpty } from '@chufix-design/vue';

const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
  <ellipse cx="80" cy="132" rx="46" ry="7" fill="#E8EEF7"/>
  <rect x="26" y="32" width="108" height="82" rx="14" fill="#F8FAFC" stroke="#D7E3F2" stroke-width="2"/>
  <path d="M26 52h108" stroke="#E2EAF5" stroke-width="2"/>
  <circle cx="40" cy="42" r="2" fill="#B7C6DA"/>
  <circle cx="48" cy="42" r="2" fill="#B7C6DA"/>
  <circle cx="56" cy="42" r="2" fill="#B7C6DA"/>
  <rect x="44" y="66" width="54" height="8" rx="4" fill="#DDEBFF"/>
  <rect x="44" y="84" width="40" height="7" rx="3.5" fill="#E6ECF5"/>
  <rect x="44" y="100" width="50" height="7" rx="3.5" fill="#E6ECF5"/>
  <circle cx="116" cy="108" r="18" fill="#ECFDF3" stroke="#64C48D" stroke-width="2"/>
  <path d="M107 108.5l6 6 12-13" stroke="#16834F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
`)}`;
</script>
<template>
  <div style="width: 100%; max-width: 34rem;">
    <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画，也可以继续用 icon 插槽替换为 SVG / Icon。"
      :image="image"
      image-alt=""
      size="lg"
    >
      <template #action>
        <CfButton variant="primary" size="sm">创建发布记录</CfButton>
      </template>
    </CfEmpty>
  </div>
</template>
import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
    <ellipse cx="80" cy="132" rx="46" ry="7" fill="#E8EEF7"/>
    <rect x="26" y="32" width="108" height="82" rx="14" fill="#F8FAFC" stroke="#D7E3F2" stroke-width="2"/>
    <path d="M26 52h108" stroke="#E2EAF5" stroke-width="2"/>
    <circle cx="40" cy="42" r="2" fill="#B7C6DA"/>
    <circle cx="48" cy="42" r="2" fill="#B7C6DA"/>
    <circle cx="56" cy="42" r="2" fill="#B7C6DA"/>
    <rect x="44" y="66" width="54" height="8" rx="4" fill="#DDEBFF"/>
    <rect x="44" y="84" width="40" height="7" rx="3.5" fill="#E6ECF5"/>
    <rect x="44" y="100" width="50" height="7" rx="3.5" fill="#E6ECF5"/>
    <circle cx="116" cy="108" r="18" fill="#ECFDF3" stroke="#64C48D" stroke-width="2"/>
    <path d="M107 108.5l6 6 12-13" stroke="#16834F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  `)}`;
  return (
    <>
      <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画。"
      image={image}
      imageAlt=""
      size="lg"
      action={<CfButton variant="primary" size="sm">创建发布记录</CfButton>}
      />
    </>
  );
}
import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  const image = `data:image/svg+xml;utf8,${encodeURIComponent(`
  <svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none">
    <ellipse cx="80" cy="132" rx="46" ry="7" fill="#E8EEF7"/>
    <rect x="26" y="32" width="108" height="82" rx="14" fill="#F8FAFC" stroke="#D7E3F2" stroke-width="2"/>
    <path d="M26 52h108" stroke="#E2EAF5" stroke-width="2"/>
    <circle cx="40" cy="42" r="2" fill="#B7C6DA"/>
    <circle cx="48" cy="42" r="2" fill="#B7C6DA"/>
    <circle cx="56" cy="42" r="2" fill="#B7C6DA"/>
    <rect x="44" y="66" width="54" height="8" rx="4" fill="#DDEBFF"/>
    <rect x="44" y="84" width="40" height="7" rx="3.5" fill="#E6ECF5"/>
    <rect x="44" y="100" width="50" height="7" rx="3.5" fill="#E6ECF5"/>
    <circle cx="116" cy="108" r="18" fill="#ECFDF3" stroke="#64C48D" stroke-width="2"/>
    <path d="M107 108.5l6 6 12-13" stroke="#16834F" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  `)}`;
  return (
    <>
      <CfEmpty
      title="还没有发布记录"
      description="可以用 image 传入产品自己的插画。"
      image={image}
      imageAlt=""
      size="lg"
      action={<CfButton variant="primary" size="sm">创建发布记录</CfButton>}
      />
    </>
  );
}

三档尺寸

size —— sm（行内 inline 占位）/ md 默认 / lg 整页空状态。

背景 视口
size = sm
size = md
size = lg
src/App.vue 
<script setup lang="ts">
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfEmpty size="sm" title="size = sm" />
    <CfEmpty size="md" title="size = md" />
    <CfEmpty size="lg" title="size = lg" />
  </div>
</template>
<script setup>
import { CfEmpty } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack" style="width: 100%; max-width: 32rem;">
    <CfEmpty size="sm" title="size = sm" />
    <CfEmpty size="md" title="size = md" />
    <CfEmpty size="lg" title="size = lg" />
  </div>
</template>
import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty size="sm" />
      <CfEmpty size="md" />
      <CfEmpty size="lg" />
    </>
  );
}
import { CfEmpty } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfEmpty size="sm" />
      <CfEmpty size="md" />
      <CfEmpty size="lg" />
    </>
  );
}

API

Prop类型默认值说明
titlestring'暂无数据'主文案
descriptionstring—副文案
size'sm' | 'md' | 'lg''md'整体尺寸
imagestring—自定义图片 URL / data URL
imageAltstring''图片替代文本；装饰图保持空字符串

插槽 / Children

  • icon —— 替换默认 SVG 图标
  • title / description —— 替换文本节点（同名 prop 也可）
  • action —— 操作按钮区

CfStatusIllustration

Prop类型默认值说明
variant'empty' | 'search' | 'upload' | 'success' | 'info' | 'warning' | 'error' | 'not-found' | 'forbidden' | 'server-error''empty'状态插图类型
size'sm' | 'md' | 'lg''md'插图尺寸
titlestring—传入后作为可访问名称；不传则作为装饰图

反馈与讨论

Empty 空状态 的讨论

0
0 / 600
正在加载评论...