@kdcloudjs/kdesign 1.5.4 → 1.5.7

package/lib/config-provider/compDefaultProps.d.ts

@@ -305,6 +305,7 @@ declare const compDefaultProps: {
         virtual: boolean;
         switcherIcon: () => JSX.Element;
         estimatedItemSize: number;
+        expandOnClickNode: boolean;
     };
     TreeNode: {};
     ToolTip: {

package/lib/config-provider/compDefaultProps.js

@@ -337,7 +337,8 @@ var compDefaultProps = {
         type: "arrow-right-solid"
       });
     },
-    estimatedItemSize: 32
+    estimatedItemSize: 32,
+    expandOnClickNode: true
   },
   TreeNode: {},
   ToolTip: {

package/lib/dropdown/style/index.css

@@ -137,10 +137,10 @@
   opacity: 1;
   visibility: visible;
   z-index: var(--kd-g-z-index-popper, 1050);
-  background-color: var(--kd-g-color-background, #fff);
+  background-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-radius: var(--kd-g-radius-border, 2px);
-  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 136px);
-  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 320px);
+  min-width: var(--kd-c-dropdown-menu-sizing-min-width, 64px);
+  max-width: var(--kd-c-dropdown-menu-sizing-max-width, 600px);
   -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);
 }
@@ -151,7 +151,7 @@
 .kd-dropdown.arrow::before {
   position: absolute;
   z-index: -2;
-  background: var(--kd-g-color-background, #fff);
+  background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-style: solid;
   border-width: var(--arrowSize);
   -webkit-transform: rotate(45deg);
@@ -166,7 +166,7 @@
   bottom: 0;
   left: 0;
   content: '';
-  background: var(--kd-g-color-background, #fff);
+  background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
   border-radius: var(--kd-g-radius-border, 2px);
 }
 .kd-dropdown.arrow.bottomLeft::before,
@@ -176,7 +176,7 @@
   top: var(--arrowSpill);
   -webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
           box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
-  border-color: var(--kd-g-color-background, #fff) transparent transparent var(--kd-g-color-background, #fff);
+  border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-dropdown.arrow.topLeft::before,
 .kd-dropdown.arrow.top::before,
@@ -185,7 +185,7 @@
   bottom: var(--arrowSpill);
   -webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
           box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
-  border-color: transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent;
+  border-color: transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent;
 }
 .kd-dropdown.arrow.leftTop::before,
 .kd-dropdown.arrow.left::before,
@@ -194,7 +194,7 @@
   right: var(--arrowSpill);
   -webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
           box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
-  border-color: var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff) transparent transparent;
+  border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
 }
 .kd-dropdown.arrow.rightTop::before,
 .kd-dropdown.arrow.right::before,
@@ -203,11 +203,11 @@
   left: var(--arrowSpill);
   -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
