---
tagName: presentational-bricks.brick-result
displayName: WrappedPresentationalBricksBrickResult
description: 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画
category:
source: "@next-bricks/presentational-bricks"
---

# presentational-bricks.brick-result

> 结果页面，支持三种状态类型：基础结果状态（success/error/info/warning/404/403/500）、空结果状态（empty/no-data/search-empty 等）和自定义插画状态（illustrations），可配置主标题、次标题、自定义图标及插画

## Props

| 属性                | 类型                                                            | 必填 | 默认值 | 说明                                                                                                                                                                                                                                                                                                  |
| ------------------- | --------------------------------------------------------------- | ---- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| status              | `BrickResultStatus \| EmptyResultStatus \| IllustrationsStatus` | 是   | -      | 结果的状态，决定图标和颜色。支持三类值：BrickResultStatus（success/error/info/warning/404/403/500）显示 Ant Design 内置结果图标；EmptyResultStatus（empty/no-data/search-empty 等）显示空状态插画；设为 "illustrations" 时使用 illustrationsConfig 配置自定义插画。设置的值不符合任何类型时返回空元素 |
| customTitle         | `string`                                                        | -    | -      | 主标题文字                                                                                                                                                                                                                                                                                            |
| subTitle            | `string`                                                        | -    | -      | 次标题文字                                                                                                                                                                                                                                                                                            |
| icon                | `string`                                                        | -    | -      | [自定义图标](https://ant.design/components/icon-cn/), 仅当 status 为 `BrickResultStatus` 时有效                                                                                                                                                                                                       |
| illustrationsConfig | `IllustrationsConfig`                                           | -    | `{}`   | 自定义插画配置，仅当 status 为 "illustrations" 时生效。可通过 name 和 category 指定插画库图片，size 控制尺寸（默认 middle），imageStyle 覆盖样式（不推荐）                                                                                                                                            |
| useNewIllustration  | `any`                                                           | -    | `true` | 是否使用新版插画替换插画库 default 分类下的图标，需配合特性开关 support-new-illustrations 及应用配置 supportNewIllustrations 启用                                                                                                                                                                     |
| emptyResultSize     | `IconSize`                                                      | -    | -      | 空结果插画的尺寸，仅当 status 为 EmptyResultStatus 类型时生效，可选值：small/middle/large/xlarge/unset，默认 middle                                                                                                                                                                                   |

## Slots

| 名称    | 说明                                                                      |
| ------- | ------------------------------------------------------------------------- |
| content | 提供 content 插槽，用于在结果页面下方放置自定义内容（如操作按钮、链接等） |

## Examples

### Basic 基础用法

#### 成功结果状态

展示操作成功的结果页面。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: success
  customTitle: 操作执行成功
  subTitle: 任务已完成，请查看详情
```

#### 信息提示结果

展示普通信息的结果页面，包含主标题和次标题。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: info
  customTitle: 今天是星期二
  subTitle: 2019/10/29 21:35
```

#### 警告结果并自定义图标

展示警告状态的结果页面，并通过 icon 属性自定义图标。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: warning
  customTitle: 今日有雨
  subTitle: 明天天气会好转
  icon: question
```

#### 404 结果并使用 content 插槽

展示 404 状态的结果页面，并在 content 插槽中放置自定义内容。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: "404"
  customTitle: HTTP 404
slots:
  content:
    type: bricks
    bricks:
      - brick: div
        properties:
          style:
            textAlign: center
          textContent: 页面未找到，请检查链接地址
```

### Empty 空结果状态

#### 空数据状态

展示空数据的结果页面，使用 empty 状态。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: empty
slots:
  content:
    type: bricks
    bricks:
      - brick: div
        properties:
          style:
            textAlign: center
          textContent: 请前往首页进行创建
```

#### 搜索结果为空

展示搜索无结果的状态页面。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: search-empty
slots:
  content:
    type: bricks
    bricks:
      - brick: div
        properties:
          style:
            textAlign: center
          textContent: 搜索为空
```

#### 空结果自定义尺寸

通过 emptyResultSize 控制空结果插画的尺寸大小。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: no-data
  customTitle: 暂无数据
  emptyResultSize: large
```

### Illustrations 自定义插画

#### 使用插画库自定义插画

status 设为 illustrations 时启用自定义插画模式，通过 illustrationsConfig 的 name 和 category 指定插画。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: illustrations
  illustrationsConfig:
    name: search-empty
    category: default
    imageStyle:
      width: 250px
slots:
  content:
    type: bricks
    bricks:
      - brick: div
        properties:
          style:
            textAlign: center
          textContent: 搜索为空
```

#### 自定义插画尺寸

通过 illustrationsConfig 的 size 属性控制插画尺寸。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: illustrations
  customTitle: 暂无内容
  illustrationsConfig:
    name: no-content
    category: easyops2
    size: small
```

### Advanced 高级用法

#### 关闭新版插画

通过 useNewIllustration 设为 false 关闭新版插画替换。

```yaml preview
brick: presentational-bricks.brick-result
properties:
  status: empty
  customTitle: 暂无数据
  useNewIllustration: false
```