weaver-work-cli 0.1.24 → 0.1.25

package/skills/weaver-e10-builder/references/components/@weapp-Button.md

@@ -0,0 +1,104 @@
+## 基础用法
+
+```
+import React, { Component } from 'react';
+import { Button, Icon, constants } from '@weapp/ui';
+import { getLabel } from '@weapp/utils';
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-btn`;
+
+class ButtonDemo extends Component {
+  handleBeforeClick = () => {
+    console.log('before click called');
+    return new Promise((resolve, reject) => {
+      console.log('interrupt click');
+      reject();
+    });
+  }
+  handleClick = () => {
+    console.log('click callback');
+  }
+  render() {
+    return (
+      <div className={prefixCls}>
+        <h3>不同类型</h3>
+        <Button title="次要按钮" type="default">次要按钮</Button>
+        <Button type="primary">主要按钮</Button>
+        <Button type="success">成功按钮</Button>
+        <Button type="warning">警告按钮</Button>
+        <Button type="danger">危险按钮</Button>
+        <h3>内容很长时候隐藏</h3>
+        <Button style={{ width: 100 }} type="danger">内容很长内容很长内容很长</Button>
+        <h3>设置圆角</h3>
+        <Button radius type="default">次要按钮</Button>
+        <Button radius type="primary">主要按钮</Button>
+        <Button radius type="success">成功按钮</Button>
+        <Button radius type="warning">警告按钮</Button>
+        <Button radius type="danger">危险按钮</Button>
+        <h3>禁用按钮</h3>
+        <Button disabled >禁用按钮</Button>
+        <Button disabled radius >禁用按钮</Button>
+        <Button type="danger" disabled radius >禁用按钮</Button>
+        <h3>调整尺寸</h3>
+        <Button size="large">large</Button>
+        <Button size="middle">middle</Button>
+        <Button size="small">small</Button>
+        <h3>自定义按钮</h3>
+        <Button type="primary">
+          <Icon style={{ width: 15, height: 15 }} name="Icon-search" />
+        </Button>
+        <Button disabled>
+          <Icon style={{ width: 15, height: 15 }} name="Icon-search" />
+        </Button>
+        <h3>文字按钮</h3>
+        <Button type="link">文字按钮</Button>
+        <Button type="link" disabled>禁用</Button>
+      </div>
+    );
+  }
+}
+
+export default ButtonDemo;
+```
+
+## hook 的使用
+```
+import React, { Component } from 'react';
+import { Button, constants, utils } from '@weapp/ui';
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-btn`;
+
+class ButtonDemo extends Component {
+  handleBeforeClick = () => {
+    console.log('before click called');
+    return new Promise((resolve, reject) => {
+      console.log('interrupt click');
+      reject();
+    });
+  }
+  handleClick = () => {
+    console.log('click callback');
+  }
+  onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const { pauseEvent } = utils;
+    pauseEvent(e)
+  }
+  render() {
+    return (
+      <div className={prefixCls}>
+        <h2>onBeforeClick</h2>
+        <Button onBeforeClick={this.handleBeforeClick} onClick={this.handleClick}>中断click</Button>
+        <Button onClick={this.onClick}>click</Button>
+      </div>
+    );
+  }
+}
+
+export default ButtonDemo;
+```
+
+参数	说明	类型	是否必填	默认值
+disabled	禁用	boolean	否	false
+inline	是否设置为整行按钮（是否默认宽度 100%）	boolean	否	false
+onAfterClick	点击事件方法执行后钩子	(this) => void;	否	
+onBeforeClick	点击事件方法执行前钩子	(this) => void;	否

package/skills/weaver-e10-builder/references/components/base-Badge.md