-  border-color: transparent transparent var(--kd-g-color-background, #fff) var(--kd-g-color-background, #fff);
+  border-color: transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
 }
 .kd-dropdown-menu {
-  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px);
-  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 8px) 0;
+  max-height: var(--kd-c-dropdown-menu-sizing-max-height, 328px);
+  padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 4px) 0;
   overflow-y: auto;
 }
 .kd-dropdown-menu-item {
@@ -234,12 +234,11 @@
 }
 .kd-dropdown-menu-item:not(.disabled):active,
 .kd-dropdown-menu-item:not(.disabled).selected {
-  color: var(--kd-g-color-theme, #5582f3);
-  background-color: var(--kd-c-dropdown-item-color-background-active, var(--kd-g-color-theme-1, #f2f8ff));
+  color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-dropdown-menu-item:not(.disabled):active > a,
 .kd-dropdown-menu-item:not(.disabled).selected > a {
-  color: var(--kd-g-color-theme, #5582f3);
+  color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
 }
 .kd-dropdown-menu-item.divided::before {
   content: '';

package/lib/dropdown/style/index.less

@@ -37,7 +37,7 @@
   opacity: 1;
   visibility: visible;
   z-index: @z-index-popper;
-  background-color: @color-background;
+  background-color: @dropdown-color-background;
   border-radius: @radius-border;
   min-width: @dropdown-menu-min-width;
   max-width: @dropdown-menu-max-width;
@@ -49,7 +49,7 @@
   }
 
   // 箭头样式
-  .popperArrow(@color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
+  .popperArrow(@dropdown-color-background, @dropdown-item-horizontal-gap, @dropdown-box-shadow-blur);
 
   &-menu {
     max-height: @dropdown-menu-max-height;
@@ -80,11 +80,10 @@
 
       &:not(.disabled):active,
       &:not(.disabled).selected {
-        color: @color-theme;
-        background-color: @dropdown-item-active-bg-color;
+        color: @dropdown-item-active-color;
 
         > a {
-          color: @color-theme;
+          color: @dropdown-item-active-color;
         }
       }
 

package/lib/dropdown/style/token.less

@@ -4,22 +4,23 @@
 
 // color
 @dropdown-item-hover-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-hover', @color-hover);
-@dropdown-item-active-bg-color: var(~'@{dropdown-custom-prefix}-item-color-background-active', @color-theme-light-active);
+@dropdown-item-active-color: var(~'@{dropdown-custom-prefix}-item-color-text-active', @color-theme);
 @dropdown-item-color-disabled: var(~'@{dropdown-custom-prefix}-item-color-text-disabled', @color-disabled);
 @dropdown-item-color-text-danger: var(~'@{dropdown-custom-prefix}-item-color-text-danger', @color-error);
 @dropdown-item-color-background-danger-hover: var(~'@{dropdown-custom-prefix}-item-color-background-danger-hover', @color-error);
 @dropdown-item-hover-color-text: var(~'@{dropdown-custom-prefix}-item-color-text-hover', @color-text-primary);
 @dropdown-divided-color-bg: var(~'@{dropdown-custom-prefix}-divided-color-background', @color-border-weak);
 @dropdown-color: var(~'@{dropdown-custom-prefix}-menu-item-color-text', @color-text-primary);
+@dropdown-color-background: var(~'@{dropdown-custom-prefix}-menu-color-background', @color-background);
 
 // sizing
-@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width', 136px);
-@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 320px);
-@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 336px);
+@dropdown-menu-min-width: var(~'@{dropdown-custom-prefix}-menu-sizing-min-width', 64px);
+@dropdown-menu-max-width: var(~'@{dropdown-custom-prefix}-menu-sizing-max-width', 600px);
+@dropdown-menu-max-height: var(~'@{dropdown-custom-prefix}-menu-sizing-max-height', 328px);
 @dropdown-divided-height: var(~'@{dropdown-custom-prefix}-divided-sizing-height', 1px);
 
 // spacing
-@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical', 8px);
+@dropdown-menu-padding-vertical: var(~'@{dropdown-custom-prefix}-menu-spacing-padding-vertical', 4px);
 @dropdown-item-vertical-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-vertical', 7px);
 @dropdown-item-horizontal-gap: var(~'@{dropdown-custom-prefix}-item-spacing-padding-horizontal', 12px);
 

package/lib/radio/style/index.css

@@ -284,6 +284,9 @@
   width: 100%;
   height: 100%;
 }
+.kd-radio-square-input[disabled] {
+  cursor: not-allowed;
+}
 .kd-radio-square:hover {
   color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
   border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
@@ -391,6 +394,9 @@
   cursor: pointer;
   opacity: 0;
 }
+.kd-radio-button-input[disabled] {
+  cursor: not-allowed;
+}
 .kd-radio-button:hover {
   color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
 }

package/lib/radio/style/index.less

@@ -179,6 +179,10 @@
     opacity: 0;
     width: 100%;
     height: 100%;
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
   }
 
   // 悬停状态
@@ -289,6 +293,10 @@
     z-index: 1;
     cursor: pointer;
     opacity: 0;
+
+    &[disabled]{
+      cursor: not-allowed;
+    }
   }
 
   // 悬停状态

package/lib/search/style/index.css

@@ -483,13 +483,13 @@
           animation: animate_loading 1s infinite;
 }
 .kd-quick-search-npl-loading-item:nth-child(1) {
-  background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2386ee));
+  background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2486ee));
 }
 .kd-quick-search-npl-loading-item:nth-child(2) {
-  background-color: #00ccfe;
+  background-color: #02ccfe;
 }
 .kd-quick-search-npl-loading-item:nth-child(3) {
-  background-color: #05c8c8;
+  background-color: #05c8c7;
 }
 .kd-quick-search-npl-loading-item:nth-child(4) {
   background-color: #a06eff;

package/lib/spin/style/index.css

@@ -102,9 +102,9 @@
 */
 /* -----------  zIndex  ——————---- end */
 .kd-spin-page .kd-spin-dot-spin {
-  width: 50px;
-  height: 50px;
-  padding: 5px;
+  width: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
+  height: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
+  padding: var(--kd-c-spin-page-dot-spin-spacing-padding, 4px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -119,23 +119,22 @@
       align-content: space-between;
 }
 .kd-spin-page .kd-spin-dot-item {
-  width: var(--kd-c-spin-page-sizing, 15px);
-  height: var(--kd-c-spin-page-sizing, 15px);
-  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
+  width: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
+  height: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
+  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
   border-radius: 50%;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+1) {
-  margin-right: 10px;
   -webkit-animation: pageLoading 1s 0.3s ease-in-out infinite;
           animation: pageLoading 1s 0.3s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+2) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #00ccfe));
+  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
   -webkit-animation: pageLoading 1s 0.2s ease-in-out infinite;
           animation: pageLoading 1s 0.2s ease-in-out infinite;
 }
 .kd-spin-page .kd-spin-dot-item:nth-child(2n+3) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c8));
