amis 1.9.0-beta.10 → 1.9.0-beta.12

package/scss/_properties.scss

@@ -1495,8 +1495,10 @@
   --TabsTransfer-border-color: #e8e9eb;
 
   --Tree-indent: var(--gap-md);
+  --Tree-icon-gap: var(--gap-xs);
   --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
   --Tree-item-onHover-bg: rgba(0, 126, 255, 0.08);
+  --Tree-item-onHover-bg-pure: rgba(0, 126, 255, 0.08);
   --Tree-itemArrowWidth: #{px2rem(12px)};
   --Tree-itemHeight: #{px2rem(30px)};
   --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);

package/scss/components/form/_tree.scss

@@ -50,7 +50,7 @@
         top: 2px;
         width: px2rem(16px);
         height: px2rem(16px);
-        margin-left: var(--gap-xs);
+        margin-left: var(--Tree-icon-gap);
       }
     }
   }
@@ -87,26 +87,35 @@
     display: flex;
     align-items: center;
     position: relative;
-
+    user-select: none;
+    margin-bottom: px2rem(4px);
+    padding-left: var(--Tree-icon-gap);
+    & > * {
+      position: relative;
+      z-index: 2;
+    }
+    > .#{$ns}Checkbox {
+      display: inline-flex;
+      align-self: center;
+    }
+  
     &:hover {
-      background: var(--Tree-item-onHover-bg);
+      background: var(--Tree-item-onHover-bg-pure);
     }
+  }
 
