@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/tree/rtl.scss

@@ -5,55 +5,63 @@ $module: #{$prefix}-tree;
     .#{$module} {
         direction: rtl;
     }
-    
+
     .#{$module}-wrapper {
         direction: rtl;
     }
-    
+
     .#{$module}-option-list {
         direction: rtl;
-    
+
         .#{$module}-option-expand-icon,
         .#{$module}-option-empty-icon {
             margin-right: 0;
             margin-left: $spacing-tree_icon-marginRight;
         }
-    
+
         .#{$module}-option {
+            padding-left: 0;
+            padding-right: $spacing-tree_option_level1-paddingLeft;
             &-label {
                 & > .#{$prefix}-icon {
                     margin-right: 0;
                     margin-left: $spacing-tree_icon-marginRight;
                 }
-    
+
                 .#{$prefix}-checkbox {
                     margin-right: 0;
                     margin-left: $spacing-tree_icon-marginRight;
                 }
             }
-    
+
             &-collapsed {
                 .#{$module}-option-expand-icon {
                     transform: rotate(90deg);
                 }
             }
         }
-    
+
         @for $i from 1 through 20 {
-            .#{$module}-option-level-#{$i} {
+            li.#{$module}-option.#{$module}-option-fullLabel-level-#{$i} {
                 padding-left: 0;
                 padding-right: $spacing-tree_option_level-paddingLeft * ($i - 1) + $spacing-tree_option_level1-paddingLeft;
             }
         }
-    
+
         .#{$module}-option-label-empty {
             padding-left: auto;
             padding-right: 0;
         }
+
+        .#{$module}-option {
+            &-switcher {
+                margin-right: 0;
+                margin-left: $spacing-tree_icon-marginRight;
+            }
+        }
     }
-    
+
     .#{$module}-option-list-block {
         direction: rtl;
     }
 }
-

package/lib/es/tree/tree.css

@@ -27,6 +27,7 @@
   box-sizing: border-box;
   padding-top: 4px;
   padding-bottom: 4px;
