@phelan/design 0.0.1

package/docs/components/basic/date-time-picker.md

@@ -0,0 +1,110 @@
+# date-time-picker 样例
+
+在同一个选择器里选择日期和时间
+
+## 日期和时间点
+
+通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。 快捷方式的使用方法与 Date Picker 相同。
+
+:::preview
+
+demo-preview=../../examples/date-time-picker/index.vue
+
+:::
+
+## 日期时间格式
+
+使用format指定输入框的格式。 使用value-format指定绑定值的格式。
+
+默认情况下，组件接受并返回Date对象。
+
+:::preview
+
+demo-preview=../../examples/date-time-picker/format.vue
+
+:::
+
+## 下拉列表中的日期和时间格式
+
+使用 date-format 和 time-format 控制下拉列表面板输入框中显示的文本格式
+
+:::preview
+
+demo-preview=../../examples/date-time-picker/time-format.vue
+
+:::
+
+## 日期和时间范围
+
+设置type为datetimerange即可选择日期和时间范围
+
+:::preview
+
+demo-preview=../../examples/date-time-picker/range.vue
+
+:::
+
+## 默认的起始与结束时刻
+
+使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。 我们可以使用 default-time 属性来控制它。 default-time接受一个数组，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。 第一项控制开始日期的时间值，第二项控制结束日期的时间值。
+
+:::preview
+
+demo-preview=../../examples/date-time-picker/default.vue
+
+:::
+
+## DateTimePicker API
+
+### DateTimePicker Attributes
+
+| 属性名                | 说明                                                                                       | 类型                                                     | 默认值     |
+| --------------------- | ------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ---------- |
+| model-value / v-model | 绑定值，如果是 range 选择器，数组长度应为 2                                                | number/ string/ Date/ array                              | ''         |
+| readonly              | 只读                                                                                       | boolean                                                  | false      |
+| disabled              | 禁用                                                                                       | boolean                                                  | false      |
+| editable              | 文本框可输入                                                                               | boolean                                                  | true       |
+| clearable             | 是否显示清除按钮                                                                           | boolean                                                  | false      |
+| placeholder           | 非范围选择时的占位内容                                                                     | string                                                   | ''         |
+| start-placeholder     | 范围选择时开始日期的占位内容                                                               | string                                                   | -          |
+| end-placeholder       | 范围选择时结束日期的占位内容                                                               | string                                                   | -          |
+| arrow-control         | 是否使用箭头进行时间选择                                                                   | boolean                                                  | false      |
+| type                  | 显示类型                                                                                   | 'date'/'daterange'/'week'/'year'/'years'/'month'/'dates' | date       |
+| format                | 显示在输入框中的格式                                                                       |                                                          | YYYY-MM-DD |
+| popper-class          | DateTimePicker 下拉框的类名                                                                    | string                                                   |            |
+| popper-style          | 弹出内容的自定义样式                                                                       | string/object                                            |            |
+| range-separator       | 选择范围时的分隔符                                                                         | string                                                   | '-'        |
+| default-value         | 可选，选择器打开时默认显示的时间                                                           | object                                                   | -          |
+| default-time          | 范围选择时选中日期所使用的当日内具体时刻                                                   | object                                                   | -          |
+| value-format          | 可选，绑定值的格式。 不指定则绑定值为 Date 对象                                            |                                                          | -          |
+| date-format           | 可选，输入框内部面板中显示的日期格式                                                       | string                                                   | YYYY-MM-DD |
+| time-format           | 可选，输入框内部面板中显示的时间格式                                                       | string                                                   | HH:mm:ss   |
+| id                    | 等价于原生 input id 属性                                                                   | string/ object                                           | -          |
+| name                  | 等价于原生 input name 属性                                                                 | string/ object                                           | -          |
+| unlink-panels         | 在范围选择器里取消两个日期面板之间的联动                                                   | boolean                                                  | false      |
+| validate-event        | 是否触发表单验证                                                                           | boolean                                                  | true       |
+| disabled-date         | 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 | Function                                                 | -          |
+| disabled-hours        | 禁止选择部分小时选项                                                                       | Function                                                 | -          |
+| disabled-minutes      | 禁止选择部分分钟选项                                                                       | Function                                                 | -          |
+| disabled-seconds      | 禁止选择部分秒选项                                                                         | Function                                                 | -          |
+| shortcuts             | 设置快捷选项，需要传入数组对象                                                             | object                                                   | []         |
+| cell-class-name       | 设置自定义类名                                                                             | Function                                                 | -          |
+| teleported            | 是否将 date-time-picker 的下拉列表插入至 body 元素                                         | boolean                                                  | true       |
+
+### DateTimePicker Events
+
+| 事件名          | 说明                                    | 回调参数 |
+| --------------- | --------------------------------------- | -------- |
+| change          | 当用户确认值或点击外部时触发            | Function |
+| blur            | 在组件 Input 失去焦点时触发             | Function |
+| focus           | 在组件 Input 获得焦点时触发             | Function |
+| calendar-change | 在日历所选日期更改时触发 仅用于 range   | Function |
+| panel-change    | 当日期面板改变时触发                    | Function |
+| visible-change  | 当 DateTimePicker 的下拉列表出现/消失时触发 | Function |
+
+### DateTimePicker Slots
+
+| 插槽名          | 说明                 |
+| --------------- | -------------------- |
+| default         | 自定义单元格内容     |
+| range-separator | 自定义范围分割符内容 |