-    // & > * {
-    //   position: relative;
-    //   z-index: 2;
-    // }
-
-    // &:hover:after {
-    //   position: absolute;
-    //   content: '';
-    //   z-index: 1;
-    //   background: var(--Tree-item-onHover-bg);
-    //   top: 0;
-    //   right: 0;
-    //   bottom: 0;
-    //   left: -99999px;
-    // }
+  &-item {
+    .is-checked {
+      background: var(--Tree-item-onChekced-bg);
+      border-radius: var(--Tree-item-onChekced-bg-borderRadius);
+    }
+    .is-disabled {
+      color: var(--text--muted-color);
+      background: none;
+      &:hover {
+        background: none;
+      }
+    }
   }
 
   &.is-draggable &-itemLabel:hover::after {
@@ -120,12 +129,12 @@
     vertical-align: top;
     height: var(--Tree-itemHeight);
     line-height: var(--Tree-itemHeight);
-    padding-right: var(--gap-xs);
+    padding-right: var(--Tree-icon-gap);
 
     > a {
       display: inline-block;
       vertical-align: middle;
-      margin-left: var(--gap-xs);
+      margin-left: var(--Tree-icon-gap);
       cursor: pointer;
 
       > svg {
@@ -146,7 +155,7 @@
     > a {
       display: inline-block;
       cursor: pointer;
-      margin-left: var(--gap-sm);
+      margin-left: var(--Tree-icon-gap);
       color: var(--icon-color);
 
       &:hover {
@@ -205,7 +214,7 @@
       width: $svgSize;
       height: $svgSize;
       top: $svgSize * 0.125;
-      margin-right: var(--gap-xs);
+      margin-right: var(--Tree-icon-gap);
     }
   }
 
@@ -213,7 +222,7 @@
     cursor: pointer;
     width: var(--Tree-itemArrowWidth);
     display: inline-flex;
-    margin-right: var(--gap-xs);
+    margin-right: var(--Tree-icon-gap);
 
     // &:before {
     //   font-style: normal;
@@ -236,7 +245,7 @@
 
   &-itemArrowPlaceholder {
     display: inline-block;
-    width: calc(var(--Tree-itemArrowWidth) + var(--gap-xs));
+    width: calc(var(--Tree-itemArrowWidth) + var(--Tree-icon-gap));
   }
 
   &-itemDrager {
@@ -245,12 +254,12 @@
   }
 
   &-spinner {
-    margin-right: var(--gap-xs);
+    margin-right: var(--Tree-icon-gap);
   }
 
   &-itemIcon {
     display: inline-flex;
-    margin-right: var(--gap-xs);
+    margin-right: var(--Tree-icon-gap);
   }
 
   &-rootIcon,
@@ -262,30 +271,16 @@
       height: px2rem(14px);
     }
   }
-
-  &-itemLabel {
-    user-select: none;
-
-    &.is-checked,
-    &.is-children-checked {
-      color: var(--Tree-itemLabel--onChecked-color);
-    }
-
-    &.is-disabled {
-      color: var(--text--muted-color);
-    }
-
-    > .#{$ns}Checkbox {
-      display: inline-flex;
-      align-self: center;
-    }
-  }
+    
 
   &-itemText {
     cursor: pointer;
     flex: 1 auto;
+    color: var(--Form-input-color);
     line-height: var(--lineHeightBase);
-    padding: px2rem(4px) 0;
+  }
+  .is-disabled &-itemText {
+    color: var(--text--muted-color);
   }
 
   &-placeholder {
@@ -313,7 +308,7 @@
 
     &--hover {
       border-radius: 0;
-      background-color: var(--Tree-item-onHover-bg);
+      background-color: var(--Tree-item-onHover-bg-pure);
 
       &::after {
         display: none;

package/scss/themes/_cxd-variables.scss

@@ -632,12 +632,17 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
 
   --Satus-icon-width: #{px2rem(14px)};
 
-  --Tree-itemHeight: #{px2rem(32px)};
-
   --Progress-borderRadius: #{$R7};
 
   --Rating-inactive-color: #{$G9};
 
+  // tree
+  --Tree-item-onHover-bg-pure: #{$G10};
+  --Tree-item-onChekced-bg: var(--Form-select-menu-onHover-bg);
+  --Tree-item-onChekced-bg-borderRadius: #{px2rem(2px)};
+  --Tree-itemHeight: #{px2rem(24px)};
+  --Tree-icon-gap: var(--gap-sm);
+
   // Formula
   --InputFormula-code-bgColor: #{$G10};
 

package/sdk/ang-ie11.css

@@ -42794,12 +42794,39 @@ readers do not read off random characters that represent icons */
   display: flex;
   align-items: center;
   position: relative;
+  user-select: none;
+  margin-bottom: 0.25rem;
+  padding-left: 0.25rem;
+}
+
+.amis-scope .a-Tree-itemLabel > * {
+  position: relative;
+  z-index: 2;
+}
+
+.amis-scope .a-Tree-itemLabel > .a-Checkbox {
+  display: inline-flex;
+  align-self: center;
 }
 
 .amis-scope .a-Tree-itemLabel:hover {
   background: rgba(0, 126, 255, 0.08);
 }
 
+.amis-scope .a-Tree-item .is-checked {
+  background: var(--Tree-item-onChekced-bg);
+  border-radius: var(--Tree-item-onChekced-bg-borderRadius);
+}
+
+.amis-scope .a-Tree-item .is-disabled {
+  color: #99a6ad;
+  background: none;
+}
+
+.amis-scope .a-Tree-item .is-disabled:hover {
+  background: none;
+}
+
 .amis-scope .a-Tree.is-draggable .a-Tree-itemLabel:hover::after {
   display: none;
 }
@@ -42837,7 +42864,7 @@ readers do not read off random characters that represent icons */
 .amis-scope .a-Tree-itemInput > a {
   display: inline-block;
   cursor: pointer;
-  margin-left: 0.5rem;
+  margin-left: 0.25rem;
   color: #4b5563;
 }
 
@@ -42939,29 +42966,15 @@ readers do not read off random characters that represent icons */
   height: 0.875rem;
 }
 
-.amis-scope .a-Tree-itemLabel {
-  user-select: none;
-}
-
-.amis-scope .a-Tree-itemLabel.is-checked,
-.amis-scope .a-Tree-itemLabel.is-children-checked {
-  color: #23b7e5;
-}
-
-.amis-scope .a-Tree-itemLabel.is-disabled {
-  color: #99a6ad;
-}
-
-.amis-scope .a-Tree-itemLabel > .a-Checkbox {
-  display: inline-flex;
-  align-self: center;
-}
-
 .amis-scope .a-Tree-itemText {
   cursor: pointer;
   flex: 1 auto;
+  color: #58666e;
   line-height: 1.5;
-  padding: 0.25rem 0;
+}
+
+.amis-scope .is-disabled .a-Tree-itemText {
+  color: #99a6ad;
 }
 
 .amis-scope .a-Tree-placeholder {

package/sdk/ang.css

@@ -14548,8 +14548,10 @@ readers do not read off random characters that represent icons */
   --TabsTransfer-title-bg: #f7f7f9;
   --TabsTransfer-border-color: #e8e9eb;
   --Tree-indent: var(--gap-md);
+  --Tree-icon-gap: var(--gap-xs);
   --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
   --Tree-item-onHover-bg: rgba(0, 126, 255, 0.08);
+  --Tree-item-onHover-bg-pure: rgba(0, 126, 255, 0.08);
   --Tree-itemArrowWidth: 0.75rem;
   --Tree-itemHeight: 1.875rem;
   --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
@@ -44016,7 +44018,7 @@ readers do not read off random characters that represent icons */
   top: 2px;
   width: 1rem;
   height: 1rem;
-  margin-left: var(--gap-xs);
+  margin-left: var(--Tree-icon-gap);
 }
 
 .amis-scope .a-Tree.is-disabled {
@@ -44049,10 +44051,37 @@ readers do not read off random characters that represent icons */
   display: flex;
   align-items: center;
   position: relative;
+  user-select: none;
+  margin-bottom: 0.25rem;
+  padding-left: var(--Tree-icon-gap);
+}
+
+.amis-scope .a-Tree-itemLabel > * {
+  position: relative;
+  z-index: 2;
+}
+
+.amis-scope .a-Tree-itemLabel > .a-Checkbox {
+  display: inline-flex;
+  align-self: center;
 }
 
 .amis-scope .a-Tree-itemLabel:hover {
-  background: var(--Tree-item-onHover-bg);
+  background: var(--Tree-item-onHover-bg-pure);
+}
+
+.amis-scope .a-Tree-item .is-checked {
+  background: var(--Tree-item-onChekced-bg);
+  border-radius: var(--Tree-item-onChekced-bg-borderRadius);
+}
+
+.amis-scope .a-Tree-item .is-disabled {
+  color: var(--text--muted-color);
+  background: none;
+}
+
+.amis-scope .a-Tree-item .is-disabled:hover {
+  background: none;
 }
 
 .amis-scope .a-Tree.is-draggable .a-Tree-itemLabel:hover::after {
@@ -44066,13 +44095,13 @@ readers do not read off random characters that represent icons */
   vertical-align: top;
   height: var(--Tree-itemHeight);
   line-height: var(--Tree-itemHeight);
-  padding-right: var(--gap-xs);
+  padding-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .a-Tree-item-icons > a {
   display: inline-block;
   vertical-align: middle;
-  margin-left: var(--gap-xs);
+  margin-left: var(--Tree-icon-gap);
   cursor: pointer;
 }
 
@@ -44092,7 +44121,7 @@ readers do not read off random characters that represent icons */
 .amis-scope .a-Tree-itemInput > a {
   display: inline-block;
   cursor: pointer;
-  margin-left: var(--gap-sm);
+  margin-left: var(--Tree-icon-gap);
   color: var(--icon-color);
 }
 
@@ -44144,14 +44173,14 @@ readers do not read off random characters that represent icons */
   width: 0.875rem;
   height: 0.875rem;
   top: 0.109375rem;
-  margin-right: var(--gap-xs);
+  margin-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .a-Tree-itemArrow {
   cursor: pointer;
   width: var(--Tree-itemArrowWidth);
   display: inline-flex;
-  margin-right: var(--gap-xs);
+  margin-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .a-Tree-itemArrow > svg {
@@ -44169,7 +44198,7 @@ readers do not read off random characters that represent icons */
 
 .amis-scope .a-Tree-itemArrowPlaceholder {
   display: inline-block;
-  width: calc(var(--Tree-itemArrowWidth) + var(--gap-xs));
+  width: calc(var(--Tree-itemArrowWidth) + var(--Tree-icon-gap));
 }
 
 .amis-scope .a-Tree-itemDrager {
@@ -44178,12 +44207,12 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .a-Tree-spinner {
-  margin-right: var(--gap-xs);
+  margin-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .a-Tree-itemIcon {
   display: inline-flex;
-  margin-right: var(--gap-xs);
+  margin-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .a-Tree-rootIcon > svg,
@@ -44194,29 +44223,15 @@ readers do not read off random characters that represent icons */
   height: 0.875rem;
 }
 
-.amis-scope .a-Tree-itemLabel {
-  user-select: none;
-}
-
-.amis-scope .a-Tree-itemLabel.is-checked,
-.amis-scope .a-Tree-itemLabel.is-children-checked {
-  color: var(--Tree-itemLabel--onChecked-color);
-}
-
-.amis-scope .a-Tree-itemLabel.is-disabled {
-  color: var(--text--muted-color);
-}
-
-.amis-scope .a-Tree-itemLabel > .a-Checkbox {
-  display: inline-flex;
-  align-self: center;
-}
-
 .amis-scope .a-Tree-itemText {
   cursor: pointer;
   flex: 1 auto;
+  color: var(--Form-input-color);
   line-height: var(--lineHeightBase);
-  padding: 0.25rem 0;
+}
+
+.amis-scope .is-disabled .a-Tree-itemText {
+  color: var(--text--muted-color);
 }
 
 .amis-scope .a-Tree-placeholder {
@@ -44245,7 +44260,7 @@ readers do not read off random characters that represent icons */
 
 .amis-scope .a-Tree-dropIndicator--hover {
   border-radius: 0;
-  background-color: var(--Tree-item-onHover-bg);
+  background-color: var(--Tree-item-onHover-bg-pure);
 }
 
 .amis-scope .a-Tree-dropIndicator--hover::after {

package/sdk/antd-ie11.css

@@ -42767,12 +42767,39 @@ readers do not read off random characters that represent icons */
   display: flex;
   align-items: center;
   position: relative;
+  user-select: none;
+  margin-bottom: 0.25rem;
+  padding-left: 0.25rem;
+}
+
+.amis-scope .antd-Tree-itemLabel > * {
+  position: relative;
+  z-index: 2;
+}
+
+.amis-scope .antd-Tree-itemLabel > .antd-Checkbox {
+  display: inline-flex;
+  align-self: center;
 }
 
 .amis-scope .antd-Tree-itemLabel:hover {
   background: rgba(0, 126, 255, 0.08);
 }
 
+.amis-scope .antd-Tree-item .is-checked {
+  background: var(--Tree-item-onChekced-bg);
+  border-radius: var(--Tree-item-onChekced-bg-borderRadius);
+}
+
+.amis-scope .antd-Tree-item .is-disabled {
+  color: #999;
+  background: none;
+}
+
+.amis-scope .antd-Tree-item .is-disabled:hover {
+  background: none;
+}
+
 .amis-scope .antd-Tree.is-draggable .antd-Tree-itemLabel:hover::after {
   display: none;
 }
@@ -42810,7 +42837,7 @@ readers do not read off random characters that represent icons */
 .amis-scope .antd-Tree-itemInput > a {
   display: inline-block;
   cursor: pointer;
-  margin-left: 0.5rem;
+  margin-left: 0.25rem;
   color: inherit;
 }
 
@@ -42912,29 +42939,15 @@ readers do not read off random characters that represent icons */
   height: 0.875rem;
 }
 
-.amis-scope .antd-Tree-itemLabel {
-  user-select: none;
-}
-
-.amis-scope .antd-Tree-itemLabel.is-checked,
-.amis-scope .antd-Tree-itemLabel.is-children-checked {
-  color: #1890ff;
-}
-
-.amis-scope .antd-Tree-itemLabel.is-disabled {
-  color: #999;
-}
-
-.amis-scope .antd-Tree-itemLabel > .antd-Checkbox {
-  display: inline-flex;
-  align-self: center;
-}
-
 .amis-scope .antd-Tree-itemText {
   cursor: pointer;
   flex: 1 auto;
+  color: rgba(0, 0, 0, 0.85);
   line-height: 1.57;
-  padding: 0.25rem 0;
+}
+
+.amis-scope .is-disabled .antd-Tree-itemText {
+  color: #999;
 }
 
 .amis-scope .antd-Tree-placeholder {

package/sdk/antd.css

@@ -14552,8 +14552,10 @@ readers do not read off random characters that represent icons */
   --TabsTransfer-title-bg: #f7f7f9;
   --TabsTransfer-border-color: #e8e9eb;
   --Tree-indent: var(--gap-md);
+  --Tree-icon-gap: var(--gap-xs);
   --Tree-inputHeight: calc(var(--Form-input-height) * 0.85);
   --Tree-item-onHover-bg: rgba(0, 126, 255, 0.08);
+  --Tree-item-onHover-bg-pure: rgba(0, 126, 255, 0.08);
   --Tree-itemArrowWidth: 0.75rem;
   --Tree-itemHeight: 1.875rem;
   --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
@@ -44136,7 +44138,7 @@ readers do not read off random characters that represent icons */
   top: 2px;
   width: 1rem;
   height: 1rem;
-  margin-left: var(--gap-xs);
+  margin-left: var(--Tree-icon-gap);
 }
 
 .amis-scope .antd-Tree.is-disabled {
@@ -44169,10 +44171,37 @@ readers do not read off random characters that represent icons */
   display: flex;
   align-items: center;
   position: relative;
+  user-select: none;
+  margin-bottom: 0.25rem;
+  padding-left: var(--Tree-icon-gap);
+}
+
+.amis-scope .antd-Tree-itemLabel > * {
+  position: relative;
+  z-index: 2;
+}
+
+.amis-scope .antd-Tree-itemLabel > .antd-Checkbox {
+  display: inline-flex;
+  align-self: center;
 }
 
 .amis-scope .antd-Tree-itemLabel:hover {
-  background: var(--Tree-item-onHover-bg);
+  background: var(--Tree-item-onHover-bg-pure);
+}
+
+.amis-scope .antd-Tree-item .is-checked {
+  background: var(--Tree-item-onChekced-bg);
+  border-radius: var(--Tree-item-onChekced-bg-borderRadius);
+}
+
+.amis-scope .antd-Tree-item .is-disabled {
+  color: var(--text--muted-color);
+  background: none;
+}
+
+.amis-scope .antd-Tree-item .is-disabled:hover {
+  background: none;
 }
 
 .amis-scope .antd-Tree.is-draggable .antd-Tree-itemLabel:hover::after {
@@ -44186,13 +44215,13 @@ readers do not read off random characters that represent icons */
   vertical-align: top;
   height: var(--Tree-itemHeight);
   line-height: var(--Tree-itemHeight);
-  padding-right: var(--gap-xs);
+  padding-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .antd-Tree-item-icons > a {
   display: inline-block;
   vertical-align: middle;
-  margin-left: var(--gap-xs);
+  margin-left: var(--Tree-icon-gap);
   cursor: pointer;
 }
 
@@ -44212,7 +44241,7 @@ readers do not read off random characters that represent icons */
 .amis-scope .antd-Tree-itemInput > a {
   display: inline-block;
   cursor: pointer;
-  margin-left: var(--gap-sm);
+  margin-left: var(--Tree-icon-gap);
   color: var(--icon-color);
 }
 
@@ -44264,14 +44293,14 @@ readers do not read off random characters that represent icons */
   width: 0.875rem;
   height: 0.875rem;
   top: 0.109375rem;
-  margin-right: var(--gap-xs);
+  margin-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .antd-Tree-itemArrow {
   cursor: pointer;
   width: var(--Tree-itemArrowWidth);
   display: inline-flex;
-  margin-right: var(--gap-xs);
+  margin-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .antd-Tree-itemArrow > svg {
@@ -44289,7 +44318,7 @@ readers do not read off random characters that represent icons */
 
 .amis-scope .antd-Tree-itemArrowPlaceholder {
   display: inline-block;
-  width: calc(var(--Tree-itemArrowWidth) + var(--gap-xs));
+  width: calc(var(--Tree-itemArrowWidth) + var(--Tree-icon-gap));
 }
 
 .amis-scope .antd-Tree-itemDrager {
@@ -44298,12 +44327,12 @@ readers do not read off random characters that represent icons */
 }
 
 .amis-scope .antd-Tree-spinner {
-  margin-right: var(--gap-xs);
+  margin-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .antd-Tree-itemIcon {
   display: inline-flex;
-  margin-right: var(--gap-xs);
+  margin-right: var(--Tree-icon-gap);
 }
 
 .amis-scope .antd-Tree-rootIcon > svg,
@@ -44314,29 +44343,15 @@ readers do not read off random characters that represent icons */
   height: 0.875rem;
 }
 
-.amis-scope .antd-Tree-itemLabel {
-  user-select: none;
-}
-
-.amis-scope .antd-Tree-itemLabel.is-checked,
-.amis-scope .antd-Tree-itemLabel.is-children-checked {
-  color: var(--Tree-itemLabel--onChecked-color);
-}
-
-.amis-scope .antd-Tree-itemLabel.is-disabled {
-  color: var(--text--muted-color);
-}
-
-.amis-scope .antd-Tree-itemLabel > .antd-Checkbox {
-  display: inline-flex;
-  align-self: center;
-}
-
 .amis-scope .antd-Tree-itemText {
   cursor: pointer;
   flex: 1 auto;
+  color: var(--Form-input-color);
   line-height: var(--lineHeightBase);
-  padding: 0.25rem 0;
+}
+
+.amis-scope .is-disabled .antd-Tree-itemText {
+  color: var(--text--muted-color);
 }
 
 .amis-scope .antd-Tree-placeholder {
@@ -44365,7 +44380,7 @@ readers do not read off random characters that represent icons */
 
 .amis-scope .antd-Tree-dropIndicator--hover {
   border-radius: 0;
-  background-color: var(--Tree-item-onHover-bg);
+  background-color: var(--Tree-item-onHover-bg-pure);
 }
 
 .amis-scope .antd-Tree-dropIndicator--hover::after {