BizEmpty 空态

统一空数据展示的空态组件，基于 el-empty 二次封装：收敛文案 / 图标尺寸口径，支持底部操作区。

基础用法

暂无数据

默认：暂无数据 / 60px

暂无筛选结果

自定义文案 + 图标尺寸

筛选结果为空，试试放宽条件

#description 插槽自定义描述

默认空态、自定义文案与图标尺寸、#description 插槽自定义描述。

<script setup lang="ts">
/** 基础用法：默认空态 / 自定义文案与图标尺寸 / #description 插槽自定义描述 */
import { BizEmpty } from 'vue3-ep-biz-lib'
</script>

<template>
  <div class="row">
    <div class="cell">
      <BizEmpty />
      <div class="tip">默认：暂无数据 / 60px</div>
    </div>
    <div class="cell">
      <BizEmpty description="暂无筛选结果" :image-size="80" />
      <div class="tip">自定义文案 + 图标尺寸</div>
    </div>
    <div class="cell">
      <BizEmpty :image-size="48">
        <template #description>
          <span class="custom-desc">筛选结果为空，试试放宽条件</span>
        </template>
      </BizEmpty>
      <div class="tip">#description 插槽自定义描述</div>
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  gap: 24px;
}

.cell {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--el-border-radius-base);
}