+  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
   -webkit-animation: pageLoading 1s 0.1s ease-in-out infinite;
           animation: pageLoading 1s 0.1s ease-in-out infinite;
 }
@@ -146,8 +145,8 @@
 }
 @-webkit-keyframes pageLoading {
   50% {
-    -webkit-transform: scale(1.3);
-            transform: scale(1.3);
+    -webkit-transform: scale(1.25);
+            transform: scale(1.25);
   }
   100% {
     -webkit-transform: scale(1);
@@ -156,8 +155,8 @@
 }
 @keyframes pageLoading {
   50% {
-    -webkit-transform: scale(1.3);
-            transform: scale(1.3);
+    -webkit-transform: scale(1.25);
+            transform: scale(1.25);
   }
   100% {
     -webkit-transform: scale(1);
@@ -178,9 +177,9 @@
           align-items: flex-end;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item {
-  width: var(--kd-c-spin-dot-container-sizing, 5px);
-  height: var(--kd-c-spin-dot-container-sizing, 5px);
-  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee));
+  width: var(--kd-c-spin-dot-container-sizing-square, 5px);
+  height: var(--kd-c-spin-dot-container-sizing-square, 5px);
+  background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
   border-radius: 50%;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+1) {
@@ -188,12 +187,12 @@
           animation: containerLoading 1s 0.6s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+2) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #00ccfe));
+  background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
   -webkit-animation: containerLoading 1s 0.45s ease-in-out infinite;
           animation: containerLoading 1s 0.45s ease-in-out infinite;
 }
 .kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+3) {
-  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c8));
+  background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
   -webkit-animation: containerLoading 1s 0.3s ease-in-out infinite;
           animation: containerLoading 1s 0.3s ease-in-out infinite;
 }