package/docs/components/basic/demo.md

@@ -0,0 +1,29 @@
+# Demo 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+这里需要说明组件demo1功能和使用方式。
+
+:::preview
+
+demo-preview=../../examples/demo/demo1.vue
+
+:::
+
+这里需要说明组件demo2功能和使用方式。
+
+:::preview
+
+demo-preview=../../examples/demo/demo2.vue
+
+:::
+
+## Demo API
+
+### Demo Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| name   | 名字 | `String` | —      |

package/docs/components/basic/description.md

@@ -0,0 +1,56 @@
+# description 样例
+
+列表形式展示多个字段。
+
+## 基础用法
+
+:::preview
+
+demo-preview=../../examples/description/index.vue
+
+:::
+
+## 自定义一行Item数量和间距
+
+:::preview
+
+demo-preview=../../examples/description/custom-description.vue
+
+:::
+
+## 合并单元格
+
+:::preview
+
+demo-preview=../../examples/description/merge-description.vue
+
+:::
+
+## label对齐方式
+
+:::preview
+
+demo-preview=../../examples/description/labelJustify.vue
+
+:::
+
+## Description API
+
+### Description Attributes
+
+| 属性名       | 说明                                            | 类型     | 默认值 |
+| ------------ | ----------------------------------------------- | -------- | ------ |
+| column       | 一行的数量                                      | `Number` | 3      |
+| gutter       | 水平间距                                        | `Number` | 12     |
+| rowGap       | 垂直间距                                        | `Number` | 10     |
+| labelJustify | content多行时,label对齐方式：center、start、end | `String` | center    |
+
+## DescriptionItem API
+
+### DescriptionItem Attributes
+
+| 属性名 | 说明     | 类型     | 默认值 |
+| ------ | -------- | -------- | ------ |
+| label  | 标题     | `String` | -      |
+| gutter | 水平间距 | `Number` | 12     |
+| span   | 占多少格 | `Number` | 1      |

package/docs/components/basic/dialog.md

