plain-design 1.0.0-beta.23 → 1.0.0-beta.24

package/src/pages/index/components/normal/DemoTree.tsx

@@ -1,1183 +1,1183 @@
-import {designPage, getComponentCls, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Alert, Button, ButtonGroup, Checkbox, Input, Layout, LayoutSection, Segment, SegmentGroup, Tree, TreeNodeWithMenu} from "../../../../packages";
-import treeData from '../../../data/tree.data.json';
-import addressData from '../../../data/address.json';
-import {iTreeNode} from "../../../../packages/components/TreeCore/createTreeNode";
-import {deepcopy} from 'plain-utils/object/deepcopy';
-import {iTreeProps} from "../../../../packages/components/TreeCore/TreeCore.type";
-import {iTreeDragChangeData} from "../../../../packages/components/TreeCore/createTreeProps";
-import {delay} from "plain-utils/utils/delay";
-import {iTreeNodeWithMenuOption} from "../../../../packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils";
-
-export const demo1 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-      <Tree
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-      />
-    </DemoRow>
-  );
-});
-
-export const demoshowConnector = designPage(() => {
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  return () => (
-    <DemoRow title="禁用连接线">
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <Tree
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        showConnector={false}
-        defaultExpandAll
-      />
-    </DemoRow>
-  );
-});
-
-export const demoSingle = designPage(() => {
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    current: null as any,
-    checkLast: false,
-  });
-
-  return () => (
-    <DemoRow title="单选绑定(singleValueType=last)">
-
-      <ButtonGroup style={{ display: 'inline-block' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
-          <Checkbox v-model={state.checkLast} customReadonly/>
-          <span>只能选择叶子节点</span>
-        </Button>
-        <Button label="当前选中节点" onClick={() => {$message(state.current?.name || '无选中任何节点');}}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <Button mode="fill">单值绑定：{state.current?.name || '无选中任何节点'}</Button>
-
-      <Tree
-        v-model={state.current}
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        showConnector
-        defaultExpandAll
-        singleValueType="last"
-        checkLast={state.checkLast}
-      />
-    </DemoRow>
-  );
-});
-
-export const demoSingleAll = designPage(() => {
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    current: null as null | any[],
-    checkLast: false,
-  });
-
-  return () => (
-    <DemoRow title="单选绑定(singleValueType=all)">
-
-      <ButtonGroup style={{ display: 'inline-block' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
-          <Checkbox v-model={state.checkLast} customReadonly/>
-          <span>只能选择叶子节点</span>
-        </Button>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <Button mode="fill">单值绑定：{(!state.current || state.current.length === 0 ? null : state.current.map(i => i.name).join('/')) || '无选中任何节点'}</Button>
-
-      <Tree
-        v-model={state.current}
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        showConnector
-        defaultExpandAll
-        singleValueType="all"
-        checkLast={state.checkLast}
-      />
-    </DemoRow>
-  );
-});
-
-export const demoMultiple = designPage(() => {
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-    checkLast: false,
-  });
-
-  return () => (
-    <DemoRow title="多选绑定多值">
-
-      <ButtonGroup style={{ display: 'inline-block' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
-          <Checkbox v-model={state.checkLast} customReadonly/>
-          <span>只能选择叶子节点</span>
-        </Button>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
-        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
-        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
-        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
-      </ButtonGroup>
-
-      <Tree
-        v-model={state.checked}
-        multiple
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        showConnector
-        defaultExpandAll
-        checkLast={state.checkLast}
-      />
-    </DemoRow>
-  );
-});
-
-export const demoSize = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-  const state = reactive({
-    size: 'normal' as any
-  });
-
-  return () => (
-    <DemoRow title="大小尺寸">
-      <SegmentGroup v-model={state.size} style={{ marginBottom: '16px' }}>
-        <Segment label="Mini" val="mini"/>
-        <Segment label="Small" val="small"/>
-        <Segment label="Normal" val="normal"/>
-        <Segment label="Large" val="large"/>
-      </SegmentGroup>
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-      <Tree
-        ref={onRef.tree}
-        size={state.size}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-      />
-    </DemoRow>
-  );
-});
-
-export const demoLazy = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    data: [] as any,
-  });
-
-  const lazyDemo = {
-    treeData: [],
-    isLeaf: (treeNode: iTreeNode) => {
-      return treeNode.level >= 3;
-    },
-    getChildrenData: async (treeNode: iTreeNode | null) => {
-      if (!treeNode) {
-        console.log('getChildrenData:root');
-        return lazyDemo.getCitiesByParentId(null);
-      } else {
-        console.log('getChildrenData', treeNode.data);
-        return lazyDemo.getCitiesByParentId(treeNode.data.id);
-      }
-    },
-    getCitiesByParentId(parentId: string | null) {
-      return new Promise<any[]>((resolve) => {
-        // 这个是模拟在数据库表中的数据
-        const data = [
-          { id: '1', name: '广东省', level: 1, parentId: null, subs: [] },
-          { id: '2', name: '佛山市', level: 2, parentId: '1', subs: [] },
-          { id: '3', name: '深圳市', level: 2, parentId: '1', subs: [] },
-          { id: '4', name: '禅城区', level: 3, parentId: '2', subs: [] },
-          { id: '5', name: '南山区', level: 3, parentId: '3', subs: [] },
-
-          { id: '6', name: '湖南省', level: 1, parentId: null, subs: [] },
-          { id: '7', name: '长沙市', level: 2, parentId: '6', subs: [] },
-          { id: '8', name: '邵阳市', level: 2, parentId: '6', subs: [] },
-          { id: '9', name: '天心区', level: 3, parentId: '7', subs: [] },
-
-          { id: '11', name: '陕西省', level: 1, parentId: null, subs: [] },
-        ];
-
-        // 模拟请求，请求时间大概在1s-2s之间
-        setTimeout(() => {
-          resolve(data.filter(item => item.parentId === parentId));
-        }, Math.random() * 1000 + 1000);
-      });
-    },
-  };
-
-  return () => (
-    <DemoRow title="懒加载子节点">
-      <Tree
-        ref={onRef.tree}
-        v-model:data={state.data}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        lazy
-        isLeaf={lazyDemo.isLeaf}
-        getChildrenData={lazyDemo.getChildrenData}
-      />
-    </DemoRow>
-  );
-});
-
-export const demoMultipleStrict = designPage(() => {
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-  });
-
-  return () => (
-    <DemoRow title="多选绑定多值(互不关联)">
-
-      <ButtonGroup style={{ display: 'inline-block' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
-        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
-        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
-        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
-      </ButtonGroup>
-
-      <Tree
-        v-model={state.checked}
-        multiple
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        showConnector
-        defaultExpandAll
-        checkStrictly
-      />
-    </DemoRow>
-  );
-});
-
-export const demoMultipleDisableCheck = designPage(() => {
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-  });
-
-  const isCheckAble = (data: any) => {
-    return data.id.endsWith('1');
-  };
-
-  return () => (
-    <DemoRow title="禁用选中">
-
-      <ButtonGroup style={{ display: 'inline-block' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
-        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
-        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
-        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
-      </ButtonGroup>
-
-      <Tree
-        v-model={state.checked}
-        multiple
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        showConnector
-        defaultExpandAll
-        isCheckAble={isCheckAble}
-      />
-    </DemoRow>
-  );
-});
-
-export const demoScopedSlot = designPage(() => {
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-  });
-
-  const buildIndex = ({ level }: iTreeNode) => {
-    return level === 0 ? '一级' : level === 1 ? '二级' : '三级';
-    // return [treeNode, ...treeNode.parents()].reverse().map(i => i!.index + 1).join('.');
-  };
-
-  const scopedSlotDemo = {
-    treeData: deepcopy(treeData),
-    addItem: async (e: MouseEvent, treeNode: iTreeNode) => {
-      e.stopPropagation();
-      const { data } = treeNode;
-      const subs = data.subs || [];
-      const name = `n-${data.id}-${subs.length + 1}`;
-      const id = name + Date.now().toString();
-      subs.push({ id, name: `new item ${name}`, });
-      // 这里触发响应式更新，单独修改subs数组可能不会触发视图更新
-      data.subs = [...subs];
-      refs.tree!.methods.refreshCheckStatus(treeNode);
-      refs.tree!.methods.expand(id);
-    },
-    deleteItem: (e: MouseEvent, treeNode: iTreeNode) => {
-      e.stopPropagation();
-      let { data, parent } = treeNode;
-      const subs = parent!.data.subs as any[];
-      const ids = subs.map(item => item.id);
-      subs.splice(ids.indexOf(data.id), 1);
-      if (subs.length === 0) {
-        parent!.data.subs = null;
-      }
-      refs.tree!.methods.refreshCheckStatus(treeNode.parent!);
-      refs.tree!.methods.clearInvalidChecked();
-    },
-    clear: (e: MouseEvent, treeNode: iTreeNode) => {
-      e.stopPropagation();
-      treeNode.data.subs = null;
-      refs.tree!.methods.clearInvalidChecked();
-    },
-  };
-
-  return () => (
-    <DemoRow title="插槽渲染内容">
-
-      <ButtonGroup style={{ display: 'inline-block' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
-        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
-        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
-        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
-      </ButtonGroup>
-
-      <Tree
-        v-model={state.checked}
-        multiple
-        ref={onRef.tree}
-        data={scopedSlotDemo.treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        showConnector
-        defaultExpandAll
-        displayBlock
-        style={{ width: '500px' }}
-      >
-        {{
-          default: ({ treeNode }: { treeNode: iTreeNode }) => (
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <div>
-                <div style={{
-                  backgroundColor: `var(--${getComponentCls('primary-1')})`,
-                  borderRadius: '2px',
-                  display: 'inline-block',
-                  marginRight: '4px',
-                  color: `var(--${getComponentCls('primary-6')})`,
-                  fontSize: '12px',
-                  zoom: '0.8',
-                  padding: "4px 4px",
-                  lineHeight: "1em",
-                }}>
-                  {buildIndex(treeNode)}
-                </div>
-                {treeNode.data.name}
-              </div>
-              <ButtonGroup mode="text">
-                <Button label="Add" onClick={e => scopedSlotDemo.addItem(e, treeNode)} size="mini"/>
-                <Button label="Del" onClick={e => scopedSlotDemo.deleteItem(e, treeNode)} size="mini" status="error"/>
-              </ButtonGroup>
-            </div>
-          )
-        }}
-      </Tree>
-    </DemoRow>
-  );
-});
-
-export const demoRenderFunction = designPage(() => {
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-  });
-
-  const buildIndex = (treeNode: iTreeNode) => {
-    return [treeNode, ...treeNode.parents()].reverse().map(i => i!.index + 1).join('.');
-  };
-
-  const renderDemo = {
-    treeData: deepcopy(treeData),
-    addItem: async (e: MouseEvent, treeNode: iTreeNode) => {
-      e.stopPropagation();
-      const { data } = treeNode;
-      const subs = data.subs || [];
-      const name = `n-${data.id}-${subs.length + 1}`;
-      const id = name + Date.now().toString();
-      subs.push({ id, name: `new item ${name}`, });
-      // 这里触发响应式更新，单独修改subs数组可能不会触发视图更新
-      data.subs = [...subs];
-      refs.tree!.methods.refreshCheckStatus(treeNode);
-      refs.tree!.methods.expand(id);
-    },
-    deleteItem: (e: MouseEvent, treeNode: iTreeNode) => {
-      e.stopPropagation();
-      let { data, parent } = treeNode;
-      const subs = parent!.data.subs as any[];
-      const ids = subs.map(item => item.id);
-      subs.splice(ids.indexOf(data.id), 1);
-      if (subs.length === 0) {
-        parent!.data.subs = null;
-      }
-      refs.tree!.methods.refreshCheckStatus(treeNode.parent!);
-      refs.tree!.methods.clearInvalidChecked();
-    },
-    clear: (e: MouseEvent, treeNode: iTreeNode) => {
-      e.stopPropagation();
-      treeNode.data.subs = null;
-      refs.tree!.methods.clearInvalidChecked();
-    },
-    renderContent: ({ treeNode }: { treeNode: iTreeNode }) => (
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        <div>
-          <div style={{
-            backgroundColor: `var(--${getComponentCls('primary-1')})`,
-            borderRadius: '2px',
-            display: 'inline-block',
-            marginRight: '4px',
-            color: `var(--${getComponentCls('primary-6')})`,
-            fontSize: '12px',
-            zoom: '0.8',
-            padding: "4px 4px",
-            lineHeight: "1em",
-          }}>
-            {buildIndex(treeNode)}
-          </div>
-          {treeNode.data.name}
-        </div>
-        <ButtonGroup mode="text">
-          <Button label="Add" onClick={e => renderDemo.addItem(e, treeNode)} size="mini"/>
-          <Button label="Del" onClick={e => renderDemo.deleteItem(e, treeNode)} size="mini" status="error"/>
-        </ButtonGroup>
-      </div>
-    )
-  };
-
-  return () => (
-    <DemoRow title="渲染函数渲染内容">
-
-      <ButtonGroup style={{ display: 'inline-block' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
-        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
-        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
-        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
-      </ButtonGroup>
-
-      <Tree
-        v-model={state.checked}
-        multiple
-        ref={onRef.tree}
-        data={renderDemo.treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        showConnector
-        defaultExpandAll
-        displayBlock
-        style={{ width: '500px' }}
-        renderContent={renderDemo.renderContent}
-      />
-    </DemoRow>
-  );
-});
-
-export const demoNodeIcon = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  return () => (
-    <DemoRow title="节点图标">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-      <Tree
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        nodeIcon={treeNode => treeNode.isLeaf() ? 'pi-star' : 'pi-star-fill'}
-      />
-    </DemoRow>
-  );
-});
-
-export const demoAccording = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  return () => (
-    <DemoRow title="手风琴模式，打开节点的时候关闭兄弟节点">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-      <Tree
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        according
-      />
-    </DemoRow>
-  );
-});
-
-export const demoFilter = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    filterText: null as any
-  });
-
-  return () => (
-    <DemoRow title="可筛选">
-      <Input v-model={state.filterText} width="200px" suffixIcon="pi-search" style={{ marginBottom: '4px' }} placeholder="search keywords"/>
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-      <Tree
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        filterText={state.filterText}
-        defaultExpandAll
-      />
-    </DemoRow>
-  );
-});
-
-export const demoIcon = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  return () => (
-    <DemoRow title="展开图标">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-      <Tree
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        folderExpandIcon="pi-minus"
-        folderCollapseIcon="pi-plus"
-        leafIcon="pi-user"
-        expanderCover
-      />
-    </DemoRow>
-  );
-});
-
-export const demoVirtual = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-  });
-
-  return () => (
-    <DemoRow title="虚拟滚动">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['1144179485591994368'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-      </ButtonGroup>
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
-        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
-        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
-        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
-      </ButtonGroup>
-
-      <div style={{ height: '500px', margin: '20px 0' }}>
-        <Tree
-          v-model={state.checked}
-          ref={onRef.tree}
-          data={addressData}
-          keyField="id"
-          labelField="name"
-          childrenField="children"
-          multiple
-          virtual
-          innerAttrs={{
-            style: {
-              backgroundColor: `var(--custom-background-hover)`,
-            }
-          }}
-        />
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoDraggable = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const isLeaf = (nodeData: any) => {
-    return !nodeData.subs || nodeData.subs.length === 0;
-  };
-
-  return () => (
-    <DemoRow title="可拖拽">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-      <Tree
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        draggable
-        defaultExpandAll
-        isLeaf={isLeaf}
-      >
-        {{
-          default: ({ treeNode: { data } }: { treeNode: iTreeNode }) => (
-            <span style={{
-              color: ({
-                1: '#12b4a5',
-                2: '#00CC00',
-                3: '#F38585',
-              } as any)[data.id.charAt(0)]
-            }}>
-                {data.name}
-            </span>
-          )
-        }}
-      </Tree>
-    </DemoRow>
-  );
-});
-
-export const demoCheckAbleDraggable = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-  });
-
-  const isLeaf = (nodeData: any) => {
-    return !nodeData.subs || nodeData.subs.length === 0;
-  };
-
-  return () => (
-    <DemoRow title="可拖拽 + 可选中">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
-        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
-      </ButtonGroup>
-
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
-        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
-        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
-      </ButtonGroup>
-
-      <Tree
-        v-model={state.checked}
-        multiple
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        draggable
-        defaultExpandAll
-        isLeaf={isLeaf}
-      >
-        {{
-          default: ({ treeNode: { data } }: { treeNode: iTreeNode }) => (
-            <span style={{
-              color: ({
-                1: '#12b4a5',
-                2: '#00CC00',
-                3: '#F38585',
-              } as any)[data.id.charAt(0)]
-            }}>
-                {data.name}
-            </span>
-          )
-        }}
-      </Tree>
-    </DemoRow>
-  );
-});
-
-export const demoAllowDraggable = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const isLeaf = (nodeData: any) => {
-    return !nodeData.subs || nodeData.subs.length === 0;
-  };
-  const isAllowDraggable: iTreeProps["isAllowDraggable"] = (dragNode) => {
-    return !dragNode.data.id.startsWith('2-2');
-  };
-  const isAllowDroppable: iTreeProps["isAllowDroppable"] = (dragNode, modeNode) => {
-    return !modeNode.data.id.startsWith('3');
-  };
-
-  return () => (
-    <DemoRow title="可拖拽可放置控制">
-      <Alert style={{ marginBottom: '8px' }}>
-        <div>2-2开头的id不能被拖拽</div>
-        <div>3开头的id不能放置任何节点</div>
-      </Alert>
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-      </ButtonGroup>
-      <Tree
-        ref={onRef.tree}
-        data={treeData}
-        keyField="id"
-        labelField="name"
-        childrenField="subs"
-        draggable
-        defaultExpandAll
-        isLeaf={isLeaf}
-        isAllowDraggable={isAllowDraggable}
-        isAllowDroppable={isAllowDroppable}
-      >
-        {{
-          default: ({ treeNode: { data } }: { treeNode: iTreeNode }) => (
-            <span style={{
-              color: ({
-                1: '#12b4a5',
-                2: '#00CC00',
-                3: '#F38585',
-              } as any)[data.id.charAt(0)]
-            }}>
-                {data.name}
-            </span>
-          )
-        }}
-      </Tree>
-    </DemoRow>
-  );
-});
-
-export const demoVirtualDraggable = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-    undoDraggier: false,
-  });
-
-  const onDragChange = (data: iTreeDragChangeData) => {
-    console.log(data);
-    if (state.undoDraggier) {
-      delay(2000).then(() => {data.undo();});
-    }
-  };
-
-  return () => (
-    <DemoRow title="虚拟滚动+拖拽+多选 示例">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-        <Button>
-          <Checkbox v-model={state.undoDraggier} label="拖拽移动2s后撤回拖拽操作"/>
-        </Button>
-      </ButtonGroup>
-      <div style={{ height: '500px', margin: '20px 0' }}>
-        <Tree
-          v-model={state.checked}
-          ref={onRef.tree}
-          data={addressData}
-          keyField="id"
-          labelField="name"
-          childrenField="children"
-          multiple
-          virtual
-          draggable
-          onDragChange={onDragChange}
-          innerAttrs={{
-            style: {
-              // backgroundColor: `var(--custom-background-hover)`,
-            }
-          }}
-        />
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoCustomDraggier = designPage(() => {
-
-  const { refs, onRef } = useRefs({ tree: Tree });
-
-  const state = reactive({
-    checked: [] as any[],
-    undoDraggier: false,
-  });
-
-  const onDragChange = (data: iTreeDragChangeData) => {
-    console.log(data);
-    if (state.undoDraggier) {
-      delay(2000).then(() => {data.undo();});
-    }
-  };
-
-  const getNodeOptions = (treeNode: iTreeNode): iTreeNodeWithMenuOption[] | undefined => {
-    if (treeNode.level === 0) {
-      return [
-        { label: '新建菜单', onClick: () => {$message(`${treeNode.label()} -> 新建菜单`);} },
-        { label: '新建菜单分组', onClick: () => {$message(`${treeNode.label()} -> 新建菜单分组`);} },
-      ];
-    }
-    if (treeNode.level === 1) {
-      return [
-        { label: '新建菜单', onClick: () => {$message(`${treeNode.label()} -> 新建菜单`);} },
-      ];
-    }
-  };
-
-  return () => (
-    <DemoRow title="自定义拖拽节点">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
-        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
-        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
-        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
-        <Button label="当前选中节点" onClick={() => {
-          const current = refs.tree!.methods.getCurrent();
-          $message(!!current ? current.data.name : '未选中任何节点！');
-        }}/>
-        <Button label="展开并且设置当前选中节点" onClick={() => {
-          refs.tree!.methods.expand('2-2-2');
-          refs.tree!.methods.setCurrent('2-2-2');
-        }}/>
-        <Button>
-          <Checkbox v-model={state.undoDraggier} label="拖拽移动2s后撤回拖拽操作"/>
-        </Button>
-      </ButtonGroup>
-      <Layout style={{ marginTop: '16px' }}>
-        <LayoutSection position="left" modelValue={120}>
-          <Tree
-            v-model={state.checked}
-            ref={onRef.tree}
-            data={addressData}
-            keyField="id"
-            labelField="name"
-            childrenField="children"
-            singleValueType="last"
-            virtual
-            onDragChange={onDragChange}
-            draggable
-            customDraggier
-            expandOnClickNode
-            v-slots={{
-              default: ({ treeNode }: { treeNode: iTreeNode }) => (
-                <TreeNodeWithMenu treeNode={treeNode} dropdownOptions={getNodeOptions(treeNode)}/>
-              )
-            }}
-          />
-        </LayoutSection>
-        <LayoutSection>
-          <div style={{ height: '500px', padding: '0 16px' }}>
-            内容区域
-          </div>
-        </LayoutSection>
-      </Layout>
-
-    </DemoRow>
-  );
-});
+import {designPage, getComponentCls, reactive, useRefs} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$message, Alert, Button, ButtonGroup, Checkbox, Input, Layout, LayoutSection, Segment, SegmentGroup, Tree, TreeNodeWithMenu} from "../../../../packages";
+import treeData from '../../../data/tree.data.json';
+import addressData from '../../../data/address.json';
+import {iTreeNode} from "../../../../packages/components/TreeCore/createTreeNode";
+import {deepcopy} from 'plain-utils/object/deepcopy';
+import {iTreeProps} from "../../../../packages/components/TreeCore/TreeCore.type";
+import {iTreeDragChangeData} from "../../../../packages/components/TreeCore/createTreeProps";
+import {delay} from "plain-utils/utils/delay";
+import {iTreeNodeWithMenuOption} from "../../../../packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils";
+
+export const demo1 = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  return () => (
+    <DemoRow title="基本用法">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Tree
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+      />
+    </DemoRow>
+  );
+});
+
+export const demoshowConnector = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  return () => (
+    <DemoRow title="禁用连接线">
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Tree
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        showConnector={false}
+        defaultExpandAll
+      />
+    </DemoRow>
+  );
+});
+
+export const demoSingle = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    current: null as any,
+    checkLast: false,
+  });
+
+  return () => (
+    <DemoRow title="单选绑定(singleValueType=last)">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
+          <Checkbox v-model={state.checkLast} customReadonly/>
+          <span>只能选择叶子节点</span>
+        </Button>
+        <Button label="当前选中节点" onClick={() => {$message(state.current?.name || '无选中任何节点');}}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Button mode="fill">单值绑定：{state.current?.name || '无选中任何节点'}</Button>
+
+      <Tree
+        v-model={state.current}
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        showConnector
+        defaultExpandAll
+        singleValueType="last"
+        checkLast={state.checkLast}
+      />
+    </DemoRow>
+  );
+});
+
+export const demoSingleAll = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    current: null as null | any[],
+    checkLast: false,
+  });
+
+  return () => (
+    <DemoRow title="单选绑定(singleValueType=all)">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
+          <Checkbox v-model={state.checkLast} customReadonly/>
+          <span>只能选择叶子节点</span>
+        </Button>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <Button mode="fill">单值绑定：{(!state.current || state.current.length === 0 ? null : state.current.map(i => i.name).join('/')) || '无选中任何节点'}</Button>
+
+      <Tree
+        v-model={state.current}
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        showConnector
+        defaultExpandAll
+        singleValueType="all"
+        checkLast={state.checkLast}
+      />
+    </DemoRow>
+  );
+});
+
+export const demoMultiple = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+    checkLast: false,
+  });
+
+  return () => (
+    <DemoRow title="多选绑定多值">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button onClick={() => {state.checkLast = !state.checkLast;}}>
+          <Checkbox v-model={state.checkLast} customReadonly/>
+          <span>只能选择叶子节点</span>
+        </Button>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Tree
+        v-model={state.checked}
+        multiple
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        showConnector
+        defaultExpandAll
+        checkLast={state.checkLast}
+      />
+    </DemoRow>
+  );
+});
+
+export const demoSize = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+  const state = reactive({
+    size: 'normal' as any
+  });
+
+  return () => (
+    <DemoRow title="大小尺寸">
+      <SegmentGroup v-model={state.size} style={{ marginBottom: '16px' }}>
+        <Segment label="Mini" val="mini"/>
+        <Segment label="Small" val="small"/>
+        <Segment label="Normal" val="normal"/>
+        <Segment label="Large" val="large"/>
+      </SegmentGroup>
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Tree
+        ref={onRef.tree}
+        size={state.size}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+      />
+    </DemoRow>
+  );
+});
+
+export const demoLazy = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    data: [] as any,
+  });
+
+  const lazyDemo = {
+    treeData: [],
+    isLeaf: (treeNode: iTreeNode) => {
+      return treeNode.level >= 3;
+    },
+    getChildrenData: async (treeNode: iTreeNode | null) => {
+      if (!treeNode) {
+        console.log('getChildrenData:root');
+        return lazyDemo.getCitiesByParentId(null);
+      } else {
+        console.log('getChildrenData', treeNode.data);
+        return lazyDemo.getCitiesByParentId(treeNode.data.id);
+      }
+    },
+    getCitiesByParentId(parentId: string | null) {
+      return new Promise<any[]>((resolve) => {
+        // 这个是模拟在数据库表中的数据
+        const data = [
+          { id: '1', name: '广东省', level: 1, parentId: null, subs: [] },
+          { id: '2', name: '佛山市', level: 2, parentId: '1', subs: [] },
+          { id: '3', name: '深圳市', level: 2, parentId: '1', subs: [] },
+          { id: '4', name: '禅城区', level: 3, parentId: '2', subs: [] },
+          { id: '5', name: '南山区', level: 3, parentId: '3', subs: [] },
+
+          { id: '6', name: '湖南省', level: 1, parentId: null, subs: [] },
+          { id: '7', name: '长沙市', level: 2, parentId: '6', subs: [] },
+          { id: '8', name: '邵阳市', level: 2, parentId: '6', subs: [] },
+          { id: '9', name: '天心区', level: 3, parentId: '7', subs: [] },
+
+          { id: '11', name: '陕西省', level: 1, parentId: null, subs: [] },
+        ];
+
+        // 模拟请求，请求时间大概在1s-2s之间
+        setTimeout(() => {
+          resolve(data.filter(item => item.parentId === parentId));
+        }, Math.random() * 1000 + 1000);
+      });
+    },
+  };
+
+  return () => (
+    <DemoRow title="懒加载子节点">
+      <Tree
+        ref={onRef.tree}
+        v-model:data={state.data}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        lazy
+        isLeaf={lazyDemo.isLeaf}
+        getChildrenData={lazyDemo.getChildrenData}
+      />
+    </DemoRow>
+  );
+});
+
+export const demoMultipleStrict = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  return () => (
+    <DemoRow title="多选绑定多值(互不关联)">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Tree
+        v-model={state.checked}
+        multiple
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        showConnector
+        defaultExpandAll
+        checkStrictly
+      />
+    </DemoRow>
+  );
+});
+
+export const demoMultipleDisableCheck = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  const isCheckAble = (data: any) => {
+    return data.id.endsWith('1');
+  };
+
+  return () => (
+    <DemoRow title="禁用选中">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Tree
+        v-model={state.checked}
+        multiple
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        showConnector
+        defaultExpandAll
+        isCheckAble={isCheckAble}
+      />
+    </DemoRow>
+  );
+});
+
+export const demoScopedSlot = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  const buildIndex = ({ level }: iTreeNode) => {
+    return level === 0 ? '一级' : level === 1 ? '二级' : '三级';
+    // return [treeNode, ...treeNode.parents()].reverse().map(i => i!.index + 1).join('.');
+  };
+
+  const scopedSlotDemo = {
+    treeData: deepcopy(treeData),
+    addItem: async (e: MouseEvent, treeNode: iTreeNode) => {
+      e.stopPropagation();
+      const { data } = treeNode;
+      const subs = data.subs || [];
+      const name = `n-${data.id}-${subs.length + 1}`;
+      const id = name + Date.now().toString();
+      subs.push({ id, name: `new item ${name}`, });
+      // 这里触发响应式更新，单独修改subs数组可能不会触发视图更新
+      data.subs = [...subs];
+      refs.tree!.methods.refreshCheckStatus(treeNode);
+      refs.tree!.methods.expand(id);
+    },
+    deleteItem: (e: MouseEvent, treeNode: iTreeNode) => {
+      e.stopPropagation();
+      let { data, parent } = treeNode;
+      const subs = parent!.data.subs as any[];
+      const ids = subs.map(item => item.id);
+      subs.splice(ids.indexOf(data.id), 1);
+      if (subs.length === 0) {
+        parent!.data.subs = null;
+      }
+      refs.tree!.methods.refreshCheckStatus(treeNode.parent!);
+      refs.tree!.methods.clearInvalidChecked();
+    },
+    clear: (e: MouseEvent, treeNode: iTreeNode) => {
+      e.stopPropagation();
+      treeNode.data.subs = null;
+      refs.tree!.methods.clearInvalidChecked();
+    },
+  };
+
+  return () => (
+    <DemoRow title="插槽渲染内容">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Tree
+        v-model={state.checked}
+        multiple
+        ref={onRef.tree}
+        data={scopedSlotDemo.treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        showConnector
+        defaultExpandAll
+        displayBlock
+        style={{ width: '500px' }}
+      >
+        {{
+          default: ({ treeNode }: { treeNode: iTreeNode }) => (
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <div>
+                <div style={{
+                  backgroundColor: `var(--${getComponentCls('primary-1')})`,
+                  borderRadius: '2px',
+                  display: 'inline-block',
+                  marginRight: '4px',
+                  color: `var(--${getComponentCls('primary-6')})`,
+                  fontSize: '12px',
+                  zoom: '0.8',
+                  padding: "4px 4px",
+                  lineHeight: "1em",
+                }}>
+                  {buildIndex(treeNode)}
+                </div>
+                {treeNode.data.name}
+              </div>
+              <ButtonGroup mode="text">
+                <Button label="Add" onClick={e => scopedSlotDemo.addItem(e, treeNode)} size="mini"/>
+                <Button label="Del" onClick={e => scopedSlotDemo.deleteItem(e, treeNode)} size="mini" status="error"/>
+              </ButtonGroup>
+            </div>
+          )
+        }}
+      </Tree>
+    </DemoRow>
+  );
+});
+
+export const demoRenderFunction = designPage(() => {
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  const buildIndex = (treeNode: iTreeNode) => {
+    return [treeNode, ...treeNode.parents()].reverse().map(i => i!.index + 1).join('.');
+  };
+
+  const renderDemo = {
+    treeData: deepcopy(treeData),
+    addItem: async (e: MouseEvent, treeNode: iTreeNode) => {
+      e.stopPropagation();
+      const { data } = treeNode;
+      const subs = data.subs || [];
+      const name = `n-${data.id}-${subs.length + 1}`;
+      const id = name + Date.now().toString();
+      subs.push({ id, name: `new item ${name}`, });
+      // 这里触发响应式更新，单独修改subs数组可能不会触发视图更新
+      data.subs = [...subs];
+      refs.tree!.methods.refreshCheckStatus(treeNode);
+      refs.tree!.methods.expand(id);
+    },
+    deleteItem: (e: MouseEvent, treeNode: iTreeNode) => {
+      e.stopPropagation();
+      let { data, parent } = treeNode;
+      const subs = parent!.data.subs as any[];
+      const ids = subs.map(item => item.id);
+      subs.splice(ids.indexOf(data.id), 1);
+      if (subs.length === 0) {
+        parent!.data.subs = null;
+      }
+      refs.tree!.methods.refreshCheckStatus(treeNode.parent!);
+      refs.tree!.methods.clearInvalidChecked();
+    },
+    clear: (e: MouseEvent, treeNode: iTreeNode) => {
+      e.stopPropagation();
+      treeNode.data.subs = null;
+      refs.tree!.methods.clearInvalidChecked();
+    },
+    renderContent: ({ treeNode }: { treeNode: iTreeNode }) => (
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div>
+          <div style={{
+            backgroundColor: `var(--${getComponentCls('primary-1')})`,
+            borderRadius: '2px',
+            display: 'inline-block',
+            marginRight: '4px',
+            color: `var(--${getComponentCls('primary-6')})`,
+            fontSize: '12px',
+            zoom: '0.8',
+            padding: "4px 4px",
+            lineHeight: "1em",
+          }}>
+            {buildIndex(treeNode)}
+          </div>
+          {treeNode.data.name}
+        </div>
+        <ButtonGroup mode="text">
+          <Button label="Add" onClick={e => renderDemo.addItem(e, treeNode)} size="mini"/>
+          <Button label="Del" onClick={e => renderDemo.deleteItem(e, treeNode)} size="mini" status="error"/>
+        </ButtonGroup>
+      </div>
+    )
+  };
+
+  return () => (
+    <DemoRow title="渲染函数渲染内容">
+
+      <ButtonGroup style={{ display: 'inline-block' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Tree
+        v-model={state.checked}
+        multiple
+        ref={onRef.tree}
+        data={renderDemo.treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        showConnector
+        defaultExpandAll
+        displayBlock
+        style={{ width: '500px' }}
+        renderContent={renderDemo.renderContent}
+      />
+    </DemoRow>
+  );
+});
+
+export const demoNodeIcon = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  return () => (
+    <DemoRow title="节点图标">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Tree
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        nodeIcon={treeNode => treeNode.isLeaf() ? 'pi-star' : 'pi-star-fill'}
+      />
+    </DemoRow>
+  );
+});
+
+export const demoAccording = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  return () => (
+    <DemoRow title="手风琴模式，打开节点的时候关闭兄弟节点">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Tree
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        according
+      />
+    </DemoRow>
+  );
+});
+
+export const demoFilter = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    filterText: null as any
+  });
+
+  return () => (
+    <DemoRow title="可筛选">
+      <Input v-model={state.filterText} width="200px" suffixIcon="pi-search" style={{ marginBottom: '4px' }} placeholder="search keywords"/>
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Tree
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        filterText={state.filterText}
+        defaultExpandAll
+      />
+    </DemoRow>
+  );
+});
+
+export const demoIcon = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  return () => (
+    <DemoRow title="展开图标">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Tree
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        folderExpandIcon="pi-minus"
+        folderCollapseIcon="pi-plus"
+        leafIcon="pi-user"
+        expanderCover
+      />
+    </DemoRow>
+  );
+});
+
+export const demoVirtual = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  return () => (
+    <DemoRow title="虚拟滚动">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['1144179485591994368'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+      </ButtonGroup>
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <div style={{ height: '500px', margin: '20px 0' }}>
+        <Tree
+          v-model={state.checked}
+          ref={onRef.tree}
+          data={addressData}
+          keyField="id"
+          labelField="name"
+          childrenField="children"
+          multiple
+          virtual
+          innerAttrs={{
+            style: {
+              backgroundColor: `var(--custom-background-hover)`,
+            }
+          }}
+        />
+      </div>
+    </DemoRow>
+  );
+});
+
+export const demoDraggable = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const isLeaf = (nodeData: any) => {
+    return !nodeData.subs || nodeData.subs.length === 0;
+  };
+
+  return () => (
+    <DemoRow title="可拖拽">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Tree
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        draggable
+        defaultExpandAll
+        isLeaf={isLeaf}
+      >
+        {{
+          default: ({ treeNode: { data } }: { treeNode: iTreeNode }) => (
+            <span style={{
+              color: ({
+                1: '#12b4a5',
+                2: '#00CC00',
+                3: '#F38585',
+              } as any)[data.id.charAt(0)]
+            }}>
+                {data.name}
+            </span>
+          )
+        }}
+      </Tree>
+    </DemoRow>
+  );
+});
+
+export const demoCheckAbleDraggable = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+  });
+
+  const isLeaf = (nodeData: any) => {
+    return !nodeData.subs || nodeData.subs.length === 0;
+  };
+
+  return () => (
+    <DemoRow title="可拖拽 + 可选中">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button onClick={() => {$message(state.checked?.map(i => i.name).join('_'));}}>获取绑定节点</Button>
+        <Button mode="fill">多值绑定：{state.checked?.map(i => i.name).join('，')}</Button>
+      </ButtonGroup>
+
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部选中" onClick={() => refs.tree!.methods.checkAll()}/>
+        <Button label="全部取消" onClick={() => refs.tree!.methods.unCheckAll()}/>
+        <Button label="根据key选中部分节点" onClick={() => refs.tree!.methods.check(['2-2-2', '3-1-2', '3-2-1'])}/>
+      </ButtonGroup>
+
+      <Tree
+        v-model={state.checked}
+        multiple
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        draggable
+        defaultExpandAll
+        isLeaf={isLeaf}
+      >
+        {{
+          default: ({ treeNode: { data } }: { treeNode: iTreeNode }) => (
+            <span style={{
+              color: ({
+                1: '#12b4a5',
+                2: '#00CC00',
+                3: '#F38585',
+              } as any)[data.id.charAt(0)]
+            }}>
+                {data.name}
+            </span>
+          )
+        }}
+      </Tree>
+    </DemoRow>
+  );
+});
+
+export const demoAllowDraggable = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const isLeaf = (nodeData: any) => {
+    return !nodeData.subs || nodeData.subs.length === 0;
+  };
+  const isAllowDraggable: iTreeProps["isAllowDraggable"] = (dragNode) => {
+    return !dragNode.data.id.startsWith('2-2');
+  };
+  const isAllowDroppable: iTreeProps["isAllowDroppable"] = (dragNode, modeNode) => {
+    return !modeNode.data.id.startsWith('3');
+  };
+
+  return () => (
+    <DemoRow title="可拖拽可放置控制">
+      <Alert style={{ marginBottom: '8px' }}>
+        <div>2-2开头的id不能被拖拽</div>
+        <div>3开头的id不能放置任何节点</div>
+      </Alert>
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+      </ButtonGroup>
+      <Tree
+        ref={onRef.tree}
+        data={treeData}
+        keyField="id"
+        labelField="name"
+        childrenField="subs"
+        draggable
+        defaultExpandAll
+        isLeaf={isLeaf}
+        isAllowDraggable={isAllowDraggable}
+        isAllowDroppable={isAllowDroppable}
+      >
+        {{
+          default: ({ treeNode: { data } }: { treeNode: iTreeNode }) => (
+            <span style={{
+              color: ({
+                1: '#12b4a5',
+                2: '#00CC00',
+                3: '#F38585',
+              } as any)[data.id.charAt(0)]
+            }}>
+                {data.name}
+            </span>
+          )
+        }}
+      </Tree>
+    </DemoRow>
+  );
+});
+
+export const demoVirtualDraggable = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+    undoDraggier: false,
+  });
+
+  const onDragChange = (data: iTreeDragChangeData) => {
+    console.log(data);
+    if (state.undoDraggier) {
+      delay(2000).then(() => {data.undo();});
+    }
+  };
+
+  return () => (
+    <DemoRow title="虚拟滚动+拖拽+多选 示例">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+        <Button>
+          <Checkbox v-model={state.undoDraggier} label="拖拽移动2s后撤回拖拽操作"/>
+        </Button>
+      </ButtonGroup>
+      <div style={{ height: '500px', margin: '20px 0' }}>
+        <Tree
+          v-model={state.checked}
+          ref={onRef.tree}
+          data={addressData}
+          keyField="id"
+          labelField="name"
+          childrenField="children"
+          multiple
+          virtual
+          draggable
+          onDragChange={onDragChange}
+          innerAttrs={{
+            style: {
+              // backgroundColor: `var(--custom-background-hover)`,
+            }
+          }}
+        />
+      </div>
+    </DemoRow>
+  );
+});
+
+
+export const demoCustomDraggier = designPage(() => {
+
+  const { refs, onRef } = useRefs({ tree: Tree });
+
+  const state = reactive({
+    checked: [] as any[],
+    undoDraggier: false,
+  });
+
+  const onDragChange = (data: iTreeDragChangeData) => {
+    console.log(data);
+    if (state.undoDraggier) {
+      delay(2000).then(() => {data.undo();});
+    }
+  };
+
+  const getNodeOptions = (treeNode: iTreeNode): iTreeNodeWithMenuOption[] | undefined => {
+    if (treeNode.level === 0) {
+      return [
+        { label: '新建菜单', onClick: () => {$message(`${treeNode.label()} -> 新建菜单`);} },
+        { label: '新建菜单分组', onClick: () => {$message(`${treeNode.label()} -> 新建菜单分组`);} },
+      ];
+    }
+    if (treeNode.level === 1) {
+      return [
+        { label: '新建菜单', onClick: () => {$message(`${treeNode.label()} -> 新建菜单`);} },
+      ];
+    }
+  };
+
+  return () => (
+    <DemoRow title="自定义拖拽节点">
+      <ButtonGroup style={{ margin: '4px 0' }}>
+        <Button label="全部展开" onClick={() => refs.tree!.methods.expandAll()}/>
+        <Button label="全部收起" onClick={() => refs.tree!.methods.collapseAll()}/>
+        <Button label="展开特定节点" onClick={() => refs.tree!.methods.expand(['2-2-2'])}/>
+        <Button label="展开部分节点" onClick={() => refs.tree!.methods.expand(['2-2-2', '3-1-2'])}/>
+        <Button label="当前选中节点" onClick={() => {
+          const current = refs.tree!.methods.getCurrent();
+          $message(!!current ? current.data.name : '未选中任何节点！');
+        }}/>
+        <Button label="展开并且设置当前选中节点" onClick={() => {
+          refs.tree!.methods.expand('2-2-2');
+          refs.tree!.methods.setCurrent('2-2-2');
+        }}/>
+        <Button>
+          <Checkbox v-model={state.undoDraggier} label="拖拽移动2s后撤回拖拽操作"/>
+        </Button>
+      </ButtonGroup>
+      <Layout style={{ marginTop: '16px' }}>
+        <LayoutSection position="left" modelValue={120}>
+          <Tree
+            v-model={state.checked}
+            ref={onRef.tree}
+            data={addressData}
+            keyField="id"
+            labelField="name"
+            childrenField="children"
+            singleValueType="last"
+            virtual
+            onDragChange={onDragChange}
+            draggable
+            customDraggier
+            expandOnClickNode
+            v-slots={{
+              default: ({ treeNode }: { treeNode: iTreeNode }) => (
+                <TreeNodeWithMenu treeNode={treeNode} dropdownOptions={getNodeOptions(treeNode)}/>
+              )
+            }}
+          />
+        </LayoutSection>
+        <LayoutSection>
+          <div style={{ height: '500px', padding: '0 16px' }}>
+            内容区域
+          </div>
+        </LayoutSection>
+      </Layout>
+
+    </DemoRow>
+  );
+});