开发预览更新于 2026-05-10

Result 结果页

操作完成 / 失败 / 异常状态的整页反馈，适合提交结果、404 / 403 / 500 等占位。

基础用法

status 控制图标与默认标题；#extra（Vue）/ extra prop（React）放置后续操作按钮。

提交成功

申请已发送给管理员，预计 1 个工作日内处理。

<CfResult status="success" title="提交成功" description="申请已发送给管理员，预计 1 个工作日内处理。">
<template #extra>
  <CfButton variant="primary">返回首页</CfButton>
  <CfButton variant="tertiary">再交一份</CfButton>
</template>
</CfResult>

<CfResult
status="success"
title="提交成功"
description="申请已发送给管理员，预计 1 个工作日内处理。"
extra={<>
  <CfButton variant="primary">返回首页</CfButton>
  <CfButton variant="tertiary">再交一份</CfButton>
</>}
/>

异常状态

404 / 403 / 500 使用同一套状态插图，颜色跟随语义 token。

404 页面不存在

页面可能已移动或被删除。

403 无权访问

当前账号没有访问权限。

500 服务器开小差了

服务暂时不可用，请稍后重试。

<CfResult status="404" size="sm" description="页面可能已移动或被删除。" />
<CfResult status="403" size="sm" description="当前账号没有访问权限。" />
<CfResult status="500" size="sm" description="服务暂时不可用，请稍后重试。" />

<CfResult status="404" size="sm" description="页面可能已移动或被删除。" />
<CfResult status="403" size="sm" description="当前账号没有访问权限。" />
<CfResult status="500" size="sm" description="服务暂时不可用，请稍后重试。" />

API

属性	类型	默认值	说明
`status`	`'success' \| 'info' \| 'warning' \| 'error' \| '404' \| '403' \| '500'`	`'info'`	状态语义；映射到默认状态插图和默认标题
`title`	`string`	与 `status` 对应的默认文案	主标题
`description`	`string`	`—`	副标题
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	整体尺寸

Slot（Vue）/ prop（React）：icon 自定义图标，extra 操作区。