@@ -0,0 +1,142 @@
+# dialog 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+这里需要说明组件dialog功能和使用方式。
+
+:::preview
+
+demo-preview=../../examples/dialog/basic.vue
+
+:::
+
+### 自定义内容
+
+对话框的内容可以是任何东西，甚至是一个表格或表单。 此示例显示如何在 Dialog 中使用 Element Plus 的表格和表单。
+:::preview
+
+demo-preview=../../examples/dialog/customization-content.vue
+
+:::
+
+### 自定义头部
+
+header 可用于自定义显示标题的区域。 为了保持可用性，除了使用此插槽外，使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。
+:::preview
+
+demo-preview=../../examples/dialog/customization-header.vue
+
+:::
+
+### 嵌套的对话框
+
+如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。
+:::preview
+
+demo-preview=../../examples/dialog/nested-dialog.vue
+
+:::
+
+### 内容居中
+
+对话框的内容可以居中。
+:::preview
+
+demo-preview=../../examples/dialog/centered-content.vue
+
+:::
+
+### 居中对话框
+
+从屏幕中心打开对话框。
+:::preview
+
+demo-preview=../../examples/dialog/align-center.vue
+
+:::
+
+### 标题带图标
+
+在插槽名header情况下不适用（可自定义）
+:::preview
+
+demo-preview=../../examples/dialog/title-icon.vue
+
+:::
+
+### 消息弹出框
+
+当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
+:::preview
+
+demo-preview=../../examples/dialog/msg-dialog.vue
+
+:::
+
+## Dialog API
+
+### Dialog Attributes
+
+| 属性名                | 说明                                                                         | 类型               | 默认值 |
+| --------------------- | ---------------------------------------------------------------------------- | ------------------ | ------ |
+| model-value / v-model | 是否显示 Dialog                                                              | `boolean`          | false  |
+| title                 | 标题， 也可通过具名 slot （见下表）传入                                      | `String`           | —      |
+| width                 | 对话框的宽度，默认值为 50%                                                   | `String / number`  | ''     |
+| fullscreen            | 是否为全屏 Dialog                                                            | `boolean`          | false  |
+| top                   | margin-top 值，默认为 15vh                                                   | `String`           | 15vh   |
+| modal                 | 是否需要遮罩层                                                               | `boolean`          | true   |
+| modal-class           | 遮罩的自定义类名                                                             | `string`           | —      |
+| append-to-body        | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | `boolean`          | false  |
+| lock-scroll           | 是否是大弹框，big为大弹框                                                    | `String`           | —      |
+| open-delay            | dialog 打开的延时时间，单位毫秒                                              | `number`           | 0      |
+| close-delay           | dialog 关闭的延时时间，单位毫秒                                              | `number`           | 0      |
+| close-on-click-moda   | 是否可以通过点击 modal 关闭 Dialog                                           | `boolean`          | true   |
+| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog                                             | `boolean`          | true   |
+| show-close            | 是否显示关闭按钮                                                             | `boolean`          | true   |
+| before-close          | 关闭前的回调，会暂停 Dialog 的关闭。                                         | `Function`         | —      |
+| draggable             | 为 Dialog 启用可拖拽功能                                                     | `boolean`          | false  |
+| overflow              | 是否让 Dialog 的 header 和 footer 部分居中排列                               | `boolean`          | false  |
+| center                | 拖动范围可以超出可视区                                                       | `boolean`          | false  |
+| destroy-on-close      | 当关闭 Dialog 时，销毁其中的元素                                             | `boolean`          | false  |
+| close-icon            | 自定义关闭图标，默认 Close                                                   | `string/Component` | -      |
+| z-index               | 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序                                | `number	`           | -      |
+| showDefaultFooter     | 是否显示底部按钮（取消/确认）                                                | `Boolean`          | true   |
+| type                  | 标题图标（info ｜ warning ｜ success ｜ error）                              | `String`           | —      |
+| confirmButtonText     | 确认按钮名字                                                                 | `String`           | 确认   |
+| cancelButtonText      | 取消按钮名字                                                                 | `String`           | 取消   |
+
+### Dialog Events
+
+| 事件名           | 说明                                   | 类型       |
+| ---------------- | -------------------------------------- | ---------- |
+| open             | Dialog 打开时触发的回调                | `Function` |
+| opened           | Dialog 打开动画结束时触发的回调        | `Function` |
+| close            | Dialog 关闭时触发的回调                | `Function` |
+| closed           | Dialog 关闭动画结束时触发的回调        | `Function` |
+| open-auto-focus  | 输入焦点聚焦在 Dialog 内容时触发的回调 | `Function` |
+| close-auto-focus | 输入焦点从 Dialog 内容失焦时触发的回调 | `Function` |
+
+### Dialog Slots
+
+| 插槽名  | 说明                                                   |
+| ------- | ------------------------------------------------------ |
+| default | 对话框的默认内容                                       |
+| header  | 对话框标题的内容；会替换标题部分，但不会移除关闭按钮。 |
+| top     | 可滚动部分上的内容，也可以用默认插槽                   |
+| scroll  | 内容部分可滚动部分。                                   |
+| bottom  | 可滚动部分下面的内容。                                 |
+| footer  | Dialog 按钮操作区的内容                                |
+
+## msgDialog API
+
+### msgDialog Attributes
+
+| 属性名            | 说明                                            | 类型     | 默认值                   |
+| ----------------- | ----------------------------------------------- | -------- | ------------------------ |
+| type              | 标题图标（info ｜ warning ｜ success ｜ error） | `String` | —                        |
+| content           | 弹框显示内容                                    | `String` | `string/VNode/ Function` |
+| width             | 弹框长度                                        | `String` | —                        |
+| confirmButtonText | 确认按钮名字                                    | `String` | 确认                     |
+| cancelButtonText  | 取消按钮名字                                    | `String` | 取消                     |

