Skip to content

Result 结果

xy-result 用来承接"操作完成之后,下一步该做什么"这类结果态。推荐使用 status + description 组合;sub-title / subTitle 为兼容入口,功能与 description 相同但优先级更低。

基础用法

使用 statustitledescription 写法,适合先把页面结果态快速补齐。

基础用法操作结果

结果页用于展示操作成功或失败的状态,引导用户下一步操作。

操作成功

新成员邀请已发送,对方将在 24 小时内收到邮件通知。

状态扩展

当你更希望沿用当前库的状态命名时,可以直接使用 status + description

等待补充

当前还缺少负责人和发布时间,先补齐再提交审批。

正在处理中

审批流已发起,系统会在节点变化时自动同步状态。

已完成

同步任务已经落库,相关成员会收到站内通知。

需要关注

存在 2 项边界配置未确认,建议先回看参数。

执行失败

第三方接口超时,请稍后重试或切换备用通道。

无访问权限

当前账号缺少该页面权限,请联系管理员开通。

页面不存在

目标资源可能已经移动,建议返回工作台重新进入。

卡片态

variant='card' 适合放在详情页、弹窗和抽屉里,能提供更明确的容器感。

批量更新已进入执行队列

系统已经锁定本次变更快照,预计 3 分钟内完成分发。你可以先离开页面,任务结束后会通过通知中心提醒。

自定义图标与补充内容

通过 icon、默认插槽和 extra 可以把结果态扩成一个更完整的业务闭环。

请先补齐发版说明

模板内容已生成,你还需要确认风险项、回滚策略和通知范围。

建议优先补充以下三项:

  • 影响范围与回滚入口
  • 灰度批次和负责人
  • 上线后 30 分钟观测指标

兼容规则

命名对照

  • 模板属性写法使用 kebab-case:sub-titleicon-size
  • 源码 props / TS 类型写法使用 camelCase:subTitleiconSize
  • 如果是在 TS 对象、组件 props 类型或 JSX / TSX 场景里传参,应以 subTitle 为准
  • 常规模板里仍可继续写 sub-title,但它属于兼容入口,不是新的主推荐描述字段

优先级与兼容

  • iconstatus 同时存在时,以 icon 为准,图标和强调色都会跟着切换。
  • description 是推荐的主描述字段;未传时才会回退到 subTitle(模板写法 sub-title)。二者功能相同,description 优先级更高。
  • status 现在额外兼容 info / error / 403 / 404 / 500,便于承接后台常见异常页和权限页语义。
  • 默认值下 statusneutral,尺寸跟随 xy-config-provider 的全局 size,否则回退到 md

何时使用

  • 表单提交成功、失败或等待补充时。
  • 审批、同步、导入、发布等任务结束后,需要告诉用户"结果 + 下一步"时。
  • 详情页、抽屉或弹窗里需要一块结构清晰的状态承接区时。

API

Result Attributes

属性说明类型默认值
title结果标题stringundefined
description主描述文案,优先级高于 sub-title / subTitlestringundefined
sub-title兼容描述字段(对应 TS 类型 subTitle),未传 description 时生效string''
icon图标语义ResultIconTypeundefined
status当前库风格状态语义,并兼容后台状态码场景ResultStatus'neutral'
size组件尺寸,未传时跟随全局配置ResultProps["size"]全局 size / 'md'
variant视觉变体ResultVariant'plain'
icon-size自定义图标尺寸string | numberundefined

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))