@fjyueke/bify-mcp 1.0.0

package/metaData/components/form/example/index.tsx

@@ -0,0 +1,222 @@
+import { Button, Uploader } from "@fjyueke/bify-core"
+import { Plus } from "@fjyueke/bify-icons"
+import { View } from "@tarojs/components"
+import { chooseImage } from "@tarojs/taro"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicUploader() {
+  const [file, setFile] = useState<Uploader.File>()
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFile({
+        url: tempFiles[0].path,
+        type: tempFiles[0].type,
+        name: tempFiles[0].originalFileObj?.name,
+      })
+    })
+  }
+
+  return <Uploader value={file} onUpload={onUpload} onChange={setFile} />
+}
+
+function PreviewUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+    },
+    {
+      url: "https://img.yzcdn.cn/vant/tree.jpg",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple onUpload={onUpload} onChange={setFiles} />
+}
+
+function UploaderWithStatus() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+      status: "uploading",
+      message: "上传中...",
+    },
+    {
+      url: "https://img01.yzcdn.cn/vant/tree.jpg",
+      status: "failed",
+      message: "上传失败",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple onUpload={onUpload} onChange={setFiles} />
+}
+
+function MaxFilesUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([])
+
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  return <Uploader value={files} multiple maxFiles={2} onUpload={onUpload} onChange={setFiles} />
+}
+
+function CustomUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([])
+  function onUpload() {
+    chooseImage({
+      count: 1,
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+  return (
+    <Uploader multiple value={files} onChange={setFiles} onUpload={onUpload}>
+      <Button icon={<Plus />} color="primary">
+        上传文件
+      </Button>
+    </Uploader>
+  )
+}
+
+function CustomPreviewUploader() {
+  const [files, setFiles] = useState<Uploader.File[]>([
+    {
+      url: "https://img01.yzcdn.cn/vant/leaf.jpg",
+    },
+  ])
+
+  function onUpload() {
+    chooseImage({
+      sizeType: ["original", "compressed"],
+      sourceType: ["album", "camera"],
+    }).then(({ tempFiles }) => {
+      setFiles([
+        ...files,
+        ...tempFiles.map(({ path, type, originalFileObj }) => ({
+          type,
+          url: path,
+          name: originalFileObj?.name,
+        })),
+      ])
+    })
+  }
+
+  const itemRender = ({ file }: { file: Uploader.File }) => {
+    return (
+      <Uploader.Image
+        key={file.url}
+        url={file.url}
+        name={file.name}
+        type={file.type}
+        onRemove={() => setFiles(files.filter((item) => item !== file))}
+      >
+        <View className="preview-cover taroify-ellipsis">图片名称</View>
+      </Uploader.Image>
+    )
+  }
+
+  return (
+    <Uploader
+      value={files}
+      multiple
+      onUpload={onUpload}
+      onChange={setFiles}
+      itemRender={itemRender}
+    />
+  )
+}
+
+function DisabledUploader() {
+  return <Uploader disabled />
+}
+
+export default function UploaderDemo() {
+  return (
+    <Page title="Uploader 文件上传" className="uploader-demo">
+      <Block title="基础用法">
+        <BasicUploader />
+      </Block>
+      <Block title="文件预览">
+        <PreviewUploader />
+      </Block>
+      <Block title="上传状态">
+        <UploaderWithStatus />
+      </Block>
+      <Block title="限制上传数量">
+        <MaxFilesUploader />
+      </Block>
+      <Block title="自定义上传样式">
+        <CustomUploader />
+      </Block>
+      <Block title="自定义上传列表项">
+        <CustomPreviewUploader />
+      </Block>
+      <Block title="禁用文件上传">
+        <DisabledUploader />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/grid/api.md

@@ -0,0 +1,28 @@
+## API
+
+### Grid Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| columns | 列数 | _number \| string_ | `4` |
+| iconSize | 图标大小，默认单位为`px` | _number \| string_ | `28px` |
+| gutter | 格子之间的间距，默认单位为`px` | _number \| string_ | `0` |
+| bordered | 是否显示边框 | _boolean_ | `true` |
+| centered | 是否将格子内容居中显示 | _boolean_ | `true` |
+| square | 是否将格子固定为正方形 | _boolean_ | `false` |
+| clickable | 是否开启格子点击反馈 | _boolean_ | `false` |
+| direction | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` |
+
+### Grid.Item Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 文字 | _string_ | - |
+| icon | [图标](/components/icon)或[图片](/components/image) | _ReactNode_ | - |
+| badge | 图标上徽标的内容 | _boolean \| number \| string \| Badge \| ReactNode_ | - |
+
+### Grid.Item Events
+
+| 事件名     | 说明      | 回调参数                |
+|---------|---------|---------------------|
+| onClick | 点击格子时触发 | _event: MouseEvent_ |

package/metaData/components/grid/doc.md

@@ -0,0 +1,167 @@
+# Grid 宫格
+
+### 介绍
+
+宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
+
+### 引入
+
+```ts
+import { Grid } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `icon` 属性设置格子内的图标，`text` 属性设置文字内容。
+
+```tsx
+<Grid>
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+</Grid>
+```
+
+### 自定义列数
+
+默认一行展示四个格子，可以通过 `columns` 自定义列数。
+
+```tsx
+<Grid columns={3}>
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+</Grid>
+```
+
+### 自定义内容
+
+通过插槽可以自定义格子展示的内容。
+
+```tsx
+<Grid columns={3} bordered={false}>
+  <Grid.Item>
+    <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+  </Grid.Item>
+  <Grid.Item>
+    <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+  </Grid.Item>
+  <Grid.Item>
+    <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
+  </Grid.Item>
+</Grid>
+```
+
+```scss
+.grid-image {
+  width: 100%;
+  height: 100%;
+}
+```
+
+### 正方形格子
+
+设置 `square` 属性后，格子的高度会和宽度保持一致。
+
+```tsx
+<Grid columns={4} square>
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+</Grid>
+```
+
+### 格子间距
+
+通过 `gutter` 属性设置格子之间的距离。
+
+```tsx
+<Grid columns={4} gutter={10}>
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+</Grid>
+```
+
+### 内容横排
+
+将 `direction` 属性设置为 `horizontal`，可以让宫格的内容呈横向排列。
+
+```tsx
+<Grid columns={3} direction="horizontal">
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+  <Grid.Item icon={<PhotoOutlined />} text="文字" />
+</Grid>
+```
+
+### 徽标提示
+
+设置 `badge=true` 属性后，会在图标右上角展示一个小红点。设置 `badge` 属性后，会在图标右上角展示相应的徽标。
+
+```tsx
+<Grid columns={2}>
+  <Grid.Item icon={<HomeOutlined />} badge text="文字" />
+  <Grid.Item icon={<Search />} badge={<Badge content={100} max={99} />} text="文字" />
+</Grid>
+```
+
+## API
+
+### Grid Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| columns | 列数 | _number \| string_ | `4` |
+| iconSize | 图标大小，默认单位为`px` | _number \| string_ | `28px` |
+| gutter | 格子之间的间距，默认单位为`px` | _number \| string_ | `0` |
+| bordered | 是否显示边框 | _boolean_ | `true` |
+| centered | 是否将格子内容居中显示 | _boolean_ | `true` |
+| square | 是否将格子固定为正方形 | _boolean_ | `false` |
+| clickable | 是否开启格子点击反馈 | _boolean_ | `false` |
+| direction | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` |
+
+### Grid.Item Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 文字 | _string_ | - |
+| icon | [图标](/components/icon)或[图片](/components/image) | _ReactNode_ | - |
+| badge | 图标上徽标的内容 | _boolean \| number \| string \| Badge \| ReactNode_ | - |
+
+### Grid.Item Events
+
+| 事件名     | 说明      | 回调参数                |
+|---------|---------|---------------------|
+| onClick | 点击格子时触发 | _event: MouseEvent_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                   | 默认值                                   | 描述  |
+|--------------------------------------|---------------------------------------|-----|
+| --grid-item-content-padding          | _var(--padding-md) var(--padding-xs)_ | -   |
+| --grid-item-content-background-color | _var(--white)_                        | -   |
+| --grid-item-content-active-color     | _var(--active-color)_                 | -   |
+| --grid-item-icon-font-size           | _28px * $hd_                          | -   |
+| --grid-item-text-color               | _var(--gray-7)_                       | -   |
+| --grid-item-text-font-size           | _var(--font-size-sm)_                 | -   |

package/metaData/components/grid/example/index.tsx

@@ -0,0 +1,80 @@
+import { Badge, Grid, Image } from "@fjyueke/bify-core"
+import { HomeOutlined, PhotoOutlined, Search } from "@fjyueke/bify-icons"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+export default function GridDemo() {
+  return (
+    <Page title="Grid 宫格" className="grid-demo">
+      <Block title="基础用法">
+        <Grid columns={4}>
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+        </Grid>
+      </Block>
+      <Block title="自定义列数">
+        <Grid columns={3}>
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+        </Grid>
+      </Block>
+      <Block title="自定义内容">
+        <Grid columns={3} bordered={false}>
+          <Grid.Item>
+            <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+          </Grid.Item>
+          <Grid.Item>
+            <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+          </Grid.Item>
+          <Grid.Item>
+            <Image className="grid-image" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
+          </Grid.Item>
+        </Grid>
+      </Block>
+      <Block title="正方形格子">
+        <Grid columns={4} square>
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+        </Grid>
+      </Block>
+      <Block title="格子间距">
+        <Grid columns={4} gutter={10}>
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+        </Grid>
+      </Block>
+      <Block title="内容横排">
+        <Grid columns={3} direction="horizontal">
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+          <Grid.Item icon={<PhotoOutlined />} text="文字" />
+        </Grid>
+      </Block>
+      <Block title="徽标提示">
+        <Grid columns={2}>
+          <Grid.Item icon={<HomeOutlined />} badge text="文字" />
+          <Grid.Item icon={<Search />} badge={<Badge content={100} max={99} />} text="文字" />
+        </Grid>
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/image/api.md

@@ -0,0 +1,42 @@
+## API
+
+### Props
+
+| 参数                    | 说明                                 | 类型             | 默认值        |
+| ----------------------- | ------------------------------------ | ---------------- | ------------- |
+| src                     | 图片链接                             | _string_         | -             |
+| mode                    | 图片填充模式                         | _string_         | `scaleToFill` |
+| alt                     | 替代文本                             | _string_         | -             |
+| width `v0.3.2-alpha.0`  | 宽度                                 | _string\|number_ | -             |
+| height `v0.3.2-alpha.0` | 长度                                 | _string\|number_ | -             |
+| shape                   | 图片形状 `square` `rounded` `circle` | _boolean_        | -             |
+| lazyLoad                | 是否开启图片懒加载                   | _boolean_        | `false`       |
+| placeholder             | 加载中提示                           | _ReactNode_      | -             |
+| fallback                | 加载失败提示                         | _ReactNode_      | -             |
+
+### Modes
+
+| 名称        | 含义                                                                                                                                 |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素                                                                |
+| aspectFit   | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。                                       |
+| aspectFill  | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
+| widthFix    | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变                                                                                 |
+| heightFix   | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变                                                                                 |
+| top         | 裁剪模式，不缩放图片，只显示图片的顶部区域                                                                                           |
+| bottom      | 裁剪模式，不缩放图片，只显示图片的底部区域                                                                                           |
+| center      | 裁剪模式，不缩放图片，只显示图片的中间区域                                                                                           |
+| left        | 裁剪模式，不缩放图片，只显示图片的左边区域                                                                                           |
+| right       | 裁剪模式，不缩放图片，只显示图片的右边区域                                                                                           |
+| topLeft     | 裁剪模式，不缩放图片，只显示图片的左上边区域                                                                                         |
+| topRight    | 裁剪模式，不缩放图片，只显示图片的右上边区域                                                                                         |
+| bottomLeft  | 裁剪模式，不缩放图片，只显示图片的左下边区域                                                                                         |
+| bottomRight | 裁剪模式，不缩放图片，只显示图片的右下边区域                                                                                         |
+
+### Events
+
+| 事件名  | 说明               | 回调参数            |
+| ------- | ------------------ | ------------------- |
+| onClick | 点击图片时触发     | _event: MouseEvent_ |
+| onLoad  | 图片加载完毕时触发 | -                   |
+| onError | 图片加载失败时触发 | -                   |

package/metaData/components/image/doc.md

@@ -0,0 +1,117 @@
+# Image 图片
+
+### 介绍
+
+增强版的 taro Image 组件，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。
+
+### 引入
+
+```tsx
+import { Image } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+基础用法与原生 `img` 标签一致，可以设置 `src`、`alt` 等原生属性。<br>
+通过 `width` 和 `height` 设置图片大小，若未指定，会从 style 中读取`width`,`height`属性。 <br>
+width 和 height 若为 number, 会经过 `pxTransform` 转换
+
+```tsx
+<Image width={200} height={200} src="https://img.yzcdn.cn/vant/cat.jpeg" />
+```
+
+### 填充模式
+
+通过 `mode` 属性可以设置图片填充模式，可选值见下方表格。
+
+```tsx
+<Image width={200} height={200} mode="scaleToFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+```
+
+### 圆形图片
+
+通过 `round` 属性可以设置图片变圆。
+
+```tsx
+<Image shape="round" width={200} height={200} src="https://img.yzcdn.cn/vant/cat.jpeg" />
+```
+
+### 图片懒加载
+
+设置 `lazyLoad` 属性来开启图片懒加载。
+
+```tsx
+<Image lazyLoad width={200} height={200} src="https://img.yzcdn.cn/vant/cat.jpeg" />
+```
+
+### 加载中，加载失败提示
+
+通过 `placeholder` 设置加载中提示，通过 `fallback`设置加载失败提示
+
+```tsx
+import { Photo, PhotoFail } from "@fjyueke/bify-icons"
+
+<Image width={200} height={200} placeholder="加载中..." />
+<Image width={200} height={200} src="error" fallback="加载失败" />
+<Image width={200} height={200} src="error" fallback={<PhotoFail />} />
+<Image width={200} height={200} placeholder={<Photo />} />
+```
+
+## API
+
+### Props
+
+| 参数                    | 说明                                 | 类型             | 默认值        |
+| ----------------------- | ------------------------------------ | ---------------- | ------------- |
+| src                     | 图片链接                             | _string_         | -             |
+| mode                    | 图片填充模式                         | _string_         | `scaleToFill` |
+| alt                     | 替代文本                             | _string_         | -             |
+| width `v0.3.2-alpha.0`  | 宽度                                 | _string\|number_ | -             |
+| height `v0.3.2-alpha.0` | 长度                                 | _string\|number_ | -             |
+| shape                   | 图片形状 `square` `rounded` `circle` | _boolean_        | -             |
+| lazyLoad                | 是否开启图片懒加载                   | _boolean_        | `false`       |
+| placeholder             | 加载中提示                           | _ReactNode_      | -             |
+| fallback                | 加载失败提示                         | _ReactNode_      | -             |
+
+### Modes
+
+| 名称        | 含义                                                                                                                                 |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素                                                                |
+| aspectFit   | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。                                       |
+| aspectFill  | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
+| widthFix    | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变                                                                                 |
+| heightFix   | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变                                                                                 |
+| top         | 裁剪模式，不缩放图片，只显示图片的顶部区域                                                                                           |
+| bottom      | 裁剪模式，不缩放图片，只显示图片的底部区域                                                                                           |
+| center      | 裁剪模式，不缩放图片，只显示图片的中间区域                                                                                           |
+| left        | 裁剪模式，不缩放图片，只显示图片的左边区域                                                                                           |
+| right       | 裁剪模式，不缩放图片，只显示图片的右边区域                                                                                           |
+| topLeft     | 裁剪模式，不缩放图片，只显示图片的左上边区域                                                                                         |
+| topRight    | 裁剪模式，不缩放图片，只显示图片的右上边区域                                                                                         |
+| bottomLeft  | 裁剪模式，不缩放图片，只显示图片的左下边区域                                                                                         |
+| bottomRight | 裁剪模式，不缩放图片，只显示图片的右下边区域                                                                                         |
+
+### Events
+
+| 事件名  | 说明               | 回调参数            |
+| ------- | ------------------ | ------------------- |
+| onClick | 点击图片时触发     | _event: MouseEvent_ |
+| onLoad  | 图片加载完毕时触发 | -                   |
+| onError | 图片加载失败时触发 | -                   |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                 | 默认值                    | 描述 |
+| ------------------------------------ | ------------------------- | ---- |
+| --image-placeholder-color            | _var(var(--gray-6)_       | -    |
+| --image-placeholder-font-size        | _var(--font-size-md)_     | -    |
+| --image-placeholder-icon-size        | _32px \* $hd_             | -    |
+| --image-placeholder-icon-color       | _var(--gray-4)_           | -    |
+| --image-placeholder-background-color | _var(--background-color)_ | -    |