@kdcloudjs/kdesign 1.7.68-stable.8 → 1.7.68-stable.9

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [1.8.21](https://github.com/kingdee/kdesign/compare/v1.8.20...v1.8.21) (2024-11-29)
+
+
+### Bug Fixes
+
+* [cli] 更新总览页面分割线缩略图 fix [#979](https://github.com/kingdee/kdesign/issues/979) ([818ad8d](https://github.com/kingdee/kdesign/commit/818ad8d7ef60683f7713422d23637a9bd400f61b))
+* [color-picker] 将rotate样式属性改为兼容性更高的transform:rotate()方法 fix [#967](https://github.com/kingdee/kdesign/issues/967) ([a4ffc49](https://github.com/kingdee/kdesign/commit/a4ffc49a559339f995c9dc6f41fa8a0f350d7c5a))
+* [date-picker]更新en-us添加monthBeforeYear ([96eb4c3](https://github.com/kingdee/kdesign/commit/96eb4c34329ca0fea27aef1daf17dfbc3c90c058))
+* [select] 修复onDeselect回调事件触发时机错误问题 fix [#949](https://github.com/kingdee/kdesign/issues/949) ([8fb3049](https://github.com/kingdee/kdesign/commit/8fb30490e53c6d930fbcf1763e14b66e224293c4))
+* [tree] 修复设置树节点样式与类名不生效问题 fix [#930](https://github.com/kingdee/kdesign/issues/930) ([68b732e](https://github.com/kingdee/kdesign/commit/68b732ed2855592c959089d49e398d076b26051e))
+
+
+### Features
+
+* [color-picker] 新增 popperClassName api，同时将原有的className和style属性放至input外层容器中 fix [#942](https://github.com/kingdee/kdesign/issues/942) fix [#968](https://github.com/kingdee/kdesign/issues/968) ([7535fa1](https://github.com/kingdee/kdesign/commit/7535fa186ed6df9c982db580d1855b5568b7b6d8))
+
+
+
+## [1.8.20](https://github.com/kingdee/kdesign/compare/v1.8.19...v1.8.20) (2024-11-22)
+
+
+### Bug Fixes
+
+* [cli] 修复安装依赖后yarn test报错问题 [#935](https://github.com/kingdee/kdesign/issues/935) ([0ebd81d](https://github.com/kingdee/kdesign/commit/0ebd81d849da9efe4732354b441585438e1f3a90))
+* [popper]修复onVisibleChange问题 fix [#937](https://github.com/kingdee/kdesign/issues/937) ([f9194f1](https://github.com/kingdee/kdesign/commit/f9194f16e0bd507fbe1ebc187e6af63d0996536e))
+
+
+### Features
+
+* [date-picker]更新年月快捷选择交互 fix [#931](https://github.com/kingdee/kdesign/issues/931) ([28a094c](https://github.com/kingdee/kdesign/commit/28a094ca1d6dcedcbcb0b9b12f7150418611b6e4))
+
+
+
 ## [1.8.19](https://github.com/kingdee/kdesign/compare/v1.8.18...v1.8.19) (2024-11-07)
 
 

package/dist/kdesign-complete.less

@@ -2612,6 +2612,7 @@
 
 @city-picker-prefix-cls: ~'@{kd-prefix}-city-picker';
 @tabs-prefix-cls: ~'@{kd-prefix}-tabs';
+@popper-prefix-cls: ~'@{kd-prefix}-popper';
 
 .@{city-picker-prefix-cls} {
   position: relative;
@@ -2764,6 +2765,15 @@
     outline: none;
     box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 
+    &.@{popper-prefix-cls}-bottom-start {
+      &-in {
+        animation-name: kdSlideUpIn;
+      }
+
+      &-out {
+        animation-name: kdSlideUpOut;
+      }
+    }
     // 调整tabs样式
     .@{tabs-prefix-cls}-tab-list {
       width: 100%;
@@ -8851,6 +8861,106 @@ textarea {
 @popconfirm-border-radius: var(~'@{popconfirm-custom-prefix}-radius-border', @radius-border);
 
 
+
+@popper-prefix-cls: ~'@{kd-prefix}-popper';
+
+.@{popper-prefix-cls} {
+  opacity: 1;
+  z-index: @z-index-popper;
+  visibility: visible;
+
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .arrow {
+    visibility: hidden;
+
+    &::before {
+      visibility: visible;
+      position: absolute;
+      border-style: solid;
+      border-color: transparent;
+      border-width: var(--arrowSize);
+      content: '';
+      transform: rotate(45deg);
+    }
+  }
+
+  &[data-popper-placement^='top'] .arrow {
+    bottom: calc(1.05 * var(--arrowSize));
+
+    &::before {
+      left: calc(-1 * var(--arrowSize));
+      border-top-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+
+  &[data-popper-placement^='bottom'] .arrow {
+    top: calc(-0.85 * var(--arrowSize));
+
+    &::before {
+      left: calc(-1 * var(--arrowSize));
+      border-bottom-color: transparent;
+      border-right-color: transparent;
+    }
+  }
+
+  &[data-popper-placement^='left'] .arrow {
+    right: calc(1.05 * var(--arrowSize));
+
+    &::before {
+      top: calc(-1 * var(--arrowSize));
+      border-left-color: transparent;
+      border-bottom-color: transparent;
+    }
+  }
+
+  &[data-popper-placement^='right'] .arrow {
+    left: calc(-0.85 * var(--arrowSize));
+
+    &::before {
+      top: calc(-1 * var(--arrowSize));
+      border-top-color: transparent;
+      border-right-color: transparent;
+    }
+  }
+}
+
+.popper-motion(@className, @keyframeName, @duration: calc(@transition-duration - 0.1s)) {
+  .@{className} {
+    animation-duration: @duration;
+
+    &-in {
+      animation-name: ~'@{keyframeName}In';
+      animation-timing-function: @ease-out;
+    }
+
+    &-out {
+      animation-name: ~'@{keyframeName}Out';
+      animation-timing-function: @ease-in;
+    }
+  }
+}
+
+.popper-motion(~'@{popper-prefix-cls}-top', kdZoomBottom);
+.popper-motion(~'@{popper-prefix-cls}-left', kdZoomRight);
+.popper-motion(~'@{popper-prefix-cls}-right', kdZoomLeft);
+.popper-motion(~'@{popper-prefix-cls}-bottom', kdZoomTop);
+.popper-motion(~'@{popper-prefix-cls}-top-start', kdZoomLeftBottom);
+.popper-motion(~'@{popper-prefix-cls}-right-end', kdZoomLeftBottom);
+.popper-motion(~'@{popper-prefix-cls}-top-end', kdZoomRightBottom);
+.popper-motion(~'@{popper-prefix-cls}-left-end', kdZoomRightBottom);
+.popper-motion(~'@{popper-prefix-cls}-left-start', kdZoomTopRight);
+.popper-motion(~'@{popper-prefix-cls}-bottom-end', kdZoomTopRight);
+.popper-motion(~'@{popper-prefix-cls}-right-start', kdZoomTopLeft);
+.popper-motion(~'@{popper-prefix-cls}-bottom-start', kdZoomTopLeft);
+
+
+
 @progress-prefix-cls: ~'@{kd-prefix}-progress';
 
 .@{progress-prefix-cls} {

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.7.68-stable.8
+ *   @kdcloudjs/kdesign v1.7.68-stable.9
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -5725,6 +5725,14 @@ template {
   -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
           box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
 }
+.kd-city-picker-dropdown.kd-popper-bottom-start-in {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+}
+.kd-city-picker-dropdown.kd-popper-bottom-start-out {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+}
 .kd-city-picker-dropdown .kd-tabs-tab-list {
   width: 100%;
 }
@@ -13974,6 +13982,362 @@ textarea {
     普通组件内部自身层级应设置在0-100间
 */
 /* -----------  zIndex  ——————---- end */
+/* 多行显示省略号 */
+/* 单行显示省略号 */
+/** 浮层箭头样式 **/
+.kd-popper {
+  opacity: 1;
+  z-index: var(--kd-g-z-index-popper, 1050);
+  visibility: visible;
+}
+.kd-popper.hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.kd-popper .arrow {
+  visibility: hidden;
+}
+.kd-popper .arrow::before {
+  visibility: visible;
+  position: absolute;
+  border-style: solid;
+  border-color: transparent;
+  border-width: var(--arrowSize);
+  content: '';
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+.kd-popper[data-popper-placement^='top'] .arrow {
+  bottom: calc(1.05 * var(--arrowSize));
+}
+.kd-popper[data-popper-placement^='top'] .arrow::before {
+  left: calc(-1 * var(--arrowSize));
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+.kd-popper[data-popper-placement^='bottom'] .arrow {
+  top: calc(-0.85 * var(--arrowSize));
+}
+.kd-popper[data-popper-placement^='bottom'] .arrow::before {
+  left: calc(-1 * var(--arrowSize));
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+.kd-popper[data-popper-placement^='left'] .arrow {
+  right: calc(1.05 * var(--arrowSize));
+}
+.kd-popper[data-popper-placement^='left'] .arrow::before {
+  top: calc(-1 * var(--arrowSize));
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+}
+.kd-popper[data-popper-placement^='right'] .arrow {
+  left: calc(-0.85 * var(--arrowSize));
+}
+.kd-popper[data-popper-placement^='right'] .arrow::before {
+  top: calc(-1 * var(--arrowSize));
+  border-top-color: transparent;
+  border-right-color: transparent;
+}
+.kd-popper-top {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-top-in {
+  -webkit-animation-name: kdZoomBottomIn;
+          animation-name: kdZoomBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-top-out {
+  -webkit-animation-name: kdZoomBottomOut;
+          animation-name: kdZoomBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-left {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-left-in {
+  -webkit-animation-name: kdZoomRightIn;
+          animation-name: kdZoomRightIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-left-out {
+  -webkit-animation-name: kdZoomRightOut;
+          animation-name: kdZoomRightOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-right {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-right-in {
+  -webkit-animation-name: kdZoomLeftIn;
+          animation-name: kdZoomLeftIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-right-out {
+  -webkit-animation-name: kdZoomLeftOut;
+          animation-name: kdZoomLeftOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-bottom {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-bottom-in {
+  -webkit-animation-name: kdZoomTopIn;
+          animation-name: kdZoomTopIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-bottom-out {
+  -webkit-animation-name: kdZoomTopOut;
+          animation-name: kdZoomTopOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-top-start {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-top-start-in {
+  -webkit-animation-name: kdZoomLeftBottomIn;
+          animation-name: kdZoomLeftBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-top-start-out {
+  -webkit-animation-name: kdZoomLeftBottomOut;
+          animation-name: kdZoomLeftBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-right-end {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-right-end-in {
+  -webkit-animation-name: kdZoomLeftBottomIn;
+          animation-name: kdZoomLeftBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-right-end-out {
+  -webkit-animation-name: kdZoomLeftBottomOut;
+          animation-name: kdZoomLeftBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-top-end {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-top-end-in {
+  -webkit-animation-name: kdZoomRightBottomIn;
+          animation-name: kdZoomRightBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-top-end-out {
+  -webkit-animation-name: kdZoomRightBottomOut;
+          animation-name: kdZoomRightBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-left-end {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-left-end-in {
+  -webkit-animation-name: kdZoomRightBottomIn;
+          animation-name: kdZoomRightBottomIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-left-end-out {
+  -webkit-animation-name: kdZoomRightBottomOut;
+          animation-name: kdZoomRightBottomOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-left-start {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-left-start-in {
+  -webkit-animation-name: kdZoomTopRightIn;
+          animation-name: kdZoomTopRightIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-left-start-out {
+  -webkit-animation-name: kdZoomTopRightOut;
+          animation-name: kdZoomTopRightOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-bottom-end {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-bottom-end-in {
+  -webkit-animation-name: kdZoomTopRightIn;
+          animation-name: kdZoomTopRightIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-bottom-end-out {
+  -webkit-animation-name: kdZoomTopRightOut;
+          animation-name: kdZoomTopRightOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-right-start {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-right-start-in {
+  -webkit-animation-name: kdZoomTopLeftIn;
+          animation-name: kdZoomTopLeftIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-right-start-out {
+  -webkit-animation-name: kdZoomTopLeftOut;
+          animation-name: kdZoomTopLeftOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-popper-bottom-start {
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+}
+.kd-popper-bottom-start-in {
+  -webkit-animation-name: kdZoomTopLeftIn;
+          animation-name: kdZoomTopLeftIn;
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-popper-bottom-start-out {
+  -webkit-animation-name: kdZoomTopLeftOut;
+          animation-name: kdZoomTopLeftOut;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
 .kd-progress {
   display: inline-block;
   font-variant: tabular-nums;