+  padding-left: 8px;
 }
 .semi-tree-option-list li > .semi-tree-option-label {
   list-style-type: none;
@@ -103,9 +104,7 @@
 .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon {
   transform: rotate(270deg);
 }
-.semi-tree-option-list .semi-tree-option-highlight,
-.semi-tree-option-list .semi-tree-option-highlight .semi-checkbox-addon, .semi-tree-option-list .semi-tree-option-filtered,
-.semi-tree-option-list .semi-tree-option-filtered .semi-checkbox-addon {
+.semi-tree-option-list .semi-tree-option-highlight {
   font-weight: 600;
   color: var(--semi-color-primary);
 }
@@ -127,7 +126,6 @@
 .semi-tree-option-list .semi-tree-option-draggable {
   box-sizing: border-box;
   border-left: 2px solid transparent;
-  margin-top: -2px;
 }
 .semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-label {
   border-top: 2px transparent solid;
@@ -139,6 +137,17 @@
 .semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-bottom {
   border-bottom: 2px var(--semi-color-primary) solid;
 }
+.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-indent .semi-tree-option-indent-unit:before {
+  top: 0px;
+  bottom: 0px;
+}
+.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-switcher-leaf-line::before {
+  top: 0px;
+  bottom: 0px;
+}
+.semi-tree-option-list .semi-tree-option-draggable.semi-tree-option-tree-node-last-leaf .semi-tree-option-switcher-leaf-line::before {
+  height: 50%;
+}
 .semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-top {
   border-top: 2px var(--semi-color-primary) solid;
 }
@@ -161,12 +170,74 @@
   right: -1px;
   border-top: 2px solid var(--semi-color-primary);
 }
+.semi-tree-option-list .semi-tree-option-indent {
+  align-self: stretch;
+  white-space: nowrap;
+  user-select: none;
+}
+.semi-tree-option-list .semi-tree-option-indent-unit {
+  display: inline-block;
+  width: 20px;
+}
+.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit {
+  position: relative;
+  height: 100%;
+}
+.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit::before {
+  position: absolute;
+  top: -4px;
+  inset-inline-start: 6px;
+  bottom: -4px;
+  border-inline-end: 1px solid var(--semi-color-text-3);
+  content: "";
+}
+.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit-end::before {
+  display: none;
+}
+.semi-tree-option-list .semi-tree-option-switcher {
+  position: relative;
+  flex: none;
+  align-self: stretch;
+  width: 12px;
+  margin: 0;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  margin-right: 8px;
+}
+.semi-tree-option-list .semi-tree-option-switcher-leaf-line {
+  z-index: 1;
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+.semi-tree-option-list .semi-tree-option-switcher-leaf-line::before {
+  position: absolute;
+  top: -4px;
+  inset-inline-start: 6px;
+  bottom: -4px;
+  border-inline-end: 1px solid var(--semi-color-text-3);
+  content: "";
+}
+.semi-tree-option-list .semi-tree-option-switcher-leaf-line::after {
+  box-sizing: border-box;
+  position: absolute;
+  width: 8px;
+  height: 50%;
+  border-bottom: 1px solid var(--semi-color-text-3);
+  content: "";
+  margin-inline-start: 1px;
+}
+.semi-tree-option-list .semi-tree-option-tree-node-last-leaf .semi-tree-option-switcher-leaf-line::before {
+  height: calc(50% + 4px);
+}
 .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option {
   padding-top: 0px;
   padding-bottom: 0px;
 }
 .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-label {
-  padding: 3px 0;
+  padding: 2px 0;
 }
 .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected {
   background-color: transparent;
@@ -174,64 +245,64 @@
 .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:hover, .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:active {
   background-color: transparent;
 }
-.semi-tree-option-list .semi-tree-option-level-1 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1 {
   padding-left: 8px;
 }
-.semi-tree-option-list .semi-tree-option-level-2 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2 {
   padding-left: 28px;
 }
-.semi-tree-option-list .semi-tree-option-level-3 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3 {
   padding-left: 48px;
 }
-.semi-tree-option-list .semi-tree-option-level-4 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4 {
   padding-left: 68px;
 }
-.semi-tree-option-list .semi-tree-option-level-5 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5 {
   padding-left: 88px;
 }
-.semi-tree-option-list .semi-tree-option-level-6 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6 {
   padding-left: 108px;
 }
-.semi-tree-option-list .semi-tree-option-level-7 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7 {
   padding-left: 128px;
 }
-.semi-tree-option-list .semi-tree-option-level-8 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8 {
   padding-left: 148px;
 }
-.semi-tree-option-list .semi-tree-option-level-9 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9 {
   padding-left: 168px;
 }
-.semi-tree-option-list .semi-tree-option-level-10 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10 {
   padding-left: 188px;
 }
-.semi-tree-option-list .semi-tree-option-level-11 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11 {
   padding-left: 208px;
 }
-.semi-tree-option-list .semi-tree-option-level-12 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12 {
   padding-left: 228px;
 }
-.semi-tree-option-list .semi-tree-option-level-13 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13 {
   padding-left: 248px;
 }
-.semi-tree-option-list .semi-tree-option-level-14 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14 {
   padding-left: 268px;
 }
-.semi-tree-option-list .semi-tree-option-level-15 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15 {
   padding-left: 288px;
 }
-.semi-tree-option-list .semi-tree-option-level-16 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16 {
   padding-left: 308px;
 }
-.semi-tree-option-list .semi-tree-option-level-17 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17 {
   padding-left: 328px;
 }
-.semi-tree-option-list .semi-tree-option-level-18 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18 {
   padding-left: 348px;
 }
-.semi-tree-option-list .semi-tree-option-level-19 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19 {
   padding-left: 368px;
 }
-.semi-tree-option-list .semi-tree-option-level-20 {
+.semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20 {
   padding-left: 388px;
 }
 .semi-tree-option-list .semi-tree-option-empty:hover, .semi-tree-option-list .semi-tree-option-empty:active {
@@ -278,6 +349,7 @@
 }
 .semi-tree-option-list-block .semi-tree-option-spin-icon {
   display: flex;
+  line-height: 0;
   color: var(--semi-color-primary);
 }
 .semi-tree-option-list-block .semi-tree-option-spin-icon svg {
@@ -338,6 +410,11 @@
   margin-right: 0;
   margin-left: 8px;
 }
+.semi-rtl .semi-tree-option-list .semi-tree-option,
+.semi-popover-rtl .semi-tree-option-list .semi-tree-option {
+  padding-left: 0;
+  padding-right: 8px;
+}
 .semi-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon,
 .semi-popover-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon {
   margin-right: 0;
@@ -352,103 +429,103 @@
 .semi-popover-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon {
   transform: rotate(90deg);
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-1,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-1 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1 {
   padding-left: 0;
   padding-right: 8px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-2,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-2 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2 {
   padding-left: 0;
   padding-right: 28px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-3,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-3 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3 {
   padding-left: 0;
   padding-right: 48px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-4,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-4 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4 {
   padding-left: 0;
   padding-right: 68px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-5,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-5 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5 {
   padding-left: 0;
   padding-right: 88px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-6,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-6 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6 {
   padding-left: 0;
   padding-right: 108px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-7,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-7 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7 {
   padding-left: 0;
   padding-right: 128px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-8,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-8 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8 {
   padding-left: 0;
   padding-right: 148px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-9,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-9 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9 {
   padding-left: 0;
   padding-right: 168px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-10,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-10 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10 {
   padding-left: 0;
   padding-right: 188px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-11,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-11 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11 {
   padding-left: 0;
   padding-right: 208px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-12,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-12 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12 {
   padding-left: 0;
   padding-right: 228px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-13,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-13 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13 {
   padding-left: 0;
   padding-right: 248px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-14,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-14 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14 {
   padding-left: 0;
   padding-right: 268px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-15,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-15 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15 {
   padding-left: 0;
   padding-right: 288px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-16,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-16 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16 {
   padding-left: 0;
   padding-right: 308px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-17,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-17 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17 {
   padding-left: 0;
   padding-right: 328px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-18,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-18 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18 {
   padding-left: 0;
   padding-right: 348px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-19,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-19 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19 {
   padding-left: 0;
   padding-right: 368px;
 }
-.semi-rtl .semi-tree-option-list .semi-tree-option-level-20,
-.semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-20 {
+.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20,
+.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20 {
   padding-left: 0;
   padding-right: 388px;
 }
@@ -457,6 +534,11 @@
   padding-left: auto;
   padding-right: 0;
 }
+.semi-rtl .semi-tree-option-list .semi-tree-option-switcher,
+.semi-popover-rtl .semi-tree-option-list .semi-tree-option-switcher {
+  margin-right: 0;
+  margin-left: 8px;
+}
 .semi-rtl .semi-tree-option-list-block,
 .semi-popover-rtl .semi-tree-option-list-block {
   direction: rtl;

package/lib/es/tree/tree.scss

@@ -1,11 +1,9 @@
-@import "./animation.scss";
+@import './animation.scss';
 @import './variables.scss';
 
-
 $module: #{$prefix}-tree;
 
 .#{$module} {
-
     &-search-wrapper {
         padding: $spacing-tree_search_wrapper-paddingY $spacing-tree_search_wrapper-paddingX;
     }
@@ -34,6 +32,7 @@ $module: #{$prefix}-tree;
         box-sizing: border-box;
         padding-top: $spacing-tree_option-paddingTop;
         padding-bottom: $spacing-tree_option-paddingBottom;
+        padding-left: $spacing-tree_option_level1-paddingLeft;
     }
 
     li > .#{$module}-option-label {
@@ -55,8 +54,9 @@ $module: #{$prefix}-tree;
         display: flex;
         align-items: center;
         cursor: pointer;
-        transition: background-color $transition_duration-tree_option-bg $transition_function-tree_option-bg $transition_delay-tree_option-bg;
-        transform:scale($transform_scale-tree-option);
+        transition: background-color $transition_duration-tree_option-bg $transition_function-tree_option-bg
+            $transition_delay-tree_option-bg;
+        transform: scale($transform_scale-tree-option);
 
         @include font-size-regular;
         word-break: break-word;
@@ -134,13 +134,9 @@ $module: #{$prefix}-tree;
             }
         }
 
-        &-highlight,
-        &-filtered {
-            &,
-            .#{$prefix}-checkbox-addon {
-                font-weight: $font-tree_option_hightlight-fontWeight;
-                color: $color-tree_option_hightlight-text;
-            }
+        &-highlight {
+            font-weight: $font-tree_option_hightlight-fontWeight;
+            color: $color-tree_option_hightlight-text;
         }
 
         &-hidden {
@@ -167,7 +163,7 @@ $module: #{$prefix}-tree;
         &-draggable {
             box-sizing: border-box;
             border-left: $width-tree_option_draggable-border solid transparent;
-            margin-top: -$width-tree_option_draggable-border;
+            // margin-top: -$width-tree_option_draggable-border;
 
             .#{$module}-option-label {
                 border-top: $width-tree_option_draggable-border transparent solid;
@@ -179,7 +175,26 @@ $module: #{$prefix}-tree;
             }
 
             .#{$module}-option-drag-over-gap-bottom {
-                border-bottom: $width-tree_option_draggable-border $color-tree_option_draggable_insert-border-default solid;
+                border-bottom: $width-tree_option_draggable-border $color-tree_option_draggable_insert-border-default
+                    solid;
+            }
+
+            .#{$module}-option-indent {
+                .#{$module}-option-indent-unit:before {
+                    top: 0px;
+                    bottom: 0px;
+                }  
+            }
+
+            .#{$module}-option-switcher-leaf-line::before {
+                top: 0px;
+                bottom: 0px;
+            }
+
+            &.#{$module}-option-tree-node-last-leaf {
+                .#{$module}-option-switcher-leaf-line::before {
+                    height: 50%;
+                }
             }
         }
 
@@ -189,7 +204,8 @@ $module: #{$prefix}-tree;
             }
 
             &.#{$module}-option-fullLabel-drag-over-gap-bottom {
-                border-bottom: $width-tree_option_draggable-border $color-tree_option_draggable_insert-border-default solid;
+                border-bottom: $width-tree_option_draggable-border $color-tree_option_draggable_insert-border-default
+                    solid;
             }
         }
 
@@ -211,7 +227,85 @@ $module: #{$prefix}-tree;
                     left: -$width-tree_option_draggable-border;
                     bottom: 0;
                     right: -1px;
-                    border-top: $width-tree_option_draggable-border solid $color-tree_option_draggable_insert-border-default;
+                    border-top: $width-tree_option_draggable-border solid
+                        $color-tree_option_draggable_insert-border-default;
+                }
+            }
+        }
+        &-indent {
+            align-self: stretch;
+            white-space: nowrap;
+            user-select: none;
+            &-unit {
+                display: inline-block;
+                width: $spacing-tree_option_level-paddingLeft;
+            }
+        }
+
+        &-indent-show-line {
+            .#{$module}-option-indent-unit {
+                position: relative;
+                height: 100%;
+
+                &::before {
+                    position: absolute;
+                    top: -$spacing-tree_option-paddingTop;
+                    inset-inline-start: calc($width-tree_emptyIcon / 2);
+                    bottom: -$spacing-tree_option-paddingBottom;
+                    border-inline-end: $width-tree_option_line solid var(--semi-color-text-3);
+                    content: '';
+                }
+
+                &-end {
+                    &::before {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        &-switcher {
+            position: relative;
+            flex: none;
+            align-self: stretch;
+            width: $width-tree_emptyIcon;
+            margin: 0;
+            text-align: center;
+            cursor: pointer;
+            user-select: none;
+            margin-right: $spacing-tree_icon-marginRight;
+            &-leaf-line {
+                z-index: 1;
+                position: relative;
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+
+                &::before {
+                    position: absolute;
+                    top: -$spacing-tree_option-paddingTop;
+                    inset-inline-start: calc($width-tree_emptyIcon / 2);
+                    bottom: -$spacing-tree_option-paddingBottom;
+                    border-inline-end: $width-tree_option_line solid var(--semi-color-text-3);
+                    content: '';
+                }
+
+                &::after {
+                    box-sizing: border-box;
+                    position: absolute;
+                    width: calc(($spacing-tree_option_level-paddingLeft / 2) * 0.8);
+                    height: 50%;
+                    border-bottom: $width-tree_option_line solid var(--semi-color-text-3);
+                    content: '';
+                    margin-inline-start: $width-tree_option_line;
+                }
+            }
+        }
+
+        &-tree-node-last-leaf {
+            .#{$module}-option-switcher-leaf-line {
+                &::before {
+                    height: calc(50% + $spacing-tree_option-paddingTop);
                 }
             }
         }
@@ -236,7 +330,7 @@ $module: #{$prefix}-tree;
     }
 
     @for $i from 1 through 20 {
-        .#{$module}-option-level-#{$i} {
+        li.#{$module}-option.#{$module}-option-fullLabel-level-#{$i} {
             padding-left: $spacing-tree_option_level-paddingLeft * ($i - 1) + $spacing-tree_option_level1-paddingLeft;
         }
     }
@@ -302,6 +396,7 @@ $module: #{$prefix}-tree;
 
         &-spin-icon {
             display: flex;
+            line-height: 0; // make the spin icon in the center
             & svg {
                 width: $width-tree_spinIcon;
                 height: $width-tree_spinIcon;