@kdcloudjs/kdesign 1.7.22 → 1.7.24

package/lib/city-picker/style/index.less

@@ -200,6 +200,7 @@
     padding: 8px 0;
     max-height: 320px;
     overflow-y: auto;
+    box-sizing: content-box;
 
     // 下拉列表选项
     &-item {

package/lib/filter/style/index.css

@@ -145,6 +145,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: block;
 }
 .kd-filter .kd-filter-header-search {
   min-width: 200px;
@@ -240,6 +241,7 @@
   padding: 11px 0 10px;
   color: var(--kd-g-color-text-third, #999);
   line-height: 18px;
+  width: var(--kd-c-filter-body-condition-label-width);
 }
 .kd-filter .kd-filter-body-condition-options {
   display: -webkit-box;
@@ -269,6 +271,10 @@
   border: 1px solid transparent;
   cursor: pointer;
   white-space: nowrap;
+  max-width: var(--kd-c-filter-body-condition-option-max-width);
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
 }
 .kd-filter .kd-filter-body-condition-option:not(:last-child) {
   margin-right: 24px;

package/lib/filter/style/index.less

@@ -36,6 +36,7 @@
       &-item-text {
         max-width: 224px;
         .ellipsis;
+        display: block;
       }
     }
 
@@ -130,6 +131,7 @@
         padding: 11px 0 10px;
         color: @color-text-third;
         line-height: 18px;
+        width: @filter-body-condition-label-width;
       }
 
       &-options {
@@ -154,6 +156,11 @@
         border: 1px solid transparent;
         cursor: pointer;
         white-space: nowrap;
+        max-width: @filter-body-condition-option-max-width;
+        overflow: hidden;
+        display: inline-block;
+        text-overflow: ellipsis;
+
 
         &:not(:last-child) {
           margin-right: 24px;

package/lib/filter/style/token.less

@@ -26,3 +26,7 @@
 @filter-condition-label-font-size: var(~'@{filter-custom-prefix}-condition-label-font-size', @font-size-middle);
 @filter-handle-font-size: var(~'@{filter-custom-prefix}-handle-font-size', @font-size-middle);
 @filter-body-tabs-item-font-size: var(~'@{filter-custom-prefix}-body-tabs-item-font-size', @font-size-middle);
+
+//sizing
+@filter-body-condition-label-width: var(~'@{filter-custom-prefix}-body-condition-label-width');
+@filter-body-condition-option-max-width: var(~'@{filter-custom-prefix}-body-condition-option-max-width');

package/lib/form/style/index.css

@@ -147,7 +147,7 @@
           flex-direction: column;
 }
 .kd-form-field-vertical .kd-form-field-label {
-  margin-bottom: 5px;
+  margin-bottom: var(--kd-c-form-field-label-spacing-margin-bottom, 5px);
 }
 .kd-form-field-hidden {
   display: none !important;

package/lib/form/style/index.less

@@ -39,7 +39,7 @@
     flex-direction: column;
 
     .@{field-label-cls} {
-      margin-bottom: 5px;
+      margin-bottom: @form-field-label-spacing-margin-bottom;
     }
   }
 

package/lib/form/style/token.less

@@ -19,4 +19,4 @@
 @form-field-spacing-margin-bottom: var(~'@{form-prefix}-field-spacing-margin-bottom', 22px);
 @form-field-message-spacing-padding-horizontal: var(~'@{form-prefix}-field-message-spacing-padding-horizontal', 2px);
 @form-field-message-spacing-padding-vertical: var(~'@{form-prefix}-field-message-spacing-padding-vertical', 8px);
-
+@form-field-label-spacing-margin-bottom: var(~'@{form-prefix}-field-label-spacing-margin-bottom', 5px);

package/lib/input-number/inputNumber.js

@@ -61,7 +61,8 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     suffix = inputNumberProps.suffix,
     formatter = inputNumberProps.formatter,
     className = inputNumberProps.className,
-    others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className"]);
+    onKeyDown = inputNumberProps.onKeyDown,
+    others = __rest(inputNumberProps, ["value", "defaultValue", "mustInScope", "decimalLength", "mustInPrecisionScope", "digitLength", "onChange", "symbol", "zeroShow", "showDecimalTailZero", "code", "roundMethod", "mask", "stepOption", "min", "minMark", "max", "maxMark", "numberMode", "prefix", "suffix", "formatter", "className", "onKeyDown"]);
   var initVal = value === undefined ? defaultValue : value;
   var _useState = (0, _react.useState)((0, _numberUtil.serialization)(initVal !== undefined ? initVal + '' : '')),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -185,12 +186,13 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
     return resultNumerical;
   };
   var handleStepChang = function handleStepChang(type) {
+    var _a, _b;
     var step = stepOption.step === undefined ? 1 : parseFloat(stepOption.step);
     if (typeof step !== 'number') {
       (0, _devwarning.default)(true, 'inputNumber', "stepOption.step\u5FC5\u987B\u4E3A\u4E00\u4E2A\u6570\u503C");
       return false;
     }
-    var startingNumber = parseFloat(inputNumberRef.current.value) || 0;
+    var startingNumber = parseFloat((_b = (_a = inputNumberRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value) || 0;
     var calculationResults = new _big.default(startingNumber)[type](step).valueOf();
     var legalNumber = verifiValue(calculationResults);
     if (legalNumber === false) {
@@ -205,6 +207,7 @@ var InternalInputNumber = function InternalInputNumber(props, ref) {
   };
   var handleKeyDown = function handleKeyDown(event) {
     var _context11;
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     if (!stepOption || props.disabled || props.readOnly) {
       return;
     }

package/lib/menu/style/index.css

@@ -192,7 +192,8 @@
   position: relative;
   width: 100%;
   height: 100%;
-  min-width: 138px;
+  min-width: var(--kd-c-menu-sizing-min-width, 138px);
+  max-width: var(--kd-c-menu-sizing-max-width);
   background-color: var(--kd-c-menu-color-background, #343848);
   color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }

package/lib/menu/style/mixin.less

@@ -10,7 +10,8 @@
   position: relative;
   width: 100%;
   height: 100%;
-  min-width: 138px;
+  min-width: @menu-min-width;
+  max-width: @menu-max-width;
   background-color: @menu-color-background;
   color: @menu-sub-color;
 }

package/lib/menu/style/token.less

@@ -25,6 +25,8 @@
 @menu-motion-duration: var(~'@{menu-prefix}-motion-duration', @duration-promptly);
 
 // sizing
+@menu-max-width: var(~'@{menu-prefix}-sizing-max-width');
+@menu-min-width: var(~'@{menu-prefix}-sizing-min-width',138px);
 @menu-item-height: var(~'@{menu-prefix}-item-sizing-height', 50px);
 
 // z-index

package/lib/radio/style/index.css

@@ -125,6 +125,9 @@
   vertical-align: middle;
   color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
   font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
+  max-width: var(--kd-c-radio-default-label-max-width);
+  overflow: hidden;
+  min-height: var(--kd-c-radio-square-sizing-width-height, 14px);
 }
 .kd-radio::before {
   position: absolute;
@@ -256,6 +259,7 @@
   border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  max-width: var(--kd-c-radio-square-label-max-width);
 }
 .kd-radio-square::after {
   position: absolute;
@@ -348,6 +352,9 @@
   list-style: none;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   position: relative;
   display: inline-block;
   height: var(--kd-c-radio-square-sizing-height, 32px);
@@ -365,6 +372,7 @@
   border-left: none;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  max-width: var(--kd-c-radio-button-label-max-width);
 }
 .kd-radio-button:first-child {
   border-radius: 2px 0 0 2px;

package/lib/radio/style/index.less

@@ -22,6 +22,9 @@
   vertical-align: middle;
   color: @radio-font-color;
   font-size: @radio-font-size;
+  max-width: @radio-default-label-max-width;
+  overflow: hidden;
+  min-height: @radio-circle-size;
 
   &::before {
     position: absolute;
@@ -152,6 +155,7 @@
   border-radius: @radius-size;
   border: @radio-border-width solid @radio-color-border;
   transition: all @transition-duration;
+  max-width: @radio-square-label-max-width;
 
   &::after {
     position: absolute;
@@ -241,7 +245,7 @@
 // 按钮类型（切换按钮）
 .@{radio-button-prefix-cls} {
   .reset-component();
-
+  .ellipsis();
   // 默认状态
   position: relative;
   display: inline-block;
@@ -259,6 +263,7 @@
   border: @radio-border-width solid @radio-color-border;
   border-left: none;
   transition: all @transition-duration;
+  max-width: @radio-button-label-max-width;
 
   &:first-child {
     border-radius: @radius-size 0 0 @radius-size;

package/lib/radio/style/token.less

@@ -22,6 +22,9 @@
 // sizing
 @radio-circle-size:var(~'@{radio-prefix}-square-sizing-width-height',14px);//单选图标大小
 @radio-square-height:  var(~'@{radio-prefix}-square-sizing-height',32px);//单选框 高度
+@radio-default-label-max-width:  var(~'@{radio-prefix}-default-label-max-width');//单选默认模式 最大宽度
+@radio-square-label-max-width:  var(~'@{radio-prefix}-square-label-max-width');//单选框模式 最大宽度
+@radio-button-label-max-width:  var(~'@{radio-prefix}-button-label-max-width');//单选按 最大宽度
 
 // spacing
 @radio-margin-right:   var(~'@{radio-prefix}-spacing-margin-right',8px);

package/lib/search/search.js

@@ -71,7 +71,8 @@ var InternalSearch = function InternalSearch(props, ref) {
     onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
   }, [onSearch]);
   var handlePressEnter = (0, _react.useCallback)(function (_, event) {
-    onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(searchRef.current.value, event));
+    var _a, _b;
+    onPressEnter && (onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value, event));
   }, [onPressEnter, searchRef]);
   var handleFocus = (0, _react.useCallback)(function (event) {
     setFocused(true);

package/lib/search/style/index.css

@@ -335,6 +335,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  max-width: var(--kd-c-search-tag-sizing-max-width);
 }
 .kd-quick-search-selection-overflow-item-del {
   height: 14px;

package/lib/search/style/index.less

@@ -140,6 +140,7 @@
         padding: 0 4px;
         align-self: center;
         .ellipsis();
+        max-width: @search-tag-max-width;
       }
       &-del {
         height: 14px;

package/lib/search/style/token.less

@@ -14,6 +14,7 @@
 @search-panel-height: var(~'@{search-prefix}-panel-sizing-height', 60px);
 @quick-search-dropdown-option-height: var(~'@{search-prefix}-dropdown-option-sizing-height', 32px);
 @search-sizing-border-width: var(~'@{search-prefix}-sizing-border-width', 1px);
+@search-tag-max-width: var(~'@{search-prefix}-tag-sizing-max-width');
 
 // color
 @search-icon-color: var(~'@{search-prefix}-icon-color', #B2B2B2);

package/lib/select/select.js

@@ -34,7 +34,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
 var InternalSelect = function InternalSelect(props, ref) {
-  var _context, _classNames6, _classNames12;
+  var _context, _classNames6, _classNames12, _context5;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -806,6 +806,7 @@ var InternalSelect = function InternalSelect(props, ref) {
         offset = 1;
       } else if (which === _KeyCode.default.ENTER) {
         var item = filledOptions[activeIndex];
+        if (!item) return;
         var key = ((_a = item.props) === null || _a === void 0 ? void 0 : _a.value) || item.value;
         var label = ((_b = item.props) === null || _b === void 0 ? void 0 : _b.children) || item.label;
         handleOption(key, label, true);
@@ -881,7 +882,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var popperProps = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
-    prefixCls: selectPrefixCls,
+    prefixCls: (0, _concat.default)(_context5 = "".concat(selectPrefixCls, "-dropdown-panel")).call(_context5, isMultiple ? " ".concat(selectPrefixCls, "-multiple-dropdown-panel") : ''),
     placement: 'bottomLeft',
     popperStyle: catchStyle(),
     defaultVisible: optionShow,

package/lib/select/style/index.css

@@ -359,7 +359,7 @@
   z-index: var(--kd-c-select-z-index, var(--kd-g-z-index-popper, 1050));
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  padding: 8px 0;
+  padding: var(--kd-c-select-dropdown-spacing-padding-vertical, 8px) 0;
   margin: 0;
   overflow: auto;
   font-size: var(--kd-c-select-dropdown-font-size, 12px);
@@ -382,6 +382,9 @@
 .kd-select-dropdown-search-hidden {
   display: none;
 }
+.kd-select-multiple-dropdown-panel .kd-select-dropdown {
+  padding-bottom: 0;
+}
 .kd-select-item {
   position: relative;
   display: block;
@@ -648,8 +651,8 @@
           align-items: center;
   width: 100%;
   padding: 0 12px;
-  height: 32px;
-  line-height: 32px;
+  height: 40px;
+  line-height: 40px;
   border-top: 1px solid #d9d9d9;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/lib/select/style/index.less

@@ -132,10 +132,10 @@
     left: 0;
     z-index: @select-z-index;
     box-sizing: border-box;
-    padding: 8px 0; // update
+    padding: @select-dropdown-padding-vertical 0;
     margin: 0;
     overflow: auto;
-    font-size: @select-list-font-size; // update
+    font-size: @select-list-font-size;
     font-variant: initial;
     background-color: @select-dropdown-bg;
     border-radius: @select-g-radius-border;
@@ -159,6 +159,12 @@
     }
   }
 
+  &-multiple-dropdown-panel {
+    .@{select-prefix-cls}-dropdown {
+      padding-bottom: 0;
+    }
+  }
+
   // 下拉列表选项
   &-item {
     .item();
@@ -404,8 +410,8 @@
       align-items: center;
       width: 100%;
       padding: 0 12px;
-      height: 32px;
-      line-height: 32px;
+      height: 40px;
+      line-height: 40px;
       border-top: 1px solid #d9d9d9;
       box-sizing: border-box;
 

package/lib/select/style/token.less

@@ -2,7 +2,6 @@
 
 @select-custom-prefix: ~'--@{kd-prefix}-c-select';
 
-
 // color
 @select-dropdown-bg: var(~'@{select-custom-prefix}-dropdown-color-background', @color-background);
 @select-disabled-option-bg: var(~'@{select-custom-prefix}-item-color-background-disabled', #fff);
@@ -45,6 +44,7 @@
 // spacing
 @select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);
 @select-wrapper-padding: var(~'@{select-custom-prefix}-wrapper-spacing-padding', 1px 28px 1px 0);
+@select-dropdown-padding-vertical: var(~'@{select-custom-prefix}-dropdown-spacing-padding-vertical', 8px);
 
 // radius
 @select-g-radius-border: var(~'@{select-custom-prefix}-radius-border', @radius-border);

package/lib/style/core/motion/slide.less

@@ -31,12 +31,15 @@
 .slide-motion(topLeft, kdSlideDown, kd-cascader-menus);
 .slide-motion(bottomLeft, kdSlideUp, kd-cascader-menus);
 
-.slide-motion(topLeft, kdSlideDown, kd-select);
-.slide-motion(bottomLeft, kdSlideUp, kd-select);
+.slide-motion(topLeft, kdSlideDown, kd-select-dropdown-panel);
+.slide-motion(bottomLeft, kdSlideUp, kd-select-dropdown-panel);
 
 .slide-motion(topLeft, kdSlideDown, kd-date-picker-panel);
 .slide-motion(bottomLeft, kdSlideUp, kd-date-picker-panel);
 
+.slide-motion(topLeft, kdSlideDown, kd-city-picker-dropdown);
+.slide-motion(bottomLeft, kdSlideUp, kd-city-picker-dropdown);
+
 @keyframes kdSlideCenterIn {
   0% {
     opacity: 0;

package/lib/style/index.css

@@ -1361,7 +1361,7 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
-.kd-select.topLeft-active {
+.kd-select-dropdown-panel.topLeft-active {
   -webkit-animation-name: kdSlideDownIn;
           animation-name: kdSlideDownIn;
   -webkit-animation-duration: calc(0.3s - 0.1s);
@@ -1369,7 +1369,7 @@
   -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
           animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
 }
-.kd-select.topLeft.hidden {
+.kd-select-dropdown-panel.topLeft.hidden {
   -webkit-animation-name: kdSlideDownOut;
           animation-name: kdSlideDownOut;
   -webkit-animation-duration: 0.1s;
@@ -1377,7 +1377,7 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
-.kd-select.bottomLeft-active {
+.kd-select-dropdown-panel.bottomLeft-active {
   -webkit-animation-name: kdSlideUpIn;
           animation-name: kdSlideUpIn;
   -webkit-animation-duration: calc(0.3s - 0.1s);
@@ -1385,7 +1385,7 @@
   -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
           animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
 }
-.kd-select.bottomLeft.hidden {
+.kd-select-dropdown-panel.bottomLeft.hidden {
   -webkit-animation-name: kdSlideUpOut;
           animation-name: kdSlideUpOut;
   -webkit-animation-duration: 0.1s;
@@ -1425,6 +1425,38 @@
   -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
           animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
 }
+.kd-city-picker-dropdown.topLeft-active {
+  -webkit-animation-name: kdSlideDownIn;
+          animation-name: kdSlideDownIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-city-picker-dropdown.topLeft.hidden {
+  -webkit-animation-name: kdSlideDownOut;
+          animation-name: kdSlideDownOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
+.kd-city-picker-dropdown.bottomLeft-active {
+  -webkit-animation-name: kdSlideUpIn;
+          animation-name: kdSlideUpIn;
+  -webkit-animation-duration: calc(0.3s - 0.1s);
+          animation-duration: calc(0.3s - 0.1s);
+  -webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+          animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
+}
+.kd-city-picker-dropdown.bottomLeft.hidden {
+  -webkit-animation-name: kdSlideUpOut;
+          animation-name: kdSlideUpOut;
+  -webkit-animation-duration: 0.1s;
+          animation-duration: 0.1s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+          animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
+}
 @-webkit-keyframes kdSlideCenterIn {
   0% {
     opacity: 0;

package/lib/table/api.js

@@ -84,7 +84,7 @@ function getApi(pipelineRef) {
    * @returns
    */
   function ensureColumnVisible(code) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     var pipeline = pipelineRef.current;
     var tableBodyContainer = (_a = pipeline.ref) === null || _a === void 0 ? void 0 : _a.current.domHelper.tableBody;
     var tableScroll = (_b = pipeline.ref) === null || _b === void 0 ? void 0 : _b.current.domHelper.stickyScroll;
@@ -100,14 +100,30 @@ function getApi(pipelineRef) {
     var colLeft = (0, _slice.default)(columnNodes).call(columnNodes, 0, index).reduce(function (acc, col) {
       return acc + col.width;
     }, 0);
+    var lockColumnLeft = 0;
+    var lockColumnRight = 0;
+    for (var i = 0; i < columnNodes.length; i++) {
+      if ((_c = columnNodes[i]) === null || _c === void 0 ? void 0 : _c.lock) {
+        lockColumnLeft += columnNodes[i].width;
+      } else {
+        break;
+      }
+    }
+    for (var _i = columnNodes.length - 1; _i >= 0; _i--) {
+      if ((_d = columnNodes[_i]) === null || _d === void 0 ? void 0 : _d.lock) {
+        lockColumnRight += columnNodes[_i].width;
+      } else {
+        break;
+      }
+    }
     var colLeftPixel = colLeft; // 目标列前面列宽总和
     var colRightPixel = colLeftPixel + column.width;
     var viewportWidth = tableBodyContainer.clientWidth; // 表体容器的宽度
     var scrollPosition = tableScroll.scrollLeft; // 滚动条滚动的距离
     var vScrollLeft = scrollPosition;
     var vScrollRight = scrollPosition + viewportWidth;
-    var pxLeft = colLeftPixel;
-    var pxRight = colRightPixel - viewportWidth;
+    var pxLeft = colLeftPixel - lockColumnLeft;
+    var pxRight = colRightPixel - viewportWidth + lockColumnRight;
     var colBeforeViewport = vScrollLeft > colLeftPixel; // 滚动距离大于目标列前面列宽总和，说明目标列在视口之前
     var colPastViewport = vScrollRight < colRightPixel; // 目标列是视口之后
     var colToSmallForViewport = viewportWidth < column.width;

package/lib/tag/style/index.css

@@ -126,6 +126,8 @@
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
   border-radius: calc(var(--kd-c-tag-sizing-height-small, 20px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-size-middle {
   font-size: var(--kd-c-tag-font-size-middle, var(--kd-g-font-size-small, 12px));
@@ -141,6 +143,8 @@
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
   border-radius: calc(var(--kd-c-tag-sizing-height-middle, 20px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-size-large {
   font-size: var(--kd-c-tag-font-size-large, var(--kd-g-font-size-middle, 14px));
@@ -156,6 +160,8 @@
   vertical-align: middle;
   padding: 0 var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
   border-radius: calc(var(--kd-c-tag-sizing-height-large, 24px) / 2);
+  max-width: var(--kd-c-tag-sizing-max-width);
+  min-width: var(--kd-c-tag-sizing-min-width);
 }
 .kd-tag-shape-status {
   border: 1px solid var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));

package/lib/tag/style/index.less

@@ -14,15 +14,15 @@
   }
 
   &-size-small {
-    .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal);
+    .tag-size(@tag-small-font-size, @tag-small-height, @tag-small-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   &-size-middle {
-    .tag-size(@tag-middle-font-size, @tag-middle-height, @tag-middle-padding-horizontal);
+    .tag-size(@tag-middle-font-size, @tag-middle-height, @tag-middle-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   &-size-large {
-    .tag-size(@tag-large-font-size, @tag-large-height, @tag-large-padding-horizontal);
+    .tag-size(@tag-large-font-size, @tag-large-height, @tag-large-padding-horizontal, @tag-max-width, @tag-min-width);
   }
 
   transition: all @tag-g-motion-duration;

package/lib/tag/style/mixin.less

@@ -1,7 +1,7 @@
 @import './token.less';
 
 // code component mixin here
-.tag-size(@size, @height, @padding) {
+.tag-size(@size, @height, @padding, @max-width, @min-width) {
   font-size: @size;
   height: @height;
   box-sizing: border-box;
@@ -10,6 +10,8 @@
   vertical-align: middle;
   padding: 0 @padding;
   border-radius:  calc(@height / 2);
+  max-width: @max-width;
+  min-width: @min-width;
 }
 .tag-status(@color) {
   border: 1px solid @color;

package/lib/tag/style/token.less

@@ -35,6 +35,8 @@
 @tag-small-height: var(~'@{tag-custom-prefix}-sizing-height-small', 20px);
 @tag-middle-height: var(~'@{tag-custom-prefix}-sizing-height-middle', 20px);
 @tag-large-height: var(~'@{tag-custom-prefix}-sizing-height-large', 24px);
+@tag-max-width: var(~'@{tag-custom-prefix}-sizing-max-width');
+@tag-min-width: var(~'@{tag-custom-prefix}-sizing-min-width');
 
 // spacing
 @tag-small-padding-horizontal: var(~'@{tag-custom-prefix}-spacing-padding-horizontal-small', 6px);

package/lib/timeline/style/index.css

@@ -189,6 +189,8 @@
   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));
+  max-width: var(--kd-c-timeline-content-sizing-max-width);
+  min-width: var(--kd-c-timeline-content-sizing-min-width);
 }
 .kd-timeline .kd-timeline-item-content > * {
   margin: 0;

package/lib/timeline/style/index.less

@@ -13,6 +13,7 @@
   overflow: hidden;
   list-style: none;
 
+
   .@{timeline-item-prefix-cls} {
     .reset-component;
     position: relative;
@@ -84,6 +85,8 @@
       margin: 0 0 0 calc(2 * (@timeline-dot-size - @timeline-width) + @timeline-gap);
       word-break: break-word;
       color: @timeline-content-color-text;
+      max-width: @timeline-content-max-width;
+      min-width: @timeline-content-min-width;
 
       > * {
         margin: 0;

package/lib/timeline/style/token.less

@@ -21,6 +21,8 @@
 
 // sizing
 @timeline-width: var(~'@{timeline-prefix}-sizing-width',1px);
+@timeline-content-max-width: var(~'@{timeline-prefix}-content-sizing-max-width');
+@timeline-content-min-width: var(~'@{timeline-prefix}-content-sizing-min-width');
 
 // spacing
 @timeline-item-padding-bottom: var(~'@{timeline-prefix}-spacing-padding-bottom',24px);