From 9949124a82f45fcdcd91b9b1bbe2d37a6945111b Mon Sep 17 00:00:00 2001
From: danranVm <danranvm@gmail.com>
Date: Wed, 28 Jun 2023 16:25:06 +0800
Subject: [PATCH] fix(comp:tree): improve browser compatibility (#1585)

---
 packages/cdk/forms/demo/CustomForm.vue    |   4 +-
 packages/components/tree/style/index.less | 451 +++++++++++-----------
 2 files changed, 225 insertions(+), 230 deletions(-)

diff --git a/packages/cdk/forms/demo/CustomForm.vue b/packages/cdk/forms/demo/CustomForm.vue
index e34bfad5b..252fc699f 100644
--- a/packages/cdk/forms/demo/CustomForm.vue
+++ b/packages/cdk/forms/demo/CustomForm.vue
@@ -12,10 +12,10 @@ defineProps<{
 }>()
 
 // 通过 props.control 拿到真正的 control(AbstractControl)
-const control = useControl()
+const controlRef = useControl()
 
 // 注入 control, 以便子组件通过 key 获取对应的子 control
-provide(FORMS_CONTROL_TOKEN, control)
+provide(FORMS_CONTROL_TOKEN, controlRef)
 </script>
 
 <style scoped lang="less">
diff --git a/packages/components/tree/style/index.less b/packages/components/tree/style/index.less
index 0ffad9e92..f4f448bd4 100644
--- a/packages/components/tree/style/index.less
+++ b/packages/components/tree/style/index.less
@@ -8,314 +8,309 @@
   background-color: @tree-background-color;
   border-radius: @border-radius-sm;
 
-  & & {
-    &-content-inner {
-      display: flex;
-      flex-flow: column wrap;
-    }
+  &-content-inner {
+    display: flex;
+    flex-flow: column wrap;
   }
 
-  && {
-    &-focused:not(:hover):not(&-active) {
-      background-color: @tree-background-color-focused;
-    }
+  &-focused:not(:hover):not(&-active) {
+    background-color: @tree-background-color-focused;
+  }
 
-    &-auto-height {
-      height: 100%;
+  &-auto-height {
+    height: 100%;
 
-      .@{tree-prefix}-content {
-        height: 100%;
-      }
+    .@{tree-prefix}-content {
+      height: 100%;
     }
+  }
 
-    &-blocked {
-      .@{tree-node-prefix} {
-        transition: background-color @transition-duration-base;
+  &-blocked {
+    .@{tree-node-prefix} {
+      transition: background-color @transition-duration-base;
 
-        &-active:not(&-disabled),
-        &-selected:not(&-disabled) {
-          background-color: @tree-node-selected-background-color;
+      &-active:not(&-disabled),
+      &-selected:not(&-disabled) {
+        background-color: @tree-node-selected-background-color;
 
-          &:hover {
+        &:hover {
+          background-color: @tree-node-hover-background-color;
+          .@{tree-node-prefix}-content {
             background-color: @tree-node-hover-background-color;
-            .@{tree-node-prefix}-content {
-              background-color: @tree-node-hover-background-color;
-            }
           }
         }
+      }
 
-        &:hover {
-          background-color: @tree-node-hover-background-color;
+      &:hover {
+        background-color: @tree-node-hover-background-color;
 
-          .@{tree-node-prefix} {
-            &-draggable-icon {
-              opacity: 1;
-            }
+        .@{tree-node-prefix} {
+          &-draggable-icon {
+            opacity: 1;
+          }
 
-            &-content {
-              background-color: @tree-node-hover-background-color;
-            }
+          &-content {
+            background-color: @tree-node-hover-background-color;
           }
         }
+      }
 
-        &-content {
-          flex: auto;
-        }
+      &-content {
+        flex: auto;
       }
     }
+  }
 
-    &-show-line {
-      .@{tree-node-prefix} {
-        &-last {
-          .@{tree-node-prefix}-leaf-line {
-            &::before {
-              bottom: 50%;
-            }
+  &-show-line {
+    .@{tree-node-prefix} {
+      &-last {
+        .@{tree-node-prefix}-leaf-line {
+          &::before {
+            bottom: 50%;
           }
         }
+      }
 
-        &-expand {
-          position: relative;
-          color: @tree-expand-icon-color;
+      &-expand {
+        position: relative;
+        color: @tree-expand-icon-color;
 
-          &-top-line {
-            position: absolute;
-            height: (@tree-node-content-height / 2 - 4);
-            /* stylelint-disable function-no-unknown */
-            top: -(@tree-node-content-height / 4 - 4);
-            right: 50%;
-            .vertical-line();
-          }
+        &-top-line {
+          position: absolute;
+          height: (@tree-node-content-height / 2 - 4);
+          /* stylelint-disable function-no-unknown */
+          top: -(@tree-node-content-height / 4 - 4);
+          right: 50%;
+          .vertical-line();
+        }
+
+        &::after {
+          position: absolute;
+          top: calc(50% - @tree-node-line-size / 2);
+          right: -2px;
+          width: (@tree-node-icon-width / 4);
+          z-index: 1;
+          .horizontal-line();
 
-          &::after {
+          content: ' ';
+        }
+      }
+
+      &:not(&-expanded):not(&-last) {
+        .@{tree-node-prefix}-expand {
+          &::before {
             position: absolute;
-            top: calc(50% - @tree-node-line-size / 2);
-            right: -2px;
-            width: (@tree-node-icon-width / 4);
+            top: (@tree-node-content-height - 6);
+            right: 50%;
+            height: (@tree-node-content-height / 2 - 4);
             z-index: 1;
-            .horizontal-line();
+            .vertical-line();
 
             content: ' ';
           }
         }
-
-        &:not(&-expanded):not(&-last) {
-          .@{tree-node-prefix}-expand {
-            &::before {
-              position: absolute;
-              top: (@tree-node-content-height - 6);
-              right: 50%;
-              height: (@tree-node-content-height / 2 - 4);
-              z-index: 1;
-              .vertical-line();
-
-              content: ' ';
-            }
-          }
-        }
       }
+    }
 
-      .@{tree-node-prefix}-indent {
-        align-self: stretch;
-        white-space: nowrap;
+    .@{tree-node-prefix}-indent {
+      align-self: stretch;
+      white-space: nowrap;
 
-        &-unit {
-          position: relative;
-          height: 100%;
+      &-unit {
+        position: relative;
+        height: 100%;
 
-          &::before {
-            position: absolute;
-            top: -@tree-node-padding-vertical;
-            right: (@tree-node-icon-width / 2);
-            bottom: -@tree-node-padding-vertical + 1;
-            .vertical-line();
+        &::before {
+          position: absolute;
+          top: -@tree-node-padding-vertical;
+          right: (@tree-node-icon-width / 2);
+          bottom: -@tree-node-padding-vertical + 1;
+          .vertical-line();
 
-            content: '';
-          }
+          content: '';
         }
       }
     }
+  }
 
-    &-empty {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+  &-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &:not(&-virtual) &-content {
     overflow: auto;
   }
+}
 
-  .@{tree-node-prefix} {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: @tree-node-padding-vertical 0;
-    white-space: nowrap;
-
-    .@{icon-prefix} {
-      font-size: @tree-icon-font-size;
-    }
-
-    &-indent {
+.@{tree-node-prefix} {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: @tree-node-padding-vertical 0;
+  white-space: nowrap;
 
-      &-noop-unit,
-      &-unit {
-        display: inline-block;
-        width: @tree-node-icon-width;
-      }
-    }
+  .@{icon-prefix} {
+    font-size: @tree-icon-font-size;
+  }
 
-    &-draggable-icon {
-      cursor: pointer;
-      opacity: 0.4;
-      transition: opacity @transition-duration-base @ease-in-out;
+  &-indent {
+    &-noop-unit,
+    &-unit {
+      display: inline-block;
       width: @tree-node-icon-width;
-      height: @tree-node-content-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &-noop {
-        width: @tree-node-icon-width;
-      }
     }
+  }
 
-    &-expand {
-      width: @tree-node-icon-width;
-      height: @tree-node-content-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
+  &-draggable-icon {
+    cursor: pointer;
+    opacity: 0.4;
+    transition: opacity @transition-duration-base @ease-in-out;
+    width: @tree-node-icon-width;
+    height: @tree-node-content-height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-      &-noop {
-        cursor: default;
-      }
+    &-noop {
+      width: @tree-node-icon-width;
     }
+  }
 
-    &-checkbox {
-      margin: @tree-node-checkbox-margin;
-    }
+  &-expand {
+    width: @tree-node-icon-width;
+    height: @tree-node-content-height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
 
-    &-leaf {
-      width: @tree-node-icon-width;
-      align-self: stretch;
-      text-align: center;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    &-noop {
       cursor: default;
+    }
+  }
 
-      &-line {
-        position: relative;
-        z-index: 1;
-        display: block;
-        height: 100%;
-        width: 100%;
-
-        &::before {
-          position: absolute;
-          top: -@tree-node-padding-vertical;
-          right: (@tree-node-icon-width / 2);
-          bottom: -@tree-node-padding-vertical + 1;
-          .vertical-line();
-
-          content: ' ';
-        }
-
-        &::after {
-          position: absolute;
-          top: 50%;
-          bottom: 0;
-          left: 55%;
-          right: 0;
-          .horizontal-line();
+  &-checkbox {
+    margin: @tree-node-checkbox-margin;
+  }
 
-          content: ' ';
-        }
-      }
-    }
+  &-leaf {
+    width: @tree-node-icon-width;
+    align-self: stretch;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
 
-    &-content {
+    &-line {
       position: relative;
-      display: inline-flex;
-      cursor: pointer;
-      min-height: @tree-node-content-height;
-      line-height: @tree-node-content-height;
-      transition: background-color @transition-duration-base;
-      padding: @tree-node-content-padding;
+      z-index: 1;
+      display: block;
+      height: 100%;
+      width: 100%;
 
-      &:hover {
-        background-color: @tree-node-hover-background-color;
-      }
+      &::before {
+        position: absolute;
+        top: -@tree-node-padding-vertical;
+        right: (@tree-node-icon-width / 2);
+        bottom: -@tree-node-padding-vertical + 1;
+        .vertical-line();
 
-      &-prefix,
-      &-suffix {
-        display: flex;
-        justify-items: center;
-        align-items: center;
+        content: ' ';
       }
 
-      &-label {
-        display: inline-block;
-        flex-grow: 1;
-        padding: @tree-node-content-label-padding;
+      &::after {
+        position: absolute;
+        top: 50%;
+        bottom: 0;
+        left: 55%;
+        right: 0;
+        .horizontal-line();
 
-        &-highlight {
-          color: @tree-node-content-label-highlight-color;
-        }
+        content: ' ';
       }
     }
+  }
 
-    &-active:not(&-disabled) .@{tree-node-prefix}-content {
+  &-content {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    min-height: @tree-node-content-height;
+    line-height: @tree-node-content-height;
+    transition: background-color @transition-duration-base;
+    padding: @tree-node-content-padding;
+
+    &:hover {
       background-color: @tree-node-hover-background-color;
     }
 
-    &-selected:not(&-disabled) .@{tree-node-prefix}-content {
-      background-color: @tree-node-selected-background-color;
-      color: @tree-node-selected-color;
-
-      &:hover {
-        background-color: @tree-node-hover-background-color;
-      }
+    &-prefix,
+    &-suffix {
+      display: flex;
+      justify-items: center;
+      align-items: center;
     }
 
-    &-disabled .@{tree-node-prefix}-content {
-      color: @tree-node-disabled-color;
-      cursor: not-allowed;
+    &-label {
+      display: inline-block;
+      flex-grow: 1;
+      padding: @tree-node-content-label-padding;
 
-      &:hover {
-        background: transparent;
+      &-highlight {
+        color: @tree-node-content-label-highlight-color;
       }
     }
+  }
 
-    &-drop-parent,
-    &-drop-inside,
-    &-drop-before .@{tree-node-prefix}-content,
-    &-drop-after .@{tree-node-prefix}-content {
-      position: relative;
-      &::after {
-        content: ' ';
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-      }
-    }
-    
-    &-drop-parent::after,
-    &-drop-inside::after {
-      border: @tree-box-shadow-size solid @tree-box-shadow-color;
+  &-active:not(&-disabled) .@{tree-node-prefix}-content {
+    background-color: @tree-node-hover-background-color;
+  }
+
+  &-selected:not(&-disabled) .@{tree-node-prefix}-content {
+    background-color: @tree-node-selected-background-color;
+    color: @tree-node-selected-color;
+
+    &:hover {
+      background-color: @tree-node-hover-background-color;
     }
+  }
 
-    &-drop-before .@{tree-node-prefix}-content::after {
-      border-top: @tree-box-shadow-size solid @tree-box-shadow-color;
+  &-disabled .@{tree-node-prefix}-content {
+    color: @tree-node-disabled-color;
+    cursor: not-allowed;
+
+    &:hover {
+      background: transparent;
     }
-    &-drop-after .@{tree-node-prefix}-content::after {
-      border-bottom: @tree-box-shadow-size solid @tree-box-shadow-color;
+  }
+
+  &-drop-parent,
+  &-drop-inside,
+  &-drop-before .@{tree-node-prefix}-content,
+  &-drop-after .@{tree-node-prefix}-content {
+    position: relative;
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
     }
   }
+
+  &-drop-parent::after,
+  &-drop-inside::after {
+    border: @tree-box-shadow-size solid @tree-box-shadow-color;
+  }
+
+  &-drop-before .@{tree-node-prefix}-content::after {
+    border-top: @tree-box-shadow-size solid @tree-box-shadow-color;
+  }
+  &-drop-after .@{tree-node-prefix}-content::after {
+    border-bottom: @tree-box-shadow-size solid @tree-box-shadow-color;
+  }
 }