@kdcloudjs/kdesign 1.8.1 → 1.8.3

package/es/carousel/carousel.js

@@ -54,6 +54,17 @@ var InternalCarousel = function InternalCarousel(props, ref) {
   var carouselRef = React.useRef();
   var listRef = React.useRef();
   var autoplayRef = React.useRef();
+  var processChildren = function processChildren(children) {
+    var childCount = React.Children.count(children);
+    if (childCount === 0) {
+      return [];
+    } else if (childCount === 1) {
+      return [children];
+    } else {
+      return React.Children.toArray(children);
+    }
+  };
+  var tempChild = processChildren(children);
   var isScrollxEffect = React.useMemo(function () {
     return effect === 'scrollx';
   }, [effect]);
@@ -73,16 +84,18 @@ var InternalCarousel = function InternalCarousel(props, ref) {
   }, [itemWidth]);
   var setScrollXEffectStyle = React.useCallback(function () {
     var _context;
-    if (!listRef.current) return;
+    var tempChild = processChildren(children);
+    if (!listRef.current || tempChild.length <= 1) return;
     listRef.current.style.cssText = needAnimation ? _concatInstanceProperty(_context = "transform: translateX(".concat(posX, "px); transition:all 0.3s ")).call(_context, easing) : "transform: translateX(".concat(posX, "px); transition:none");
   }, [children === null || children === void 0 ? void 0 : children.length, needAnimation, easing, posX]);
   var jumpTo = React.useCallback(function (index, needAnimation) {
+    var tempChild = processChildren(children);
     if (isFadeEffect) {
-      if (index === -1 || index === children.length) index = 0;
+      if (index === -1 || index === tempChild.length) index = 0;
       beforeChange && beforeChange(currentIndex, index);
       setCurrentIndex(index);
       setNeedAnimation(needAnimation);
-    } else if (index >= -1 && index <= children.length) {
+    } else if (index >= -1 && index <= tempChild.length) {
       beforeChange && beforeChange(currentIndex, index);
       setCurrentIndex(index);
       setNeedAnimation(needAnimation);
@@ -169,8 +182,9 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     setNeedAnimation(true);
   }, [beforeChange, currentIndex]);
   var handleTransitionEnd = React.useCallback(function () {
-    if (!autoplay || !(children === null || children === void 0 ? void 0 : children.length)) return;
-    var childrenL = children.length;
+    var tempChild = processChildren(children);
+    if (!autoplay || !(tempChild === null || tempChild === void 0 ? void 0 : tempChild.length)) return;
+    var childrenL = tempChild.length;
     var newCurrentIndex = currentIndex;
     if (isScrollxEffect) {
       if (currentIndex === -1) {
@@ -192,10 +206,11 @@ var InternalCarousel = function InternalCarousel(props, ref) {
   }, [play, autoplay]);
   var rootClassName = classNames(className, _defineProperty({}, "".concat(carouselPrefixCls, "-root"), true));
   var renderDisplayList = function renderDisplayList() {
+    var tempChild = processChildren(children);
     var content;
     if (isFadeEffect) {
       content = /*#__PURE__*/React.createElement(FadeList, {
-        items: children,
+        items: tempChild,
         parentPrefixCls: carouselPrefixCls,
         needAnimation: needAnimation,
         currentIndex: currentIndex,
@@ -204,14 +219,14 @@ var InternalCarousel = function InternalCarousel(props, ref) {
       });
     } else if (isNoneEffect) {
       content = /*#__PURE__*/React.createElement(DisplayList, {
-        items: children,
+        items: tempChild,
         parentPrefixCls: carouselPrefixCls,
         currentIndex: currentIndex,
         ref: listRef
       });
     } else {
       content = /*#__PURE__*/React.createElement(SlideList, {
-        items: children,
+        items: tempChild,
         parentPrefixCls: carouselPrefixCls,
         currentIndex: currentIndex,
         ref: listRef
@@ -220,7 +235,8 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     return content;
   };
   var renderJumpNode = function renderJumpNode() {
-    if ((children === null || children === void 0 ? void 0 : children.length) && jumpNode) {
+    var tempChild = processChildren(children);
+    if ((tempChild === null || tempChild === void 0 ? void 0 : tempChild.length) && jumpNode) {
       var jumpClassPrefix = "".concat(carouselPrefixCls, "-jump");
       var leftClick = function leftClick(e) {
         e.stopPropagation();
@@ -230,7 +246,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
       };
       var rightClick = function rightClick(e) {
         e.stopPropagation();
-        if (currentIndex !== children.length - 1) {
+        if (currentIndex !== tempChild.length - 1) {
           next();
         }
       };
@@ -258,7 +274,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
         onClick: leftClick
       }));
       var rightNode = /*#__PURE__*/React.createElement("div", {
-        className: classNames(jumpClassPrefix, "".concat(jumpClassPrefix, "-right"), _defineProperty({}, "".concat(jumpClassPrefix, "-disabled"), currentIndex >= children.length - 1))
+        className: classNames(jumpClassPrefix, "".concat(jumpClassPrefix, "-right"), _defineProperty({}, "".concat(jumpClassPrefix, "-disabled"), currentIndex >= tempChild.length - 1))
       }, Array.isArray(jumpNode) && jumpNode.length > 1 && /*#__PURE__*/isValidElement(jumpNode[1]) ? /*#__PURE__*/React.cloneElement(jumpNode[1], mergeNode(jumpNode[1], 'right')) : /*#__PURE__*/React.createElement(Icon, {
         className: "".concat(jumpClassPrefix, "-icon"),
         type: 'arrow-right-circle-solid',
@@ -277,8 +293,8 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     style: style,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, (children === null || children === void 0 ? void 0 : children.length) ? renderDisplayList() : null, (children === null || children === void 0 ? void 0 : children.length) && showDot() ? /*#__PURE__*/React.createElement(Slidebar, {
-    number: children.length,
+  }, (tempChild === null || tempChild === void 0 ? void 0 : tempChild.length) ? renderDisplayList() : null, (tempChild === null || tempChild === void 0 ? void 0 : tempChild.length) && showDot() ? /*#__PURE__*/React.createElement(Slidebar, {
+    number: tempChild.length,
     currentIndex: currentIndex,
     dotsClassName: dots,
     parentPrefixCls: carouselPrefixCls,

package/es/carousel/slideList.js

@@ -13,7 +13,7 @@ export var SlideList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var listPrefixCls = "".concat(parentPrefixCls, "-list");
   var renderItems = function renderItems() {
     var _context;
-    var _items = _concatInstanceProperty(_context = _sliceInstanceProperty(items).call(items, -1)).call(_context, items, _sliceInstanceProperty(items).call(items, 0, 1)); // 首位分别添加一项
+    var _items = items.length > 1 ? _concatInstanceProperty(_context = _sliceInstanceProperty(items).call(items, -1)).call(_context, items, _sliceInstanceProperty(items).call(items, 0, 1)) : items; // 首位分别添加一项
     return _mapInstanceProperty(_items).call(_items, function (item, index) {
       return /*#__PURE__*/React.createElement("li", {
         className: classNames("".concat(listPrefixCls, "-item"), _defineProperty({}, "".concat(listPrefixCls, "-item-active"), currentIndex === index - 1)),

package/es/image/preview-group.js

@@ -108,12 +108,12 @@ var PreviewGroup = function PreviewGroup(_ref) {
     onPrevious: onPrevious
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, images.length > 1 ? _mapInstanceProperty(_context3 = React.Children).call(_context3, children, function (image, index) {
-    var _a;
+    var _a, _b;
     return /*#__PURE__*/React.cloneElement(image, {
       key: image.key || index,
       preview: false,
       ref: refs[index],
-      onClick: onPreview.bind(null, index, (_a = image === null || image === void 0 ? void 0 : image.props) === null || _a === void 0 ? void 0 : _a.src)
+      onClick: ((_a = image === null || image === void 0 ? void 0 : image.props) === null || _a === void 0 ? void 0 : _a.preview) !== false ? onPreview.bind(null, index, (_b = image === null || image === void 0 ? void 0 : image.props) === null || _b === void 0 ? void 0 : _b.src) : undefined
     });
   }) : children, exit && /*#__PURE__*/React.createElement(Preview, _extends({}, previewProps)));
 };

package/es/signature/drawingBoard.js

@@ -148,13 +148,13 @@ var DrawingBoard = /*#__PURE__*/forwardRef(function (props, ref) {
     d: "M9.16767025,16.9762781 C9.5300869,17.3386948 9.5300869,17.9262881 9.16767025,18.2887049 C8.84552213,18.6108529 8.34545651,18.6466472 7.98377112,18.3960875 L7.85524348,18.2887049 L0.815437446,11.2488988 C-0.203859357,10.229602 -0.267565411,8.61657722 0.624319283,7.52306442 L0.815437446,7.31161852 L7.85524348,0.271812484 C8.21766013,-0.0906041612 8.80525361,-0.0906041612 9.16767025,0.271812484 C9.48981838,0.593960608 9.5256126,1.09402626 9.27505297,1.45571158 L9.16767025,1.58423925 L2.39801882,8.35223283 L18.7197413,8.35223283 C24.8235066,8.35223283 28,11.88167 28,18.5605173 C28,25.0286774 25.0409921,28.8154573 19.1996764,29.6367412 L18.7197413,29.6968277 L3.87132753,29.6968277 C3.358793,29.6968277 2.94330165,29.2813365 2.94330165,28.7688019 C2.94330165,28.3132156 3.27159111,27.9343054 3.70451369,27.8557278 L3.87132753,27.840776 L18.6172581,27.846452 C23.6969089,27.2820464 26.1439483,24.2912204 26.1439483,18.5605173 C26.1439483,13.0283959 23.8870007,10.3626156 19.1446408,10.2148013 L18.7197413,10.2082845 L2.39987488,10.2082845 L9.16767025,16.9762781 Z",
     id: "\u8DEF\u5F84",
     fill: "currentColor"
-  }))))) : null, onClear ? /*#__PURE__*/React.createElement(Icon, {
+  }))))) : null, /*#__PURE__*/React.createElement(Icon, {
     type: "delete",
     className: "".concat(prefixCls, "-drawing-board-clear"),
     onClick: function onClick() {
       return handleOnClear();
     }
-  }) : null), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("span", {
     className: "".concat(prefixCls, "-drawing-board-tip")
   }, isEmpty ? signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.pleaseWriteHere : ''), /*#__PURE__*/React.createElement("canvas", {
     ref: canvasRef

package/es/signature/signature.js

@@ -229,7 +229,12 @@ var Signature = function Signature(props) {
     id: "\u5F62\u72B6",
     fill: "#666666"
   }))))));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, dataUrl ? /*#__PURE__*/React.createElement(Image, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: signatureClass,
+    ref: triggerRef,
+    style: style
+  }, dataUrl ? /*#__PURE__*/React.createElement(Image, {
+    className: "".concat(signaturePrefixCls, "-image"),
     preview: preview,
     src: dataUrl,
     title: "\u5220\u9664",
@@ -241,13 +246,11 @@ var Signature = function Signature(props) {
       }
     })] : undefined
   }) : /*#__PURE__*/React.createElement("div", {
-    className: signatureClass,
-    ref: triggerRef,
-    onClick: handleOnClick,
-    style: style
+    className: "".concat(signaturePrefixCls, "-empty"),
+    onClick: handleOnClick
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "edit"
-  }), /*#__PURE__*/React.createElement("span", null, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.clickToSign)), /*#__PURE__*/React.createElement(Modal, _extends({
+  }), /*#__PURE__*/React.createElement("span", null, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.clickToSign))), /*#__PURE__*/React.createElement(Modal, _extends({
     width: containerWidth,
     height: containerHeight,
     ref: modalRef,

package/es/signature/style/index.css

@@ -106,9 +106,25 @@
 .kd-signature {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border: 1px dashed #e5e5e5;
   width: 100%;
   height: 100%;
+}
+.kd-signature-image {
+  width: 100%;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.kd-signature-image img {
+  width: 100%;
+  height: 100%;
+}
+.kd-signature-empty {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 1px dashed #e5e5e5;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -130,7 +146,7 @@
   -webkit-transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
   transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
 }
-.kd-signature:hover {
+.kd-signature-empty:hover {
   border-color: var(--kd-c-signature-border-color-hover, var(--kd-g-color-theme-5, #87adff));
   background-color: var(--kd-c-signature-bg-color-hover, var(--kd-g-color-theme-1, #f2f8ff));
 }

package/es/signature/style/index.less

@@ -5,22 +5,36 @@
 
 .@{signature-prefix-cls} {
   box-sizing: border-box;
-  border: 1px dashed #e5e5e5;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: @signature-bg-color;
-  color: @signature-color-text;
-  font-size: @signature-font-size;
-  cursor: pointer;
-  border-radius: @signature-border-radius;
-  transition: border-color @signature-transition-duration, background-color @signature-transition-duration;
-  &:hover {
-    border-color: @signature-border-color-hover;
-    background-color: @signature-bg-color-hover;
+  &-image {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &-empty {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: 1px dashed #e5e5e5;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: @signature-bg-color;
+    color: @signature-color-text;
+    font-size: @signature-font-size;
+    cursor: pointer;
+    border-radius: @signature-border-radius;
+    transition: border-color @signature-transition-duration, background-color @signature-transition-duration;
+    &:hover {
+      border-color: @signature-border-color-hover;
+      background-color: @signature-bg-color-hover;
+    }
   }
 }
 .@{signature-prefix-cls}.@{signature-prefix-cls}-disabled {

package/lib/carousel/carousel.js

@@ -68,6 +68,17 @@ var InternalCarousel = function InternalCarousel(props, ref) {
   var carouselRef = _react.default.useRef();
   var listRef = _react.default.useRef();
   var autoplayRef = _react.default.useRef();
+  var processChildren = function processChildren(children) {
+    var childCount = _react.default.Children.count(children);
+    if (childCount === 0) {
+      return [];
+    } else if (childCount === 1) {
+      return [children];
+    } else {
+      return _react.default.Children.toArray(children);
+    }
+  };
+  var tempChild = processChildren(children);
   var isScrollxEffect = _react.default.useMemo(function () {
     return effect === 'scrollx';
   }, [effect]);
@@ -87,16 +98,18 @@ var InternalCarousel = function InternalCarousel(props, ref) {
   }, [itemWidth]);
   var setScrollXEffectStyle = _react.default.useCallback(function () {
     var _context;
-    if (!listRef.current) return;
+    var tempChild = processChildren(children);
+    if (!listRef.current || tempChild.length <= 1) return;
     listRef.current.style.cssText = needAnimation ? (0, _concat.default)(_context = "transform: translateX(".concat(posX, "px); transition:all 0.3s ")).call(_context, easing) : "transform: translateX(".concat(posX, "px); transition:none");
   }, [children === null || children === void 0 ? void 0 : children.length, needAnimation, easing, posX]);
   var jumpTo = _react.default.useCallback(function (index, needAnimation) {
+    var tempChild = processChildren(children);
     if (isFadeEffect) {
-      if (index === -1 || index === children.length) index = 0;
+      if (index === -1 || index === tempChild.length) index = 0;
       beforeChange && beforeChange(currentIndex, index);
       setCurrentIndex(index);
       setNeedAnimation(needAnimation);
-    } else if (index >= -1 && index <= children.length) {
+    } else if (index >= -1 && index <= tempChild.length) {
       beforeChange && beforeChange(currentIndex, index);
       setCurrentIndex(index);
       setNeedAnimation(needAnimation);
@@ -183,8 +196,9 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     setNeedAnimation(true);
   }, [beforeChange, currentIndex]);
   var handleTransitionEnd = _react.default.useCallback(function () {
-    if (!autoplay || !(children === null || children === void 0 ? void 0 : children.length)) return;
-    var childrenL = children.length;
+    var tempChild = processChildren(children);
+    if (!autoplay || !(tempChild === null || tempChild === void 0 ? void 0 : tempChild.length)) return;
+    var childrenL = tempChild.length;
     var newCurrentIndex = currentIndex;
     if (isScrollxEffect) {
       if (currentIndex === -1) {
@@ -206,10 +220,11 @@ var InternalCarousel = function InternalCarousel(props, ref) {
   }, [play, autoplay]);
   var rootClassName = (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(carouselPrefixCls, "-root"), true));
   var renderDisplayList = function renderDisplayList() {
+    var tempChild = processChildren(children);
     var content;
     if (isFadeEffect) {
       content = /*#__PURE__*/_react.default.createElement(_fadeList.FadeList, {
-        items: children,
+        items: tempChild,
         parentPrefixCls: carouselPrefixCls,
         needAnimation: needAnimation,
         currentIndex: currentIndex,
@@ -218,14 +233,14 @@ var InternalCarousel = function InternalCarousel(props, ref) {
       });
     } else if (isNoneEffect) {
       content = /*#__PURE__*/_react.default.createElement(_displayList.DisplayList, {
-        items: children,
+        items: tempChild,
         parentPrefixCls: carouselPrefixCls,
         currentIndex: currentIndex,
         ref: listRef
       });
     } else {
       content = /*#__PURE__*/_react.default.createElement(_slideList.SlideList, {
-        items: children,
+        items: tempChild,
         parentPrefixCls: carouselPrefixCls,
         currentIndex: currentIndex,
         ref: listRef
@@ -234,7 +249,8 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     return content;
   };
   var renderJumpNode = function renderJumpNode() {
-    if ((children === null || children === void 0 ? void 0 : children.length) && jumpNode) {
+    var tempChild = processChildren(children);
+    if ((tempChild === null || tempChild === void 0 ? void 0 : tempChild.length) && jumpNode) {
       var jumpClassPrefix = "".concat(carouselPrefixCls, "-jump");
       var leftClick = function leftClick(e) {
         e.stopPropagation();
@@ -244,7 +260,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
       };
       var rightClick = function rightClick(e) {
         e.stopPropagation();
-        if (currentIndex !== children.length - 1) {
+        if (currentIndex !== tempChild.length - 1) {
           next();
         }
       };
@@ -272,7 +288,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
         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))
+        className: (0, _classnames.default)(jumpClassPrefix, "".concat(jumpClassPrefix, "-right"), (0, _defineProperty2.default)({}, "".concat(jumpClassPrefix, "-disabled"), currentIndex >= tempChild.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',
@@ -291,8 +307,8 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     style: style,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, (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,
+  }, (tempChild === null || tempChild === void 0 ? void 0 : tempChild.length) ? renderDisplayList() : null, (tempChild === null || tempChild === void 0 ? void 0 : tempChild.length) && showDot() ? /*#__PURE__*/_react.default.createElement(_slidebar.Slidebar, {
+    number: tempChild.length,
     currentIndex: currentIndex,
     dotsClassName: dots,
     parentPrefixCls: carouselPrefixCls,

package/lib/carousel/slideList.js

@@ -20,7 +20,7 @@ var SlideList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var listPrefixCls = "".concat(parentPrefixCls, "-list");
   var renderItems = function renderItems() {
     var _context;
-    var _items = (0, _concat.default)(_context = (0, _slice.default)(items).call(items, -1)).call(_context, items, (0, _slice.default)(items).call(items, 0, 1)); // 首位分别添加一项
+    var _items = items.length > 1 ? (0, _concat.default)(_context = (0, _slice.default)(items).call(items, -1)).call(_context, items, (0, _slice.default)(items).call(items, 0, 1)) : items; // 首位分别添加一项
     return (0, _map.default)(_items).call(_items, function (item, index) {
       return /*#__PURE__*/_react.default.createElement("li", {
         className: (0, _classnames.default)("".concat(listPrefixCls, "-item"), (0, _defineProperty2.default)({}, "".concat(listPrefixCls, "-item-active"), currentIndex === index - 1)),

package/lib/image/preview-group.js

@@ -120,12 +120,12 @@ var PreviewGroup = function PreviewGroup(_ref) {
     onPrevious: onPrevious
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, images.length > 1 ? (0, _map.default)(_context3 = React.Children).call(_context3, children, function (image, index) {
-    var _a;
+    var _a, _b;
     return /*#__PURE__*/React.cloneElement(image, {
       key: image.key || index,
       preview: false,
       ref: refs[index],
-      onClick: onPreview.bind(null, index, (_a = image === null || image === void 0 ? void 0 : image.props) === null || _a === void 0 ? void 0 : _a.src)
+      onClick: ((_a = image === null || image === void 0 ? void 0 : image.props) === null || _a === void 0 ? void 0 : _a.preview) !== false ? onPreview.bind(null, index, (_b = image === null || image === void 0 ? void 0 : image.props) === null || _b === void 0 ? void 0 : _b.src) : undefined
     });
   }) : children, exit && /*#__PURE__*/React.createElement(_preview.default, (0, _extends2.default)({}, previewProps)));
 };

package/lib/signature/drawingBoard.js

@@ -160,13 +160,13 @@ var DrawingBoard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     d: "M9.16767025,16.9762781 C9.5300869,17.3386948 9.5300869,17.9262881 9.16767025,18.2887049 C8.84552213,18.6108529 8.34545651,18.6466472 7.98377112,18.3960875 L7.85524348,18.2887049 L0.815437446,11.2488988 C-0.203859357,10.229602 -0.267565411,8.61657722 0.624319283,7.52306442 L0.815437446,7.31161852 L7.85524348,0.271812484 C8.21766013,-0.0906041612 8.80525361,-0.0906041612 9.16767025,0.271812484 C9.48981838,0.593960608 9.5256126,1.09402626 9.27505297,1.45571158 L9.16767025,1.58423925 L2.39801882,8.35223283 L18.7197413,8.35223283 C24.8235066,8.35223283 28,11.88167 28,18.5605173 C28,25.0286774 25.0409921,28.8154573 19.1996764,29.6367412 L18.7197413,29.6968277 L3.87132753,29.6968277 C3.358793,29.6968277 2.94330165,29.2813365 2.94330165,28.7688019 C2.94330165,28.3132156 3.27159111,27.9343054 3.70451369,27.8557278 L3.87132753,27.840776 L18.6172581,27.846452 C23.6969089,27.2820464 26.1439483,24.2912204 26.1439483,18.5605173 C26.1439483,13.0283959 23.8870007,10.3626156 19.1446408,10.2148013 L18.7197413,10.2082845 L2.39987488,10.2082845 L9.16767025,16.9762781 Z",
     id: "\u8DEF\u5F84",
     fill: "currentColor"
-  }))))) : null, onClear ? /*#__PURE__*/_react.default.createElement(_icon.default, {
+  }))))) : null, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "delete",
     className: "".concat(prefixCls, "-drawing-board-clear"),
     onClick: function onClick() {
       return handleOnClear();
     }
-  }) : null), /*#__PURE__*/_react.default.createElement("span", {
+  })), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(prefixCls, "-drawing-board-tip")
   }, isEmpty ? signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.pleaseWriteHere : ''), /*#__PURE__*/_react.default.createElement("canvas", {
     ref: canvasRef

package/lib/signature/signature.js

@@ -242,7 +242,12 @@ var Signature = function Signature(props) {
     id: "\u5F62\u72B6",
     fill: "#666666"
   }))))));
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, dataUrl ? /*#__PURE__*/_react.default.createElement(_image.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: signatureClass,
+    ref: triggerRef,
+    style: style
+  }, dataUrl ? /*#__PURE__*/_react.default.createElement(_image.default, {
+    className: "".concat(signaturePrefixCls, "-image"),
     preview: preview,
     src: dataUrl,
     title: "\u5220\u9664",
@@ -254,13 +259,11 @@ var Signature = function Signature(props) {
       }
     })] : undefined
   }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: signatureClass,
-    ref: triggerRef,
-    onClick: handleOnClick,
-    style: style
+    className: "".concat(signaturePrefixCls, "-empty"),
+    onClick: handleOnClick
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "edit"
-  }), /*#__PURE__*/_react.default.createElement("span", null, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.clickToSign)), /*#__PURE__*/_react.default.createElement(_modal.default, (0, _extends2.default)({
+  }), /*#__PURE__*/_react.default.createElement("span", null, signatureLangMsg === null || signatureLangMsg === void 0 ? void 0 : signatureLangMsg.clickToSign))), /*#__PURE__*/_react.default.createElement(_modal.default, (0, _extends2.default)({
     width: containerWidth,
     height: containerHeight,
     ref: modalRef,

package/lib/signature/style/index.css

@@ -106,9 +106,25 @@
 .kd-signature {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  border: 1px dashed #e5e5e5;
   width: 100%;
   height: 100%;
+}
+.kd-signature-image {
+  width: 100%;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.kd-signature-image img {
+  width: 100%;
+  height: 100%;
+}
+.kd-signature-empty {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 1px dashed #e5e5e5;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -130,7 +146,7 @@
   -webkit-transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
   transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
 }
-.kd-signature:hover {
+.kd-signature-empty:hover {
   border-color: var(--kd-c-signature-border-color-hover, var(--kd-g-color-theme-5, #87adff));
   background-color: var(--kd-c-signature-bg-color-hover, var(--kd-g-color-theme-1, #f2f8ff));
 }

package/lib/signature/style/index.less

@@ -5,22 +5,36 @@
 
 .@{signature-prefix-cls} {
   box-sizing: border-box;
-  border: 1px dashed #e5e5e5;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: @signature-bg-color;
-  color: @signature-color-text;
-  font-size: @signature-font-size;
-  cursor: pointer;
-  border-radius: @signature-border-radius;
-  transition: border-color @signature-transition-duration, background-color @signature-transition-duration;
-  &:hover {
-    border-color: @signature-border-color-hover;
-    background-color: @signature-bg-color-hover;
+  &-image {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &-empty {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: 1px dashed #e5e5e5;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: @signature-bg-color;
+    color: @signature-color-text;
+    font-size: @signature-font-size;
+    cursor: pointer;
+    border-radius: @signature-border-radius;
+    transition: border-color @signature-transition-duration, background-color @signature-transition-duration;
+    &:hover {
+      border-color: @signature-border-color-hover;
+      background-color: @signature-bg-color-hover;
+    }
   }
 }
 .@{signature-prefix-cls}.@{signature-prefix-cls}-disabled {

package/package.json

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