Result
汇总任务最终结果和后续操作。中文惯用名：结果页。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.result |
| 名称 | Result |
| 二级分类 | 反馈（feedback） |
| 用途 | 汇总任务最终结果和后续操作 |
| 描述 | 中文惯用名：结果页。 |
预览
静态结构：根节点 <div data-slot="result" data-status=...> 垂直居中排布（flex flex-col items-center gap-2 py-10 text-center）——图标区（data-slot="result-icon"）：success / error / info / warning 渲染 48px 语义色图标（CircleCheck / CircleX / Info / TriangleAlert），404 / 403 / 500 渲染状态码大字（text-5xl 弱色）；其后依次为标题（data-slot="result-title"，text-lg font-medium）、副标题（data-slot="result-subtitle"，text-sm 弱色）、操作区（data-slot="result-extra"，children，通常为按钮组）。
DSL 结构
{
"type": "Result",
"props": {
"status": "success",
"title": "提交成功",
"subTitle": "审批流程已发起，预计 2 小时内完成。"
},
"children": [
{
"type": "Button",
"props": {
"text": "返回列表"
}
},
{
"type": "Button",
"props": {
"text": "查看详情",
"variant": "primary"
}
}
]
}何时用
何时使用
- 汇总任务最终结果并给出后续操作：提交成功、支付完成、审核通过后的整页 / 区块反馈。
- 流程终结页：404 页面不存在、403 无权限、500 服务异常等 HTTP 错误页。
- 需要明确告诉用户「事情结束了、结果是什么、接下来能做什么」。
何时不用
- 瞬时操作反馈：使用 Message / Notification，Result 是驻留型结果呈现。
- 空数据占位（无搜索结果的列表、空表格）：使用 Empty——Result 强调任务终局，Empty 强调「本来就没有」。
- 过程进行中的状态：使用 Progress / Spinner / LoadingOverlay。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| success 成功 | CircleCheck 图标 + success 语义色 | 提交 / 支付 / 创建成功的结果页，附「返回列表」「查看详情」操作 |
| error 失败 | CircleX 图标 + destructive 语义色 | 任务失败结果页，附「重试」操作 |
| info 信息（默认） | Info 图标 + info 语义色 | 中性结果说明；status 缺省即 info |
| warning 警告 | TriangleAlert 图标 + warning 语义色 | 部分成功 / 有保留条件的结果 |
| 404 页面不存在 | 状态码大字（无图标） | 路由未匹配的兜底页，附「返回首页」 |
| 403 无权限 | 状态码大字（无图标） | 权限不足的访问拦截页，附「申请权限 / 返回」 |
| 500 服务异常 | 状态码大字（无图标） | 服务错误页，附「刷新重试」 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
status | `'success' | 'error' | 'info' |
title | string | — | 标题 |
subTitle | string | — | 副标题（说明原因 / 补充信息） |
children | ReactNode | — | 操作区（DSL 子树，经 Renderer children 机制渲染），通常为按钮组 |
className | string | — | 通用：根节点 class（与内置样式合并） |
style | CSSProperties | — | 通用：根节点内联样式 |
使用规范
- 标题给结论（「支付成功」），副标题给细节（订单号、失败原因），操作区给下一步（返回 / 重试 / 查看）。
- error / 500 必须提供恢复路径：「重试」或「返回」，不要让用户困在结果页。
- 与 Empty 的边界：任务有明确终局结果用 Result；天然无数据的空态用 Empty。
- 整页使用时放在路由页面级；区块级结果（卡片内任务完成）同样适用，但保持上下留白与居中。
- HTTP 错误页（404 / 403 / 500）用对应 status，不要拿 error 冒充——语义与图标体系不同。
正例
- ✓ 表单提交成功页：status=success、title「提交成功」、subTitle 附工单号，children 放「查看进度」+「返回列表」。
- ✓ 支付失败页：status=error、subTitle 说明失败原因，children 放「重新支付」（primary）+「取消订单」。
- ✓ 路由兜底：status=404、title「页面不存在」、children 放「返回首页」。
反例
- ✕ 用 Result 做瞬时保存成功提示（应使用 Message）。
- ✕ error 结果页无任何操作区，用户无法重试或离开。
- ✕ 用 status=error 渲染 404 页面（应使用专用状态码 status）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。