Result 结果

一次操作完成后的结果页，成功、失败、警告或提示。

书评已发布

其他读者现在可以看到它了。

<script setup lang="ts">
  import { Button, Result } from '@hina-ui/vue'
</script>

<template>
  <Result status="success" title="书评已发布" description="其他读者现在可以看到它了。" class="w-96">
    <template #actions>
      <Button size="sm">查看书评</Button>
      <Button size="sm" variant="ghost" tone="neutral">回到书架</Button>
    </template>
  </Result>
</template>

vue

用法

import { Result } from '@hina-ui/vue'

status 决定图标与配色，title 说明结果，description 补充影响或下一步。排布与 Empty 相同：图标、文字与操作从上到下居中，组件占满所在容器的宽度。

正在审核

通常在一天之内完成，结果会以通知告知。

<script setup lang="ts">
  import { Result } from '@hina-ui/vue'
</script>

<template>
  <Result title="正在审核" description="通常在一天之内完成，结果会以通知告知。" class="w-96" />
</template>

vue

示例

状态

四种状态：success、error、warning 与 info，默认为 info。

已保存

改动已经生效。

保存失败

网络中断，请稍后重试。

部分未保存

有两处改动与他人冲突。

等待审核

审核通过后会通知你。

<script setup lang="ts">
  import { Grid, Result } from '@hina-ui/vue'
</script>

<template>
  <Grid :cols="2" gap="md" class="w-full max-w-2xl">
    <Result status="success" size="sm" title="已保存" description="改动已经生效。" />
    <Result status="error" size="sm" title="保存失败" description="网络中断，请稍后重试。" />
    <Result status="warning" size="sm" title="部分未保存" description="有两处改动与他人冲突。" />
    <Result status="info" size="sm" title="等待审核" description="审核通过后会通知你。" />
  </Grid>
</template>

vue

操作

actions 插槽放置后续操作，通常是一个主要按钮，或者再加一个次要按钮。

支付未完成

银行没有确认这笔交易，款项不会被扣除。

<script setup lang="ts">
  import { Button, Result } from '@hina-ui/vue'
</script>

<template>
  <Result
    status="error"
    title="支付未完成"
    description="银行没有确认这笔交易，款项不会被扣除。"
    class="w-96"
  >
    <template #actions>
      <Button size="sm">重新支付</Button>
      <Button size="sm" variant="ghost" tone="neutral">联系客服</Button>
    </template>
  </Result>
</template>

vue

补充内容

默认插槽的内容显示在文字下方，用来放订单号、错误详情这类补充信息。

订单已提交

我们会在发货后通知你。

订单号 HN-20260907-0412

<script setup lang="ts">
  import { Button, Code, Result, Text } from '@hina-ui/vue'
</script>

<template>
  <Result status="success" title="订单已提交" description="我们会在发货后通知你。" class="w-96">
    <Text size="sm" tone="muted">
      订单号
      <Code>HN-20260907-0412</Code>
    </Text>
    <template #actions>
      <Button size="sm" variant="soft" tone="neutral">查看订单</Button>
    </template>
  </Result>
</template>

vue

自定义图标

icon 插槽替换状态图标，可以是另一枚图标，也可以是一张插图。

今天的目标完成了

连续第七天读满三十分钟。

<script setup lang="ts">
  import { Button, Image, Result } from '@hina-ui/vue'
</script>

<template>
  <Result title="今天的目标完成了" description="连续第七天读满三十分钟。" class="w-96">
    <template #icon>
      <Image src="/avatars/hug.webp" :ratio="1" class="size-24 rounded-full" />
    </template>
    <template #actions>
      <Button size="sm">继续阅读</Button>
    </template>
  </Result>
</template>

vue

尺寸

三档尺寸同时改变图标、文字与内边距，lg 用于整页的结果。

已保存

改动已经生效。

已保存

改动已经生效。

已保存

改动已经生效。

<script setup lang="ts">
  import { Result, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="lg" class="w-96">
    <Result status="success" size="sm" title="已保存" description="改动已经生效。" />
    <Result status="success" title="已保存" description="改动已经生效。" />
    <Result status="success" size="lg" title="已保存" description="改动已经生效。" />
  </Stack>
</template>

vue

API

Props

属性	类型	默认值	说明
`status`	`'success' \| 'error' \| 'warning' \| 'info'`	`'info'`	结果的状态
`title`	`string`	—	标题
`description`	`string`	—	标题下方的说明
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`class`	`string`	—	追加至根元素的类名

插槽

插槽	说明
default	文字下方的补充内容
`icon`	替换状态图标的图标或插图
`actions`	最下方的操作

用法

示例

状态

操作

补充内容

自定义图标

尺寸

无障碍

API

Props

插槽