Result 结果
xy-result 用来承接"操作完成之后,下一步该做什么"这类结果态。推荐使用 status + description 组合;sub-title / subTitle 为兼容入口,功能与 description 相同但优先级更低。
基础用法
使用 status、title 和 description 写法,适合先把页面结果态快速补齐。
基础用法操作结果
结果页用于展示操作成功或失败的状态,引导用户下一步操作。
操作成功
新成员邀请已发送,对方将在 24 小时内收到邮件通知。
状态扩展
当你更希望沿用当前库的状态命名时,可以直接使用 status + description。
等待补充
当前还缺少负责人和发布时间,先补齐再提交审批。
正在处理中
审批流已发起,系统会在节点变化时自动同步状态。
已完成
同步任务已经落库,相关成员会收到站内通知。
需要关注
存在 2 项边界配置未确认,建议先回看参数。
执行失败
第三方接口超时,请稍后重试或切换备用通道。
无访问权限
当前账号缺少该页面权限,请联系管理员开通。
页面不存在
目标资源可能已经移动,建议返回工作台重新进入。
卡片态
variant='card' 适合放在详情页、弹窗和抽屉里,能提供更明确的容器感。
批量更新已进入执行队列
系统已经锁定本次变更快照,预计 3 分钟内完成分发。你可以先离开页面,任务结束后会通过通知中心提醒。
自定义图标与补充内容
通过 icon、默认插槽和 extra 可以把结果态扩成一个更完整的业务闭环。
请先补齐发版说明
模板内容已生成,你还需要确认风险项、回滚策略和通知范围。
建议优先补充以下三项:
- 影响范围与回滚入口
- 灰度批次和负责人
- 上线后 30 分钟观测指标
兼容规则
命名对照
- 模板属性写法使用 kebab-case:
sub-title、icon-size - 源码 props / TS 类型写法使用 camelCase:
subTitle、iconSize - 如果是在 TS 对象、组件 props 类型或 JSX / TSX 场景里传参,应以
subTitle为准 - 常规模板里仍可继续写
sub-title,但它属于兼容入口,不是新的主推荐描述字段
优先级与兼容
icon与status同时存在时,以icon为准,图标和强调色都会跟着切换。description是推荐的主描述字段;未传时才会回退到subTitle(模板写法sub-title)。二者功能相同,description优先级更高。status现在额外兼容info / error / 403 / 404 / 500,便于承接后台常见异常页和权限页语义。- 默认值下
status为neutral,尺寸跟随xy-config-provider的全局size,否则回退到md。
何时使用
- 表单提交成功、失败或等待补充时。
- 审批、同步、导入、发布等任务结束后,需要告诉用户"结果 + 下一步"时。
- 详情页、抽屉或弹窗里需要一块结构清晰的状态承接区时。
API
Result Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 结果标题 | string | undefined |
description | 主描述文案,优先级高于 sub-title / subTitle | string | undefined |
sub-title | 兼容描述字段(对应 TS 类型 subTitle),未传 description 时生效 | string | '' |
icon | 图标语义 | ResultIconType | undefined |
status | 当前库风格状态语义,并兼容后台状态码场景 | ResultStatus | 'neutral' |
size | 组件尺寸,未传时跟随全局配置 | ResultProps["size"] | 全局 size / 'md' |
variant | 视觉变体 | ResultVariant | 'plain' |
icon-size | 自定义图标尺寸 | string | number | undefined |
Result Slots
| 插槽 | 说明 |
|---|---|
icon | 自定义图标区 |
title | 自定义标题区 |
description | 主描述区,优先级高于 sub-title |
sub-title | 兼容描述插槽,仅在未使用 description 插槽且未传 description prop 时渲染 |
default | 描述区下方的补充内容 |
extra | 底部操作区 |
Result CSS Variables
| 变量名 | 说明 | 默认值 |
|---|---|---|
--xy-result-padding | 容器内边距 | 40px 20px |
--xy-result-gap | 各区块垂直间距 | 14px |
--xy-result-icon-size | 默认图标尺寸 | 72px |
--xy-result-icon-shell-size | 图标外层圆壳尺寸 | 112px |
--xy-result-title-font-size | 标题字号 | 24px |
--xy-result-description-font-size | 描述字号 | 14px |
--xy-result-title-color | 标题颜色 | var(--xy-text-primary) |
--xy-result-description-color | 描述颜色 | var(--xy-text-secondary) |
--xy-result-content-max-width | 内容区最大宽度 | 560px |
--xy-result-extra-margin-top | 操作区上边距 | 10px |
--xy-result-card-border-color | 卡片态边框色 | color-mix(in srgb, var(--xy-border) 92%, white) |
--xy-result-card-background | 卡片态背景色 | color-mix(in srgb, var(--xy-bg-container) 95%, var(--xy-bg-muted)) |