结果页 result

数据展示组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

图标、标题、说明、操作四段按需摆，只有 root 必须写

✓

订单已提交

单号 2026-0810-3312，两个工作日内发货，物流单号会发到你的手机上。

<script setup lang="ts">
import {
  XhButton,
  XhResultAction,
  XhResultDescription,
  XhResultIcon,
  XhResultRoot,
  XhResultTitle,
} from "@xihan-ui/vue";
</script>

<template>
  <XhResultRoot status="success">
    <XhResultIcon>✓</XhResultIcon>
    <XhResultTitle>订单已提交</XhResultTitle>
    <XhResultDescription>
      单号 2026-0810-3312，两个工作日内发货，物流单号会发到你的手机上。
    </XhResultDescription>
    <XhResultAction>
      <XhButton tone="brand" variant="solid">查看订单</XhButton>
      <XhButton variant="outline">继续逛逛</XhButton>
    </XhResultAction>
  </XhResultRoot>
</template>

结果类型

status 只落成 data-status，皮肤据它给图标区上语气色；画什么图标仍由作者塞

✓

全部导入成功

128 条记录已入库。

!

部分行被跳过

有 6 行缺少必填字段。

✕

导入没有完成

这次改动已经整体回滚。

i

任务已排队

前面还有 3 个任务在跑。

<script setup lang="ts">
import {
  XhResultDescription,
  XhResultIcon,
  XhResultRoot,
  XhResultTitle,
} from "@xihan-ui/vue";

const results = [
  { status: "success", glyph: "✓", title: "全部导入成功", description: "128 条记录已入库。" },
  { status: "warning", glyph: "!", title: "部分行被跳过", description: "有 6 行缺少必填字段。" },
  { status: "error", glyph: "✕", title: "导入没有完成", description: "这次改动已经整体回滚。" },
  { status: "info", glyph: "i", title: "任务已排队", description: "前面还有 3 个任务在跑。" },
] as const;
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px">
    <XhResultRoot
      v-for="r in results"
      :key="r.status"
      :status="r.status"
      size="sm"
      style="inline-size: 200px"
    >
      <XhResultIcon>{{ r.glyph }}</XhResultIcon>
      <XhResultTitle>{{ r.title }}</XhResultTitle>
      <XhResultDescription>{{ r.description }}</XhResultDescription>
    </XhResultRoot>
  </div>
</template>

状态码页

404 / 403 / 500 三档各并进一族语气色，操作槽里放这一页的回退出口

?

404 页面不存在

地址可能敲错了，或者这条记录已经被删掉。

⊘

403 没有权限

这块内容需要更高的角色，找管理员要一下。

!

500 服务出错

请求没能处理完，稍后再试一次。

<script setup lang="ts">
import {
  XhButton,
  XhResultAction,
  XhResultDescription,
  XhResultIcon,
  XhResultRoot,
  XhResultTitle,
} from "@xihan-ui/vue";

const pages = [
  {
    status: "404",
    glyph: "?",
    title: "页面不存在",
    description: "地址可能敲错了，或者这条记录已经被删掉。",
    action: "回到首页",
  },
  {
    status: "403",
    glyph: "⊘",
    title: "没有权限",
    description: "这块内容需要更高的角色，找管理员要一下。",
    action: "申请权限",
  },
  {
    status: "500",
    glyph: "!",
    title: "服务出错",
    description: "请求没能处理完，稍后再试一次。",
    action: "重试",
  },
] as const;
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px">
    <XhResultRoot
      v-for="p in pages"
      :key="p.status"
      :status="p.status"
      size="sm"
      style="inline-size: 220px"
    >
      <XhResultIcon>{{ p.glyph }}</XhResultIcon>
      <XhResultTitle>{{ p.status }} {{ p.title }}</XhResultTitle>
      <XhResultDescription>{{ p.description }}</XhResultDescription>
      <XhResultAction>
        <XhButton size="sm" variant="outline">{{ p.action }}</XhButton>
      </XhResultAction>
    </XhResultRoot>
  </div>
