# Preview

图片预览组件，支持单图/多图预览、异步加载，通过命令式 API 调用。

## 适用场景

- 图片列表的全屏预览
- 单张图片的放大查看
- 需要异步获取图片列表后再预览的场景

## Props

### ShowPreviewOptions

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| currentKey | `string \| number` | - | 是 | 对应 ImageInfo.key，当前打开的首张预览图片 |
| imageList | `ImageInfo[]` | - | 是 | 预览图片列表 |
| className | `string` | - | 否 | preview 最外层模态容器的 className |

### ImageInfo

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| key | `string \| number` | - | 是 | 必须唯一，用于定位当前打开的图片 |
| imageUrl | `string` | - | 是 | 图片的线上地址 |

### createPreview 选项

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| wrapClassName | `string` | - | 否 | 包裹 wrap 的类名，用于样式隔离方案 |

## 典型用法

### 基础预览（单图）

```tsx
import { imagePreview } from '@befe/brick'

imagePreview.show({
    currentKey: 'horse',
    imageList: [{
        key: 'horse',
        imageUrl: '/path/to/image.jpg',
    }],
})
```

### 多图预览

```tsx
imagePreview.show({
    currentKey: 3,
    imageList: [
        {key: 0, imageUrl: '/img/a.jpg'},
        {key: 1, imageUrl: '/img/b.jpg'},
        {key: 2, imageUrl: '/img/c.jpg'},
        {key: 3, imageUrl: '/img/d.jpg'},
    ],
})
```

### 异步获取参数

```tsx
// 传入一个 () => Promise<Options> 的函数
imagePreview.show(async () => {
    const data = await fetchImageList()
    return {
        currentKey: data[0].key,
        imageList: data,
    }
})
```

### 等待预览关闭

```tsx
const preview = imagePreview.show(options)
await preview.closed // 等待用户关闭预览后继续
```

### 自定义实例（样式隔离）

```tsx
import { createPreview } from '@befe/brick'

const myPreview = createPreview({
    wrapClassName: 'special-prefix',
})

myPreview.show({
    currentKey: 'horse',
    imageList: [{key: 'horse', imageUrl: horseUrl}],
})
```

## 注意事项

- `imagePreview` 是默认导出的预览实例，通过 `imagePreview.show()` 命令式调用
- 支持同步参数对象和异步 `() => Promise<Options>` 两种传入方式
- 需要样式隔离时，使用 `createPreview({wrapClassName})` 创建独立实例；使用前请确认样式隔离方案是否可行