BizResult 业务结果页

统一的结果反馈页：常规四态（success / error / warning / info，状态图标着色）+ 三个 HTTP 专属态（404 / 403 / 500 大号状态码），标题、副文案、操作按钮区、页脚齐备。表单提交成功/失败回跳、支付结果、异常兜底页。与 BizEmpty（无数据空态）分工互补。

提交成功回跳

报销单提交成功

单号 BX202609280001，已进入三级审批流程，预计 2 个工作日内完成审核。

提交时间：2026-09-28 10:32:17

成功态 + 操作按钮（extra 插槽）+ 页脚（footer 插槽）。

<script setup lang="ts">
/** 场景：表单提交成功回跳页——状态图标 + 标题 + 副文案 + 操作按钮 */
import { ElButton } from 'element-plus'
import { BizResult } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 560px; border: 1px solid var(--el-border-color-lighter); border-radius: 4px">
    <BizResult
      type="success"
      title="报销单提交成功"
      description="单号 BX202609280001，已进入三级审批流程，预计 2 个工作日内完成审核。"
    >
      <template #extra>
        <ElButton type="primary">查看审批进度</ElButton>
        <ElButton>继续填报</ElButton>
      </template>
      <template #footer>提交时间：2026-09-28 10:32:17</template>
    </BizResult>
  </div>
</template>

显示代码

操作失败反馈

批量导入失败

第 327 行「金额」列包含非数字字符，整批数据未入库；请修正后重新上传。

失败原因 + 下载失败明细 / 重新上传双操作。

<script setup lang="ts">
/** 场景：操作失败反馈——失败原因 + 重试 / 联系客服 */
import { ElButton } from 'element-plus'
import { BizResult } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 560px; border: 1px solid var(--el-border-color-lighter); border-radius: 4px">
    <BizResult
      type="error"
      title="批量导入失败"
      description="第 327 行「金额」列包含非数字字符，整批数据未入库；请修正后重新上传。"
    >
      <template #extra>
        <ElButton type="primary">下载失败明细</ElButton>
        <ElButton>重新上传</ElButton>
      </template>
    </BizResult>
  </div>
</template>

显示代码

HTTP 异常兜底（404/403/500）

404403500

404

页面不存在

抱歉，页面暂时无法访问，您可以返回首页或联系管理员。

大号状态码 + 返回首页 / 刷新重试，适合路由级异常页。

<script setup lang="ts">
/** 场景：路由异常兜底——404 / 403 / 500 三种 HTTP 态切换预览 */
import { ref } from 'vue'
import { ElButton, ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizResult } from 'vue3-ep-biz-lib'
import type { BizResultType } from 'vue3-ep-biz-lib'

const type = ref<BizResultType>('not-found')
</script>

<template>
  <div style="max-width: 640px">
    <ElRadioGroup v-model="type" style="margin-bottom: 8px">
      <ElRadioButton value="not-found">404</ElRadioButton>
      <ElRadioButton value="forbidden">403</ElRadioButton>
      <ElRadioButton value="server-error">500</ElRadioButton>
    </ElRadioGroup>

    <div style="border: 1px solid var(--el-border-color-lighter); border-radius: 4px">
      <BizResult :type="type" description="抱歉，页面暂时无法访问，您可以返回首页或联系管理员。">
        <template #extra>
          <ElButton type="primary">返回首页</ElButton>
          <ElButton>刷新重试</ElButton>
        </template>
      </BizResult>
    </div>
  </div>
</template>

显示代码

警示与信息态

部分导入成功

800 条中 12 条重复被跳过

功能建设中

该模块将于下个版本上线

部分成功（warning）/ 建设中（info）等中间态反馈。

<script setup lang="ts">
/** 场景：四态全景——success / warning / info / error 内置图标与默认标题 */
import { BizResult } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px">
    <div style="border: 1px solid var(--el-border-color-lighter); border-radius: 4px">
      <BizResult type="warning" title="部分导入成功" description="800 条中 12 条重复被跳过" />
    </div>
    <div style="border: 1px solid var(--el-border-color-lighter); border-radius: 4px">
      <BizResult type="info" title="功能建设中" description="该模块将于下个版本上线" />
    </div>
  </div>
</template>

显示代码

自定义图标

公告已发布

将在 5 分钟内推送到全员客户端

#icon 插槽替换默认状态图标（业务图标 / 插画）。

<script setup lang="ts">
/** 场景：icon 插槽自定义——用业务图标 / 插画替换默认状态图标 */
import { ElButton } from 'element-plus'
import { Promotion } from '@element-plus/icons-vue'
import { BizResult } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 560px; border: 1px solid var(--el-border-color-lighter); border-radius: 4px">
    <BizResult type="info" title="公告已发布" description="将在 5 分钟内推送到全员客户端">
      <template #icon>
        <div
          style="
            width: 88px;
            height: 88px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
            font-size: 40px;
          "
        >
          <ElIcon :size="40"><Promotion /></ElIcon>
        </div>
      </template>
      <template #extra>
        <ElButton type="primary">查看公告</ElButton>
      </template>
    </BizResult>
  </div>
</template>

显示代码

支付结果页

支付成功

￥ 12,800.00

年度会员 · 订单号 VIP202609280009 · 支付方式：对公转账

默认插槽承载金额等富文本内容。

<script setup lang="ts">
/** 场景：支付结果页——成功态 + 金额强调 + 双操作 */
import { ElButton } from 'element-plus'
import { BizResult } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 560px; border: 1px solid var(--el-border-color-lighter); border-radius: 4px">
    <BizResult type="success" title="支付成功">
      <div style="font-size: 28px; font-weight: 700; color: var(--el-text-color-primary)">￥ 12,800.00</div>
      <div style="margin-top: 6px; font-size: 13px; color: var(--el-text-color-secondary)">
        年度会员 · 订单号 VIP202609280009 · 支付方式：对公转账
      </div>
      <template #extra>
        <ElButton type="primary">开具发票</ElButton>
        <ElButton>返回工作台</ElButton>
      </template>
    </BizResult>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
type	'success' | 'error' | 'warning' | 'info' | 'not-found' | 'forbidden' | 'server-error'	'info'	结果类型
title	string	内置文案	主标题（如「操作成功」「页面不存在」）
description	string	—	副文案

Slots

插槽名	说明
default	覆盖 description 的富内容区（金额 / 单号等）
icon	替换默认状态图标 / 状态码
extra	操作按钮区
footer	页脚辅助信息