@kdcloudjs/kdesign 1.7.26 → 1.7.28

package/lib/cascader/style/token.less

@@ -6,6 +6,7 @@
 @cascader-height: var(~'@{cascader-prefix}-sizing-height', 192px);
 @cascader-menu-min-width: var(~'@{cascader-prefix}-menu-sizing-min-width', 116px);
 @cascader-menu-item-height: var(~'@{cascader-prefix}-menu-item-sizing-height', 32px);
+@cascader-menu-item-label-width: var(~'@{cascader-prefix}-menu-item-label-sizing-width', 72px);
 
 // spacing
 @cascader-menu-padding-vertical: var(~'@{cascader-prefix}-menu-spacing-padding-vertical', 8px);

package/lib/city-picker/city-picker.js

@@ -24,8 +24,16 @@ var _index = require("../index");
 var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
 var _option = _interopRequireDefault(require("./option"));
 var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
+var _KeyCode = _interopRequireDefault(require("../_utils/KeyCode"));
+var _isObject = _interopRequireDefault(require("lodash/isObject"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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 getCityId = function getCityId(data) {
+  if ((0, _isObject.default)(data)) {
+    return data === null || data === void 0 ? void 0 : data.id;
+  }
+  return data;
+};
 var InternalSelect = function InternalSelect(props, ref) {
   var _context, _classNames3, _classNames5;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
@@ -75,8 +83,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     itemRender = selectProps.itemRender,
     onTabPaneChange = selectProps.onTabPaneChange;
   var _useMergedState = (0, _hooks.useMergedState)(undefined, {
-      value: value,
-      defaultValue: defaultValue
+      value: getCityId(value),
+      defaultValue: getCityId(defaultValue)
     }),
     _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
     initValue = _useMergedState2[0],
@@ -93,6 +101,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   var searchRef = (0, _react.useRef)(null); // 搜索框ref
   var selectionRef = (0, _react.useRef)(null);
   var clearRef = (0, _react.useRef)(null);
+  var optionsListRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(typeof props.visible === 'undefined' ? !!defaultOpen : !!props.visible),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     optionShow = _useState2[0],
@@ -124,6 +133,10 @@ var InternalSelect = function InternalSelect(props, ref) {
   (0, _react.useEffect)(function () {
     var _context2;
     if (typeof value === 'undefined') return;
+    if ((0, _isObject.default)(value)) {
+      setSeletedCity(value);
+      return;
+    }
     var cityList = (0, _concat.default)(_context2 = []).call(_context2, (0, _toConsumableArray2.default)(commonList), (0, _toConsumableArray2.default)(domesticList), (0, _toConsumableArray2.default)(foreignList));
     var city = (0, _find.default)(cityList).call(cityList, function (city) {
       return city.id === value;
@@ -224,6 +237,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var handleOption = function handleOption(city) {
     handleVisibleChange(false);
+    city.type = tabsValue === 'domestic' ? 'domestic' : 'foreign';
     (city === null || city === void 0 ? void 0 : city.id) !== initValue && (onChange === null || onChange === void 0 ? void 0 : onChange(city === null || city === void 0 ? void 0 : city.id, city));
     if (typeof value === 'undefined') {
       setSeletedCity(city);
@@ -236,8 +250,9 @@ var InternalSelect = function InternalSelect(props, ref) {
       return renderNotContent(notContent);
     }
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(selectPrefixCls, "-list")
-    }, (0, _map.default)(data).call(data, function (item) {
+      className: "".concat(selectPrefixCls, "-list"),
+      ref: optionsListRef
+    }, (0, _map.default)(data).call(data, function (item, index) {
       return /*#__PURE__*/_react.default.createElement(_option.default, {
         key: item.id,
         value: initValue,
@@ -247,7 +262,12 @@ var InternalSelect = function InternalSelect(props, ref) {
           return _renderCityInfo(data, isCommon, flag);
         },
         onChangeSelect: handleOption,
-        itemRender: itemRender
+        itemRender: itemRender,
+        activeIndex: activeIndex,
+        index: index,
+        onChangeActiveIndex: function onChangeActiveIndex(i) {
+          setActiveIndex(i);
+        }
       }, searchValue ? getHighlightText(item === null || item === void 0 ? void 0 : item.name, (item === null || item === void 0 ? void 0 : item[optionHighlightProps]) || searchValue) : item === null || item === void 0 ? void 0 : item.name);
     }));
   };
@@ -283,12 +303,22 @@ var InternalSelect = function InternalSelect(props, ref) {
     var symbol = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ', ';
     if (!data) return null;
     if (isDomestic(type)) {
-      var _context3;
-      var curVal = tabsValue === 'domestic' || isCommon ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
-      return (0, _concat.default)(_context3 = "".concat(flag && curVal ? symbol : '')).call(_context3, curVal);
+      var _context5;
+      if (isCommon) {
+        var _context3;
+        var _curVal = (data === null || data === void 0 ? void 0 : data.province) ? data === null || data === void 0 ? void 0 : data.province : data === null || data === void 0 ? void 0 : data.country;
+        return (0, _concat.default)(_context3 = "".concat(flag && _curVal ? symbol : '')).call(_context3, _curVal);
+      }
+      if (data === null || data === void 0 ? void 0 : data.type) {
+        var _context4;
+        var _curVal2 = data.type === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) : data === null || data === void 0 ? void 0 : data.country;
+        return (0, _concat.default)(_context4 = "".concat(flag && _curVal2 ? symbol : '')).call(_context4, _curVal2);
+      }
+      var curVal = tabsValue === 'domestic' ? (data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country) : data === null || data === void 0 ? void 0 : data.country;
+      return (0, _concat.default)(_context5 = "".concat(flag && curVal ? symbol : '')).call(_context5, curVal);
     } else {
-      var _context4, _context5, _context6;
-      return (0, _concat.default)(_context4 = (0, _concat.default)(_context5 = (0, _concat.default)(_context6 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.province)).call(_context5, (data === null || data === void 0 ? void 0 : data.country) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context4, data === null || data === void 0 ? void 0 : data.country);
+      var _context6, _context7, _context8;
+      return (0, _concat.default)(_context6 = (0, _concat.default)(_context7 = (0, _concat.default)(_context8 = "".concat(flag && ((data === null || data === void 0 ? void 0 : data.province) || (data === null || data === void 0 ? void 0 : data.country)) ? symbol : '')).call(_context8, data === null || data === void 0 ? void 0 : data.province)).call(_context7, (data === null || data === void 0 ? void 0 : data.country) && (data === null || data === void 0 ? void 0 : data.province) ? symbol : '')).call(_context6, data === null || data === void 0 ? void 0 : data.country);
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
@@ -340,6 +370,81 @@ var InternalSelect = function InternalSelect(props, ref) {
       (_a = clearRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseup', fn);
     };
   }, [initValue]);
+  // keyboard
+  var curkeyboardList = (0, _react.useMemo)(function () {
+    if (!searchValue) {
+      return commonList;
+    } else if (tabsValue === 'domestic') {
+      return domesticList;
+    } else {
+      return foreignList;
+    }
+  }, [commonList, domesticList, foreignList, searchValue, tabsValue]);
+  var getActiveIndex = function getActiveIndex(index) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var len = curkeyboardList.length;
+    for (var i = 0; i < len; i += 1) {
+      var current = (index + i * offset + len) % len;
+      return current;
+    }
+    return -1;
+  };
+  var _useState11 = (0, _react.useState)(getActiveIndex(0)),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    activeIndex = _useState12[0],
+    setActiveIndex = _useState12[1];
+  var initActiveIndex = function initActiveIndex() {
+    setActiveIndex(getActiveIndex(0));
+  };
+  (0, _react.useEffect)(function () {
+    initActiveIndex();
+  }, [searchValue, tabsValue]);
+  var onInternalKeyDown = function onInternalKeyDown(e) {
+    var _a, _b, _c;
+    var which = e.which;
+    // open
+    if (which === _KeyCode.default.ENTER || which === _KeyCode.default.UP || which === _KeyCode.default.DOWN) {
+      e.preventDefault();
+      setOptionShow(true);
+    }
+    // up、down、enter、esc
+    if (optionShow) {
+      var offset = 0;
+      switch (which) {
+        case _KeyCode.default.UP:
+          offset = -1;
+          break;
+        case _KeyCode.default.DOWN:
+          offset = 1;
+          break;
+        case _KeyCode.default.ENTER:
+          {
+            var item = curkeyboardList[activeIndex];
+            if (!item) return;
+            handleOption(item);
+            setOptionShow(false);
+            break;
+          }
+        case _KeyCode.default.ESC:
+          setOptionShow(false);
+          break;
+        default:
+          break;
+      }
+      if (offset !== 0) {
+        var nextActiveIndex = getActiveIndex(activeIndex + offset, offset);
+        var curDom = (_b = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[nextActiveIndex];
+        if (curDom) {
+          (_c = optionsListRef.current) === null || _c === void 0 ? void 0 : _c.children[nextActiveIndex].scrollIntoView({
+            behavior: 'auto',
+            block: 'nearest'
+          });
+        }
+        setActiveIndex(nextActiveIndex);
+        e.preventDefault();
+      }
+    }
+  };
   var renderCityPicker = function renderCityPicker() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: cityPickerCls,
@@ -357,7 +462,8 @@ var InternalSelect = function InternalSelect(props, ref) {
       onBlur: function onBlur() {
         var _a;
         return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
+      },
+      onKeyDown: onInternalKeyDown
     }, renderSingle()));
   };
   var catchStyle = function catchStyle() {
@@ -375,6 +481,9 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
+    if (!visible) {
+      initActiveIndex();
+    }
     if (visible !== optionShow) {
       props.visible === undefined && setOptionShow(visible);
       onVisibleChange && onVisibleChange(visible);

package/lib/city-picker/interface.d.ts

@@ -4,6 +4,7 @@ export declare type City = {
     country?: string;
     province?: string;
     name?: string;
+    type?: 'domestic' | 'foreign';
     [key: string]: any;
 };
 export declare const BorderTypes: ["none", "underline", "bordered"];
@@ -33,7 +34,7 @@ export interface CityPickerProps {
     clearIcon?: React.ReactNode;
     suffixIcon?: React.ReactNode;
     optionHighlightProps?: string;
-    value?: string | number;
+    value?: string | number | City;
     defaultValue?: string | number;
     description?: React.ReactNode;
     showDescription?: boolean;
@@ -52,7 +53,10 @@ export interface ICityPickerOptionProps {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    activeIndex?: number;
+    index: number;
     onChangeSelect?: (city: City | null) => void;
     renderCityInfo?: (city: City, flag?: boolean, symbol?: string) => React.ReactNode;
     itemRender?: (city: City) => React.ReactNode;
+    onChangeActiveIndex?: (index: number) => void;
 }

package/lib/city-picker/option.js

@@ -21,11 +21,14 @@ var InternalOption = function InternalOption(props, ref) {
     value = props.value,
     disabled = props.disabled,
     className = props.className,
+    activeIndex = props.activeIndex,
+    index = props.index,
     onChangeSelect = props.onChangeSelect,
     _props$city = props.city,
     city = _props$city === void 0 ? {} : _props$city,
     renderCityInfo = props.renderCityInfo,
-    itemRender = props.itemRender;
+    itemRender = props.itemRender,
+    onChangeActiveIndex = props.onChangeActiveIndex;
   var id = city.id,
     name = city.name;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
@@ -33,17 +36,25 @@ var InternalOption = function InternalOption(props, ref) {
     prefixCls = _useContext.prefixCls;
   var selectOptionPrefixCls = getPrefixCls(prefixCls, 'city-picker-list-item');
   var isSelected = id !== undefined ? id === value : false;
-  var optionCls = (0, _classnames.default)(selectOptionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), _classNames));
+  var optionCls = (0, _classnames.default)(selectOptionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-selected"), isSelected), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(selectOptionPrefixCls, "-active"), activeIndex === index), _classNames));
   var handleClick = function handleClick(e) {
     e.preventDefault();
     if (disabled || id === undefined) return;
     onChangeSelect === null || onChangeSelect === void 0 ? void 0 : onChangeSelect(city);
   };
+  var handleOnMouseEnter = function handleOnMouseEnter() {
+    onChangeActiveIndex && onChangeActiveIndex(index);
+  };
+  var handleOnMouseLeave = function handleOnMouseLeave() {
+    onChangeActiveIndex && onChangeActiveIndex(-1);
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     ref: optionRef,
     className: optionCls,
     title: name,
-    onClick: handleClick
+    onClick: handleClick,
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave
   }, typeof itemRender === 'function' ? itemRender(city) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(selectOptionPrefixCls, "-content")
   }, children), /*#__PURE__*/_react.default.createElement("span", {

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

@@ -166,6 +166,7 @@
   opacity: 0;
   z-index: 1;
   position: absolute;
+  top: 0;
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
@@ -181,6 +182,14 @@
   text-overflow: ellipsis;
   right: 24px;
   left: 0;
+  top: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .kd-city-picker-borderless {
   border: none;
@@ -312,6 +321,15 @@
       -ms-flex-pack: center;
           justify-content: center;
 }
+.kd-city-picker-dropdown.topLeft.hidden,
+.kd-city-picker-dropdown.bottomLeft.hidden,
+.kd-city-picker-dropdown.topRight.hidden,
+.kd-city-picker-dropdown.bottomRight.hidden {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
 .kd-city-picker-list {
   padding: 8px 0;
   max-height: 320px;
@@ -337,7 +355,7 @@
   color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
   white-space: nowrap;
 }
-.kd-city-picker-list-item:hover {
+.kd-city-picker-list-item-active:not(.kd-city-picker-list-item-disabled) {
   background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
 }
 .kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
@@ -378,6 +396,8 @@
 }
 .kd-city-picker-suffix {
   right: 0;
+  top: 0;
+  bottom: 0;
   position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -458,12 +478,3 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.kd-city-picker.topLeft.hidden,
-.kd-city-picker.bottomLeft.hidden,
-.kd-city-picker.topRight.hidden,
-.kd-city-picker.bottomRight.hidden {
-  opacity: 0;
-  visibility: hidden;
-  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-}

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

@@ -58,6 +58,7 @@
       opacity: 0;
       z-index: 1;
       position: absolute;
+      top: 0;
       background: #fff;
       transition: opacity 0.15s ease;
       &:hover {
@@ -74,6 +75,10 @@
     text-overflow: ellipsis;
     right: 24px;
     left: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
   }
 
   &-borderless {
@@ -202,6 +207,15 @@
       align-items: center;
       justify-content: center;
     }
+
+    &.topLeft.hidden,
+    &.bottomLeft.hidden,
+    &.topRight.hidden,
+    &.bottomRight.hidden {
+      opacity: 0;
+      visibility: hidden;
+      transition: all calc(@transition-duration - 0.1s) @ease;
+    }
   }
 
   &-list {
@@ -221,7 +235,7 @@
         white-space: nowrap;
       }
 
-      &:hover {
+      &-active:not(&-disabled) {
         background-color: @city-picker-item-active-bg;
       }
 
@@ -268,6 +282,8 @@
 
   &-suffix {
     right: 0;
+    top: 0;
+    bottom: 0;
     position: absolute;
     display: flex;
     flex: 0;
@@ -337,13 +353,4 @@
       .over();
     }
   }
-
-  &.topLeft.hidden,
-  &.bottomLeft.hidden,
-  &.topRight.hidden,
-  &.bottomRight.hidden {
-    opacity: 0;
-    visibility: hidden;
-    transition: all calc(@transition-duration - 0.1s) @ease;
-  }
 }

package/lib/grid/col.js

@@ -41,7 +41,7 @@ var Col = function Col(props) {
     className = _getCompProps.className,
     customPrefixcls = _getCompProps.prefixCls;
   // 浏览器名称
-  var isSogou = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0);
+  var isSogou = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'col', customPrefixcls);
   var columns = 24;

package/lib/grid/row.js

@@ -50,7 +50,7 @@ var Row = function Row(props) {
     justify = _getCompProps.justify,
     customPrefixcls = _getCompProps.prefixCls;
   // 浏览器名称
-  var isSogou = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0);
+  var isSogou = (0, _testBrowserType.testBrowserType)(/^sogou/i, 0) || /Trident|MSIE/.test(navigator.userAgent);
   // className前缀
   var prefixCls = getPrefixCls(pkgPrefixCls, 'row', customPrefixcls);
   var _React$useState = React.useState(window.innerWidth),

package/lib/select/select.js

@@ -641,9 +641,9 @@ var InternalSelect = function InternalSelect(props, ref) {
       onFocus: handleFocus,
       onBlur: handleBlur,
       readOnly: !isShowSearch || !!disabled
-    })), singleVal && !searchValue && /*#__PURE__*/_react.default.createElement("span", {
+    })), singleVal && !searchValue ? /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-selection-item")
-    }, singleVal), /*#__PURE__*/_react.default.createElement("span", {
+    }, singleVal) : null, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder"),
       style: hiddenStyle
     }, placeholder), /*#__PURE__*/_react.default.createElement("span", {

package/lib/select/style/index.css

@@ -405,6 +405,7 @@
   min-width: 75px;
 }
 .kd-select-item-option-content {
+  max-width: var(--kd-c-select-item-sizing-max-width);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/lib/select/style/index.less

@@ -176,6 +176,7 @@
       min-width: 75px;
 
       &-content {
+        max-width: @select-item-max-width;
         .over();
 
         .@{kd-prefix}-checkbox {

package/lib/select/style/token.less

@@ -40,6 +40,7 @@
 @select-large-height: var(~'@{select-custom-prefix}-sizing-height-large', 36px); // 大号高度 lh:28px
 @select-middle-height: var(~'@{select-custom-prefix}-sizing-height-middle', 30px); // 中号高度lh:22px
 @select-small-height: var(~'@{select-custom-prefix}-sizing-height-small', 24px); // 小号高度lh:12px
+@select-item-max-width: var(~'@{select-custom-prefix}-item-sizing-max-width');
 
 // spacing
 @select-bordered: var(~'@{select-custom-prefix}-bordered-spacing-padding-left', 8px);

package/lib/style/themes/default.less

@@ -282,7 +282,7 @@
 @radio-border-width: 1px;
 @radio-margin-right: 8px;
 @radio-transition-fn: cubic-bezier(0.075, 0.82, 0.165, 1);
-@radio-circle-size: 13px;
+@radio-circle-size: 14px;
 @radio-square-height: 32px;
 @radio-square-padding: 0 20px;
 @radio-button-height: 24px;
@@ -706,4 +706,4 @@
 @advancedSelector-dropdown-options-height: 32px;
 @advancedSelector-hover-bg: @hover-color;
 
-/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- end */

package/lib/tabs/style/index.css

@@ -380,6 +380,9 @@
   display: inline-block;
   -webkit-transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
   transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: var(--kd-c-tabs-pane-text-sizing-max-width);
 }
 .kd-tab-pane-text-active,
 .kd-tab-pane-text:hover {

package/lib/tabs/style/index.less

@@ -216,6 +216,9 @@
   &-text {
     display: inline-block;
     transition: color @tab-g-motion-duration;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: @tab-pane-text-max-width;
     &-active,
     &:hover {
       color: @tabPane-font-color-active;

package/lib/tabs/style/token.less

@@ -29,6 +29,7 @@
 @tab-pane-type-line-height-small: var(~'@{tabs-custom-prefix}-pane-type-line-sizing-height-small', 32px);
 @tab-pane-type-line-height-middle: var(~'@{tabs-custom-prefix}-pane-type-line-sizing-height-middle', 32px);
 @tab-pane-type-dynamic-height: var(~'@{tabs-custom-prefix}-pane-type-dynamic-sizing-height', 32px);
+@tab-pane-text-max-width: var(~'@{tabs-custom-prefix}-pane-text-sizing-max-width');
 
 
 // spacing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.26",
+  "version": "1.7.28",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [