Result 结果页
Result 用于承载关键操作后的反馈、异常页与阶段完成态。它比 Alert 更完整,也比空状态更适合承接下一步动作。
Result 参考成熟结果页组件的能力面,视觉保持 Rue 自己的圆角面板、柔和光晕和较轻的插画结构;除了 success、info、warning、error 之外,也内置了 403、404、500 三种异常状态。
# 基础状态
覆盖最常见的操作结果场景。四种语义状态共享一套 Result 布局,但通过图标与色彩建立清晰区分。
发布成功
等待同步
仍需人工确认
校验失败
# 异常状态页
403、404、500 内置默认标题、副标题和插画,适合直接作为独立页面或路由兜底页使用。
访问受限Rue Result
403
Permission rules blocked the current request.
当前空间暂不可访问
路径缺失Rue Result
404
The requested route is no longer mapped.
页面没有找到
服务异常Rue Result
500
The backend returned an unexpected fault.
系统刚刚开了个小差
# 操作区与扩展内容
extra 负责下一步动作,children 负责补充上下文或明细面板,适合复杂业务流收尾页。
云主机已开通
实例规格
4C8G / 华东 2
自动扩容策略已启用
公网访问
已开启HTTPS
默认指向 preview.rue.dev
提醒
- 建议补充管理员手机号
- 七天后会触发成本周报
# 自定义图标与无图标模式
你可以把 Result 用成更品牌化的完成态,也可以完全拿掉 icon,仅保持标题、动作和补充文案。
归档任务已排定
你正在使用只读副本
# 视觉变体与流程排布
surface、soft、outline 适合不同密度的页面;align=start 更适合承载表单结果、审核流和运维说明。
安全基线已更新
推荐下一步:整理路由入口
回滚未完成
node-sh-02: checksum mismatch
node-bj-05: waiting runtime restart
# 预制异常插画
Result 也暴露了可单独复用的异常插画,适合接到自定义页面或空状态外壳里。
访问受限Rue Result
403
Permission rules blocked the current request.
Result.PRESENTED_IMAGE_403
路径缺失Rue Result
404
The requested route is no longer mapped.
Result.PRESENTED_IMAGE_404
服务异常Rue Result
500
The backend returned an unexpected fault.
Result.PRESENTED_IMAGE_500
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
align | 内容对齐方式,支持居中展示或左对齐的流程详情布局 | 'center' | 'start' | center |
bodyClassName / bodyStyle | children 内容面板的类名与样式 | string / any | - |
bordered | 是否显示边框;outline 变体会强制保持边框视觉 | boolean | true |
children | 结果页下方的扩展说明区域,可放详情、表单或下一步信息 | any | - |
contentClassName / contentStyle | 内部纵向布局容器的类名与样式 | string / any | - |
extra | 操作区,可传单个节点或按钮数组 | any | - |
icon | 自定义图标或插画;传 null / false 可隐藏图标区 | any | 按 status 自动生成 |
showIcon | 显式控制默认图标区显隐 | boolean | true |
size | 控制标题、图标和异常插画尺寸 | 'sm' | 'md' | 'lg' | md |
status | 语义状态,支持操作结果与 403/404/500 异常页 | 'success' | 'info' | 'warning' | 'error' | 403 | 404 | 500 | '403' | '404' | '500' | info |
subTitle | 辅助说明文案;403/404/500 未传时会自动补默认副标题 | any | - |
title | 主标题;403/404/500 未传时会自动补默认标题 | any | - |
variant | Rue 风格外观,适配仪表盘、表单完成态与空页面 | 'surface' | 'soft' | 'outline' | surface |
除了上表 props,组件还暴露了 Result.PRESENTED_IMAGE_403、Result.PRESENTED_IMAGE_404 和 Result.PRESENTED_IMAGE_500 三个静态插画组件,便于你在更复杂的空壳页面里单独复用。