package/docs/components/basic/drawer.md

@@ -0,0 +1,159 @@
+# Drawer 抽屉
+
+有些时候, `Dialog` 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, `Drawer` 拥有和 `Dialog` 几乎相同的 API, 在 UI 上带来不一样的体验.
+
+:::tip
+在 Vue 3 之后的版本 v-model 可以用于任何一个组件，`visible.sync` 已被移除，请使用 `v-model="visibilityBinding"` 来控制抽屉组件的显示和隐藏状态。
+:::
+
+## 基础用法
+
+呼出一个临时的侧边栏, 可以从多个方向呼出
+
+你必须像 `Dialog`一样为 `Drawer` 设置 `model-value` 属性来控制 `Drawer` 的显示与隐藏状态，该属性接受一个 `boolean` 类型。 `Drawer` 包含三部分: `title` & `body` & `footer`, 其中 `title` 是一个具名 slot, 你还可以通过 `title` 属性来设置标题, 默认情况下它是一个空字符串, 其中 `body` 部分是 `Drawer` 组件的主区域, 它包含了用户定义的主要内容. footer和title用法一致, 用来显示页脚信息. 当 `Drawer` 打开时，默认设置是**从右至左**打开 **30%** 浏览器宽度。 你可以通过传入对应的 `direction` 和 `size` 属性来修改这一默认行为。
+
+:::preview
+
+demo-preview=../../examples/drawer/index.vue
+
+:::
+
+## 不添加 Title
+
+当你不需要标题的时候，你可以将它移除。
+
+通过设置 `with-header` 属性为 **false** 来控制是否显示标题。 如果你的应用需要具备可访问性，请务必设置好 `title`。
+
+:::preview
+
+demo-preview=../../examples/drawer/no-title.vue
+
+:::
+
+## 自定义内容
+
+像 `Dialog` 组件一样，`Drawer` 也可以用来显示多种不同的交互。
+
+:::preview
+
+demo-preview=../../examples/drawer/custom-content.vue
+
+:::
+
+## 自定义头部
+
+`header` 可用于自定义显示标题的区域。 为了保持可用性，除了使用此插槽外，使用 `title` 属性，或使用 `titleId` 插槽属性来指定哪些元素应该读取为抽屉标题。
+
+:::preview
+
+demo-preview=../../examples/drawer/custom-header.vue
+
+:::
+
+## 可调整抽屉
+
+尝试拖动边缘部分。
+
+设置`resizable`属性为`true`以做到拖拽
+
+:::preview
+
+demo-preview=../../examples/drawer/resizable.vue
+
+:::
+
+## 嵌套抽屉
+
+你可以像 `Dialog` 一样拥有多层嵌套的 `Drawer`
+
+如果你需要在不同图层中多个抽屉，你必须设置 `append-to-body` 属性到 **true**
+
+:::preview
+
+demo-preview=../../examples/drawer/nested.vue
+
+:::
+
+## 模态框
+
+将 `modal` 设置为 `false` 将隐藏抽屉的模态层（遮罩层）。
+
+<!-- 从版本 2.11.7 起，新增了 `modal-penetrable` 属性，该属性可设置为"可穿透"。 -->
+
+:::preview
+
+demo-preview=../../examples/drawer/modal.vue
+
+:::
+
+##
+
+:::tip
+Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。 因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。
+:::
+
+:::tip
+Drawer 提供了一个名为 `destroy-on-close` 的 API，这是一个标志变量，用于指示在 Drawer 关闭后是否销毁其中的子内容。 当你需要每次打开抽屉都要调用 `mounted` 生命周期时，可以使用此 API。
+:::
+
+## Drawer API
+
+### Drawer Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| model-value / v-model | 是否显示 Drawer | `boolean` | `false` |
+| append-to-body | Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 **true** | `boolean` | `false` |
+| append-to 【2.8.0】 | 挂载到哪个 DOM 元素 将覆盖 `append-to-body` | `CSSSelector` / `HTMLElement` | `body` |
+| lock-scroll | 是否在 Drawer 出现时将 body 滚动锁定 | `boolean` | `true` |
+| before-close | 关闭前的回调，会暂停 Drawer 的关闭 | `Function` | — |
+| close-on-click-modal | 是否可以通过点击 modal 关闭 Drawer | `boolean` | `true` |
+| close-on-press-escape | 是否可以通过按下 ESC 关闭 Drawer | `boolean` | `true` |
+| open-delay | Drawer 打开的延时时间，单位毫秒 | `number` | `0` |
+| close-delay | Drawer 关闭的延时时间，单位毫秒 | `number` | `0` |
+| destroy-on-close | 控制是否在关闭 Drawer 之后将子元素全部销毁 | `boolean` | `false` |
+| modal | 是否需要遮罩层 | `boolean` | `true` |
+| direction | Drawer 打开的方向 | `'rtl' \| 'ltr' \| 'ttb' \| 'btt'` | `'rtl'` |
+| show-close | 是否显示关闭按钮 | `boolean` | `true` |
+| size | Drawer 窗体的大小, 当使用 `number` 类型时, 以像素为单位, 当使用 `string` 类型时, 请传入 'x%', 否则便会以 `number` 类型解释 | `number` / `string` | `'30%'` |
+| title | Drawer 的标题，也可通过具名 slot （见下表）传入 | `string` | — |
+| with-header | 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效 | `boolean` | `true` |
+| modal-class | 遮罩层的自定义类名 | `string` | — |
+| z-index | 设置 z-index | `number` | — |
+| header-aria-level | header 的 `aria-level` 属性 | `string` | `'2'` |
+
+
+<!-- | modal-penetrable | 是否允许穿透遮罩层。 modal 属性必须为 `false`。 | `boolean` | `false` | -->
+<!-- | resizable | 为抽屉启用可调整大小的功能 | `boolean` | `false` | -->
+<!-- | header-class | header 部分的自定义 class 名 | `string` | — | -->
+<!-- | body-class | body 部分的自定义 class 名 | `string` | — | -->
+<!-- | footer-class | footer 部分的自定义 class 名 | `string` | — | -->
+
+### Drawer Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| open | Drawer 打开的回调 | `() => void` |
+| opened | Drawer 打开动画结束时的回调 | `() => void` |
+| close | Drawer 关闭的回调 | `() => void` |
+| closed | Drawer 关闭动画结束时的回调 | `() => void` |
+| open-auto-focus | 输入焦点聚焦在 Drawer 内容时的回调 | `() => void` |
+| close-auto-focus | 输入焦点从 Drawer 内容失焦时的回调 | `() => void` |
+
+<!-- | resize-start | 当开始调整大小时触发（当启用 `resizable` 时） | `() => void` |
+| resize | 调整大小时触发（启用 `resizable` 时） | `() => void` |
+| resize-end | 当调整大小结束时触发（当启用 `resizable` 时） | `() => void` | -->
+
+### Drawer Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | Drawer 的内容 |
+| header | Drawer 标题的内容；会替换标题部分，但不会移除关闭按钮。 |
+| footer | Drawer 页脚部分 |
+
+### Drawer Expose
+
+| 名称 | 详情 |
+| ------ | ---- |
+| handleClose | 用于关闭 Drawer, 该方法会调用传入的 `before-close` 方法 |