@@ -223,25 +222,25 @@
   }
 }
 .kd-spin-component .kd-spin-dot-spin {
-  width: 13px;
-  height: 13px;
-  border: 1px solid var(--kd-c-spin-component-dot-color-border, #e1e1e1);
+  width: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  height: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid var(--kd-c-spin-component-dot-color-border, #ebebeb);
   border-radius: 50%;
   position: relative;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 .kd-spin-component .kd-spin-dot-spin .kd-spin-dot-item {
-  width: 13px;
-  height: 13px;
+  width: var(--kd-c-spin-dot-component-sizing-square, 24px);
+  height: var(--kd-c-spin-dot-component-sizing-square, 24px);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border: 1px solid transparent;
+  border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid transparent;
   border-right-color: var(--kd-c-spin-component-dot-item-color-border, var(--kd-g-color-theme, #5582f3));
   border-radius: 50%;
   position: absolute;
-  top: -1px;
-  left: -1px;
+  top: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
+  left: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
   -webkit-animation: componentRotate 1s linear infinite;

package/lib/spin/style/index.less

@@ -12,9 +12,9 @@
     // right: 0;
 
     .@{spin-prefix-cls}-dot-spin {
-      width: 50px;
-      height: 50px;
-      padding: 5px;
+      width: @spin-page-dot-spin-sizing;
+      height: @spin-page-dot-spin-sizing;
+      padding: @spin-page-dot-spin-spacing-padding;
       // background: @logo-color-1;
       box-sizing: border-box;
       display: flex;
@@ -24,10 +24,9 @@
     }
 
     .@{spin-prefix-cls}-dot-item {
-      .dot(@spin-page-size, @spin-dot-color-first);
+      .dot(@spin-page-dot-item-sizing, @spin-dot-color-first);
 
       &:nth-child(2n+1) {
-        margin-right: 10px;
         animation: pageLoading 1s .3s ease-in-out infinite
       }
 
@@ -48,7 +47,7 @@
 
       @keyframes pageLoading {
         50% {
-          transform: scale(1.3);
+          transform: scale(1.25);
         }
         100% {
           transform: scale(1);
@@ -72,22 +71,22 @@
         &:nth-child(2n+1) {
           animation: containerLoading 1s .6s ease-in-out infinite
         }
-  
+
         &:nth-child(2n+2) {
           background-color: @spin-dot-color-second;
           animation: containerLoading 1s .45s ease-in-out infinite
         }
-  
+
         &:nth-child(2n+3) {
           background-color: @spin-dot-color-third;
           animation: containerLoading 1s .3s ease-in-out infinite
         }
-  
+
         &:nth-child(2n+4) {
           background-color: @spin-dot-color-fourth;
           animation: containerLoading 1s .15s ease-in-out infinite
         }
-  
+
         @keyframes containerLoading {
           50% {
             transform: translateY(-10px);
@@ -103,24 +102,24 @@
   // 组件加载动画
   &-component {
     .@{spin-prefix-cls}-dot-spin {
-      width: 13px;
-      height: 13px;
-      border: 1px solid @spin-component-dot-color-border;
+      width: @spin-component-spin-size;
+      height: @spin-component-spin-size;
+      border: @spin-component-spin-border solid @spin-component-dot-color-border;
       border-radius: 50%;
       position: relative;
       box-sizing: border-box;
 
       .@{spin-prefix-cls}-dot-item {
-        width: 13px;
-        height: 13px;
+        width: @spin-component-spin-size;
+        height: @spin-component-spin-size;
         box-sizing: border-box;
-        border: 1px solid transparent;
+        border: @spin-component-spin-border solid transparent;
         // border-top-color: #5582f3;
         border-right-color: @spin-component-dot-item-color-border;
         border-radius: 50%;
         position: absolute;
-        top: -1px;
-        left: -1px;
+        top: calc(-1 * @spin-component-spin-border);
+        left: calc(-1 * @spin-component-spin-border);
         transform: rotate(-45deg);
         animation: componentRotate 1s linear infinite;
 
@@ -161,4 +160,4 @@
     flex-direction: column;
     align-items: center;
   }
-}
+}

package/lib/spin/style/token.less

@@ -7,9 +7,15 @@
 @spin-dot-color-second: var(~'@{spin-custom-prefix}-dot-color-backgroung-second', @color-logo-2);
 @spin-dot-color-third: var(~'@{spin-custom-prefix}-dot-color-backgroung-third', @color-logo-3);
 @spin-dot-color-fourth: var(~'@{spin-custom-prefix}-dot-color-backgroung-fourth', @color-logo-4);
-@spin-component-dot-color-border: var(~'@{spin-custom-prefix}-component-dot-color-border', #e1e1e1);
+@spin-component-dot-color-border: var(~'@{spin-custom-prefix}-component-dot-color-border', #ebebeb);
 @spin-component-dot-item-color-border: var(~'@{spin-custom-prefix}-component-dot-item-color-border', @color-theme);
 
 // sizing
-@spin-page-size: var(~'@{spin-custom-prefix}-page-sizing', 15px);
-@spin-container-size: var(~'@{spin-custom-prefix}-dot-container-sizing', 5px);
+@spin-page-dot-item-sizing: var(~'@{spin-custom-prefix}-page-dot-item-sizing-square', 16px);
+@spin-page-dot-spin-sizing: var(~'@{spin-custom-prefix}-page-dot-spin-sizing-square', 48px);
+@spin-container-size: var(~'@{spin-custom-prefix}-dot-container-sizing-square', 5px);
+@spin-component-spin-size: var(~'@{spin-custom-prefix}-dot-component-sizing-square', 24px);
+@spin-component-spin-border: var(~'@{spin-custom-prefix}-dot-component-sizing-border', 2px);
+
+// spacing
+@spin-page-dot-spin-spacing-padding: var(~'@{spin-custom-prefix}-page-dot-spin-spacing-padding', 4px);

package/lib/style/themes/default.less

@@ -54,15 +54,14 @@
 @bg2: #f2f2f2; // 底色灰背景
 @bg3: rgba(255, 255, 255, 0.65); // 次级底色背景
 @contain-bg: #fafafa; // 容器内的灰背景
-@radius-size: 2px; // 圆角值
 @input-color: #999; // 线型录入的默认态
 @strong-border-color: #d9d9d9; // 强线条 --带操作
 @strong-border-color-1: #d9d9d9; // 强线条 --分割内容/容器包裹线
 @strong-border-color-2: rgba(217, 217, 217, 0.65); // 次级边框
 @weak-border-color: #e5e5e5; // 弱线条 -- 需要多层级时
-@logo-color-1: #2386ee;
-@logo-color-2: #00ccfe;
-@logo-color-3: #05c8c8;
+@logo-color-1: #2486ee;
+@logo-color-2: #02ccfe;
+@logo-color-3: #05c8c7;
 @logo-color-4: #a06eff;
 // @shadow-on-hover: ; // 悬停时阴影
 @white: #fff;

package/lib/timeline/style/index.css

@@ -107,11 +107,12 @@
 .kd-timeline {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  padding: 0;
   font-variant: tabular-nums;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
   margin: 0;
-  padding: 0;
+  padding: 0 4px;
   overflow: hidden;
   list-style: none;
 }
@@ -125,13 +126,13 @@
           font-feature-settings: 'tnum';
   position: relative;
   margin: 0;
-  padding-bottom: var(--kd-c-timeline-spacing-padding-bottom, 26px);
+  padding-bottom: var(--kd-c-timeline-spacing-padding-bottom, 24px);
   font-size: var(--kd-c-timeline-content-font-size, var(--kd-g-font-size-small, 12px));
 }
 .kd-timeline .kd-timeline-item-tail {
   position: absolute;
-  left: calc((9px - 1px) / 2);
-  height: calc(100% - 9px * 2 + 4px);
+  left: calc((var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
+  height: calc(100% - var(--kd-c-timeline-dot-sizing, 9px) * 2 + 4px);
   border-left: var(--kd-c-timeline-sizing-width, 1px) solid var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
 }
 .kd-timeline .kd-timeline-item.pending .kd-timeline-item-dot {
@@ -144,8 +145,8 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: absolute;
-  width: 9px;
-  height: 9px;
+  width: var(--kd-c-timeline-dot-sizing, 9px);
+  height: var(--kd-c-timeline-dot-sizing, 9px);
   border-radius: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
@@ -168,7 +169,7 @@
 }
 .kd-timeline .kd-timeline-item-dot.custom {
   position: absolute;
-  left: calc(9px / 2);
+  left: calc(var(--kd-c-timeline-dot-sizing, 9px) / 2);
   width: auto;
   height: auto;
   margin-top: 0;
@@ -183,7 +184,7 @@
 }
 .kd-timeline .kd-timeline-item-content {
   position: relative;
-  margin: 0 0 0 calc(2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
+  margin: 0 0 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
   word-break: break-word;
   color: var(--kd-c-timeline-content-color-text, var(--kd-g-color-text-primary, #212121));
 }
@@ -203,7 +204,7 @@
   left: 50%;
 }
 .kd-timeline.alternate .kd-timeline-item-dot {
-  margin-left: calc(-1 * (9px - 1px) / 2);
+  margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.alternate .kd-timeline-item-dot.custom {
   margin-left: 1px;
@@ -225,24 +226,24 @@
   right: 4.5px;
 }
 .kd-timeline.right .kd-timeline-item-dot {
-  margin-right: calc(-1 * (9px - 1px) / 2);
+  margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.right .kd-timeline-item-dot.custom {
-  margin-right: 1px;
+  margin-right: -18px;
 }
 .kd-timeline.right .kd-timeline-item .kd-timeline-item-content {
   left: 0;
   text-align: right;
-  margin: 0 calc(2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
+  margin: 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
   width: auto;
 }
 .kd-timeline.label.left .kd-timeline-item-tail,
 .kd-timeline.label.left .kd-timeline-item-dot,
 .kd-timeline.label.left .kd-timeline-item-dot.custom {
-  left: calc((2 * 8px) + (9px / 2));
+  left: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
 }
 .kd-timeline.label.left .kd-timeline-item-dot {
-  margin-left: calc(-1 * (9px - 1px) / 2);
+  margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.left .kd-timeline-item-dot.custom {
   margin-left: 1px;
@@ -253,7 +254,7 @@
   color: var(--kd-c-timeline-label-color-text, #666666);
 }
 .kd-timeline.label.left .kd-timeline-item .kd-timeline-item-content {
-  left: calc(9px + 7.5px);
+  left: calc(var(--kd-c-timeline-dot-sizing, 9px) + 7.5px);
   text-align: left;
   margin-right: 16px;
 }
@@ -261,13 +262,13 @@
 .kd-timeline.label.right .kd-timeline-item-dot,
 .kd-timeline.label.right .kd-timeline-item-dot.custom {
   left: auto;
-  right: calc((2 * 8px) + (9px / 2));
+  right: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
 }
 .kd-timeline.label.right .kd-timeline-item-dot {
-  margin-right: calc(-1 * (9px - 1px) / 2);
+  margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.right .kd-timeline-item-dot.custom {
-  right: calc(-1 * (9px - 1px) / 2);
+  right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
 }
 .kd-timeline.label.right .kd-timeline-item .kd-timeline-item-label {
   position: absolute;
@@ -276,7 +277,7 @@
 }
 .kd-timeline.label.right .kd-timeline-item .kd-timeline-item-content {
   left: auto;
-  right: calc(9px + 7.5px);
+  right: calc(var(--kd-c-timeline-dot-sizing, 9px) + 7.5px);
   text-align: right;
   margin-left: 17px;
 }
@@ -287,8 +288,8 @@
 }
 .kd-timeline.label.alternate .kd-timeline-item:nth-child(2n) .kd-timeline-item-label {
   position: absolute;
-  left: calc(50% + (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - 9px / 2);
-  width: calc(50% - (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + 9px / 2);
+  left: calc(50% + (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - var(--kd-c-timeline-dot-sizing, 9px) / 2);
+  width: calc(50% - (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + var(--kd-c-timeline-dot-sizing, 9px) / 2);
   text-align: left;
 }
 .kd-timeline.pending .kd-timeline-item.last .kd-timeline-item-tail {

package/lib/timeline/style/index.less

@@ -9,7 +9,7 @@
 .@{timeline-prefix-cls} {
   .reset-component;
   margin: 0;
-  padding: 0;
+  padding: 0 4px;
   overflow: hidden;
   list-style: none;
 
@@ -148,7 +148,7 @@
         margin-right:calc(-1 * (@timeline-dot-size - 1px) / 2) ;
 
         &.custom {
-          margin-right: 1px;
+          margin-right: -18px;
         }
       }
       .@{timeline-item-prefix-cls}-content {