开发预览更新于 2026-05-10

StatusIllustration 状态插图

一组语义状态插图（empty / search / upload / success / 404 / 403 / 500 等），与 token 联动。

基础用法

10 种 variant，统一主体（窗口 + 阴影），每种 variant 添加专属辅助元素与配色。默认作为装饰图（aria-hidden），传 title 后变可访问图（含 <title>）。

背景

empty

upload

success

info

warning

error

not-found

forbidden

server-error

src/App.vue

<script setup lang="ts">
import { CfStatusIllustration } from '@chufix-design/vue';
const variants = ['empty','search','upload','success','info','warning','error','not-found','forbidden','server-error'] as const;
</script>
<template>
  <div class="status-illustration-demo">
    <div v-for="v in variants" :key="v" class="status-illustration-demo__item">
      <CfStatusIllustration :variant="v" />
      <div class="status-illustration-demo__label">{{ v }}</div>
    </div>
  </div>
</template>
<style scoped>
.status-illustration-demo {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
}

.status-illustration-demo__item {
  min-height: 124px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-5);
  background: color-mix(in oklch, var(--bg-1), transparent 8%);
}

.status-illustration-demo__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
}
</style>

<script setup>
import { CfStatusIllustration } from '@chufix-design/vue';
const variants = ['empty','search','upload','success','info','warning','error','not-found','forbidden','server-error'];
</script>
<template>
  <div class="status-illustration-demo">
    <div v-for="v in variants" :key="v" class="status-illustration-demo__item">
      <CfStatusIllustration :variant="v" />
      <div class="status-illustration-demo__label">{{ v }}</div>
    </div>
  </div>
</template>
<style scoped>
.status-illustration-demo {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 12px;
}

.status-illustration-demo__item {
  min-height: 124px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-5);
  background: color-mix(in oklch, var(--bg-1), transparent 8%);
}

.status-illustration-demo__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
}
</style>

import { CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfStatusIllustration variant="empty" />
      <CfStatusIllustration variant="search" />
      <CfStatusIllustration variant="upload" />
      <CfStatusIllustration variant="success" />
      <CfStatusIllustration variant="not-found" />
    </>
  );
}

3 档尺寸

size 控制 illustration 比例。常用 sm 在 inline 提示，md 默认，lg 在整页 Result。

背景

size = sm

size = md

size = lg

src/App.vue

<script setup lang="ts">
import { CfStatusIllustration } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 24px;">
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="sm" />
      <div>size = sm</div>
    </div>
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="md" />
      <div>size = md</div>
    </div>
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="lg" />
      <div>size = lg</div>
    </div>
  </div>
</template>
<style scoped>
.status-size-demo {
  min-width: 116px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
</style>

<script setup>
import { CfStatusIllustration } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-row" style="align-items: center; gap: 24px;">
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="sm" />
      <div>size = sm</div>
    </div>
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="md" />
      <div>size = md</div>
    </div>
    <div class="status-size-demo">
      <CfStatusIllustration variant="empty" size="lg" />
      <div>size = lg</div>
    </div>
  </div>
</template>
<style scoped>
.status-size-demo {
  min-width: 116px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
}
</style>

import { CfStatusIllustration } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfStatusIllustration size="sm" />
      <CfStatusIllustration size="md" />
      <CfStatusIllustration size="lg" />
    </>
  );
}

API

属性	类型	默认值	说明
`variant`	`'empty' \| 'search' \| 'upload' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'not-found' \| 'forbidden' \| 'server-error'`	`'empty'`	状态语义
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`title`	`string`	—	传入即可访问；不传则装饰图

已被 Empty / Result / Dropzone 默认采用。