@kdcloudjs/kdesign 1.6.13 → 1.6.15

package/es/tree/utils/treeUtils.js

@@ -3,11 +3,12 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 
 var __rest = this && this.__rest || function (s, e) {
@@ -38,6 +39,7 @@ export var flattenAll = function flattenAll(treeData) {
   var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var pos = arguments.length > 3 ? arguments[3] : undefined;
   var maxLevel = 0;
+  var keysData = {};
 
   var fn = function fn(treeData) {
     var newTreeData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -45,15 +47,13 @@ export var flattenAll = function flattenAll(treeData) {
     var pos = arguments.length > 3 ? arguments[3] : undefined;
     var parent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
     treeData && treeData.forEach(function (item, index) {
-      var _context;
+      var _context, _context2;
 
       var children = item.children,
           title = item.title,
           key = item.key,
           others = __rest(item, ["children", "title", "key"]);
 
-      item.parent = parent;
-
       var _pos = pos ? _concatInstanceProperty(_context = "".concat(pos, "-")).call(_context, index) : "".concat(index);
 
       var hasChildNode = item.isLeaf ? false : children && children instanceof Array && children.length > 0;
@@ -63,10 +63,13 @@ export var flattenAll = function flattenAll(treeData) {
         key: key,
         pos: _pos,
         hasChildNode: hasChildNode,
+        children: children,
         level: level,
-        parent: parent
+        parentKey: (parent === null || parent === void 0 ? void 0 : parent.key) || null,
+        pathParentKeys: parent ? _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray((parent === null || parent === void 0 ? void 0 : parent.pathParentKeys) || []), [parent === null || parent === void 0 ? void 0 : parent.key]) : []
       }, others);
 
+      keysData[key] = flattenNode;
       newTreeData.push(flattenNode);
       var _level = level;
 
@@ -83,7 +86,8 @@ export var flattenAll = function flattenAll(treeData) {
   var flattenAllData = fn(treeData, newTreeData, level, pos);
   return {
     flattenAllData: flattenAllData,
-    maxLevel: maxLevel
+    maxLevel: maxLevel,
+    keysData: keysData
   };
 };
 export var getExpand = function getExpand(expandedKeys, key) {
@@ -104,23 +108,23 @@ export var getHalfChecked = function getHalfChecked(halfCheckedKeys, key) {
  * @param pos
  */
 
-var isAllParentExpand = function isAllParentExpand(data, pos) {
+var isAllParentExpand = function isAllParentExpand(_data, pos, posData) {
+  var _a;
+
   var expand = true;
 
   while (pos.lastIndexOf('-') > -1 && expand) {
     pos = pos.substring(0, pos.lastIndexOf('-'));
 
-    var parentNode = _findInstanceProperty(data).call(data, function (item) {
-      return item.pos === pos;
-    });
-
-    expand = parentNode === null || parentNode === void 0 ? void 0 : parentNode.expand;
+    if (posData[pos]) {
+      expand = (_a = posData[pos]) === null || _a === void 0 ? void 0 : _a.expand;
+    }
   }
 
   return expand;
 };
 
-export var getAllFilterKeys = function getAllFilterKeys(data, filterTreeNode) {
+export var getAllFilterKeys = function getAllFilterKeys(data, filterTreeNode, keysData) {
   var allFilterKeys = [];
 
   _filterInstanceProperty(data).call(data, function (item) {
@@ -130,18 +134,20 @@ export var getAllFilterKeys = function getAllFilterKeys(data, filterTreeNode) {
 
     while (node) {
       allFilterKeys.push(node.key);
-      node = node.parent;
+      node = (keysData === null || keysData === void 0 ? void 0 : keysData[node === null || node === void 0 ? void 0 : node.parentKey]) || null;
     }
   });
 
   return _toConsumableArray(new _Set(allFilterKeys));
 };
 export var getFilterData = function getFilterData(data, filterTreeNode, isSearching) {
+  var posData = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var keysData = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
   var filterData = data;
   var allFilterKeys = null;
 
   if (isSearching) {
-    allFilterKeys = getAllFilterKeys(filterData, filterTreeNode);
+    allFilterKeys = getAllFilterKeys(filterData, filterTreeNode, keysData);
     filterData = _filterInstanceProperty(filterData).call(filterData, function (item) {
       return _includesInstanceProperty(allFilterKeys).call(allFilterKeys, item.key);
     });
@@ -150,7 +156,7 @@ export var getFilterData = function getFilterData(data, filterTreeNode, isSearch
   var newData = [];
   filterData.forEach(function (item) {
     var pos = item.pos;
-    var parentExpand = isAllParentExpand(filterData, pos);
+    var parentExpand = isAllParentExpand(filterData, pos, posData);
 
     if (parentExpand) {
       newData.push(item);
@@ -159,18 +165,20 @@ export var getFilterData = function getFilterData(data, filterTreeNode, isSearch
   return newData;
 };
 
-var hasParentChecked = function hasParentChecked(data, checkedKeys) {
+var hasParentChecked = function hasParentChecked(_data, checkedKeys) {
   var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var posData = arguments.length > 3 ? arguments[3] : undefined;
+
+  var _a;
+
   var checked = false;
 
   while (pos.lastIndexOf('-') > -1 && !checked) {
     pos = pos.substring(0, pos.lastIndexOf('-'));
 
-    var parentNode = _findInstanceProperty(data).call(data, function (item) {
-      return item.pos === pos;
-    });
-
-    checked = getChecked(checkedKeys, parentNode.key);
+    if (posData[pos]) {
+      checked = getChecked(checkedKeys, (_a = posData[pos]) === null || _a === void 0 ? void 0 : _a.key);
+    }
   }
 
   return checked;
@@ -251,7 +259,8 @@ export var getMaxLevel = function getMaxLevel(data) {
  */
 
 export var getSpreadAttrData = function getSpreadAttrData(treeData, expandedKeys) {
-  var newTreeData = [];
+  var spreadAttrData = [];
+  var posData = {};
   treeData.forEach(function (item) {
     var title = item.title,
         key = item.key,
@@ -266,7 +275,8 @@ export var getSpreadAttrData = function getSpreadAttrData(treeData, expandedKeys
 
     var itemExpand = getExpand(expandedKeys, key);
     var expand = itemExpand || false;
-    newTreeData.push(_extends({
+
+    var dataItem = _extends({
       title: title,
       key: key,
       level: level,
@@ -277,16 +287,22 @@ export var getSpreadAttrData = function getSpreadAttrData(treeData, expandedKeys
       disabled: disabled,
       checkable: checkable,
       selectable: selectable
-    }, others));
+    }, others);
+
+    posData[pos] = dataItem;
+    spreadAttrData.push(dataItem);
   });
-  return newTreeData;
+  return {
+    spreadAttrData: spreadAttrData,
+    posData: posData
+  };
 };
 export var addKeys = function addKeys() {
-  var _context2;
+  var _context3;
 
   var prevKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var newKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  return _Array$from(new _Set(_concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
+  return _Array$from(new _Set(_concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(prevKeys), _toConsumableArray(newKeys))));
 };
 export var getAllParentKeys = function getAllParentKeys(data) {
   var pos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
@@ -339,19 +355,22 @@ export var getPos = function getPos(data, key) {
   return node === null || node === void 0 ? void 0 : node.pos;
 };
 export var getInitCheckedKeys = function getInitCheckedKeys(data, keys) {
-  var _context3;
+  var _context4;
 
   var checkedKeys = [];
   keys.forEach(function (item) {
     var pos = getPos(data, item);
     checkedKeys.push.apply(checkedKeys, _toConsumableArray(getAllChildKeys(data, pos)));
   });
-  return _Array$from(new _Set(_concatInstanceProperty(_context3 = []).call(_context3, checkedKeys, _toConsumableArray(keys))));
+  return _Array$from(new _Set(_concatInstanceProperty(_context4 = []).call(_context4, checkedKeys, _toConsumableArray(keys))));
 };
 export var getInitCheckededState = function getInitCheckededState(data) {
   var checkedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var maxLevel = arguments.length > 2 ? arguments[2] : undefined;
   var init = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var posData = arguments.length > 4 ? arguments[4] : undefined;
+
+  var _keysData = arguments.length > 5 ? arguments[5] : undefined;
 
   var _checkedKeys = _toConsumableArray(checkedKeys);
 
@@ -370,7 +389,7 @@ export var getInitCheckededState = function getInitCheckededState(data) {
 
         var _hasHalfChildChecked = _hasChildCheckState === null || _hasChildCheckState === void 0 ? void 0 : _hasChildCheckState.halfChecked;
 
-        var _hasParentChecked = hasParentChecked(data, checkedKeys, item.pos);
+        var _hasParentChecked = hasParentChecked(data, checkedKeys, item.pos, posData);
 
         var checked = selfChecked || _hasParentChecked || _allChildChecked;
 
@@ -396,6 +415,136 @@ export var getInitCheckededState = function getInitCheckededState(data) {
     halfCheckedKeys: _Array$from(new _Set(_halfCheckedKeys))
   };
 };
+export function getChildNodeKeys(node, keysNodeProps) {
+  var nodes = new _Set();
+
+  var loop = function loop(children) {
+    _mapInstanceProperty(children).call(children, function (child) {
+      var key = child.key;
+      var item = keysNodeProps[key];
+
+      if (!item || item.disabled || item.checkable === false) {
+        return;
+      }
+
+      nodes.add(key);
+      loop(item.children || []);
+    });
+  };
+
+  if (node) {
+    loop(node.children || []);
+  }
+
+  return nodes;
+}
+
+var updateParent = function updateParent(key, keysNodeProps, allKeys, halfCheckedKeysSet) {
+  var pathParentKeys = _toConsumableArray(keysNodeProps[key].pathParentKeys); // 逐级更新父节点的状态
+
+
+  pathParentKeys.reverse().forEach(function (itemKey) {
+    var parent = keysNodeProps[itemKey];
+
+    if (parent && !parent.disabled && parent.checkable !== false) {
+      var total = 0;
+      var number = 0;
+      parent.children.some(function (_ref) {
+        var key = _ref.key;
+        var item = keysNodeProps[key]; // 不符合可选条件
+
+        if (!item || item.disabled || item.checkable === false) {
+          return false;
+        }
+
+        total++;
+
+        if (allKeys.has(key)) {
+          number++;
+        } else if (halfCheckedKeysSet.has(key)) {
+          // 只要有一个半选，就不用再算了 ，父节点是半选
+          number += 0.5;
+          return true;
+        }
+      });
+
+      if (!number || number === total) {
+        halfCheckedKeysSet.delete(itemKey);
+      } else {
+        halfCheckedKeysSet.add(itemKey);
+      }
+
+      if (number && number === total) {
+        allKeys.add(itemKey);
+      } else {
+        allKeys.delete(itemKey);
+      }
+    }
+  });
+};
+
+export var getInitCheckededKeys = function getInitCheckededKeys() {
+  var _context5;
+
+  var checkedKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var keysNodeProps = arguments.length > 1 ? arguments[1] : undefined;
+  var checkedKeysSet = new _Set(checkedKeys || []);
+  var halfCheckedKeysSet = new _Set();
+  var childCheckedKeysSet = new _Set();
+  checkedKeys.forEach(function (key) {
+    if (!childCheckedKeysSet.has(key)) {
+      var childKeys = getChildNodeKeys(keysNodeProps[key], keysNodeProps);
+      childKeys.forEach(function (v) {
+        childCheckedKeysSet.add(v);
+      });
+    }
+
+    if (keysNodeProps[key] && !keysNodeProps[key].pathParentKeys.some(function (_key) {
+      return checkedKeysSet.has(_key);
+    })) {
+      updateParent(key, keysNodeProps, checkedKeysSet, halfCheckedKeysSet);
+    }
+  });
+  return {
+    checkedKeys: _toConsumableArray(new _Set(_concatInstanceProperty(_context5 = []).call(_context5, _toConsumableArray(checkedKeysSet), _toConsumableArray(childCheckedKeysSet)))),
+    halfCheckedKeys: _toConsumableArray(halfCheckedKeysSet)
+  };
+};
+export function getAllCheckedKeys(key, checked, checkedKeys, keysNodeProps, halfCheckedKeys) {
+  if (!keysNodeProps[key]) {
+    return {
+      checkedKeys: checkedKeys,
+      halfCheckedKeys: halfCheckedKeys
+    };
+  }
+
+  var checkedKeysSet = new _Set(checkedKeys);
+  var halfCheckedKeysSet = new _Set(halfCheckedKeys);
+  var childKeys = getChildNodeKeys(keysNodeProps[key], keysNodeProps);
+  var allKeys = checkedKeysSet;
+
+  if (checked) {
+    // 选中节点，找到所有符合条件的子节点的key
+    allKeys.add(key);
+    halfCheckedKeysSet.delete(key);
+    childKeys.forEach(function (v) {
+      allKeys.add(v);
+    });
+  } else {
+    halfCheckedKeysSet.delete(key); // 移除所有符合条件的子节点的key
+
+    allKeys.delete(key);
+    childKeys.forEach(function (v) {
+      allKeys.delete(v);
+    });
+  }
+
+  updateParent(key, keysNodeProps, checkedKeysSet, halfCheckedKeysSet);
+  return {
+    checkedKeys: _toConsumableArray(allKeys),
+    halfCheckedKeys: _toConsumableArray(halfCheckedKeysSet)
+  };
+}
 export var getDataCheckededState = function getDataCheckededState(data, checkedKeys, halfCheckedKeys, maxLevel) {
   var init = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var pos = arguments.length > 5 ? arguments[5] : undefined;
@@ -522,6 +671,7 @@ export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys
   var expandScrollkeys = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : [];
   var filterTreeNode = arguments.length > 7 ? arguments[7] : undefined;
   var isSearching = arguments.length > 8 ? arguments[8] : undefined;
+  var keysData = arguments.length > 9 ? arguments[9] : undefined;
   var keys = (expandedKeys === null || expandedKeys === void 0 ? void 0 : _concatInstanceProperty(expandedKeys).call(expandedKeys, expandScrollkeys)) || (defaultExpandedKeys === null || defaultExpandedKeys === void 0 ? void 0 : _concatInstanceProperty(defaultExpandedKeys).call(defaultExpandedKeys, expandScrollkeys)) || [];
 
   if (defaultExpandAll) {
@@ -545,9 +695,9 @@ export var getInitExpandedKeys = function getInitExpandedKeys(data, expandedKeys
   }
 
   if (isSearching) {
-    var _context4;
+    var _context6;
 
-    keys = _concatInstanceProperty(_context4 = []).call(_context4, _toConsumableArray(keys), _toConsumableArray(getAllFilterKeys(data, filterTreeNode)));
+    keys = _concatInstanceProperty(_context6 = []).call(_context6, _toConsumableArray(keys), _toConsumableArray(getAllFilterKeys(data, filterTreeNode, keysData)));
   }
 
   return _Array$from(new _Set(_toConsumableArray(keys)));

package/lib/_utils/usePopper.d.ts

@@ -20,6 +20,7 @@ export interface PopperProps {
     placement?: PlacementType;
     popperStyle?: React.CSSProperties;
     trigger?: TriggerType | Array<TriggerType>;
+    clickToClose?: boolean;
     onTrigger?: (trigger: TriggerType) => void;
     onVisibleChange?: (visible: boolean) => void;
     getTriggerElement?: (locatorNode: HTMLElement) => HTMLElement;

package/lib/_utils/usePopper.js

@@ -188,6 +188,8 @@ function usePopper(locatorElement, popperElement, props) {
       defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
       _props$autoPlacement = props.autoPlacement,
       autoPlacement = _props$autoPlacement === void 0 ? true : _props$autoPlacement,
+      _props$clickToClose = props.clickToClose,
+      clickToClose = _props$clickToClose === void 0 ? true : _props$clickToClose,
       _props$getTriggerElem = props.getTriggerElement,
       getTriggerElement = _props$getTriggerElem === void 0 ? function (locatorNode) {
     return locatorNode;
@@ -669,7 +671,7 @@ function usePopper(locatorElement, popperElement, props) {
             return showPopper(e.type);
           }, mouseEnterDelay * 1000);
         } else if (e.type === 'mouseup' && visible) {
-          hidePopper();
+          clickToClose && hidePopper();
         } else {
           showPopper(e.type);
         }

package/lib/button/button.js

@@ -162,7 +162,7 @@ var InternalButton = function InternalButton(props, ref) {
         className: btnClasses,
         onClick: handleClick,
         disabled: disabled
-      }, others), children);
+      }, others), iconNode, children);
 
     default:
       return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({

package/lib/button/style/index.css

@@ -338,6 +338,9 @@
   padding: 0;
   min-width: auto;
 }
+.kd-btn-text .kd-btn-iconWrapper-left {
+  margin-right: var(--kd-c-button-text-icon-spacing-margin-right, 4px);
+}
 .kd-btn-text:hover {
   color: var(--kd-c-button-text-color-text-hover, var(--kd-g-color-theme-5, #87adff));
 }

package/lib/button/style/index.less

@@ -201,6 +201,10 @@
     padding: 0;
     min-width: auto;
 
+    .@{btn-prefix-cls}-iconWrapper-left {
+      margin-right: @btn-text-icon-margin-right;
+    }
+
     &:hover {
       color: @btn-text-g-text-color-hover;
     }

package/lib/button/style/token.less

@@ -104,3 +104,4 @@
 @btn-large-padding-horizontal: var(~'@{button-custom-prefix}-spacing-padding-horizontal-large', 8px); // 大号 内间距 横向
 @btn-group-dropdown-item-horizontal: var(~'@{button-custom-prefix}-group-dropdown-item-horizonta', 12px);
 @btn-icon-padding-horizontal: var(~'@{button-custom-prefix}-icon-spacing-padding-horizontal', 4px);
+@btn-text-icon-margin-right: var(~'@{button-custom-prefix}-text-icon-spacing-margin-right', 4px);

package/lib/carousel/carousel.d.ts

@@ -5,6 +5,7 @@ export declare const EffectTypes: ["scrollx", "fade"];
 export declare type EffectType = typeof EffectTypes[number];
 export interface CarouselProps {
     autoplay?: boolean;
+    jumpNode?: boolean | React.ReactNode[];
     children?: React.ReactNode;
     dotPosition?: string;
     dots?: boolean | {

package/lib/carousel/carousel.js

@@ -15,6 +15,8 @@ exports.default = exports.EffectTypes = exports.DotPositionTypes = void 0;
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -43,6 +45,8 @@ var _displayList = require("./displayList");
 
 var _slidebar = require("./slidebar");
 
+var _icon = _interopRequireDefault(require("../icon"));
+
 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; }
@@ -60,6 +64,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
 
   var carouselProps = (0, _utils.getCompProps)('Carousel', userDefaultProps, props);
   var autoplay = carouselProps.autoplay,
+      jumpNode = carouselProps.jumpNode,
       dotPosition = carouselProps.dotPosition,
       children = carouselProps.children,
       dots = carouselProps.dots,
@@ -293,6 +298,68 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     return content;
   };
 
+  var renderJumpNode = function renderJumpNode() {
+    if ((children === null || children === void 0 ? void 0 : children.length) && jumpNode) {
+      var jumpClassPrefix = "".concat(carouselPrefixCls, "-jump");
+
+      var leftClick = function leftClick(e) {
+        e.stopPropagation();
+
+        if (currentIndex !== 0) {
+          prev();
+        }
+      };
+
+      var rightClick = function rightClick(e) {
+        e.stopPropagation();
+
+        if (currentIndex !== children.length - 1) {
+          next();
+        }
+      };
+
+      var mergeNode = function mergeNode(node, type) {
+        var onClick = function onClick(evt) {
+          var chClick = node.props.onClick;
+
+          if (type === 'left') {
+            leftClick(evt);
+          } else {
+            rightClick(evt);
+          }
+
+          if (typeof chClick === 'function') {
+            chClick(evt);
+          }
+        };
+
+        return (0, _extends2.default)((0, _extends2.default)({}, node.props), {
+          onClick: onClick
+        });
+      };
+
+      var leftNode = /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(jumpClassPrefix, "".concat(jumpClassPrefix, "-left"), (0, _defineProperty2.default)({}, "".concat(jumpClassPrefix, "-disabled"), currentIndex <= 0))
+      }, Array.isArray(jumpNode) && jumpNode.length > 0 && /*#__PURE__*/(0, _react.isValidElement)(jumpNode[0]) ? /*#__PURE__*/_react.default.cloneElement(jumpNode[0], mergeNode(jumpNode[0], 'left')) : /*#__PURE__*/_react.default.createElement(_icon.default, {
+        className: "".concat(jumpClassPrefix, "-icon"),
+        type: 'arrow-left-circle-solid',
+        onClick: leftClick
+      }));
+
+      var rightNode = /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(jumpClassPrefix, "".concat(jumpClassPrefix, "-right"), (0, _defineProperty2.default)({}, "".concat(jumpClassPrefix, "-disabled"), currentIndex >= children.length - 1))
+      }, Array.isArray(jumpNode) && jumpNode.length > 1 && /*#__PURE__*/(0, _react.isValidElement)(jumpNode[1]) ? /*#__PURE__*/_react.default.cloneElement(jumpNode[1], mergeNode(jumpNode[1], 'right')) : /*#__PURE__*/_react.default.createElement(_icon.default, {
+        className: "".concat(jumpClassPrefix, "-icon"),
+        type: 'arrow-right-circle-solid',
+        onClick: rightClick
+      }));
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, leftNode, rightNode);
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: rootClassName,
     ref: carouselRef,
@@ -302,14 +369,14 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     style: style,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, (children === null || children === void 0 ? void 0 : children.length) && renderDisplayList(), (children === null || children === void 0 ? void 0 : children.length) && showDot() && /*#__PURE__*/_react.default.createElement(_slidebar.Slidebar, {
+  }, (children === null || children === void 0 ? void 0 : children.length) ? renderDisplayList() : null, (children === null || children === void 0 ? void 0 : children.length) && showDot() ? /*#__PURE__*/_react.default.createElement(_slidebar.Slidebar, {
     number: children.length,
     currentIndex: currentIndex,
     dotsClassName: dots,
     parentPrefixCls: carouselPrefixCls,
     dotPosition: dotPosition,
     onClick: handleClick
-  }));
+  }) : null, renderJumpNode());
 };
 
 var Carousel = /*#__PURE__*/_react.default.forwardRef(InternalCarousel);

package/lib/carousel/style/index.css

@@ -290,6 +290,45 @@
   background-color: var(--kd-c-carousel-dots-color-hover, #666666);
   opacity: 1;
 }
+.kd-carousel-jump {
+  position: absolute;
+  top: 50%;
+  left: unset;
+  right: 16px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.kd-carousel-jump-left {
+  left: 16px;
+  right: unset;
+}
+.kd-carousel-jump:not(.kd-carousel-jump-disabled) {
+  cursor: pointer;
+}
+.kd-carousel-jump > *:first-child {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.kd-carousel-jump-icon {
+  font-size: 20px;
+  color: var(--kd-c-carousel-jump-icon-color, #D9D9D9);
+}
+.kd-carousel-jump-icon:hover {
+  color: var(--kd-c-carousel-jump-icon-color-hover, #666666);
+}
+.kd-carousel-jump-disabled {
+  cursor: not-allowed;
+}
+.kd-carousel-jump-disabled .kd-carousel-jump-icon:hover {
+  color: var(--kd-c-carousel-jump-icon-color, #D9D9D9);
+}
 .vertical {
   display: -webkit-box;
   display: -ms-flexbox;

package/lib/carousel/style/index.less

@@ -132,6 +132,46 @@
       }
     }
   }
+
+  &-jump {
+    position: absolute;
+    top: 50%;
+    left: unset;
+    right: 16px;
+    transform: translateY(-50%);
+
+    &-left {
+      left: 16px;
+      right: unset;
+    }
+
+    &:not(.@{carousel-prefix-cls}-jump-disabled) {
+      cursor: pointer;
+    }
+
+    > *:first-child {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-icon {
+      font-size: 20px;
+      color: @carousel-jump-icon-color;
+
+      &:hover {
+        color: @carousel-jump-icon-color-hover;
+      }
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+
+      .@{carousel-prefix-cls}-jump-icon:hover {
+        color: @carousel-jump-icon-color;
+      }
+    }
+  }
 }
 .vertical {
   display: flex;

package/lib/carousel/style/token.less

@@ -3,6 +3,8 @@
 // color
 @carousel-dots-color-background: var(~'@{carousel-prefix}-dots-color-background', #D8D8D8); // 面板指示点的背景色
 @carousel-dots-color-background-active: var(~'@{carousel-prefix}-dots-color-hover', #666666); // 面板指示点的背景色
+@carousel-jump-icon-color: var(~'@{carousel-prefix}-jump-icon-color', #D9D9D9);
+@carousel-jump-icon-color-hover: var(~'@{carousel-prefix}-jump-icon-color-hover', #666666);
 
 // radius
 @carousel-dots-boder-radius: var(~'@{carousel-prefix}-dots-border-radius', 2px); // 面板指示点的圆角