@@ -0,0 +1,100 @@
+## 基础用法
+
+```js
+import { Component } from "react";
+import { Badge, constants, Icon } from "@weapp/ui";
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-badge`;
+
+class BadgeDemo extends Component {
+  render() {
+    return (
+      <div className={prefixCls}>
+        <Badge className={`${prefixCls}-item`} count={5} showBorder>
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+        <Badge className={`${prefixCls}-item`} count={0} showBorder showZero>
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+
+        <h3>封顶数字</h3>
+        <Badge className={`${prefixCls}-item`} count={99} showBorder>
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+        <Badge
+          className={`${prefixCls}-item`}
+          count={1000}
+          showBorder
+          overflowCount={999}
+        >
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+
+        <h3>不同尺寸</h3>
+        <Badge className={`${prefixCls}-item`} count={5} showBorder>
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+        <Badge
+          className={`${prefixCls}-item`}
+          count={5}
+          showBorder
+          size="small"
+        >
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+
+        <h3>自定义</h3>
+        <Badge
+          className={`${prefixCls}-item`}
+          count={<Icon name="Icon-Speechless" size="sm" />}
+        >
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+
+        <h3>独立使用(不配children)</h3>
+        <Badge className={`${prefixCls}-item`} count={5}></Badge>
+        <Badge className={`${prefixCls}-item`} count={0} showZero></Badge>
+        <Badge className={`${prefixCls}-item`} count={100} showBorder></Badge>
+        <Badge
+          className={`${prefixCls}-item`}
+          count={1000}
+          overflowCount={999}
+        ></Badge>
+
+        <h3>小红点</h3>
+        <Badge className={`${prefixCls}-item`} dot>
+          文本标记
+        </Badge>
+
+        <h3>自定义位置偏移量</h3>
+        <Badge className={`${prefixCls}-item`} dot offset={[0, "100%"]}>
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+        <Badge className={`${prefixCls}-item`} count={5} offset={[10, -10]}>
+          <div className={`${prefixCls}-item-children`} />
+        </Badge>
+      </div>
+    );
+  }
+}
+
+export default BadgeDemo;
+```
+
+## 具体参数
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+|------|------|------|----------|--------|
+| children | 包裹在徽标内的组件 | React.ReactNode | 否 | - |
+| color | 徽标颜色，dot 和 ribbon 效果使用 | `'blue' \| 'purple' \| 'cyan' \| 'green' \| 'magenta' \| 'pink' \| 'red' \| 'orange' \| 'yellow' \| 'volcano' \| 'geekblue' \| 'lime' \| 'gold' \| 自定义颜色` | 否 | - |
+| count | 展示的数字 | React.ReactNode | 否 | - |
+| dot | 是否为小红点效果 | boolean | 否 | false |
+| offset | 徽标位置偏移量 [top, right]，dot 和 count 效果使用 | `[ number \| string, number \| string ]` | 否 | - |
+| overflowCount | count 最大限制 | number | 否 | - |
+| ribbon | 是否显示为缎带效果 | boolean | 否 | false |
+| showBorder | 是否展示白色边框，dot 和 count 效果使用 | boolean | 否 | false |
+| showZero | count 数量为 0 的 count | boolean | 否 | false |
+| size | 徽标尺寸，仅 count 效果使用 | `'default' \| 'small'` | 否 | `'default'` |
+| status | 徽标状态，dot 和 count 效果使用 | `'success' \| 'primary' \| 'error' \| 'warning' \| 'disabled'` | 否 | - |
+| text | 徽标内文本，count 和 ribbon 效果使用 | React.ReactNode | 否 | - |
+| title | 设置鼠标放在状态点上时显示的文字 | string | 否 | - |

package/skills/weaver-e10-builder/references/components/base-Dialog.md

@@ -0,0 +1,358 @@
+## 代码演示
+### 基础用法
+```tsx
+import { Component } from 'react';
+import { Dialog, Button, constants } from '@weapp/ui';
+
+const { uiPcClsPrefix } = constants;
+
+interface DialogDemoProps {
+  history?: any;
+}
+interface DialogDemoState {
+  visible?: boolean;
+}
+
+const prefixCls = `${uiPcClsPrefix}-demo-btn`;
+
+class DialogBody extends Component<{}> {
+  render() {
+    return <div className={`${uiPcClsPrefix}-demo-dialog-dialogBody`}>
+      <p>DialogBody</p>
+      <p>show everything...</p>
+      <p>show everything...</p>
+    </div>
+  }
+}
+
+class DialogDemo extends Component<DialogDemoProps, DialogDemoState> {
+  constructor(props: DialogDemoProps) {
+    super(props);
+    this.state = {
+      visible: false
+    }
+  }
+
+  onClose = () => {
+    this.setState({ visible: false });
+  }
+
+  showDialog = () => {
+    this.setState({ visible: true });
+  }
+
+  handleOk = () => {
+    this.setState({ visible: false });
+  };
+
+  handleCancel = () => {
+    this.setState({ visible: false });
+  };
+
+  render() {
+    const { visible } = this.state;
+    return (
+      <div className={prefixCls}>
+        <Button type={'primary'} onClick={this.showDialog}>打开弹框</Button>
+        <Dialog
+          visible={visible}
+          onClose={this.onClose}
+          title="基础用法，支持自定义页头页脚"
+          width={770}
+          icon="Icon--Import-and-export"
+          scale
+          closable
+          destroyOnClose
+          buttons={[<Button key='a'>页头1</Button>, <Button key='b'>页头2</Button>]}
+          footer={[<Button onClick={this.handleCancel} key='cancle'>自定义</Button>,<Button onClick={this.handleCancel} key='cancle'>取消</Button>, <Button onClick={this.handleOk} type={'primary'} key='ok'>确定</Button>]}
+          maskClosable
+        >
+          <DialogBody />
+        </Dialog>
+      </div>
+    );
+  }
+}
+```
+### 对话框和提示消息
+```tsx
+import { Component, ReactText } from 'react';
+import { Dialog, Button, constants, Input, utils } from '@weapp/ui';
+
+const { uiPcClsPrefix } = constants;
+const { message, confirm } = Dialog;
+const { getHd } = utils;
+interface DialogDemoProps {
+  history?: any;
+}
+
+const prefixCls = `${uiPcClsPrefix}-demo-btn`;
+
+class MyInput extends Component<any, any> {
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      value : ''
+    }
+  }
+
+  handleChange = (value: ReactText) => {
+    this.setState({
+      value
+    })
+  }
+
+  render() {
+    return (
+      <>
+        test: <Input value={this.state.value} onChange={this.handleChange}></Input>
+      </>
+    )
+  }
+}
+class DialogDemo extends Component<DialogDemoProps> {
+  instance: any;
+  confirm = () => {
+    confirm({
+      content: '确认删除xxx吗？',
+      onOk: () => {
+        console.log('OK');
+      },
+      onCancel: () => {
+        console.log('Cancel');
+      },
+      destroy: () => {
+        console.log('组件销毁了')
+      },
+    });
+  }
+
+  confirmDraggable = () => {
+    confirm({
+      content: '确认删除xxx吗？',
+      onOk: () => {
+        console.log('OK');
+      },
+      onCancel: () => {
+        console.log('Cancel');
+      },
+      destroy: () => {
+        console.log('组件销毁了')
+      },
+      draggable: true,
+    });
+  }
+
+  getInstance = (el: any) => {
+    this.instance = el;
+  }
+  close = () => {
+    this.instance && this.instance.onClose()
+    console.log('close')
+  }
+  handleOk = () => {
+    this.instance && this.instance.onOk()
+    console.log('ok')
+  }
+
+  confirmFooter = () => {
+    confirm({
+      content: '不设置left/top/right/bottom 默认水平垂直居中显示',
+      height: 220 * (getHd?.() || 1),
+      // enableKeyboardEvent: false,
+      customKeyboardEvent:()=> {
+        console.log('触发自定义的事件')
+        this.close()
+        // this.instance && this.instance.onOk()
+      },
+      getInstance: this.getInstance,
+      footer: <div>
+                <Button onClick={this.handleOk}>确认（支持键盘事件）</Button>
+                <Button onClick={this.close}>取消</Button>
+              </div>,
+      destroy: () => {
+        console.log('组件销毁了')
+      },
+      onOk: () => {
+        console.log('OK');
+      },
+    });
+  }
+  confirmInput = () => {
+    confirm({
+      content:(
+        <div>
+          <MyInput></MyInput>
+        </div>
+      ),
+      onOk: () => {
+        console.log('OK');
+      },
+      onCancel: () => {
+        console.log('Cancel');
+      },
+      destroy: () => {
+        console.log('组件销毁了')
+      }
+    });
+  }
+
+    info  = () => {
+    message({
+      type: 'info', // type: 'info', 'error', 'success', 'custom'
+      content: '这是一条普通提示',
+    });
+  }
+
+  success = () => {
+    message({
+      type: 'success', // type: 'info', 'error', 'success', 'custom'
+      content: '这是一条询问信息, 会主动消失',
+    });
+  }
+
+  infoCustomClose = () => {
+    message({
+      type: 'error', // type: 'info', 'error', 'success', 'custom'
+      content: '这是一条询问信息, 不会主动消失',
+      delay: 0, // 相当于禁止主动消失
+    });
+  }
+
+  maxMessageCount = () => {
+    message({
+      type: 'success', // type: 'info', 'error', 'success', 'custom'
+      content: '这是一条询问信息, 会主动消失,最大是三条',
+      maxMessageCount: 3
+    });
+  }
+
+  render() {
+    return (
+      <div className={prefixCls}>
+        <Button onClick={this.confirm}>确认框</Button>
+        <Button onClick={this.confirmFooter}>确认框(自定义footer)</Button>
+        <Button onClick={this.confirmInput}>确认框(插入input)</Button>
+        <Button onClick={this.confirmDraggable}>确认框(可拖拽)</Button>
+        <Button type={'primary'} onClick={this.info}>信息提示(info)</Button>
+        <Button type={'success'} onClick={this.success}>信息提示(success)</Button>
+        <Button type={'danger'} onClick={this.infoCustomClose}>信息提示(error)</Button>
+        <Button type={'success'} onClick={this.maxMessageCount}>可控制最大展示消息数</Button>
+      </div>
+    );
+  }
+}
+```
+
+## 参数说明
+### 组件参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| bodyStyle | Dialog 内容部分样式 | CSSProperties | 否 | |
+| bottom | 距离底部高度 | number \| string | 否 | |
+| bottomExtraContent | 自定义底部内容 | ReactNode | 否 | |
+| bottomExtraContentProps | 自定义弹层底部Layout区参数配置 | LayoutBoxProps | 否 | |
+| buttons | 按钮组(顶部) | ReactNode | 否 | |
+| closable | 是否显示右上角的关闭按钮 | boolean | 否 | |
+| closeAnimation | 关闭动画 | boolean | 否 | false |
+| closeIcon | 自定义关闭按钮 | ReactNode | 否 | |
+| customRenderDialogBody | 自定义弹框内容(用于复写基于 Dialog 开发的组件弹层内容) | (_: any, ele: ReactNode) => ReactNode | 否 | |
+| customRenderDialogTitle | 自定义标题内容(用于复写基于 Dialog 标题内容) | (_: any, ele: ReactNode) => ReactNode | 否 | |
+| customRenderInDialogContainer | 在 container 层级下复写弹框内容 | ReactNode | 否 | |
+| defaultInnerScale | 默认全屏 | boolean | 否 | |
+| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | 否 | |
+| dialogConfig | 功能同Dialog.dialogConfig,优先级高于Dialog.dialogConfig | AnyObj | 否 | |
+| dialogId | 弹框唯一标记 | string | 否 | |
+| draggable | Dialog 是否开启拖拽 | boolean | 否 | true |
+| enableEventEmitter | 启用事件监听方案 | boolean | 否 | true |
+| footer | 按钮组(底部) | ReactNode | 否 | |
+| forceRender | 预渲染弹框内部内容 | boolean | 否 | |
+| getContainer | 弹层容器定位 | (element?: HTMLElement) => HTMLElement | 否 | |
+| headerStyle | Dialog 标题区样式 | CSSProperties | 否 | |
+| height | Dialog 高度（注意：1. left/right 模式不可改。 2. placement 为 middle 时，高度设置小于 200 不生效） | number \| string | 否 | |
+| ignoreCalculationContainer | 忽略 dialog 内部宽高的最大最小值限定规则 | boolean | 否 | false |
+| innerScale | 是否全屏，优先级高于defaultInnerScale | boolean | 否 | |
+| isEnlargeFullScreen | 全屏模式下弹框宽高占可视区域比例 | boolean | 否 | false |
+| isStopPropagation | 禁止阻止冒泡 | boolean | 否 | true |
+| keepDialogAlive | 业签模式是否开启本地化存储(dialogId 必须唯一不变) | boolean | 否 | true |
+| left | 距离左侧高度 | number \| string | 否 | |
+| leftExtraContent | 自定义左侧内容 | ReactNode | 否 | |
+| leftExtraContentProps | 自定义弹层左侧Layout区参数配置 | LayoutBoxProps | 否 | |
+| mask | 是否展示遮罩 | boolean | 否 | |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | 否 | |
+| maskStyle | Dialog 遮罩层部分样式 | CSSProperties | 否 | |
+| maxResizeHeight | 可调整的最大高度 | string \| number | 否 | |
+| maxResizeWidth | 可调整的最大宽度 | string \| number | 否 | |
+| message | 消息层内容 | string \| ReactNode | 否 | |
+| minResizeHeight | 可调整的最小高度 | string \| number | 否 | |
+| minResizeWidth | 可调整的最小宽度 | string \| number | 否 | |
+| noMaskClose | 无蒙层，Dialog 外部触发弹窗关闭，非 middle 模式支持 | boolean | 否 | |
+| noTitle | 隐藏弹框顶部内容 | boolean | 否 | |
+| onAfterClose | Dialog 关闭后回调(带动画效果) | ( () => void; | 否 | |
+| onClose | 击遮罩层或右上角叉或取消按钮的回调 | () => void | 否 | |
+| onDrag | Dialog 拖拽回调 | (e: HTMLDivElement, position:{x:number, y:number}) => void | 否 | |
+| onDragStop | Dialog 拖拽停止回调 | (e: HTMLDivElement, position:{x:number, y:number}) => void | 否 | |
+| onResize | 拖拽事件回调 | (style: CSSProperties, container?: HTMLDivElement \| null) => void | 否 | |
+| onScale | 放大/缩小弹框回调 | () => void | 否 | |
+| path | 通过路由打开 | string | 否 | |
+| placement | middle \| top \| right \| bottom \| left | string | 否 | middle |
+| ref | 组件实例 | any | 否 | |
+| resetDragPosition | 监听弹窗容器宽高变化，变化后重置拖拽位置 | boolean | 否 | |
+| resize | 是否支持拖拽调整宽度 | boolean | 否 | |
+| right | 距离右侧高度 | number \| string | 否 | |
+| rightExtraContent | 自定义右侧内容 | ReactNode | 否 | |
+| rightExtraContentProps | 自定义弹层右侧Layout区参数配置 | LayoutBoxProps | 否 | |
+| scale | 是否支持最大化 | boolean | 否 | |
+| top | 距离顶部高度 | number \| string | 否 | |
+| topExtraContent | 自定义顶部内容 | ReactNode | 否 | |
+| topExtraContentProps | 自定义弹层顶部Layout区参数配置 | LayoutBoxProps | 否 | |
+| visible | 显示受控 | boolean | 否 | |
+| width | Dialog 宽度 （注意：placement 为 middle 时，宽度设置小于 380 不生效） | number \| string | 否 | |
+| windowOpenUrl | 从新的窗口打开该 dialog 的地址 | string | 否 | |
+| wrapClassName | 外层容器 class | string | 否 | |
+| wrapStyle | 外层容器自定义样式 | CSSProperties | 否 | |
+| zIndex | Dialog 层级 | number | 否 | |
+
+### Dialog.message 参数说明如下
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| content | 消息内容 | ReactNode | 否 | |
+| delay | 自定义消息消失时间, 以毫秒为单位（0: 代表不会自动消失） | number | 否 | |
+| destroy | 销毁方法 | () => void; | 否 | |
+| icon | type = 'custom' 时自定义icon | ReactNode | 否 | |
+| maxMessageCount | 最大可同时展示的消息数 | number | 否 | 3 |
+| type | 消息类型 | info \| error \| success \| custom | 否 | 'info' |
+
+### Dialog.confirm 参数说明如下：
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| bottom | 距离底部高度 | number \| string | | |
+| cancelText | 取消按钮文字 | string \|ReactNode | 否 | |
+| cancelType | 取消按钮类型 | BtnType | 否 | |
+| closeIcon | 自定义关闭按钮 | ReactNode | 否 | |
+| confirmMaskClassName | 确认框蒙层样式名 | string | 否 | |
+| confirmWrapId | 确认框蒙包裹层id(主要用于处理全局点击白名单) | string | 否 | |
+| content | 内容 | ReactNode | 否 | |
+| customKeyboardEvent | 自定义键盘事件触发的回调 | () => void | 否 | |
+| draggable | 拖拽 | boolean | 否 | |
+| enableHistoryListen | 启用路由监听关闭弹框方案 | boolean | 否 | |
+| enableKeyboardEvent | 是否开启键盘事件（键盘事件默认触发onOK回调） | boolean | 否 | true |
+| footer | 按钮组(底部) | ReactNode | 否 | |
+| getInstance | 获取弹框实例 | (instance: any) => void | | |
+| getTitle | 自定义标题 | () => ReactNode | 否 | |
+| height | 设置弹窗高度 | number \| string | | |
+| hideCancelBtn | 隐藏确定按钮 | boolean | 否 | |
+| hideOkBtn | 隐藏确定按钮 | boolean | 否 | |
+| icon | 标题图标 | string | 否 | |
+| iconBgcolor | 标题图标颜色 | string | 否 | |
+| left | 距离左边高度 | number \| string | | |
+| okText | 确定按钮文字 | string \| ReactNode | 否 | |
+| okType | 确定按钮类型 | BtnType | 否 | |
+| onCancel | 取消回调方法 | () => void | 否 | |
+| onOk | 确定回调方法 | () => void | 否 | |
+| right | 距离右边高度 | number \| string | | |
+| title | 标题信息 | string | 否 | |
+| top | 距离顶部高度 | number \| string | | |
+| width | 设置弹窗宽度 | number \| string | | |
+| wrapStyle | 外层容器自定义样式 | CSSProperties | 否 | |
+| zIndex | | number | 否 | |

package/skills/weaver-e10-builder/references/components/base-Empty.md

@@ -0,0 +1,58 @@
+## 基础用法
+```js
+import { Component } from "react";
+import { Empty, Icon, constants, Button } from "@weapp/ui";
+
+const prefixCls = `${constants.uiPcClsPrefix}-demo-empty`;
+
+export default class EmptyDemo extends Component {
+
+  renderFooter = () => <Button type={'primary'}>新建流程</Button>
+
+  render() {
+    return (
+      <div className={prefixCls}>
+        <Empty
+          title={'暂无待办流程'}
+          description='您暂时还没有待办流程，可以主动发起一条试试哦~'
+          image={
+            <Icon
+              style={{ width: 100, height: 100 }}
+              name={'Icon-empty-file'
+              } />
+          }
+        />
+
+         <Empty
+          description={
+            <span>
+              Customize  <a href="#API">Description</a>
+            </span>
+          }
+          image={'https://img95.699pic.com/photo/50055/5642.jpg_wh300.jpg'}
+          imageStyle={{ height: 100 }}
+          renderFooter={this.renderFooter}
+        />
+      </div>
+    )
+  }
+}
+
+```
+
+## 参数说明
+
+| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
+| --- | --- | --- | --- | --- |
+| customRender | 自定义渲染 | `(_: any, ele: React.ReactNode) => React.ReactNode` | 否 | |
+| description | 次要文字描述 | `ReactNode` | 否 | |
+| displayType | 展示类型 | `'404' \| 'ie'` | 否 | |
+| image | 设置显示图片，为 string 时表示自定义图片地址。 | `ReactNode` | 否 | |
+| imageStyle | 图片样式 | `CSSProperties` | 否 | |
+| renderFooter | 自定义底部内容 | `() => ReactNode` | 否 | |
+| style | style 样式 | `CSSProperties` | 否 | |
+| title | 主要文字描述 | `ReactNode` | 否 | |
+
+> 注意:
+        1. 可修改 displayType 来展示 error 类型
+        2. 可修改 displayType 来展示 IE浏览器支持提示