</template>

尺寸

size 换的是留白、图标框与标题字号，不传 size 即默认档

i

小档

同一段文案在三档下的留白与字号。

i

默认档

同一段文案在三档下的留白与字号。

i

大档

同一段文案在三档下的留白与字号。

<script setup lang="ts">
import {
  XhResultDescription,
  XhResultIcon,
  XhResultRoot,
  XhResultTitle,
} from "@xihan-ui/vue";

// 中间一档不写 size，用 undefined 表达
const sizes = [
  { size: "sm", label: "小" },
  { size: undefined, label: "默认" },
  { size: "lg", label: "大" },
] as const;
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <XhResultRoot v-for="s in sizes" :key="s.label" :size="s.size" status="info">
      <XhResultIcon>i</XhResultIcon>
      <XhResultTitle>{{ s.label }}档</XhResultTitle>
      <XhResultDescription>同一段文案在三档下的留白与字号。</XhResultDescription>
    </XhResultRoot>
  </div>
</template>

图标由作者塞

库不带插画资产，图标槽收任意内容：字形、XhIcon、手写的内联 svg 都行

✓

字形

字号跟着图标框走。

图标组件

记录传给 XhIcon，颜色继承下来。

内联 svg

自己写的图形也照样收。

<script setup lang="ts">
import {
  XhIcon,
  XhResultDescription,
  XhResultIcon,
  XhResultRoot,
  XhResultTitle,
} from "@xihan-ui/vue";

// 图标记录只带几何，颜色取 currentColor，于是跟着结果的语气色走
const CheckCircleIcon = {
  name: "check-circle",
  viewBox: "0 0 24 24",
  attrs: {
    "fill": "none",
    "stroke": "currentColor",
    "stroke-width": "2",
    "stroke-linecap": "round",
    "stroke-linejoin": "round",
  },
  nodes: [
    { tag: "circle", attrs: { cx: "12", cy: "12", r: "9" } },
    { tag: "path", attrs: { d: "M8 12.5L11 15.5L16 9" } },
  ],
} as const;
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px">
    <!-- 一个字形 -->
    <XhResultRoot status="success" size="sm" style="inline-size: 200px">
      <XhResultIcon>✓</XhResultIcon>
      <XhResultTitle>字形</XhResultTitle>
      <XhResultDescription>字号跟着图标框走。</XhResultDescription>
    </XhResultRoot>

    <!-- 一枚 XhIcon，不写 tone，颜色从结果的语气色继承下来 -->
    <XhResultRoot status="success" size="sm" style="inline-size: 200px">
      <XhResultIcon>
        <XhIcon :icon="CheckCircleIcon" size="lg" />
      </XhResultIcon>
      <XhResultTitle>图标组件</XhResultTitle>
      <XhResultDescription>记录传给 XhIcon，颜色继承下来。</XhResultDescription>
    </XhResultRoot>

    <!-- 手写内联 svg，同样取 currentColor -->
    <XhResultRoot status="success" size="sm" style="inline-size: 200px">
      <XhResultIcon>
        <svg
          width="32"
          height="32"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M4 12.5L9 17.5L20 6.5" />
        </svg>
      </XhResultIcon>
      <XhResultTitle>内联 svg</XhResultTitle>
      <XhResultDescription>自己写的图形也照样收。</XhResultDescription>
    </XhResultRoot>
  </div>
</template>

产物

层	值
自定义元素	<xh-result>
Vue 组件	XhResultAction XhResultDescription XhResultIcon XhResultRoot XhResultTitle
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/result.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="result"：root · icon · title · description · action

Props

属性	类型	必填	说明
size	Size		尺寸档位，只改留白与字号，不改语义。
status	ResultStatus		结果类型，只落成 root 的 data-status；图标画什么由作者塞进图标槽。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
getRootProps	() => T['element']
getIconProps	() => T['element']
getTitleProps	() => T['element']
getDescriptionProps	() => T['element']
getActionProps	() => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。