# Poster

张贴画组件，用于展示页面级状态信息，如 404、403、空状态、成功、维护中等。

## 适用场景

- 页面级异常状态展示（404、403、网络离线等）
- 空数据状态提示
- 操作成功/失败的结果页
- 系统维护中、功能不支持等提示页

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| name | `"403" \| "404" \| "offline" \| "empty" \| "error" \| "failure" \| "maintaining" \| "forward" \| "no-access" \| "success" \| "unsupported" \| "welcome"` | - | 否 | 张贴画名称 |
| message | `ReactNode` | - | 否 | 提示信息 |
| explanation | `ReactNode` | - | 否 | 解释文案 |
| actions | `ReactNode` | - | 否 | 操作按钮 |
| layout | `"vertical" \| "horizontal"` | - | 否 | 布局方式；无 headline 默认 vertical，有 headline 默认 horizontal |

## 典型用法

### 基础型

```tsx
import { Poster, Button } from '@befe/brick'

// 仅图示
<Poster name="welcome" />

// 带提示信息和操作按钮
<Poster
    name="forward"
    message="请移步 ERP 进行审批"
    actions={<Button size="md" type="important">前往审批</Button>}
/>
```

### 带解释文案

```tsx
<Poster
    name="404"
    message="抱歉，您访问的页面已返回火星！"
    explanation="如果您想继续访问请前往XXXXXXXXXXX系统，如有其他问题也可以联系相关人员进行详细的询问。"
    actions={<Button size="md" type="important">刷新</Button>}
/>
```

### 遍历所有图示

```tsx
import { Poster, PosterProps, POSTER_NAME_LIST } from '@befe/brick'

POSTER_NAME_LIST.map((name: PosterProps['name']) => (
    <Poster key={name} name={name} />
))
```

## 注意事项

- 基础型规范距 Header `64px`
- 带解释文案时规范距 Header `84px`
- `layout` 未指定时根据是否有 headline 自动选择 vertical 或 horizontal