feat(tree): 增加节点连接线

packages/devui-vue/devui/tree/src/components/tree-node.tsx

@@ -1,8 +1,9 @@
 import { defineComponent, inject, PropType, toRefs } from 'vue';
-import { USE_TREE_TOKEN } from '../const';
+import { NODE_HEIGHT, USE_TREE_TOKEN } from '../const';
 import { IInnerTreeNode } from '../core/use-tree-types';
 import DTreeNodeToggle from './tree-node-toggle';
 import { Checkbox } from '../../../checkbox';
+import useTreeNode from './use-tree-node';
 
 export default defineComponent({
   name: 'DTreeNode',
@@ -15,22 +16,32 @@ export default defineComponent({
     const { data } = toRefs(props);
     const { selectNode, toggleCheckNode } = inject(USE_TREE_TOKEN);
 
+    const {
+      nodeClass,
+      nodeStyle,
+      nodeContentClass,
+      nodeTitleClass,
+      nodeVLineClass,
+      nodeVLineStyle,
+      nodeHLineClass,
+    } = useTreeNode(data);
+
     return () => {
       return (
-        <div
-          class={['devui-tree-node', data.value?.expanded && 'devui-tree-node__open']}
-          style={{ paddingLeft: `${24 * (data.value?.level - 1)}px` }}>
-          <div class={['devui-tree-node__content', data.value?.selected && 'active']} onClick={() => {
-            selectNode(data.value);
-          }}>
+        <div class={nodeClass.value} style={nodeStyle.value}>
+          <span class={nodeVLineClass.value} style={nodeVLineStyle.value}></span>
+          <div class={nodeContentClass.value} onClick={() => { selectNode(data.value); }}>
+            <span class={nodeHLineClass.value}></span>
             <DTreeNodeToggle data={data.value} />
-            <div class="devui-tree-node__content--value-wrapper">
-              { <Checkbox disabled={data.value?.disableCheck} key={data.value?.id} modelValue={data.value?.checked} onUpdate:modelValue={() => {
-                toggleCheckNode(data.value);
-              }} onClick={(event: MouseEvent) => {
-                event.stopPropagation();
-              }} /> }
-              <span class={['devui-tree-node__title', data.value?.disableSelect && 'select-disabled']}>{data.value?.label}</span>
+            <div class="devui-tree-node__content--value-wrapper" style={{ height: `${NODE_HEIGHT}px`}}>
+              <Checkbox
+                key={data.value?.id}
+                disabled={data.value?.disableCheck}
+                modelValue={data.value?.checked}
+                onUpdate:modelValue={() => { toggleCheckNode(data.value); }}
+                onClick={(event: MouseEvent) => { event.stopPropagation(); }}
+              />
+              <span class={nodeTitleClass.value}>{data.value?.label}</span>
             </div>
           </div>
         </div>

packages/devui-vue/devui/tree/src/components/use-tree-node.ts

@@ -0,0 +1,45 @@
+import { computed, ComputedRef, inject } from 'vue';
+import { NODE_HEIGHT, NODE_INDENT, USE_TREE_TOKEN } from '../const';
+import { IInnerTreeNode, IUseTree } from '../core/use-tree-types';
+
+export default function useTreeNode(data: ComputedRef<IInnerTreeNode>) {
+  const { getChildren } = inject<IUseTree>(USE_TREE_TOKEN);
+
+  const nodeClass = computed(() => [
+    'devui-tree-node',
+    data.value?.expanded && 'devui-tree-node__open',
+  ]);
+  const nodeStyle = computed(() => {return { paddingLeft: `${NODE_INDENT * (data.value?.level - 1)}px` }});
+
+  const nodeVLineClass = computed(() => [
+    !data.value?.isLeaf && data.value?.expanded && 'devui-tree-node__vline',
+  ]);
+  const nodeVLineStyle = computed(() => {return {
+    height: `${NODE_HEIGHT * (getChildren(data.value, true).length - 1) + NODE_HEIGHT / 2 + 1}px`,
+    left: `${NODE_INDENT * (data.value?.level - 1) + 9}px`,
+    top: `${NODE_HEIGHT}px`,
+  }});
+  const nodeHLineClass = computed(() => [
+    data.value?.level !== 1 && 'devui-tree-node__hline',
+  ]);
+
+  const nodeContentClass = computed(() => [
+    'devui-tree-node__content',
+    data.value?.selected && 'active'
+  ]);
+
+  const nodeTitleClass = computed(() => [
+    'devui-tree-node__title',
+    data.value?.disableSelect && 'select-disabled'
+  ]);
+
+  return {
+    nodeClass,
+    nodeStyle,
+    nodeContentClass,
+    nodeTitleClass,
+    nodeVLineClass,
+    nodeVLineStyle,
+    nodeHLineClass,
+  };
+}

packages/devui-vue/devui/tree/src/const.ts

@@ -1 +1,3 @@
 export const USE_TREE_TOKEN = 'use-tree-token';
+export const NODE_HEIGHT = 40;
+export const NODE_INDENT = 24;

packages/devui-vue/devui/tree/src/core/use-core.ts

@@ -9,12 +9,13 @@ export default function useCore(data: Ref<IInnerTreeNode[]>): IUseCore {
     return data.value.find((item) => item.id === node.id).level;
   }
 
-  const getChildren = (node: ITreeNode): IInnerTreeNode[] => {
+  const getChildren = (node: ITreeNode, expanded = false): IInnerTreeNode[] => {
     let result = [];
-    const startIndex = data.value.findIndex((item) => item.id === node.id);
+    const treeData = expanded ? getExpendedTree() : data;
+    const startIndex = treeData.value.findIndex((item) => item.id === node.id);
 
-    for (let i = startIndex + 1; i < data.value.length && getLevel(node) < data.value[i].level; i++) {
-      result.push(data.value[i]);
+    for (let i = startIndex + 1; i < treeData.value.length && getLevel(node) < treeData.value[i].level; i++) {
+      result.push(treeData.value[i]);
     }
 
     return result;

packages/devui-vue/devui/tree/src/core/use-tree-types.ts

@@ -27,7 +27,7 @@ export type valueof<T> = T[keyof T];
 
 export interface IUseCore {
   getLevel: (node: ITreeNode) => number;
-  getChildren: (node: ITreeNode) => IInnerTreeNode[];
+  getChildren: (node: ITreeNode, expanded: boolean) => IInnerTreeNode[];
   getExpendedTree: () => ComputedRef<IInnerTreeNode[]>;
   getIndex: (node: ITreeNode) => number;
   getNode: (node: ITreeNode) => IInnerTreeNode;
@@ -68,4 +68,4 @@ export interface IUseToggle {
 
 export type IUseTree = {
   treeData: Ref<IInnerTreeNode[]>
-} & IUseCore & IUseCheck & IUseDisable & IUseOperate & IUseSelect & IUseToggle;
+} & IUseCore & IUseToggle & IUseSelect & IUseCheck & IUseDisable & IUseOperate;

packages/devui-vue/devui/tree/src/tree.scss

@@ -67,7 +67,6 @@ $keyframe-blue: #5e7ce0;
   .devui-tree-node__content--value-wrapper {
     display: inline-flex;
     align-items: center;
-    height: 30px;
     width: 100%;
 
     .devui-tree-node_loading {
@@ -340,3 +339,26 @@ $keyframe-blue: #5e7ce0;
   cursor: not-allowed !important;
   background-color: transparent !important;
 }
+
+.devui-tree-node {
+  font-size: 0;
+}
+
+.devui-tree-node, .devui-tree-node__content {
+  position: relative;
+}
+
+.devui-tree-node__vline {
+  width: 1px;
+  background-color: $devui-dividing-line;
+  position: absolute;
+}
+
+.devui-tree-node__hline {
+  width: 8px;
+  height: 1px;
+  background-color: $devui-dividing-line;
+  position: absolute;
+  left: -14px;
+  top: 50%;
+}

packages/devui-vue/docs/components/tree/index.md

@@ -1066,8 +1066,32 @@ export default defineComponent({
           {
             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: 'Lead node 1-3',
+            id: 'node-1-3',
+          },
+        ],
       },
       {
         label: 'Leaf node 2',