fix(pro:tree): add height prop supports, update proTree header height and container padding

packages/pro/tree/demo/Basic.vue

@@ -7,6 +7,7 @@
     class="demo-pro-tree"
     placeholder="搜索"
     :style="{ height: '400px' }"
+    :height="321"
     :checkable="true"
     :dataSource="treeData"
     :onSearch="onSearch"

packages/pro/tree/docs/Api.zh.md

@@ -28,6 +28,7 @@
 | `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - |
 | `expandIcon` | 树节点展开图标 | `string \| [string, string] \| #expandIcon="{key: VKey, expanded: boolean, node: TreeNode}"` | `['minus-square', 'plus-square']` | - | 当为数组时表示[`展开时图标`,`未展开时图标`] |
 | `header` | 树的头部 | `string \| HeaderProps \| #header="{expanded, onClick}"` | - | - | - |
+| `height` | 设置虚拟滚动容器高度 | `number` | - | - | - |
 | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | - | - |
 | `labelKey` | 替代[TreeNode](#TreeNode)中的`label`字段 | `string` | `label` | - | - |
 | `leafLineIcon` | 叶子节点的图标，用于替换默认的连接线 | `string \| #leafLineIcon` | - | - | 仅在 `showLine` 时生效 |

packages/pro/tree/src/ProTree.tsx

@@ -104,6 +104,7 @@ export default defineComponent({
         expandIcon: props.expandIcon,
         empty: props.empty,
         getKey: props.getKey,
+        height: props.height,
         labelKey: props.labelKey,
         leafLineIcon: props.leafLineIcon,
         showLine: props.showLine,

packages/pro/tree/src/types.ts

@@ -50,6 +50,7 @@ export const proTreeProps = {
   },
   getKey: { type: [String, Function] as PropType<string | ((data: TreeNode<any>) => any)>, default: undefined },
   header: { type: [String, Object] as PropType<string | HeaderProps>, default: undefined },
+  height: Number,
   labelKey: { type: String, default: undefined },
   leafLineIcon: { type: String, default: undefined },
   loadChildren: { type: Function as PropType<(node: TreeNode<any>) => Promise<TreeNode<any>[]>>, default: undefined },

packages/pro/tree/style/index.less

@@ -40,9 +40,8 @@
     }
 
     .@{icon-prefix},
-    .@{header-prefix} {
+    .@{header-prefix}-content {
       height: @pro-tree-header-wrapper-height;
-      line-height: @pro-tree-header-wrapper-height;
     }
 
     & + .@{divider-prefix} {

packages/pro/tree/style/themes/default.variable.less

@@ -1,13 +1,13 @@
 @pro-tree-border: 1px solid @color-graphite-l30;
-@pro-tree-padding: 4px 0 8px 0;
+@pro-tree-padding: 0;
 @pro-tree-header-search-wrapper-gap: 4px;
 @pro-tree-header-search-wrapper-horizontal-spacing: 12px;
 @pro-tree-header-search-wrapper-vertical-spacing: 0;
 @pro-tree-search-wrapper-margin-bottom: 8px;
 @pro-tree-search-input-suffix-color: @color-graphite-l10;
 @pro-tree-header-wrapper-icon-font-size: @font-size-lg;
 @pro-tree-header-wrapper-icon-hover-color: @color-primary;
-@pro-tree-header-wrapper-height: 32px;
+@pro-tree-header-wrapper-height: 38px;
 @pro-tree-divider-horizontal-spacing: @pro-tree-header-search-wrapper-horizontal-spacing;
 @pro-tree-divider-vertical-spacing: 8px;
 @pro-tree-node-padding: 0 0 0 8px;