style: fix basic tree style alignment (#3487)

src/components/Tree/src/BasicTree.vue

@@ -402,12 +402,12 @@
           const iconDom = icon ? (
             <TreeIcon icon={icon} />
           ) : slots.icon ? (
-            <span class="mr-1">{getSlot(slots, 'icon')}</span>
+            <span class="mr-2">{getSlot(slots, 'icon')}</span>
           ) : null;
 
           item[titleField] = (
             <span
-              class={`${bem('title')} pl-2`}
+              class={`${bem('title')}`}
               onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
             >
               {slots?.title ? (

src/components/Tree/src/TreeIcon.ts

@@ -6,7 +6,7 @@ import Icon from '@/components/Icon/Icon.vue';
 export const TreeIcon = ({ icon }: { icon: VNode | string | undefined }) => {
   if (!icon) return null;
   if (isString(icon)) {
-    return h(Icon, { icon, class: 'mr-1' });
+    return h(Icon, { icon, class: 'mr-2' });
   }
   return h(Icon);
 };

src/components/Tree/src/components/TreeHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="bem()" class="flex px-2 py-1.5 items-center">
+  <div :class="bem()" class="flex mb-1 px-2 py-1.5 items-center">
     <slot name="headerTitle" v-if="slots.headerTitle"></slot>
     <BasicTitle :helpMessage="helpMessage" v-if="!slots.headerTitle && title">
       {{ title }}

src/components/Tree/style/index.less

@@ -3,13 +3,22 @@
 .@{tree-prefix-cls} {
   background-color: @component-background;
 
+  .ant-tree {
+    .ant-tree-checkbox {
+      margin-block-start: 0;
+      margin-inline-start: 4px;
+      margin-inline-end: 4px;
+
+      & + span {
+        padding-left: 4px;
+      }
+    }
+  }
+
   .ant-tree-node-content-wrapper {
     position: relative;
 
     .ant-tree-title {
-      position: absolute;
-      left: 0;
-      width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

src/views/demo/tree/index.vue

@@ -3,7 +3,7 @@
     <Row :gutter="[16, 16]">
       <Col :span="8">
         <BasicTree title="基础示例，默认展开第一层" :treeData="treeData" defaultExpandLevel="1">
-          <template #icon><SmileTwoTone /></template>
+          <template #icon><SmileTwoTone style="font-size: 16px" /></template>
           <template #title>666</template>
           <template #switcherIcon> <CarryOutOutlined /></template>
         </BasicTree>