From e8b70b78d783152c926d2b2bb634cc6b5daab6f4 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 12:01:32 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(tree):=20=E5=A2=9E=E5=8A=A0check?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/tree/src/components/tree-node.tsx   |  10 +-
 .../devui/tree/src/new-tree-types.ts          |  19 +++
 .../devui-vue/devui/tree/src/new-tree.tsx     |  33 ++---
 .../devui-vue/docs/components/tree/index.md   | 135 +-----------------
 4 files changed, 46 insertions(+), 151 deletions(-)
 create mode 100644 packages/devui-vue/devui/tree/src/new-tree-types.ts

diff --git a/packages/devui-vue/devui/tree/src/components/tree-node.tsx b/packages/devui-vue/devui/tree/src/components/tree-node.tsx
index dac5a072c3..7376de247d 100644
--- a/packages/devui-vue/devui/tree/src/components/tree-node.tsx
+++ b/packages/devui-vue/devui/tree/src/components/tree-node.tsx
@@ -12,9 +12,13 @@ export default defineComponent({
     data: {
       type: Object as PropType<IInnerTreeNode>,
     },
+    check: {
+      type: Boolean,
+      default: false
+    }
   },
   setup(props, { slots }) {
-    const { data } = toRefs(props);
+    const { data, check } = toRefs(props);
     const { selectNode, toggleCheckNode, toggleNode } = inject(USE_TREE_TOKEN);
 
     const {
@@ -38,13 +42,13 @@ export default defineComponent({
               : <DTreeNodeToggle data={data.value} />
             }
             <div class="devui-tree-node__content--value-wrapper" style={{ height: `${NODE_HEIGHT}px`}}>
-              <Checkbox
+              { check.value && <Checkbox
                 key={data.value?.id}
                 disabled={data.value?.disableCheck}
                 modelValue={data.value?.checked}
                 onUpdate:modelValue={() => { toggleCheckNode(data.value); }}
                 onClick={(event: MouseEvent) => { event.stopPropagation(); }}
-              />
+              /> }
               {
                 slots.default
                 ? renderSlot(useSlots(), 'default', { nodeData: data })
diff --git a/packages/devui-vue/devui/tree/src/new-tree-types.ts b/packages/devui-vue/devui/tree/src/new-tree-types.ts
new file mode 100644
index 0000000000..50656454f9
--- /dev/null
+++ b/packages/devui-vue/devui/tree/src/new-tree-types.ts
@@ -0,0 +1,19 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { ITreeNode } from './core/use-tree-types';
+
+export type ICheckStrategy = 'upward' | 'downward' | 'both' | 'none';
+
+export type ICheck = boolean | ICheckStrategy;
+
+export const treeProps = {
+  data: {
+    type: Object as PropType<ITreeNode[]>,
+    default: []
+  },
+  check: {
+    type: Object as PropType<ICheck>,
+    default: false
+  },
+};
+
+export type TreeProps = ExtractPropTypes<typeof treeProps>;
diff --git a/packages/devui-vue/devui/tree/src/new-tree.tsx b/packages/devui-vue/devui/tree/src/new-tree.tsx
index f1681d085f..d7da233445 100644
--- a/packages/devui-vue/devui/tree/src/new-tree.tsx
+++ b/packages/devui-vue/devui/tree/src/new-tree.tsx
@@ -9,31 +9,26 @@ import useSelect from './core/use-select';
 import { USE_TREE_TOKEN } from './const';
 import './tree.scss';
 import useOperate from './core/use-operate';
+import { TreeProps, treeProps } from './new-tree-types';
 
 export default defineComponent({
   name: 'DNewTree',
-  props: {
-    data: {
-      type: Object as PropType<ITreeNode[]>,
-      default: []
-    },
-    plugins: {
-      type: Object as PropType<IUseTree[]>,
-      default: []
-    },
-  },
-  setup(props, { slots }) {
-    const { data } = toRefs(props);
+  props: treeProps,
+  setup(props: TreeProps, { slots }) {
+    const { data, check } = toRefs(props);
+
+    const userPlugins = [
+      useSelect(),
+      useOperate(),
+    ];
+
+    if (check) {
+      userPlugins.push(useCheck());
+    }
 
     const treeFactory = useTree(
       data.value,
-      [
-        useSelect(),
-        useCheck({
-          checkStrategy: 'none',
-        }),
-        useOperate(),
-      ]
+      userPlugins
     );
 
     const {
diff --git a/packages/devui-vue/docs/components/tree/index.md b/packages/devui-vue/docs/components/tree/index.md
index 031dbab100..82433ef0c1 100644
--- a/packages/devui-vue/docs/components/tree/index.md
+++ b/packages/devui-vue/docs/components/tree/index.md
@@ -12,7 +12,7 @@
 
 ```vue
 <template>
-  <d-tree :data="data"></d-tree>
+  <d-new-tree :data="data"></d-new-tree>
 </template>
 <script>
 import { defineComponent, ref } from 'vue'
@@ -21,146 +21,23 @@ export default defineComponent({
   setup() {
     const data = ref([
       {
-        label: 'parent node 1 - expanded',
-        open: true,
-        disabled: true,
-        level: 1,
-        children: [
-          {
-            label: 'parent node 11 - folded',
-            level: 2,
-            children: [
-              {
-                label: 'leaf node 111',
-                level: 3,
-              },
-              {
-                label: 'leaf node 112',
-                level: 3,
-              },
-              {
-                label: 'leaf node 113',
-                level: 3,
-              },
-              {
-                label: 'leaf node 114',
-                level: 3,
-              }
-            ]
-          },
-          {
-            label: 'parent node 12 - folded',
-            disableToggle: true,
-            level: 2,
-            children: [
-              {
-                label: 'leaf node 121',
-                level: 3,
-              },
-              {
-                label: 'leaf node 122',
-                level: 3,
-              },
-              {
-                label: 'leaf node 123',
-                level: 3,
-              },
-              {
-                label: 'leaf node 124',
-                level: 3,
-              }
-            ]
-          },
-          {
-            id: 'dynamic 12',
-            label: 'parent node 13 - without children - dynamic loading',
-            isParent: true,
-            level: 2,
-          }
-        ]
-      },
-      {
-        label: 'parent node 2 - folded',
-        level: 1,
+        label: 'Parent node 1',
         children: [
           {
-            label: 'parent node 21 - expanded',
-            open: true,
-            level: 2,
-            children: [
-              {
-                label: 'leaf node 211',
-                level: 3,
-              },
-              {
-                label: 'leaf node 212',
-                level: 3,
-              },
-              {
-                label: 'leaf node 213',
-                level: 3,
-              },
-              {
-                label: 'leaf node 214',
-                level: 3,
-              }
-            ]
-          },
-          {
-            label: 'parent node 22 - folded',
-            level: 2,
+            label: 'Parent node 1-1',
             children: [
               {
-                label: 'leaf node 221',
-                level: 3,
-              },
-              {
-                label: 'leaf node 222',
-                level: 3,
-              },
-              {
-                label: 'leaf node 223',
-                level: 3,
-              },
-              {
-                label: 'leaf node 224',
-                level: 3,
+                label: 'Leaf node 1-1-1',
               }
             ]
           },
           {
-            label: 'parent node 23 - folded',
-            level: 2,
-            children: [
-              {
-                label: 'leaf node 231',
-                level: 3,
-              },
-              {
-                label: 'leaf node 232',
-                level: 3,
-              },
-              {
-                label: 'leaf node 233',
-                level: 3,
-              },
-              {
-                label: 'leaf node 234',
-                level: 3,
-              }
-            ]
+            label: 'Leaf node 1-2',
           }
         ]
       },
       {
-        id: 'dynamicNode',
-        label: 'parent node 3 - without children - dynamic loading',
-        isParent: true,
-        level: 1,
-        data: {
-          id: 'newChildNode',
-          name: 'new child node'
-        }
+        label: 'Leaf node 2',
       }
     ])
 

From 85bce92435da6e2afd34ff0b4faedec64b7f3cad Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 14:25:04 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat(tree):=20=E5=A2=9E=E5=8A=A0toggleSelec?=
 =?UTF-8?q?tNode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/tree/src/components/tree-node.tsx   |  4 +-
 .../devui/tree/src/core/use-select.ts         | 16 +++-
 .../devui/tree/src/core/use-tree-types.ts     |  2 +
 .../devui-vue/devui/tree/src/new-tree.tsx     |  2 +-
 .../devui-vue/docs/components/tree/index.md   | 93 ++-----------------
 5 files changed, 29 insertions(+), 88 deletions(-)

diff --git a/packages/devui-vue/devui/tree/src/components/tree-node.tsx b/packages/devui-vue/devui/tree/src/components/tree-node.tsx
index 7376de247d..39e37db704 100644
--- a/packages/devui-vue/devui/tree/src/components/tree-node.tsx
+++ b/packages/devui-vue/devui/tree/src/components/tree-node.tsx
@@ -19,7 +19,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const { data, check } = toRefs(props);
-    const { selectNode, toggleCheckNode, toggleNode } = inject(USE_TREE_TOKEN);
+    const { toggleSelectNode, toggleCheckNode, toggleNode } = inject(USE_TREE_TOKEN);
 
     const {
       nodeClass,
@@ -34,7 +34,7 @@ export default defineComponent({
       return (
         <div class={nodeClass.value} style={nodeStyle.value}>
           <span class={nodeVLineClass.value} style={nodeVLineStyle.value}></span>
-          <div class={nodeContentClass.value} onClick={() => { selectNode(data.value); }}>
+          <div class={nodeContentClass.value} onClick={() => { toggleSelectNode(data.value); }}>
             <span class={nodeHLineClass.value}></span>
             {
               slots.icon
diff --git a/packages/devui-vue/devui/tree/src/core/use-select.ts b/packages/devui-vue/devui/tree/src/core/use-select.ts
index fbb02b9b4e..c33da08725 100644
--- a/packages/devui-vue/devui/tree/src/core/use-select.ts
+++ b/packages/devui-vue/devui/tree/src/core/use-select.ts
@@ -10,8 +10,6 @@ export default function(options?) {
     const selectNode = (node: IInnerTreeNode): void => {
       if (node.disableSelect) { return; }
 
-      if (node.id === prevActiveNode?.id) { return; }
-
       if (prevActiveNode) {
         const prevActiveNodeIndex = data.value.findIndex(item => item.id === prevActiveNode.id)
         setNodeValue(data.value[prevActiveNodeIndex], 'selected', false);
@@ -21,8 +19,22 @@ export default function(options?) {
       prevActiveNode = node;
     }
 
+    const deselectNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'selected', false);
+    }
+
+    const toggleSelectNode = (node: IInnerTreeNode): void => {
+      if (node.selected) {
+        deselectNode(node);
+      } else {
+        selectNode(node);
+      }
+    }
+
     return {
       selectNode,
+      deselectNode,
+      toggleSelectNode,
     }
   };
 }
diff --git a/packages/devui-vue/devui/tree/src/core/use-tree-types.ts b/packages/devui-vue/devui/tree/src/core/use-tree-types.ts
index 8bfc318aba..a67383260e 100644
--- a/packages/devui-vue/devui/tree/src/core/use-tree-types.ts
+++ b/packages/devui-vue/devui/tree/src/core/use-tree-types.ts
@@ -58,6 +58,8 @@ export interface IUseOperate {
 
 export interface IUseSelect {
   selectNode: (node: IInnerTreeNode) => void;
+  deselectNode: (node: IInnerTreeNode) => void;
+  toggleSelectNode: (node: IInnerTreeNode) => void;
 }
 
 export interface IUseToggle {
diff --git a/packages/devui-vue/devui/tree/src/new-tree.tsx b/packages/devui-vue/devui/tree/src/new-tree.tsx
index d7da233445..9bb49b717f 100644
--- a/packages/devui-vue/devui/tree/src/new-tree.tsx
+++ b/packages/devui-vue/devui/tree/src/new-tree.tsx
@@ -51,7 +51,7 @@ export default defineComponent({
               ? renderSlot(useSlots(), 'default', {
                   treeFactory: treeFactory, nodeData: treeNode
                 })
-              : <DTreeNode data={treeNode}>
+              : <DTreeNode data={treeNode} check={check.value}>
                   {{
                     default: () => slots.content
                       ? renderSlot(useSlots(), 'content', { nodeData: treeNode })
diff --git a/packages/devui-vue/docs/components/tree/index.md b/packages/devui-vue/docs/components/tree/index.md
index 82433ef0c1..b788180f3c 100644
--- a/packages/devui-vue/docs/components/tree/index.md
+++ b/packages/devui-vue/docs/components/tree/index.md
@@ -8,7 +8,7 @@
 
 ### 基本用法
 
-:::demo
+:::demo 本例主要展示嵌套树形结构的呈现、连接线、节点展开收起、点击选择等功能。
 
 ```vue
 <template>
@@ -39,7 +39,7 @@ export default defineComponent({
       {
         label: 'Leaf node 2',
       }
-    ])
+    ]);
 
     return {
       data
@@ -51,13 +51,13 @@ export default defineComponent({
 
 :::
 
-### 合并节点
+### 可勾选
 
 :::demo 当节点下只有一个子节点时，合并该节点。
 
 ```vue
 <template>
-  <d-tree :data="data"></d-tree>
+  <d-new-tree :data="data" check></d-new-tree>
 </template>
 
 <script>
@@ -68,96 +68,23 @@ export default defineComponent({
 
     const data = ref([
       {
-        label: 'parent node 1',
-        level: 1,
+        label: 'Parent node 1',
         children: [
           {
-            label: 'parent node 11',
-            open: true,
-            level: 2,
+            label: 'Parent node 1-1',
             children: [
               {
-                label: 'parent node 111',
-                level: 3,
-                children: [
-                  {
-                    label: 'parent node 1111',
-                    level: 4,
-                    children: [
-                      {
-                        label: 'leaf node 11111',
-                        level: 5,
-                      }
-                    ]
-                  }
-                ]
+                label: 'Leaf node 1-1-1',
               }
             ]
           },
-        ]
-      },
-      {
-        label: 'parent node 2',
-        level: 1,
-        children: [
           {
-            label: 'parent node 21',
-            level: 2,
-            open: true,
-            children: [
-              {
-                label: 'leaf node 211',
-                level: 3,
-              },
-              {
-                label: 'leaf node 212',
-                level: 3,
-              },
-              {
-                label: 'leaf node 213',
-                level: 3,
-              },
-              {
-                label: 'leaf node 214',
-                level: 3,
-              },
-              {
-                label: 'leaf node 215',
-                level: 3,
-              },
-            ]
-          },
+            label: 'Leaf node 1-2',
+          }
         ]
       },
       {
-        label: 'parent node 3',
-        level: 1,
-        children: [
-          {
-            label: 'leaf node 31',
-            level: 2,
-            children: [
-              {
-                label: 'leaf node 311',
-                level: 3,
-                children: [
-                  {
-                    label: 'leaf node 3111',
-                    level: 4,
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            label: 'leaf node 32',
-            level: 2,
-          },
-          {
-            label: 'leaf node 33',
-            level: 2,
-          }
-        ]
+        label: 'Leaf node 2',
       }
     ]);
     

From 54b63f61eb6515c2cb06de0a8f2d2ad775f1d261 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 15:55:18 +0800
Subject: [PATCH 3/4] =?UTF-8?q?docs(tree):=20=E5=A2=9E=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87=E7=9A=84demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/tree/src/new-tree-types.ts          |   2 +-
 .../devui-vue/docs/components/tree/index.md   | 797 ++----------------
 2 files changed, 53 insertions(+), 746 deletions(-)

diff --git a/packages/devui-vue/devui/tree/src/new-tree-types.ts b/packages/devui-vue/devui/tree/src/new-tree-types.ts
index 50656454f9..b623635676 100644
--- a/packages/devui-vue/devui/tree/src/new-tree-types.ts
+++ b/packages/devui-vue/devui/tree/src/new-tree-types.ts
@@ -11,7 +11,7 @@ export const treeProps = {
     default: []
   },
   check: {
-    type: Object as PropType<ICheck>,
+    type: [Boolean, String] as PropType<ICheck>,
     default: false
   },
 };
diff --git a/packages/devui-vue/docs/components/tree/index.md b/packages/devui-vue/docs/components/tree/index.md
index b788180f3c..1f977f5ce0 100644
--- a/packages/devui-vue/docs/components/tree/index.md
+++ b/packages/devui-vue/docs/components/tree/index.md
@@ -4,11 +4,11 @@
 
 ### 何时使用
 
-文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
+文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开/收起选择等交互功能。
 
 ### 基本用法
 
-:::demo 本例主要展示嵌套树形结构的呈现、连接线、节点展开收起、点击选择等功能。
+:::demo 展示嵌套树形结构的呈现、连接线、展开/收起、点击选择等功能。
 
 ```vue
 <template>
@@ -26,19 +26,13 @@ export default defineComponent({
           {
             label: 'Parent node 1-1',
             children: [
-              {
-                label: 'Leaf node 1-1-1',
-              }
+              { label: 'Leaf node 1-1-1' }
             ]
           },
-          {
-            label: 'Leaf node 1-2',
-          }
+          { label: 'Leaf node 1-2' }
         ]
       },
-      {
-        label: 'Leaf node 2',
-      }
+      { label: 'Leaf node 2' }
     ]);
 
     return {
@@ -53,7 +47,7 @@ export default defineComponent({
 
 ### 可勾选
 
-:::demo 当节点下只有一个子节点时，合并该节点。
+:::demo 通过`check`开启勾选功能。
 
 ```vue
 <template>
@@ -65,7 +59,6 @@ import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   setup() {
-
     const data = ref([
       {
         label: 'Parent node 1',
@@ -73,19 +66,13 @@ export default defineComponent({
           {
             label: 'Parent node 1-1',
             children: [
-              {
-                label: 'Leaf node 1-1-1',
-              }
+              { label: 'Leaf node 1-1-1' }
             ]
           },
-          {
-            label: 'Leaf node 1-2',
-          }
+          { label: 'Leaf node 1-2' }
         ]
       },
-      {
-        label: 'Leaf node 2',
-      }
+      { label: 'Leaf node 2' }
     ]);
     
     return {
@@ -97,30 +84,13 @@ export default defineComponent({
 ```
 :::
 
-### 自定义图标
+### 默认状态
 
-:::demo 自定义操作按钮图标、节点图标。
+:::demo 通过`expanded`/`selected`/`checked`分别设置默认展开/收起、点击选择、勾选状态。
 
 ```vue
 <template>
-  <div style="width: 100%">
-    <div class="tree-title">
-      <h4>Node</h4>
-      <h4>Status</h4>
-    </div>
-    <d-tree :data="data">
-      <template #default="{ node }">
-        <span class="my-icon-next"></span>
-        <span :class="[node?.data?.type && 'my-icon', node?.data?.type]" ></span>
-        <span class="op-title">{{ node.label }}</span>
-        <span class="op-status"></span>
-        <span class="op-icons icon icon-add"></span>
-        <span class="op-icons icon icon-edit"></span>
-        <span class="op-icons icon icon-close"></span>
-        <span class="op-right">{{ node.status }}</span>
-      </template>
-    </d-tree>
-  </div>
+  <d-new-tree :data="data" check></d-new-tree>
 </template>
 
 <script>
@@ -128,88 +98,27 @@ import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   setup() {
-
     const data = ref([
       {
-        label: "parent node 1",
-        data: { type: "mix" },
-        open: true,
-        status: "status1",
+        label: 'Parent node 1',
+        expanded: true,
         children: [
           {
-            label: "leaf node 1-112121212",
-            data: { type: "mix" },
-            open: false,
-            status: "status1",
-            children: [
-              {
-                label: "leaf node 1-1-1",
-                data: { type: "ppt" },
-                status: "status2",
-              },
-              {
-                label: "leaf node 1-1-2",
-                data: { type: "xls" },
-                status: "status2",
-              },
-            ],
-          },
-          {
-            label: "leaf node 1-2",
-            data: { type: "mix" },
-            open: false,
-            status: "status1",
+            label: 'Parent node 1-1',
             children: [
-              {
-                label: "leaf node 1-2-1",
-                data: { type: "ppt" },
-                status: "status2",
-              },
-              {
-                label: "leaf node 1-2-2",
-                data: { type: "doc" },
-                status: "status2",
-              },
-            ],
-          },
-        ],
-      },
-      {
-        label: "parent node 2",
-        data: { type: "ppt" },
-        open: false,
-        status: "status1",
-        children: [
-          {
-            label: "leaf node 2-1",
-            data: { type: "ppt" },
-            status: "status1",
+              { label: 'Leaf node 1-1-1' }
+            ]
           },
           {
-            label: "leaf node 2-2",
-            data: { type: "ppt" },
-            status: "status1",
-          },
-        ],
+            label: 'Leaf node 1-2',
+            checked: true
+          }
+        ]
       },
       {
-        label: "parent node 3",
-        data: { type: "xls" },
-        open: false,
-        status: "status1",
-        children: [
-          {
-            label: "leaf node 3-1",
-            data: { type: "xls" },
-            status: "status1",
-          },
-          {
-            label: "leaf node 3-2",
-            data: { type: "xls" },
-            status: "status1",
-          },
-        ],
-      },
+        label: 'Leaf node 2',
+        selected: true
+      }
     ]);
     
     return {
@@ -218,536 +127,16 @@ export default defineComponent({
   }
 })
 </script>
-<style>
-
-.my-icon::before {
-  width: 16px;
-  height: 16px;
-  font-style: italic;
-  font-size: 12px;
-  line-height: 14px;
-  display: inline-block;
-  text-align: center;
-  color: #fff;
-  border-radius: 2px;
-}
-
-.my-icon.doc::before {
-  content: 'W';
-  background-color: #295396;
-  border: 1px #224488 solid;
-}
-
-.my-icon.pdf::before {
-  content: 'A';
-  background-color: #da0a0a;
-  border: 1px #dd0000 solid;
-}
-
-.my-icon.xls::before {
-  content: 'X';
-  background-color: #207044;
-  border: 1px #18683c solid;
-}
-
-.my-icon.ppt::before {
-  content: 'P';
-  background-color: #d14424;
-  border: 1px #dd4422 solid;
-}
-
-.my-icon.mix::before {
-  content: '?';
-  font-style: normal;
-  background-color: #aaaaaa;
-  border: 1px #999999 solid;
-}
-.my-icon-next {
-  margin-left: 8px;
-}
-
-.op-title {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 10px;
-}
-
-.op-icons {
-  display: inline-block;
-  margin-left: 8px;
-  cursor: pointer;
-  color: #575d6c;
-  font-size: 16px;
-}
-
-.op-status {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: #50d4ab;
-}
-
-.op-right {
-  position: absolute;
-  right: 25px;
-}
-
-.status-position {
-  position: absolute;
-  right: 8px;
-}
-
-.tree-title {
-  display: flex;
-  justify-content: space-between;
-  padding-left: 24px;
-  padding-right: 16px;
-}
-
-.op-icons:focus {
-  outline: none;
-}
-
-.devui-tree-node__edit {
-  margin: 0 8px;
-}
-
-
-</style>
-```
-:::
-
-### 可勾选树
-
-:::demo 可以进行勾选的树。
-
-```vue
-<template>
-  <d-tree :data="data" :checkable="true" ></d-tree>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const data = ref([
-      {
-        label: "parent node 1",
-      },
-      {
-        label: "parent node 2",
-        open: true,
-        children: [
-          {
-            label: "leaf node 2-1",
-            children: [
-              {
-                label: "leaf node 2-1-1",
-              },
-              {
-                label: "leaf node 2-1-2",
-              },
-            ],
-          },
-          {
-            label: "leaf node 2-2",
-            open: true,
-            children: [
-              {
-                label: "leaf node 2-2-1",
-                disabled: true,
-                isChecked: true,
-              },
-              {
-                label: "leaf node 2-2-2",
-                disableSelect: true,
-              },
-            ],
-          },
-        ],
-      },
-      {
-        label: "parent node 3",
-        disableToggle: true,
-        children: [
-          {
-            label: "leaf node 3-1",
-          },
-          {
-            label: "leaf node 3-2",
-          },
-        ],
-      },
-      {
-        label: "parent node 4",
-        children: [
-          {
-            label: "leaf node 4-1",
-          },
-          {
-            label: "leaf node 4-2",
-          },
-        ],
-      },
-      {
-        label: "parent node 5",
-        children: [
-          {
-            label: "leaf node 5-1",
-          },
-          {
-            label: "leaf node 5-2",
-          },
-        ],
-      },
-    ]);
-    
-    return {
-      data,
-    }
-  }
-})
-</script>
-```
-:::
-
-### 控制父子check关系
-
-:::demo 通过 checkableRelation 控制check时父子节点的表现。
-
-```vue
-<template>
-  <h6><p>checkableRelation = "both"</p></h6>
-  <d-tree :data="data" :checkable="true" checkableRelation="both" ></d-tree>
-  <h6><p>checkableRelation = "upward"</p></h6>
-  <d-tree :data="data" :checkable="true" checkableRelation="upward" ></d-tree>
-  <h6><p>checkableRelation = "downward"</p></h6>
-  <d-tree :data="data" :checkable="true" checkableRelation="downward" ></d-tree>
-  <h6><p>checkableRelation = "none"</p></h6>
-  <d-tree :data="data" :checkable="true" checkableRelation="none" ></d-tree>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const data = ref([
-      {
-        label: 'parent node 1 - expanded',
-        open: true,
-        children: [
-          {
-            label: 'parent node 11 - folded',
-            children: [
-              {
-                label: 'leaf node 111',
-              },
-              {
-                label: 'leaf node 112',
-              },
-              {
-                label: 'leaf node 113',
-              },
-              {
-                label: 'leaf node 114',
-              },
-            ],
-          },
-          {
-            label: 'parent node 12 - folded',
-            children: [
-              {
-                label: 'leaf node 121',
-              },
-              {
-                label: 'leaf node 122',
-              },
-              {
-                label: 'leaf node 123',
-              },
-              {
-                label: 'leaf node 124',
-              },
-            ],
-          },
-          {
-            label: 'parent node 13 - without children',
-            isparent: true,
-          },
-        ],
-      },
-      {
-        label: 'parent node 2 - folded',
-        children: [
-          {
-            label: 'parent node 21 - expanded',
-            open: true,
-            children: [
-              {
-                label: 'leaf node 211',
-              },
-              {
-                label: 'leaf node 212',
-              },
-              {
-                label: 'leaf node 213',
-              },
-              {
-                label: 'leaf node 214',
-              },
-            ],
-          },
-          {
-            label: 'parent node 22 - folded',
-            children: [
-              {
-                label: 'leaf node 221',
-              },
-              {
-                label: 'leaf node 222',
-              },
-              {
-                label: 'leaf node 223',
-              },
-              {
-                label: 'leaf node 224',
-              },
-            ],
-          },
-          {
-            label: 'parent node 23 - folded',
-            children: [
-              {
-                label: 'leaf node 231',
-              },
-              {
-                label: 'leaf node 232',
-              },
-              {
-                label: 'leaf node 233',
-              },
-              {
-                label: 'leaf node 234',
-              },
-            ],
-          },
-        ],
-      },
-    ]);
-    
-    return {
-      data,
-    }
-  }
-})
-</script>
 ```
 :::
 
-### 添加子节点，编辑、删除节点
+### 禁用状态
 
-:::demo 通过 checkableRelation 控制check时父子节点的表现。
+:::demo 通过`disableToggle`/`disableSelect`/`disableCheck`分别禁用展开/收起、点击选择、勾选状态。
 
 ```vue
 <template>
-  <d-tree :data="data" ></d-tree>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const data = ref([
-      {
-        label: 'parent node 1 - expanded',
-        open: true,
-        addable: 'true',
-        editable: 'true',
-        deletable: 'true',
-        children: [
-          {
-            label: 'parent node 11 - folded',
-            addable: 'true',
-            editable: 'true',
-            deletable: 'true',
-            children: [
-              {
-                label: 'leaf node 111',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 112',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 113',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 114',
-                editable: 'true',
-                deletable: 'true',
-              },
-            ],
-          },
-          {
-            label: 'parent node 12 - folded',
-            addable: 'true',
-            editable: 'true',
-            deletable: 'true',
-            children: [
-              {
-                label: 'leaf node 121',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 122',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 123',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 124',
-                editable: 'true',
-                deletable: 'true',
-              },
-            ],
-          },
-          {
-            label: 'parent node 13 - without children',
-            isparent: true,
-            addable: 'true',
-            editable: 'true',
-            deletable: 'true',
-          },
-        ],
-      },
-      {
-        label: 'parent node 2 - folded',
-        addable: 'true',
-        editable: 'true',
-        deletable: 'true',
-        children: [
-          {
-            label: 'parent node 21 - expanded',
-            open: true,
-            addable: 'true',
-            editable: 'true',
-            deletable: 'true',
-            children: [
-              {
-                label: 'leaf node 211',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 212',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 213',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 214',
-                editable: 'true',
-                deletable: 'true',
-              },
-            ],
-          },
-          {
-            label: 'parent node 22 - folded',
-            addable: 'true',
-            editable: 'true',
-            deletable: 'true',
-            children: [
-              {
-                label: 'leaf node 221',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 222',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 223',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 224',
-                editable: 'true',
-                deletable: 'true',
-              },
-            ],
-          },
-          {
-            label: 'parent node 23 - folded',
-            addable: 'true',
-            editable: 'true',
-            deletable: 'true',
-            children: [
-              {
-                label: 'leaf node 231',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 232',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 233',
-                editable: 'true',
-                deletable: 'true',
-              },
-              {
-                label: 'leaf node 234',
-                editable: 'true',
-                deletable: 'true',
-              },
-            ],
-          },
-        ],
-      },
-    ]);
-    
-    return {
-      data,
-    }
-  }
-})
-</script>
-```
-:::
-
-
-### 可拖拽树
-
-:::demo 通过OperableTree的 draggable 属性配置节点的拖拽功能，并支持外部元素拖拽入树。
-
-```vue
-<template>
-  <h6><p>Default</p></h6>
-  <d-tree :data="data" :draggable="true" :dropType="{ dropInner: true }"></d-tree>
-  <h6><p>Sortable</p></h6>
-  <d-tree :data="data" :draggable="true" :dropType="{ dropPrev: true, dropNext: true, dropInner: true }"></d-tree>
+  <d-new-tree :data="data" check></d-new-tree>
 </template>
 
 <script>
@@ -757,72 +146,27 @@ export default defineComponent({
   setup() {
     const data = ref([
       {
-        label: 'parent node 1'
-      },
-      {
-        label: 'parent node 2',
-        open: true,
+        label: 'Parent node 1',
+        expanded: true,
         children: [
           {
-            label: 'leaf node 2-1',
-            open: true,
-            children: [
-              {
-                label: 'leaf node 2-1-1'
-              },
-              {
-                label: 'leaf node 2-1-2'
-              }
-            ]
-          },
-          {
-            label: 'leaf node 2-2',
+            label: 'Parent node 1-1',
+            disableToggle: true,
+            disableSelect: true,
+            disableCheck: true,
             children: [
-              {
-                label: 'leaf node 2-2-1'
-              },
-              {
-                label: 'leaf node 2-2-2'
-              }
+              { label: 'Leaf node 1-1-1' }
             ]
-          }
-        ]
-      },
-      {
-        label: 'parent node 3',
-        open: true,
-        children: [
-          {
-            label: 'leaf node 3-1'
           },
           {
-            label: 'leaf node 3-2'
-          }
-        ]
-      },
-      {
-        label: 'parent node 4',
-        open: true,
-        children: [
-          {
-            label: 'leaf node 4-1'
-          },
-          {
-            label: 'leaf node 4-2'
+            label: 'Leaf node 1-2',
+            disableCheck: true
           }
         ]
       },
       {
-        label: 'parent node 5',
-        open: true,
-        children: [
-          {
-            label: 'leaf node 5-1'
-          },
-          {
-            label: 'leaf node 5-2'
-          }
-        ]
+        label: 'Leaf node 2',
+        disableSelect: true
       }
     ]);
     
@@ -835,15 +179,21 @@ export default defineComponent({
 ```
 :::
 
-### useTree
+### 自定义图标
 
-:::demo
+:::demo 通过`content`插槽可以自定义节点内容，比如在节点内容前面增加一个图标；通过`icon`插槽可以自定义展开/收起的图标。
 
 ```vue
 <template>
   <d-new-tree :data="data">
     <template #content="{nodeData}">
-      <svg t="1649231851892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2194" width="16" height="16"><path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z" p-id="2195"></path></svg>
+      <svg style="margin-right: 8px" viewBox="0 0 16 16" width="16" height="16"><path :d="`${
+        nodeData.isLeaf
+        ? 'M13,6 L9,6 L9,5 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z'
+        : nodeData.expanded
+          ? 'M16,6 L14,14 L2,14 L0,6 L16,6 Z M14.7192236,7 L1.28077641,7 L2.78077641,13 L13.2192236,13 L14.7192236,7 Z M6,1 L8,3 L15,3 L15,5 L14,5 L14,4 L7.58578644,4 L5.58578644,2 L2,2 L2,5 L1,5 L1,1 L6,1 Z'
+          : 'M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z'
+      }`" stroke-width="1" fill="#8a8e99"></path></svg>
       {{nodeData.label}}
     </template>
     <template #icon="{nodeData, toggleNode}">
@@ -853,8 +203,7 @@ export default defineComponent({
           toggleNode(nodeData);
         }"
       >
-        <svg v-if="!nodeData.expanded" t="1649233280637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4033" width="12" height="12"><path d="M204.58705 951.162088 204.58705 72.836889 819.41295 511.998977Z" p-id="4034" fill="#c0c4cc"></path></svg>
-        <svg v-else t="1649232304515" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3732" width="12" height="12"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" p-id="3733" fill="#c0c4cc"></path></svg>
+        <svg :style="{ transform: nodeData.expanded ? 'rotate(90deg)': '', marginLeft: '-2.5px', marginRight: '14.5px', cursor: 'pointer' }" viewBox="0 0 1024 1024" width="12" height="12"><path d="M204.58705 951.162088 204.58705 72.836889 819.41295 511.998977Z" fill="#8a8e99"></path></svg>
       </span>
     </template>
   </d-new-tree>
@@ -867,59 +216,17 @@ export default defineComponent({
     const data = ref([
       {
         label: 'Parent node 1',
-        id: 'node-1',
         children: [
           {
             label: 'Parent node 1-1',
-            id: 'node-1-1',
-            disableCheck: true,
-            disableSelect: true,
-            disableToggle: true,
-            children: [
-              {
-                label: 'Leaf node 1-1-1',
-                id: 'node-1-1-1',
-              }
-            ]
-          },
-          {
-            label: 'Leaf node 1-2',
-            id: 'node-1-2',
             children: [
-              {
-                label: 'Leaf node  1-2-1',
-                id: 'node-1-2-1',
-              },
-              {
-                label: 'Parent node 1-2-2',
-                id: 'node-1-2-2',
-                children: [
-                  {
-                    label: 'Leaf node 1-2-2-1',
-                    id: 'node-1-2-2-1'
-                  }
-                ]
-              },
-              {
-                label: 'Parent node 1-2-3',
-                id: 'node-1-2-3',
-              }
+              { label: 'Leaf node 1-1-1' }
             ]
           },
-          {
-            label: 'Lead node 1-3',
-            id: 'node-1-3',
-          },
-        ],
-      },
-      {
-        label: 'Leaf node 2',
-        id: 'node-2',
+          { label: 'Leaf node 1-2' }
+        ]
       },
-      {
-        label: 'Leaf node 3',
-        id: 'node-3',
-      }
+      { label: 'Leaf node 2' }
     ]);
 
     return {

From 0f8439b05a7aa7b3eeaf256dfc9c681de892d166 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Fri, 8 Apr 2022 16:22:56 +0800
Subject: [PATCH 4/4] =?UTF-8?q?docs(tree):=20=E5=A2=9E=E5=8A=A0api?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/tree/src/core/use-check.ts          |  1 -
 .../devui-vue/devui/tree/src/core/use-core.ts |  2 -
 .../devui/tree/src/core/use-operate.ts        |  1 -
 .../devui-vue/docs/components/tree/index.md   | 54 ++++++++++++++++++-
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/packages/devui-vue/devui/tree/src/core/use-check.ts b/packages/devui-vue/devui/tree/src/core/use-check.ts
index 69bfec4a4e..d985cff9ac 100644
--- a/packages/devui-vue/devui/tree/src/core/use-check.ts
+++ b/packages/devui-vue/devui/tree/src/core/use-check.ts
@@ -5,7 +5,6 @@ export default function(options?: {
   checkStrategy: CheckStrategy
 }) {
   return function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
-    console.log('useCheck options:', options);
     const { setNodeValue, getNode } = core;
 
     const checkNode = (node: IInnerTreeNode): void => {
diff --git a/packages/devui-vue/devui/tree/src/core/use-core.ts b/packages/devui-vue/devui/tree/src/core/use-core.ts
index 63585a18b0..0823759249 100644
--- a/packages/devui-vue/devui/tree/src/core/use-core.ts
+++ b/packages/devui-vue/devui/tree/src/core/use-core.ts
@@ -4,8 +4,6 @@ import { generateInnerTree } from './utils';
 
 export default function(options?){
   return function useCore(data: Ref<IInnerTreeNode[]>): IUseCore {
-    console.log('useCore:', data, data.value);
-
     const getLevel = (node: ITreeNode): number => {
       return data.value.find((item) => item.id === node.id).level;
     }
diff --git a/packages/devui-vue/devui/tree/src/core/use-operate.ts b/packages/devui-vue/devui/tree/src/core/use-operate.ts
index 94d9d06c37..daf4388edb 100644
--- a/packages/devui-vue/devui/tree/src/core/use-operate.ts
+++ b/packages/devui-vue/devui/tree/src/core/use-operate.ts
@@ -3,7 +3,6 @@ import { IInnerTreeNode, ITreeNode, IUseCore } from './use-tree-types';
 
 export default function(options?) {
   return function useOperate(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
-    console.log('useOperate:', data, data.value, options);
 
     const { setNodeValue, getChildren, getIndex, getLevel } = core;
     
diff --git a/packages/devui-vue/docs/components/tree/index.md b/packages/devui-vue/docs/components/tree/index.md
index 1f977f5ce0..27096804dc 100644
--- a/packages/devui-vue/docs/components/tree/index.md
+++ b/packages/devui-vue/docs/components/tree/index.md
@@ -1,10 +1,10 @@
 # Tree 树
 
-一种表现嵌套结构的组件。
+一种呈现嵌套结构的组件。
 
 ### 何时使用
 
-文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开/收起选择等交互功能。
+文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树组件可以完整展现其中的层级关系，并具有展开/收起、选择等交互功能。
 
 ### 基本用法
 
@@ -238,3 +238,53 @@ export default defineComponent({
 ```
 
 :::
+
+### d-tree 参数
+
+| 参数名 | 类型                        | 默认值 | 说明                   | 跳转 Demo             |
+| :----- | :-------------------------- | :----- | :--------------------- | :-------------------- |
+| data   | [ITreeNode\[\]](#itreenode) | []     | 可选，树形结构数据     | [基本用法](#基本用法) |
+| check  | [ICheck](#icheck)           | false  | 可选，是否启用勾选功能 | [可勾选](#可勾选)     |
+
+### d-tree 插槽
+
+| 插槽名  | 说明                |
+| :------ | :------------------ |
+| default | 自定义节点          |
+| content | 自定义节点内容      |
+| icon    | 自定义展开/收起按钮 |
+
+### d-tree-node 参数
+
+| 参数名 | 类型                    | 默认值 | 说明                   |
+| :----- | :---------------------- | :----- | :--------------------- |
+| data   | [ITreeNode](#itreenode) | []     | 可选，节点数据         |
+| check  | [ICheck](#icheck)       | false  | 可选，是否启用勾选功能 |
+
+### 类型
+
+<br>
+
+#### ITreeNode
+
+```ts
+interface ITreeNode {
+  label: string;
+  id?: string;
+  children?: ITreeNode[];
+
+  selected?: boolean;
+  checked?: boolean;
+  expanded?: boolean;
+
+  disableSelect?: boolean;
+  disableCheck?: boolean;
+  disableToggle?: boolean;
+}
+```
+
+#### ICheck
+
+```ts
+type ICheck = boolean | 'upward' | 'downward' | 'both' | 'none';
+```