package/docs/components/basic/editor.md

@@ -0,0 +1,76 @@
+# editor 样例
+
+单行编辑组件。
+
+## 基础用法
+
+:::preview
+
+demo-preview=../../examples/editor/basic.vue
+
+:::
+
+## 自定义描述部分一行Item数量
+
+:::preview
+
+demo-preview=../../examples/editor/number-desc.vue
+
+:::
+
+## 自定义描述部分
+
+通过插槽`description`实现自定义描述部分。
+
+:::preview
+
+demo-preview=../../examples/editor/customization-desc.vue
+
+:::
+
+## form内容过长
+
+form内容过长，出现滚动条。
+
+:::preview
+
+demo-preview=../../examples/editor/more-form.vue
+
+:::
+
+## 其他功能
+
+此示例是一个完整的用例。 使用了 tilte 和 width 属性来修改 标题和宽度。
+
+:::preview
+
+demo-preview=../../examples/editor/more-demo.vue
+
+:::
+
+## Editor API
+
+### Editor Attributes
+
+| 属性名                | 说明                               | 类型               | 默认值 |
+| --------------------- | ---------------------------------- | ------------------ | ------ |
+| model-value / v-model | 控制显隐                           | `boolean`          | false  |
+| title                 | 标题                               | `string`           | 编辑   |
+| width                 | 容器宽度                           | `number ｜ string` | 570    |
+| viewData              | 查看区域的数据                     | `object`           | []     |
+| viewColumns           | 查看区域的列数                     | `number`           | 2      |
+| closeOnClickModal     | 是否可以通过点击 modal 关闭 Dialog | `Boolean`          | false  |
+
+### Editor Events
+
+| 事件名     | 说明           | 类型       |
+| ---------- | -------------- | ---------- |
+| cancel  | 取消时回调     | `Function` |
+| confirm | 确认提交时回调 | `Function` |
+
+### Editor Slots
+
+| 插槽名      | 说明     |
+| ----------- | -------- |
+| description | 描述区域 |
+| form        | 表单区域 |

package/docs/components/basic/empty.md

@@ -0,0 +1,59 @@
+# empty 样例
+
+空状态时的占位提示。
+
+## 基础用法
+
+:::preview
+
+demo-preview=../../examples/empty/basic.vue
+
+:::
+
+## 自定义图片
+
+通过设置 `image` 属性传入图片 URL。
+
+:::preview
+
+demo-preview=../../examples/empty/custom-image.vue
+
+:::
+
+## 图片尺寸
+
+通过使用 `image-size` 属性来控制图片大小。
+
+:::preview
+
+demo-preview=../../examples/empty/image-size.vue
+
+:::
+
+## 底部内容
+
+使用默认插槽可在底部插入内容。
+
+:::preview
+
+demo-preview=../../examples/empty/bottom-content.vue
+
+:::
+
+## Empty API
+
+### Empty Attributes
+
+| 属性名      | 说明                         | 类型     | 默认值 |
+| ----------- | ---------------------------- | -------- | ------ |
+| image       | empty 组件的图像地址         | `String` | ''     |
+| image-size  | empty 组件的图像尺寸（宽度） | `number` | -      |
+| description | empty 组件的描述信息         | `String` | ''     |
+
+### Empty Slots
+
+| 插槽名      | 说明               |
+| ----------- | ------------------ |
+| default     | 作为底部内容的内容 |
+| image       | 作为图像的内容     |
+| description | 作为描述的内容     |

package/docs/components/basic/file-task-dialog.md

@@ -0,0 +1,41 @@
+# file-task-dialog 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+是一个基于 `m-dialog`、`m-search-panel`、`m-table` 等组件构建的任务列表查看对话框组件，支持任务搜索、分页展示、状态筛选等功能。
+
+:::preview
+
+demo-preview=../../examples/file-task-dialog/index.vue
+
+:::
+
+## FileTaskDialog API
+
+### FileTaskDialog Attributes
+
+| 属性名             | 说明             | 类型      | 默认值     |
+| ------------------ | ---------------- | --------- | ---------- |
+| modelValue/v-model | 控制对话框显隐   | `Boolean` | false      |
+| type               | 业务类型         | `String`  | -          |
+| operationType      | 操作类型         | `String`  | -          |
+| loading            | 列表加载中的标识 | `Boolean` | false      |
+| tableColumn        | 表格列配置       | `Array`   | []         |
+| tableList          | 表格数据         | `Array`   | []         |
+| total              | 列表总数         | `Number`  | 0          |
+| title              | 弹框标题         | `string`  | '任务列表' |
+
+### FileTaskDialog Events
+
+| 事件名      | 说明               | 类型       |
+| ----------- | ------------------ | ---------- |
+| getList     | 查询/重置/分页触发 | `Function` |
+| download | 点击下载按钮时触发 | `Function` |
+
+### FileTaskDialog Slots
+
+| 插槽名 | 说明                               |
+| ------ | ---------------------------------- |
+| table  | 表格内容插槽，可完全自定义表格展示 |