.tip {
  margin-top: 8px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  text-align: center;
}
.custom-desc {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

其他用法

当前项目还没有任何数据

#image 插槽自定义图标，default 插槽放置操作按钮（如"新增数据"）。

<script setup lang="ts">
/** 其他用法：#image 自定义图标 + default 插槽操作按钮 */
import { ElMessage } from 'element-plus'
import { Box } from '@element-plus/icons-vue'
import { BizButton, BizEmpty } from 'vue3-ep-biz-lib'

const onAdd = (): void => {
  ElMessage.info('点击了「新增数据」')
}
</script>

<template>
  <div class="wrap">
    <BizEmpty description="当前项目还没有任何数据">
      <template #image>
        <ElIcon :size="56" color="var(--el-text-color-placeholder)"><Box /></ElIcon>
      </template>
      <BizButton type="primary" size="small" @click="onAdd">新增数据</BizButton>
    </BizEmpty>
  </div>
</template>

<style scoped>
.wrap {
  padding: 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: var(--el-border-radius-base);
}
</style>

显示代码

无权限页与查询无结果

抱歉，您没有访问该页面的权限

未查询到符合条件的工单

引导场景：#image 插槽自定义大图标（权限锁 / 空结果），default 插槽放主次操作按钮（返回首页 / 申请权限 / 清空筛选）——空态不止占位，更要指路。

<script setup lang="ts">
/** 场景：无权限/异常页引导——default 插槽放操作按钮，image 插槽自定义大图标 */
import { ElButton, ElIcon } from 'element-plus'
import { CircleCloseFilled, Lock } from '@element-plus/icons-vue'
import { BizEmpty } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const onBack = (): void => {
  ElMessage.info('返回首页（示例）')
}

const onApply = (): void => {
  ElMessage.info('跳转权限申请流程（示例）')
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 32px">
    <!-- 无权限页：大图标 + 主次操作 -->
    <BizEmpty description="抱歉，您没有访问该页面的权限" :image-size="72">
      <template #image>
        <ElIcon :size="72" color="var(--el-color-warning)"><Lock /></ElIcon>
      </template>
      <div style="display: flex; gap: 12px; margin-top: 8px">
        <ElButton type="primary" @click="onBack">返回首页</ElButton>
        <ElButton @click="onApply">申请权限</ElButton>
      </div>
    </BizEmpty>

    <!-- 查询无结果：轻量空态 + 重试 -->
    <BizEmpty description="未查询到符合条件的工单" :image-size="48">
      <template #image>
        <ElIcon :size="48" color="var(--el-text-color-placeholder)"><CircleCloseFilled /></ElIcon>
      </template>
      <ElButton link type="primary" @click="onBack">清空筛选条件</ElButton>
    </BizEmpty>
  </div>
</template>

显示代码

首次使用引导

还没有任何项目，创建你的第一个项目吧

冷启动场景：空项目列表 + 新建 / 导入双入口，#image 插槽换引导图标。

<script setup lang="ts">
/** 场景：首次使用引导——空项目列表 + 创建/导入双入口 */
import { ElButton, ElIcon } from 'element-plus'
import { FolderOpened, Plus } from '@element-plus/icons-vue'
import { BizButton, BizEmpty } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const onCreate = (): void => {
  ElMessage.success('打开创建向导（示例）')
}
</script>

<template>
  <BizEmpty description="还没有任何项目，创建你的第一个项目吧" :image-size="72">
    <template #image>
      <ElIcon :size="72" color="var(--el-color-primary-light-5)"><FolderOpened /></ElIcon>
    </template>
    <div style="display: flex; gap: 12px; margin-top: 8px">
      <BizButton type="primary" :icon="Plus" @click="onCreate">新建项目</BizButton>
      <ElButton @click="ElMessage.info('导入 Git 仓库（示例）')">导入已有仓库</ElButton>
    </div>
  </BizEmpty>
</template>

显示代码

检索无结果

当前条件：关键词 = 高压泵时间 = 近 7 天仅看未闭环

未找到匹配「高压泵」的工单，试试放宽条件

搜索场景：回显当前筛选条件（关键词 / 时间 / 范围），空态给出三种放宽建议动作——空态也要指路。

<script setup lang="ts">
/** 场景：检索无结果——回显条件 + 三种下一步建议 */
import { ElButton, ElTag } from 'element-plus'
import { BizEmpty } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const onAction = (text: string): void => {
  ElMessage.info(text)
}
</script>

<template>
  <div style="max-width: 520px">
    <div style="display: flex; gap: 8px; margin-bottom: 12px; align-items: center">
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">当前条件：</span>
      <ElTag size="small">关键词 = 高压泵</ElTag>
      <ElTag size="small">时间 = 近 7 天</ElTag>
      <ElTag size="small" type="warning">仅看未闭环</ElTag>
    </div>
    <BizEmpty description="未找到匹配「高压泵」的工单，试试放宽条件" :image-size="56">
      <div style="display: flex; gap: 16px; margin-top: 4px">
        <ElButton link type="primary" @click="onAction('已清空时间限制')">不限时间</ElButton>
        <ElButton link type="primary" @click="onAction('已包含已闭环工单')">含已闭环</ElButton>
        <ElButton link @click="onAction('已重置全部条件')">清空全部条件</ElButton>
      </div>
    </BizEmpty>
  </div>
</template>

显示代码

图表无数据

该主机尚未部署采集探针

所选时间范围内无上报数据

监控场景：并排两个空图——探针未部署（引导部署按钮）与暂无上报（重试按钮），两种口径两种动作。

<script setup lang="ts">
/** 场景：监控图表无数据——探针未部署/暂无上报两种口径 */
import { ElButton, ElMessage } from 'element-plus'
import { BizEmpty } from 'vue3-ep-biz-lib'

const onRefresh = (): void => {
  ElMessage.info('已重新拉取（示例）')
}

const onDeploy = (): void => {
  ElMessage.info('跳转探针部署指引（示例）')
}
</script>

<template>
  <div style="display: flex; gap: 16px; max-width: 720px">
    <div style="flex: 1; height: 200px; border: 1px dashed var(--el-border-color); border-radius: 6px; display: flex; align-items: center; justify-content: center">
      <BizEmpty description="该主机尚未部署采集探针" :image-size="48">
        <ElButton type="primary" size="small" @click="onDeploy">部署探针</ElButton>
      </BizEmpty>
    </div>
    <div style="flex: 1; height: 200px; border: 1px dashed var(--el-border-color); border-radius: 6px; display: flex; align-items: center; justify-content: center">
      <BizEmpty description="所选时间范围内无上报数据" :image-size="48">
        <ElButton size="small" @click="onRefresh">重新拉取</ElButton>
      </BizEmpty>
    </div>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
description	string	'暂无数据'	空态描述文案（#description 插槽优先）
image-size	number	60	图标尺寸（px）

其余属性（image、image-src 等）经 v-bind="$attrs" 全量透传 el-empty。

Events

事件名	参数	说明
—	—	无自有事件；el-empty 原生事件经 $attrs 透传

Slots

插槽名	说明
default	底部操作区（通常放按钮）
image	自定义图标（如 ElIcon 图标组件）
description	自定义描述文案（覆盖 prop）

Expose

属性/方法	说明
description	当前描述文案