R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

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 / bodyStylechildren 内容面板的类名与样式string / any-
bordered是否显示边框;outline 变体会强制保持边框视觉booleantrue
children结果页下方的扩展说明区域,可放详情、表单或下一步信息any-
contentClassName / contentStyle内部纵向布局容器的类名与样式string / any-
extra操作区,可传单个节点或按钮数组any-
icon自定义图标或插画;传 null / false 可隐藏图标区any按 status 自动生成
showIcon显式控制默认图标区显隐booleantrue
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-
variantRue 风格外观,适配仪表盘、表单完成态与空页面'surface' | 'soft' | 'outline'surface

除了上表 props,组件还暴露了 Result.PRESENTED_IMAGE_403、Result.PRESENTED_IMAGE_404 和 Result.PRESENTED_IMAGE_500 三个静态插画组件,便于你在更复杂的空壳页面里单独复用。

页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS