@phelan/design 0.0.1

package/docs/components/basic/time-select.md

@@ -0,0 +1,65 @@
+# time-select 样例
+
+用于选择或输入日期
+
+可用时间范围是 00:00-23:59
+
+## 固定时间点
+
+提供几个固定的时间点供用户选择
+
+使用 m-time-select 标签，然后通过start、end和step指定起始时间，结束时间和步长。
+
+:::preview
+
+demo-preview=../../examples/time-select/index.vue
+
+:::
+
+## 固定时间范围
+
+如果先选中了开始（或结束）时间，则结束（或开始）时间的状态也将会随之改变。
+
+:::preview
+
+demo-preview=../../examples/time-select/disabled.vue
+
+:::
+
+## TimeSelect API
+
+### TimeSelect Attributes
+
+| 属性名                | 说明                                   | 类型          | 默认值 |
+| --------------------- | -------------------------------------- | ------------- | ------ |
+| model-value / v-model | 选中项绑定值                           | string        | —      |
+| disabled              | 禁用                                   | boolean       | false  |
+| editable              | 文本框可输入                           | boolean       | true   |
+| clearable             | 是否显示清除按钮                       | boolean       | true   |
+| include-end-time      | 是否在选项中包含end                    | boolean       | false  |
+| placeholder           | 非范围选择时的占位内容                 | string        | ''     |
+| name                  | 原生属性                               | string        | '-'    |
+| start                 | 开始时间                               | string        | 09:00  |
+| end                   | 结束时间                               | string        | 18:00  |
+| step                  | 间隔时间                               | string        | 00:30  |
+| min-time              | 最早时间点，早于该时间的时间段将被禁用 | string        | -      |
+| max-time              | 最晚时间点，晚于该时间的时间段将被禁用 | string        | -      |
+| format                | 时间格式化                             | string        | HH:mm  |
+| popper-class          | TimePicker 下拉框的类名                | string        | ''     |
+| popper-style          | 为 TimePicke 的下拉菜单自定义样式      | string/object | -      |
+
+### TimeSelect Events
+
+| 事件名 | 说明                                     | 回调参数 |
+| ------ | ---------------------------------------- | -------- |
+| change | 用户确认选定的值时触发                   | Function |
+| blur   | 在组件 Input 失去焦点时触发              | Function |
+| focus  | 在组件 Input 获得焦点时触发              | Function |
+| clear  | 可清空的单选模式下用户点击清空按钮时触发 | Function |
+
+### TimeSelect Exposes
+
+| 方法名 | 说明              | 类型     |
+| ------ | ----------------- | -------- |
+| blur   | 使 input 失去焦点 | Function |
+| focus  | 使 input 获取焦点 | Function |

package/docs/components/basic/tooltip.md

@@ -0,0 +1,112 @@
+# Tooltip 文字提示
+
+常用于展示鼠标 hover 时的提示信息。
+
+## 基础用法
+
+在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。
+
+:::preview
+
+demo-preview=../../examples/tooltip/index.vue
+
+:::
+
+## 主题
+
+Tooltip 组件提供了两个不同的主题：`dark` 和 `light`。
+
+:::preview
+
+demo-preview=../../examples/tooltip/theme.vue
+
+:::
+
+## 更多内容
+
+展示多行文本或者是设置文本内容的格式
+
+:::preview
+
+demo-preview=../../examples/tooltip/more-content.vue
+
+:::
+
+## 禁用状态
+
+Tooltip 组件可以通过 `disabled` 属性来禁用。
+
+:::preview
+
+demo-preview=../../examples/tooltip/disabled.vue
+
+:::
+
+## 虚拟触发
+
+像 Popover 一样，Tooltip 也可以由虚拟元素触发。
+
+:::preview
+
+demo-preview=../../examples/tooltip/virtual-trigger.vue
+
+:::
+
+## API
+
+### Attributes
+
+| 属性名                             | 说明                                                                                                                        | 类型                        | Default                                                                    |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------- | -------------------------------------------------------------------------- |
+| effect                          | 默认提供的主题                                                                                                                    | enum / string             | dark                                                                       |
+| content                         | 显示的内容，也可以通过写入默认 slot 修改显示内容                                                                                               | string                    | ''                                                                         |
+| placement                       | Tooltip 组件出现的位置                                                                                                            | enum                      | bottom                                                                     |
+| model-value / v-model          | Tooltip 显示状态，可以使用 v-model 双向绑定数据                                                                                                | boolean                   | undefined                                                                  |
+| disabled                        | Tooltip 是否可用                                                                                                                | boolean                   | false                                                                      |
+| offset                          | 出现位置的偏移量                                                                                                                  | number                    | 12                                                                         |
+| transition                      | 定义渐变动画                                                                                                                    | string                    | el-fade-in-linear                                                          |
+| show-arrow                      | 是否显示 Tooltip 箭头                                                                                                            | boolean                   | true                                                                       |
+| popper-options                  | [popper.js](https://popper.js.org/docs/v2/) 的参数                                                                           | object                    | {modifiers: \[{name: 'computeStyles',options: {gpuAcceleration: false}}\]} |
+| show-after                      | 延迟显示时间（以毫秒为单位）                                                                                                          | number                    | 0                                                                          |
+| hide-after                      | 延迟隐藏时间（以毫秒为单位）                                                                                                          | number                    | 200                                                                        |
+| auto-close                      | 隐藏提示框的超时时间（以毫秒为单位）                                                                                                      | number                    | 0                                                                          |
+| popper-class                    | 为 Tooltip 的 popper 添加类名                                                                                                   | string                    | —                                                                          |
+| popper-style                    | 为 Tooltip 的 popper 添加样式                                                                                                   | string / object           | —                                                                          |
+| enterable                       | 鼠标是否可进入到 tooltip 中                                                                                                       | boolean                   | true                                                                       |
+| hide-after                      | Tooltip 出现前的延迟时长，单位毫秒                                                                                                  | number                    | 0                                                                          |
+| teleported                      | 是否将 tooltip 的下拉列表插入至 body 元素                                                                                              | boolean                   | true                                                                       |
+| trigger                         | 如何触发 Tooltip                                                                                                                | enum / array              | hover                                                                      |
+| trigger-keys                    | 当通过鼠标点击使触发元素获得焦点时，可以定义一组键盘按键代码，通过键盘控制气泡框的显示，在受控模式下无效。                                                                     | Array                     | \['Enter','Space'\]                                                        |
+| virtual-triggering              | 是否启用虚拟触发器                                                                                                                 | boolean                   | —                                                                          |
+| virtual-ref                     | 代表 tooltip 所要附加的参照元素                                                                                                      | HTMLElement               | —                                                                          |
+| append-to                       | 指示 Tooltip 的内容将附加在哪一个网页元素上                                                                                                | CSSSelector / HTMLElement | body                                                                       |
+| persistent                      | 当 tooltip 组件长时间不触发且 persistent 属性设置为 false 时, tooltip 将会被删除                                                               | boolean                   | true                                                                       |
+
+### Slots
+
+| 插槽名      | 说明                       |
+| -------- | ------------------------ |
+| default  | Tooltip 触发 & 引用的元素      |
+| content  | 自定义 Tooltip 的内容，此插槽会覆盖 `content` 属性 |
+
+### Events
+
+| 事件名          | 说明          | Type     |
+| ------------ | ----------- | -------- |
+| show         | 显示时触发       | Function |
+| hide         | 隐藏时触发       | Function |
+| before-enter | 显示动画播放前触发   | Function |
+| after-enter  | 显示动画播放完毕后触发 | Function |
+| before-leave | 隐藏动画播放前触发   | Function |
+| after-leave  | 隐藏动画播放完毕后触发 | Function |
+
+### Exposes
+
+| 名称   | 详情         | 类型       |
+| ---- | ---------- | -------- |
+| hide | 隐藏 tooltip | Function |
+| show | 显示 tooltip | Function |
+
+## Owner
+
+Aric.Li@aldi.cn

package/docs/components/basic/tour.md

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

package/docs/components/basic/tree-select.md

@@ -0,0 +1,132 @@
+# TreeSelect 树形选择
+
+含有下拉菜单的树形选择器，结合了 `el-tree` 和 `el-select` 两个组件的功能。
+
+## 基础用法
+
+树状选择器
+
+:::preview
+
+demo-preview=../../examples/tree-select/basic.vue
+
+:::
+
+## 选择任意级别
+
+当属性 `check-strictly=true` 时，任何节点都可以被选择，否则只有子节点可被选择。
+
+:::preview
+
+demo-preview=../../examples/tree-select/check-strictly.vue
+
+:::
+
+## 多选
+
+通过点击或复选框选择多个选项。
+
+:::preview
+
+demo-preview=../../examples/tree-select/multiple.vue
+
+:::
+
+## 禁用选项
+
+使用 disabled 字段禁用选项。
+
+:::preview
+
+demo-preview=../../examples/tree-select/disabled.vue
+
+:::
+
+## 可筛选
+
+使用关键字筛选或自定义筛选方法。 `filterMethod`可以自定义数据筛选的方法， `filterNodeMethod`可以自定义节点数据筛选的方法。
+
+:::preview
+
+demo-preview=../../examples/tree-select/filterable.vue
+
+:::
+
+## 自定义内容
+
+自定义树节点的内容。
+
+:::preview
+
+demo-preview=../../examples/tree-select/custom-content.vue
+
+:::
+
+## 懒加载
+
+树节点懒加载，更加适合于数据量大的列表。
+
+:::preview
+
+demo-preview=../../examples/tree-select/lazy.vue
+
+:::
+
+## 使用 node-key 属性
+
+默认情况下，`modelValue` 会查找 `value` 键。 对于其他数据结构，必须提供 `node-key` 才能正常工作。
+
+:::preview
+
+demo-preview=../../examples/tree-select/node-key.vue
+
+:::
+
+## API
+
+### Attributes
+
+由于这个组件是`el-tree`和`el-select`的结合体，他们的原始属性未被更改，故不在此重复。请跳转查看原组件的相应文档。
+
+| 属性                                   | 对外暴露的方法                           | 事件                               | 插槽                              |
+| ------------------------------------ | --------------------------------- | -------------------------------- | ------------------------------- |
+| [tree](./tree#attributes)            | [tree](./tree#exposes)            | [tree](./tree#events)            | [tree](./tree#slots)            |
+| [select](./select#select-attributes) | [select](./select#select-exposes) | [select](./select#select-events) | [select](./select#select-slots) |
+
+#### Own Attributes
+
+| 属性名               | 详情                              | 类型     | 默认值  |
+| ----------------- | ------------------------------- | ------ | ---- |
+| cache-data 2.2.26 | 懒加载节点的缓存数据，结构与数据相同，用于获取未加载数据的标签 | object | \[\] |
+
+### 对外暴露的方法
+
+| 事件名                            | 详情                                                    | Type                                                                                                                          |
+| ------------------------------ | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| filter                         | 过滤所有树节点，过滤后的节点将被隐藏                                    | 接收一个参数并指定为 filter-node-method 属性的第一个参数                                                                                        |
+| updateKeyChildren              | 为节点设置新数据，只有当设置 node-key 属性的时候才可用                      | (key, data) 接收两个参数: 1\. 节点的 key 2\. 新数据                                                                                       |
+| getCheckedNodes                | 如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组     | (leafOnly, includeHalfChecked) 接收两个布尔类型参数: 1\. 默认值为 false. 若参数为 true, 它将返回当前选中节点的子节点 2\. 默认值为 false. 如果参数为 true, 返回值包含半选中节点数据 |
+| setCheckedNodes                | 设置目前选中的节点，使用此方法必须设置 node-key 属性                       | 要选中的节点构成的数组                                                                                                                   |
+| getCheckedKeys                 | 若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组   | (leafOnly) 接收一个布尔类型参数，默认为 false. 若参数为 true, 它将返回当前选中节点的子节点                                                                    |
+| setCheckedKeys                 | 设置目前选中的节点，使用此方法必须设置 node-key 属性                       | (keys, leafOnly) 接收两个参数: 1\. 一个需要被选中的多节点 key 的数组 2\. 布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false.                             |
+| setChecked                     | 设置节点是否被选中, 使用此方法必须设置 node-key 属性                      | (key/data, checked, deep) 接收三个参数: 1\. 要选中的节点的 key 或者数据 2\. 一个布尔类型参数表明是否选中. 3\. 一个布尔类型参数表明是否递归选中子节点                            |
+| getHalfCheckedNodes            | 如果节点可用被选中 (show-checkbox 为 true), 它将返回当前半选中的节点组成的数组   | :::                                                                                                                           |
+| getHalfCheckedKeys             | 若节点可被选中(show-checkbox 为 true)，则返回目前半选中的节点的 key 所组成的数组 | :::                                                                                                                           |
+| getCurrentKey                  | 返回当前被选中节点的数据 (如果没有则返回 null)                           | :::                                                                                                                           |
+| getCurrentNode                 | 返回当前被选中节点的数据 (如果没有则返回 null)                           | :::                                                                                                                           |
+| setCurrentKey                  | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key  属性           | (key, shouldAutoExpandParent=true) 1\. 待被选节点的 key， 如果为 null, 取消当前选中的节点 2\. 是否展开父节点                                            |
+| setCurrentNode                 | 设置节点为选中状态，使用此方法必须设置 node-key 属性                       | (node, shouldAutoExpandParent=true) 1\. 待被选中的节点 2\. 是否展开父节点                                                                   |
+| getNode                        | 根据 data 或者 key 拿到 Tree 组件中的 node                      | (data) 节点的 data 或 key                                                                                                         |
+| remove                         | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性                  | (data) 要删除的节点的 data 或者 node 对象                                                                                                |
+| append                         | 为 Tree 中的一个节点追加一个子节点                                  | (data, parentNode) 1\. 要追加的子节点的 data 2\. 父节点的 data, key 或 node                                                                |
+| insertBefore                   | 在 Tree 中给定节点前插入一个节点                                   | (data, refNode) 1\. 要增加的节点的 data 2\. 参考节点的 data, key 或 node                                                                   |
+| insertAfter                    | 在 Tree 中给定节点后插入一个节点                                   | (data, refNode) 1\. 要增加的节点的 data 2\. 参考节点的 data, key 或 node                                                                   |
+| focus                          | 使选择器的输入框获取焦点                                          | Function                                                                                                                      |
+| blur                           | 使选择器的输入框失去焦点，并隐藏下拉框                                   | Function                                                                                                                      |
+
+<!-- | treeRef 2.11.3                 | Tree 组件实例                                             | TreeInstance                                                                                                                  |
+| selectRef 2.11.3               | Select 组件实例                                           | SelectInstance                                                                                                                | -->
+
+## Owner
+
+Aric.Li@aldi.cn

package/docs/components/basic/tree.md

@@ -0,0 +1,163 @@
+# Tree 树形控件
+
+用清晰的层级结构展示信息，可展开或折叠。
+
+## 基础用法
+
+基础的树形结构展示。
+
+:::preview
+
+demo-preview=../../examples/tree/basic.vue
+
+:::
+
+## 可选择
+
+适用于需要选择层级时使用。
+
+本例还展示了动态加载节点数据的方法。
+
+:::preview
+
+demo-preview=../../examples/tree/checkable.vue
+
+:::
+
+## 默认展开以及默认选中
+
+树节点可以在初始化阶段被设置为展开和选中。
+
+分别通过 `default-expanded-keys` 和 `default-checked-keys` 设置默认展开和默认选中的节点。 需要注意的是，此时必须设置 `node-key`， 其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
+
+:::preview
+
+demo-preview=../../examples/tree/default-expanded.vue
+
+:::
+
+## 自定义节点内容
+
+节点的内容支持自定义，可以在节点区添加按钮或图标等内容。
+
+:::preview
+
+demo-preview=../../examples/tree/custom-node.vue
+
+:::
+
+## 树节点过滤
+
+树节点是可以被过滤的。
+
+调用 Tree 实例对象的 `filter` 方法来过滤树节点。 方法的参数就是过滤关键字。 需要注意的是，此时需要设置 `filter-node-method` 属性，其值为过滤函数。
+
+:::preview
+
+demo-preview=../../examples/tree/filter.vue
+
+:::
+
+## 可拖拽节点
+
+通过 `draggable` 属性可让节点变为可拖拽。
+
+:::preview
+
+demo-preview=../../examples/tree/draggable.vue
+
+:::
+
+## Tree API
+
+### Tree Attributes
+
+| 属性名                       | 说明                                                                                                                  | 类型                 | 默认值   |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------ | ----- |
+| data                      | 展示数据                                                                                                                | object             | —     |
+| empty-text                | 内容为空的时候展示的文本                                                                                                        | string             | —     |
+| node-key                  | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的                                                                                          | string             | —     |
+| props                     | 配置选项，具体看下表                                                                                                          | object             | —     |
+| render-after-expand       | 是否在第一次展开某个树节点后才渲染其子节点                                                                                               | boolean            | true  |
+| load                      | 加载子树数据的方法，仅当 lazy 属性为true 时生效                                                                                       | Function           | —     |
+| render-content            | 树节点的内容区的渲染 Function                                                                                                 | Function           | —     |
+| highlight-current         | 是否高亮当前选中节点，默认值是 false。                                                                                              | boolean            | false |
+| default-expand-all        | 是否默认展开所有节点                                                                                                          | boolean            | false |
+| expand-on-click-node      | 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。                                                      | boolean            | true  |
+| check-on-click-node       | 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。                                                                         | boolean            | false |
+| auto-expand-parent        | 展开子节点的时候是否自动展开父节点                                                                                                   | boolean            | true  |
+| default-expanded-keys     | 默认展开的节点的 key 的数组                                                                                                    | object             | —     |
+| show-checkbox             | 节点是否可被选择                                                                                                            | boolean            | false |
+| check-strictly            | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false                                                                              | boolean            | false |
+| default-checked-keys      | 默认勾选的节点的 key 的数组                                                                                                    | object             | —     |
+| current-node-key          | 当前选中的节点                                                                                                             | string / number    | —     |
+| filter-node-method        | 对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏                                                                                | Function           | —     |
+| accordion                 | 是否每次只打开一个同级树节点展开                                                                                                    | boolean            | false |
+| indent                    | 相邻级节点间的水平缩进，单位为像素                                                                                                   | number             | 18    |
+| icon                      | 自定义树节点图标组件                                                                                                          | string / Component | —     |
+| lazy                      | 是否懒加载子节点，需与 load 方法结合使用                                                                                             | boolean            | false |
+| draggable                 | 是否开启拖拽节点功能                                                                                                          | boolean            | false |
+| allow-drag                | 判断节点能否被拖拽 如果返回 false ，节点不能被拖动                                                                                       | Function           | —     |
+| allow-drop                | 拖拽时判定目标节点能否成为拖动目标位置。 如果返回 false ，拖动节点不能被拖放到目标节点。 type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function           | —     |
+
+<!-- | check-on-click-leaf       | 点击叶节点(最后一个子节点)时是否选中或取消选中节点。                                                                                         | boolean            | true  | -->
+
+### Props
+
+| Props    | 说明                              | 类型                | 默认值 |
+| -------- | ------------------------------- | ----------------- | --- |
+| label    | 指定节点标签为节点对象的某个属性值               | string / Function | —   |
+| children | 指定子树为节点对象的某个属性值                 | string            | —   |
+| disabled | 指定节点选择框是否禁用为节点对象的某个属性值          | string / Function | —   |
+| isLeaf   | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | string / Function | —   |
+| class    | 自定义节点类名                         | string / Function | —   |
+
+### 方法
+
+`Tree` 组件有以下方法，均返回当前选中的节点数组
+
+| 方法                  | 说明                                                    | 回调参数                                                                                                                                     |
+| ------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| filter              | 过滤所有树节点，过滤后的节点将被隐藏                                    | 接收一个参数并指定为 filter-node-method 属性的第一个参数                                                                                                   |
+| updateKeyChildren   | 为节点设置新数据，只有当设置 node-key 属性的时候才可用                      | (key, data) 接收两个参数: 1\. 节点的 key 2\. 新数据                                                                                                  |
+| getCheckedNodes     | 如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组     | (leafOnly, includeHalfChecked) 接收两个布尔类型参数: 1\. 默认值为 false. 若参数为 true, 它将返回当前选中节点的子节点 2\. 默认值为 false. 如果参数为 true, 返回值包含半选中节点数据            |
+| setCheckedNodes     | 设置目前选中的节点，使用此方法必须设置 node-key 属性                       | (nodes, leafOnly) 接收两个参数: 1\. 要选中的节点对象构成的数组 2\. 布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false.                                             |
+| getCheckedKeys      | 若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组   | (leafOnly) 接收一个布尔类型参数，默认为 false. 若参数为 true, 它将返回当前选中节点的子节点                                                                               |
+| setCheckedKeys      | 设置目前选中的节点，使用此方法必须设置 node-key 属性                       | (keys, leafOnly) 接收两个参数: 1\. 一个需要被选中的多节点 key 的数组 2\. 布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false.                                        |
+| setChecked          | 设置节点是否被选中, 使用此方法必须设置 node-key 属性                      | (key/data, checked, deep) 接收三个参数: 1\. 要选中的节点的 key 或者数据 2\. 一个布尔类型参数表明是否选中. 3\. 一个布尔类型的参数，用于指示是否为深层（deep）操作（注意：check-strictly 必须为 false）。 |
+| getHalfCheckedNodes | 如果节点可用被选中 (show-checkbox 为 true), 它将返回当前半选中的节点组成的数组   | :::                                                                                                                                      |
+| getHalfCheckedKeys  | 若节点可被选中(show-checkbox 为 true)，则返回目前半选中的节点的 key 所组成的数组 | :::                                                                                                                                      |
+| getCurrentKey       | 返回当前被选中节点的数据 (如果没有则返回 null)                           | :::                                                                                                                                      |
+| getCurrentNode      | 返回当前被选中节点的数据 (如果没有则返回 null)                           | :::                                                                                                                                      |
+| setCurrentKey       | 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key  属性           | (key, shouldAutoExpandParent=true) 1\. 待被选节点的 key， 如果为 null, 取消当前选中的节点 2\. 是否展开父节点                                                       |
+| setCurrentNode      | 设置节点为选中状态，使用此方法必须设置 node-key 属性                       | (node, shouldAutoExpandParent=true) 1\. 待被选中的节点 2\. 是否展开父节点                                                                              |
+| getNode             | 根据 data 或者 key 拿到 Tree 组件中的 node                      | (data) 节点的 data 或 key                                                                                                                    |
+| remove              | 删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性                  | (data) 要删除的节点的 data 或者 node 对象                                                                                                           |
+| append              | 为 Tree 中的一个节点追加一个子节点                                  | (data, parentNode) 1\. 要追加的子节点的 data 2\. 父节点的 data, key 或 node                                                                           |
+| insertBefore        | 在 Tree 中给定节点前插入一个节点                                   | (data, refNode) 1\. 要增加的节点的 data 2\. 参考节点的 data, key 或 node                                                                              |
+| insertAfter         | 在 Tree 中给定节点后插入一个节点                                   | (data, refNode) 1\. 要增加的节点的 data 2\. 参考节点的 data, key 或 node                                                                              |
+
+### 事件
+
+| 方法名              | 说明                               | 类型                                                                                                              |
+| ---------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| node-click       | 当节点被点击的时候触发                      | 四个参数：对应于节点点击的节点对象，TreeNode 的 node 属性, TreeNode和事件对象                                                             |
+| node-contextmenu | 当某一节点被鼠标右键点击时会触发该事件              | 共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。                                                     |
+| check-change     | 当复选框被点击的时候触发                     | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点                                                    |
+| check            | 点击节点复选框之后触发                      | 共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 |
+| current-change   | 当前选中节点变化时触发的事件                   | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象                                                                                 |
+| node-expand      | 节点被展开时触发的事件                      | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身                                                            |
+| node-collapse    | 节点被关闭时触发的事件                      | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身                                                            |
+| node-drag-start  | 节点开始拖拽时触发的事件                     | 共两个参数，依次为：被拖拽节点对应的 Node、event                                                                                   |
+| node-drag-enter  | 拖拽进入其他节点时触发的事件                   | 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event                                                                     |
+| node-drag-leave  | 拖拽离开某个节点时触发的事件                   | 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event                                                                     |
+| node-drag-over   | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event                                                                    |
+| node-drag-end    | 拖拽结束时（可能未成功）触发的事件                | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event                                 |
+| node-drop        | 拖拽成功完成时触发的事件                     | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event                                       |
+
+### 插槽
+
+| 插槽名     | 描述         | Type   |
+| ------- | ---------- | ------ |
+| default | 自定义树节点的内容。 | object |
+| empty   | 当数据为空时自定义的内容 | :::    |

package/docs/components/button.md

@@ -0,0 +1,113 @@
+# Button 按钮
+
+常用的操作按钮。
+
+## 基础用法
+
+### 基础按钮样式
+使用 type、plain 来定义按钮的样式。
+round属性和circle为element-plus保留用法。
+
+:::preview
+
+demo-preview=../examples/button/demo1.vue
+
+:::
+
+### 禁用按钮样式
+你可以使用 disabled 属性来定义按钮是否被禁用。
+
+使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。
+
+:::preview
+
+demo-preview=../examples/button/demo2.vue
+
+:::
+
+### 文字按钮
+没有边框和背景色的按钮。
+
+:::preview
+
+demo-preview=../examples/button/demo3.vue
+
+:::
+
+### 图标按钮​
+使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
+
+使用 icon 属性来为按钮添加图标。 您可以在我们的 Icon 组件中找到所需图标。 通过向右方添加`<i>`标签来添加图标， 你也可以使用自定义图标。
+
+:::preview
+
+demo-preview=../examples/button/demo4.vue
+
+:::
+
+### 加载状态按钮
+点击按钮来加载数据，并向用户反馈加载状态。
+
+通过设置 loading 属性为 true 来显示加载中状态。
+
+
+>TIP
+>
+>您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标
+>
+>ps: loading 插槽优先级高于loadingIcon属性
+:::preview
+
+demo-preview=../examples/button/demo5.vue
+
+:::
+
+### 按钮尺寸
+除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
+
+使用 size 属性额外配置尺寸，可使用 large。仍保留small用法。
+:::preview
+
+demo-preview=../examples/button/demo6.vue
+
+:::
+
+
+## Button API
+
+### Button Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| size | 尺寸 | `'large' \| 'default' \| 'small'` | `'default'` |
+| type | 按钮类型，在设置 color 时，后者优先 | `'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'` | `'default'` |
+| plain | 是否为朴素按钮 | `boolean` | `false` |
+| text | 是否为文字按钮 | `boolean` | `false` |
+| bg | 是否显示文字按钮背景颜色 | `boolean` | `false` |
+| link | 是否为链接按钮 | `boolean` | `false` |
+| round | 是否为圆角按钮 | `boolean` | `false` |
+| circle | 是否为圆形按钮 | `boolean` | `false` |
+| loading | 是否为加载中状态 | `boolean` | `false` |
+| loading-icon | 自定义加载中状态图标组件 | `string \| Component` | `Loading` |
+| disabled | 按钮是否为禁用状态 | `boolean` | `false` |
+| icon | 图标组件（支持字符串、组件对象，字符串时使用ad-icon渲染） | `string \| Component` | — |
+| autofocus | 原生 autofocus 属性 | `boolean` | `false` |
+| native-type | 原生 type 属性 | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| auto-insert-space | 两个中文字符之间自动插入空格(仅当文本长度为 2 且所有字符均为中文时才生效) | `boolean` | `false` |
+| color | 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 | `string` | — |
+| dark | dark 模式, 意味着自动设置 color 为 dark 模式的颜色 | `boolean` | `false` |
+| tag | 自定义元素标签 | `string \| Component` | `'button'` |
+
+### Button Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 按钮内容 |
+| icon | 自定义图标 |
+
+### Button Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| click | 点击按钮时触发 | `(event: MouseEvent) => void` |
+