@para-ui/core 4.0.0-beta → 4.0.0-rc.1

package/ToggleButton/index.js

@@ -24,7 +24,7 @@ import 'dayjs';
 import '../_verture/useFormatMessage-703f8b20.js';
 import '@para-ui/core/GlobalContext';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/23 上午9:50\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-toggle-button.paraui-v4-button-text {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-toggle-button.paraui-v4-button-text:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-toggle-button.paraui-v4-button-text:hover[disabled] {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-toggle-button-wrap {\n  display: inline-block;\n}\n.paraui-v4-toggle-button .toggle-button-text {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-selected {\n  border-color: rgb(46, 101, 230);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-selected:hover {\n  border-color: rgb(46, 101, 230);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-selected[disabled] {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-selected[disabled]:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-selected[disabled]::before {\n  border-color: rgb(29, 33, 38);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-selected::before {\n  content: \" \";\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border: 8px solid rgb(46, 101, 230);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-selected::after {\n  content: \" \";\n  position: absolute;\n  bottom: 2px;\n  right: 2px;\n  width: 3px;\n  height: 6px;\n  border: 2px solid rgb(255, 255, 255);\n  border-top: 0;\n  border-left: 0;\n  border-radius: 2px;\n  transform: rotate(45deg);\n}\n.paraui-v4-toggle-button-disabled.paraui-v4-toggle-button {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-toggle-button-disabled.paraui-v4-toggle-button:hover {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-toggle-button .toggle-button-badge {\n  position: absolute;\n  right: 0;\n  bottom: 16px;\n}\n.paraui-v4-toggle-button .toggle-button-badge > div {\n  position: absolute;\n  top: 0;\n  right: 0;\n  border: 8px solid rgb(46, 101, 230);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button .toggle-button-badge > svg {\n  position: absolute;\n  top: 7px;\n  right: 1px;\n  color: #fff;\n  font-weight: 600;\n  width: 8px;\n  height: 8px;\n}\n\n.paraui-v4-togglebutton-group {\n  display: flex;\n  flex-flow: row wrap;\n}\n.paraui-v4-togglebutton-group .paraui-v4-toggle-button {\n  margin: 0 10px;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button {\n  margin: 0;\n  padding: 0 16px;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button[disabled] {\n  color: rgb(29, 33, 38);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button ~ .paraui-v4-toggle-button::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected {\n  color: rgb(46, 101, 230);\n  border: 0;\n  font-weight: 700;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected[disabled] {\n  color: rgb(29, 33, 38);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected:first-child:before {\n  display: none;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected:not(:first-child)::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgb(212, 218, 227);\n  border: 0;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected::after {\n  display: none;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/23 上午9:50\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-toggle-button.paraui-v4-button-text {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-toggle-button.paraui-v4-button-text:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-toggle-button.paraui-v4-button-text:hover[disabled] {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-toggle-button-wrap {\n  display: inline-block;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-radio.paraui-v4-toggle-button-selected {\n  border-color: rgb(46, 101, 230);\n  color: rgb(255, 255, 255);\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-radio.paraui-v4-toggle-button-selected:hover {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-radio:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-radio[disabled] {\n  color: rgb(161, 168, 179);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-radio[disabled]:hover {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-radio[disabled].paraui-v4-toggle-button-selected {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check::before {\n  content: \" \";\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border: 8px solid rgb(212, 218, 227);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check::after {\n  content: \" \";\n  width: 8px;\n  height: 8px;\n  background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAM5JREFUOE/NkQENwjAURFcFIAEHgIM5YCgAHCABFBAUAA5wABI2CTgABeUd+V06BqFkCeEnl6X9d7d/vy7rWK6jPvu9gfe+z9QnsHDOlV9NgHhk4gpxrvjJBogL+DtwATkG12QDxEvIG3AzcRmW/5gAgsaR+1S54peht+c8s7vxc7+OAFHCIVhBWkfLUm6VliazRsUGAzoy6YEz0LaDeItYMVrVWCJ/nVuUmHhArPuX1XoFTI4wJ8au+NYb/ziBCJZdJqoiPFfyBO+I/2twBz0qQBFvrubpAAAAAElFTkSuQmCC\");\n  background-size: 8px 8px;\n  background-repeat: no-repeat;\n  position: absolute;\n  bottom: 1px;\n  right: 1px;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check:hover::before {\n  border-color: rgb(87, 131, 235);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check.paraui-v4-toggle-button-selected {\n  border-color: rgb(46, 101, 230);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check.paraui-v4-toggle-button-selected::before {\n  border-color: rgb(46, 101, 230);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check[disabled] {\n  color: rgb(161, 168, 179);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check[disabled]::before {\n  border-color: rgb(212, 218, 227);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check[disabled]:hover {\n  color: rgb(161, 168, 179);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check[disabled]:hover::before {\n  border-color: rgb(212, 218, 227);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button.paraui-v4-toggle-button-check[disabled].paraui-v4-toggle-button-selected {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-toggle-button .toggle-button-text {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-toggle-button-disabled.paraui-v4-toggle-button {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-toggle-button-disabled.paraui-v4-toggle-button:hover {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-toggle-button .toggle-button-badge {\n  position: absolute;\n  right: 0;\n  bottom: 16px;\n}\n.paraui-v4-toggle-button .toggle-button-badge > div {\n  position: absolute;\n  top: 0;\n  right: 0;\n  border: 8px solid rgb(46, 101, 230);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v4-toggle-button .toggle-button-badge > svg {\n  position: absolute;\n  top: 7px;\n  right: 1px;\n  color: #fff;\n  font-weight: 600;\n  width: 8px;\n  height: 8px;\n}\n\n.paraui-v4-togglebutton-group {\n  display: flex;\n  flex-flow: row wrap;\n}\n.paraui-v4-togglebutton-group .toggle-button-item {\n  margin: 0 10px;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button {\n  margin: 0;\n  padding: 0 16px;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button[disabled] {\n  color: rgb(161, 168, 179);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button[disabled]:hover {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button ~ .paraui-v4-toggle-button::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected {\n  color: rgb(46, 101, 230);\n  border: 0;\n  font-weight: 700;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected[disabled] {\n  color: rgb(29, 33, 38);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected:first-child:before {\n  display: none;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected:not(:first-child)::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgb(212, 218, 227);\n  border: 0;\n}\n.paraui-v4-togglebutton-group-text .paraui-v4-toggle-button-selected::after {\n  display: none;\n}";
 styleInject(css_248z);
 
 //切换按钮组
@@ -86,14 +86,19 @@ var ToggleButtonGroup = function ToggleButtonGroup(props) {
         selected = item.selected,
         rest = __rest(item, ["label", "selected"]);
       var hasSelected = selected === undefined ? hasValueSelected(rest.value, value) : selected;
-      return jsx(ToggleButton, Object.assign({}, rest, {
-        style: style,
-        selected: hasSelected,
-        autoToolTipOverflow: type !== 'text',
-        variant: type === 'text' ? 'text' : 'outlined',
-        onClick: exclusive ? handleExclusiveChange : handleChange
+      return jsx("div", Object.assign({
+        className: 'toggle-button-item'
       }, {
-        children: label
+        children: jsx(ToggleButton, Object.assign({}, rest, {
+          style: style,
+          selected: hasSelected,
+          autoToolTipOverflow: type !== 'text',
+          variant: type === 'text' ? 'text' : 'outlined',
+          onClick: exclusive ? handleExclusiveChange : handleChange,
+          exclusive: exclusive
+        }, {
+          children: label
+        }))
       }), idx);
     });
   };
@@ -115,16 +120,18 @@ var ToggleButton = function ToggleButton(props) {
     toolTipTitle = props.toolTipTitle,
     _props$selected = props.selected,
     selected = _props$selected === void 0 ? false : _props$selected,
+    _props$exclusive = props.exclusive,
+    exclusive = _props$exclusive === void 0 ? false : _props$exclusive,
     value = props.value;
     props.autoToolTipOverflow;
     var width = props.width,
     onClick = props.onClick,
-    restProps = __rest(props, ["className", "style", "children", "disabled", "toolTipTitle", "selected", "value", "autoToolTipOverflow", "width", "onClick"]);
+    restProps = __rest(props, ["className", "style", "children", "disabled", "toolTipTitle", "selected", "exclusive", "value", "autoToolTipOverflow", "width", "onClick"]);
   // const [hasTip, setHasTip] = useState<boolean>(false);
   var id = useRef(UUID()).current;
   var prefixCls = "".concat($prefixCls, "-toggle-button");
   //className
-  var makeCls = clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-selected"), selected), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _clsx));
+  var makeCls = clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-").concat(exclusive ? 'radio' : 'check'), (restProps === null || restProps === void 0 ? void 0 : restProps.variant) !== 'text'), _defineProperty(_clsx, "".concat(prefixCls, "-selected"), selected), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _clsx));
   //点击事件
   var handleClick = function handleClick(evt) {
     if (onClick) onClick(evt, value);

package/Tooltip/index.js

@@ -196,7 +196,7 @@ function getAlignOffset(place) {
   return offsetMap[mPlace];
 }
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/25 下午7:17\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-tooltip {\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  line-height: 1.5715;\n  position: absolute;\n  z-index: 1500;\n  display: block;\n  width: max-content;\n  visibility: visible;\n}\n.paraui-v4-tooltip .component-tooltip-content {\n  position: relative;\n}\n.paraui-v4-tooltip.component-tooltip-hidden {\n  display: none;\n}\n.paraui-v4-tooltip .component-tooltip-inner {\n  min-width: 30px;\n  min-height: 32px;\n  padding: 5px 12px;\n  color: rgb(255, 255, 255);\n  text-align: left;\n  text-decoration: none;\n  word-break: break-all;\n  background-color: rgba(29, 33, 38, 0.9);\n  border-radius: 4px;\n  line-height: 21px;\n}\n.paraui-v4-tooltip .component-tooltip-inner .disabled-svg {\n  font-size: 12px;\n  position: relative;\n  top: 1px;\n  margin-right: 4px;\n  color: rgb(255, 255, 255);\n}\n\n.component-tooltip-zoom-big-fast-enter,\n.component-tooltip-zoom-big-fast-appear {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tooltip-zoom-big-fast-leave {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tooltip-zoom-big-fast-enter.component-tooltip-zoom-big-fast-enter-active,\n.component-tooltip-zoom-big-fast-appear.component-tooltip-zoom-big-fast-appear-active {\n  animation-name: componentTooltipZoomBigIn;\n  animation-play-state: running;\n}\n\n.component-tooltip-zoom-big-fast-leave.component-tooltip-zoom-big-fast-leave-active {\n  animation-name: componentTooltipZoomBigOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tooltip-zoom-big-fast-enter,\n.component-tooltip-zoom-big-fast-appear {\n  transform: scale(0);\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n}\n\n.component-tooltip-zoom-big-fast-enter-prepare,\n.component-tooltip-zoom-big-fast-appear-prepare {\n  transform: none;\n}\n\n.component-tooltip-zoom-big-fast-leave {\n  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);\n}\n\n@keyframes componentTooltipZoomBigIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes componentTooltipZoomBigOut {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/25 下午7:17\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-tooltip {\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  line-height: 1.5715;\n  position: absolute;\n  z-index: 1500;\n  display: block;\n  width: max-content;\n  visibility: visible;\n}\n.paraui-v4-tooltip .component-tooltip-content {\n  position: relative;\n}\n.paraui-v4-tooltip.component-tooltip-hidden {\n  display: none;\n}\n.paraui-v4-tooltip .component-tooltip-inner {\n  min-width: 30px;\n  min-height: 32px;\n  padding: 5px 12px;\n  color: rgb(255, 255, 255);\n  text-align: left;\n  text-decoration: none;\n  word-break: break-all;\n  background-color: rgba(29, 33, 38, 0.9);\n  border-radius: 4px;\n  line-height: 21px;\n}\n.paraui-v4-tooltip .component-tooltip-inner .disabled-svg {\n  font-size: 16px;\n  position: relative;\n  top: 3px;\n  margin-right: 4px;\n  color: rgb(255, 255, 255);\n}\n\n.component-tooltip-zoom-big-fast-enter,\n.component-tooltip-zoom-big-fast-appear {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tooltip-zoom-big-fast-leave {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tooltip-zoom-big-fast-enter.component-tooltip-zoom-big-fast-enter-active,\n.component-tooltip-zoom-big-fast-appear.component-tooltip-zoom-big-fast-appear-active {\n  animation-name: componentTooltipZoomBigIn;\n  animation-play-state: running;\n}\n\n.component-tooltip-zoom-big-fast-leave.component-tooltip-zoom-big-fast-leave-active {\n  animation-name: componentTooltipZoomBigOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tooltip-zoom-big-fast-enter,\n.component-tooltip-zoom-big-fast-appear {\n  transform: scale(0);\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n}\n\n.component-tooltip-zoom-big-fast-enter-prepare,\n.component-tooltip-zoom-big-fast-appear-prepare {\n  transform: none;\n}\n\n.component-tooltip-zoom-big-fast-leave {\n  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);\n}\n\n@keyframes componentTooltipZoomBigIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes componentTooltipZoomBigOut {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n}";
 styleInject(css_248z);
 
 //tooltip

package/Transfer/box.d.ts

@@ -1,15 +1,15 @@
-import { ReactNode, CSSProperties } from "react";
-import Sortable from "sortablejs";
+import { ReactNode, CSSProperties } from 'react';
+import Sortable from 'sortablejs';
 interface IBox {
     title: string;
     data: ItemDataProps[];
     multiple: boolean;
-    onSearch: (e: string, direction: "left" | "right") => void;
-    onchange: (e: any, bol: boolean, index: number, direction: "left" | "right", multiple: boolean) => void;
-    onMove: (direction: "left" | "right") => void;
+    onSearch: (e: string, direction: 'left' | 'right') => void;
+    onchange: (e: any, bol: boolean, index: number, direction: 'left' | 'right', multiple: boolean) => void;
+    onMove: (direction: 'left' | 'right') => void;
     queryAll: (e: any, direction: any) => void;
     inverse: (direction: any) => void;
-    direction: "left" | "right";
+    direction: 'left' | 'right';
     fluctuationPosition?: number;
     fluctuationOrther?: number;
     onEndSort?: (oldIndex: any, newIndex: any) => void;

package/Transfer/index.js

@@ -15,7 +15,7 @@ import SearchIcon from '@para-ui/icons/Search';
 import AutoTips from '../AutoTips/index.js';
 import Drag from '@para-ui/icons/Drag';
 import { S as Sortable } from '../_verture/sortable.esm-49896035.js';
-import { d as debounce } from '../_verture/utils-f0e81540.js';
+import { d as debounce } from '../_verture/utils-06d86594.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../_verture/typeof-adeedc13.js';
@@ -109,7 +109,7 @@ var Box = function Box(props) {
     rightIcon = props.rightIcon,
     style = props.style,
     customKey = props.customKey;
-  var intl = useFormatMessage("Transfer", localeJson);
+  var intl = useFormatMessage('Transfer', localeJson);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     checkCount = _useState2[0],
@@ -134,11 +134,11 @@ var Box = function Box(props) {
     setCheckCount(arr);
   }, [data]);
   useEffect(function () {
-    if (direction == "right") {
+    if (direction == 'right') {
       new Sortable(ref.current, {
         animation: 180,
-        ghostClass: "blue-background-class",
-        handle: ".handle",
+        ghostClass: 'blue-background-class',
+        handle: '.handle',
         onEnd: function onEnd(evt) {
           onEndSort === null || onEndSort === void 0 ? void 0 : onEndSort(evt.oldIndex, evt.newIndex);
         }
@@ -151,7 +151,7 @@ var Box = function Box(props) {
   }, function (e, index, item) {
     if (item === null || item === void 0 ? void 0 : item.disabled) return;
     onchange(e, true, index, direction, false);
-    onMove(direction === "right" ? "left" : "right");
+    onMove(direction === 'right' ? 'left' : 'right');
   });
   var itemStyle = function itemStyle(data) {
     var stlye = {};
@@ -159,7 +159,7 @@ var Box = function Box(props) {
       stlye.borderLeft = "4px solid ".concat(data.tagColor);
     }
     if (data === null || data === void 0 ? void 0 : data.hide) {
-      stlye.display = "none";
+      stlye.display = 'none';
     }
     return stlye;
   };
@@ -174,7 +174,7 @@ var Box = function Box(props) {
     })), jsx(Search, {
       btnType: "inside",
       placeholder: intl({
-        id: "searchPlaceholder"
+        id: 'searchPlaceholder'
       }),
       showBtn: false,
       rightIcon: jsx(SearchIcon, {}),
@@ -187,7 +187,7 @@ var Box = function Box(props) {
       },
       onEnter: function onEnter(event) {
         var _a;
-        var val = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value) || "";
+        var val = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value) || '';
         onSearch(val, direction);
       },
       allowClear: false
@@ -197,7 +197,7 @@ var Box = function Box(props) {
     }, {
       children: data.map(function (item, index) {
         return jsxs("div", Object.assign({
-          className: clsx("item", (item === null || item === void 0 ? void 0 : item.tagColor) && "item-border", (item === null || item === void 0 ? void 0 : item.disabled) && "item-disabled", (item === null || item === void 0 ? void 0 : item.checked) && "item-checked", fluctuationPosition === index && "item-fluctuation", fluctuationOrther === index && "item-fluctuationOrther"),
+          className: clsx('item', (item === null || item === void 0 ? void 0 : item.tagColor) && 'item-border', (item === null || item === void 0 ? void 0 : item.disabled) && 'item-disabled', (item === null || item === void 0 ? void 0 : item.checked) && 'item-checked', fluctuationPosition === index && 'item-fluctuation', fluctuationOrther === index && 'item-fluctuationOrther'),
           style: itemStyle(item),
           onClick: function onClick(e) {
             handler(e, index, item);
@@ -213,11 +213,11 @@ var Box = function Box(props) {
             className: "right-icon"
           }, {
             children: rightIcon(item)
-          })) : null, direction === "right" ? jsx("div", Object.assign({
+          })) : null, direction === 'right' ? jsx("div", Object.assign({
             className: "handle"
           }, {
             children: jsx(Drag, {
-              size: 'medium'
+              size: "medium"
             })
           })) : null]
         }), item[item[customKey]] || item.name);
@@ -228,24 +228,24 @@ var Box = function Box(props) {
       children: [jsxs("div", {
         children: [jsx(Button, Object.assign({
           variant: "text",
-          className: "".concat(checkCount.length === data.length - disabledCount && data.length > 0 ? "btn-on" : ""),
+          className: "".concat(checkCount.length === data.length - disabledCount && data.length > 0 ? 'btn-on' : ''),
           onClick: function onClick() {
             queryAll(checkCount.length !== data.length - disabledCount, direction);
           }
         }, {
           children: intl({
-            id: "allCheck"
+            id: 'allCheck'
           })
         })), jsx(Button, Object.assign({
           variant: "text",
-          className: "".concat(checkCount.length === 0 || checkCount.length === data.length - disabledCount ? "btn-off" : ""),
+          className: "".concat(checkCount.length === 0 || checkCount.length === data.length - disabledCount ? 'btn-off' : ''),
           disabled: checkCount.length === 0 || checkCount.length === data.length - disabledCount,
           onClick: function onClick() {
             inverse(direction);
           }
         }, {
           children: intl({
-            id: "inVertCheck"
+            id: 'inVertCheck'
           })
         }))]
       }), jsxs("div", Object.assign({
@@ -258,7 +258,7 @@ var Box = function Box(props) {
 };
 var Sortablejs = Sortable;
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-transfer {\n  display: flex;\n  font-size: 14px;\n  user-select: none;\n}\n.paraui-v4-transfer .blue-background-class {\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-transfer .box {\n  border-radius: 4px;\n  border: 1px solid rgb(212, 218, 227);\n  overflow: hidden;\n}\n.paraui-v4-transfer .box .box-header {\n  background: rgb(247, 248, 250);\n  color: rgb(29, 33, 38);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 10px;\n  height: 36px;\n  border-bottom: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-transfer .box .count {\n  color: rgb(29, 33, 38);\n  letter-spacing: 1px;\n}\n.paraui-v4-transfer .box .context {\n  height: 400px;\n  overflow: auto;\n  scrollbar-base-color: red;\n  margin-top: 4px;\n}\n.paraui-v4-transfer .box .context .item-fluctuation {\n  animation: flucturation 0.4s forwards;\n}\n.paraui-v4-transfer .box .context .item-fluctuationOrther {\n  animation: flucturationOrther 0.5s forwards;\n}\n.paraui-v4-transfer .box .context .item {\n  padding: 0px 10px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-transfer .box .context .item.item-checked:hover {\n  background-color: rgb(247, 248, 250) !important;\n}\n.paraui-v4-transfer .box .context .item.item-checked > .item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-transfer .box .context .item > .item-label {\n  flex: 1;\n  overflow: hidden;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-transfer .box .context .item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-transfer .box .context .item.item-disabled:hover {\n  background: inherit;\n  cursor: no-drop;\n}\n.paraui-v4-transfer .box .context .item.item-disabled > .item-label {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .context .item .handle {\n  margin-left: 12px;\n  display: flex;\n  align-content: center;\n}\n.paraui-v4-transfer .box .context .item .handle svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-transfer .box .context .item .handle:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-transfer .box .context .item-border {\n  padding-left: 6px;\n}\n.paraui-v4-transfer .box .text-field-content {\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-transfer .box .footer {\n  display: flex;\n  align-items: center;\n  border-top: 1px solid rgb(212, 218, 227);\n  height: 36px;\n  justify-content: space-between;\n  padding: 0 10px;\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) button {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) button:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) .btn-off {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) .btn-off:hover {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) > button {\n  padding: 0;\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) > button:nth-child(2) {\n  margin-left: 16px;\n}\n.paraui-v4-transfer ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background: rgba(255, 255, 255, 0.5);\n}\n.paraui-v4-transfer .moveBtn {\n  display: flex;\n  height: 500px;\n  flex-direction: column;\n  justify-content: center;\n  margin: 0 20px;\n}\n.paraui-v4-transfer .moveBtn > button {\n  background-color: rgb(46, 101, 230);\n  color: rgb(255, 255, 255);\n  border: none;\n}\n.paraui-v4-transfer .moveBtn .btn-left {\n  margin-top: 16px;\n}\n\n@keyframes flucturation {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(36px);\n  }\n}\n@keyframes flucturationOrther {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(-36px);\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-transfer {\n  display: flex;\n  font-size: 14px;\n  user-select: none;\n}\n.paraui-v4-transfer .blue-background-class {\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-transfer .box {\n  border-radius: 4px;\n  border: 1px solid rgb(212, 218, 227);\n  overflow: hidden;\n}\n.paraui-v4-transfer .box .box-header {\n  background: rgb(247, 248, 250);\n  color: rgb(29, 33, 38);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 10px;\n  height: 36px;\n  border-bottom: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-transfer .box .count {\n  color: rgb(29, 33, 38);\n  letter-spacing: 1px;\n}\n.paraui-v4-transfer .box .context {\n  height: 400px;\n  overflow: auto;\n  scrollbar-base-color: red;\n  margin-top: 4px;\n}\n.paraui-v4-transfer .box .context .item-fluctuation {\n  animation: flucturation 0.4s forwards;\n}\n.paraui-v4-transfer .box .context .item-fluctuationOrther {\n  animation: flucturationOrther 0.5s forwards;\n}\n.paraui-v4-transfer .box .context .item {\n  padding: 0px 10px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v4-transfer .box .context .item.item-checked:hover {\n  background-color: rgb(247, 248, 250) !important;\n}\n.paraui-v4-transfer .box .context .item.item-checked > .item-label {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-transfer .box .context .item > .item-label {\n  flex: 1;\n  overflow: hidden;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-transfer .box .context .item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-transfer .box .context .item.item-disabled:hover {\n  background: inherit;\n  cursor: no-drop;\n}\n.paraui-v4-transfer .box .context .item.item-disabled > .item-label {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .context .item .handle {\n  margin-left: 12px;\n  display: flex;\n  align-content: center;\n}\n.paraui-v4-transfer .box .context .item .handle svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-transfer .box .context .item .handle:hover svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-transfer .box .context .item-border {\n  padding-left: 6px;\n}\n.paraui-v4-transfer .box .text-field-content {\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-transfer .box .footer {\n  display: flex;\n  align-items: center;\n  border-top: 1px solid rgb(212, 218, 227);\n  height: 36px;\n  justify-content: space-between;\n  padding: 0 10px;\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) button {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) button:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) .btn-off {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) .btn-off:hover {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) > button {\n  padding: 0;\n}\n.paraui-v4-transfer .box .footer > div:nth-child(1) > button:nth-child(2) {\n  margin-left: 16px;\n}\n.paraui-v4-transfer ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background: rgba(255, 255, 255, 0.5);\n}\n.paraui-v4-transfer .moveBtn {\n  display: flex;\n  height: 500px;\n  flex-direction: column;\n  justify-content: center;\n  margin: 0 20px;\n}\n.paraui-v4-transfer .moveBtn > button {\n  background-color: rgb(46, 101, 230);\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-transfer .moveBtn .btn-left {\n  margin-top: 16px;\n}\n\n@keyframes flucturation {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(36px);\n  }\n}\n@keyframes flucturationOrther {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(-36px);\n  }\n}";
 styleInject(css_248z);
 
 var Transfer = function Transfer(props) {
@@ -439,11 +439,11 @@ var Transfer = function Transfer(props) {
 
   var onSearch = debounce(function (e, direction) {
     var str = trim ? e.toUpperCase().trim() : e.toUpperCase();
-    if (direction === "left") {
+    if (direction === 'left') {
       leftData.forEach(function (item) {
         item.hide = false;
-        var name = (item.name || "").toUpperCase();
-        var description = (item.description || "").toUpperCase();
+        var name = (item.name || '').toUpperCase();
+        var description = (item.description || '').toUpperCase();
         if (!(name.indexOf(str) !== -1 || description.indexOf(str) !== -1)) {
           item.hide = true;
         }
@@ -452,8 +452,8 @@ var Transfer = function Transfer(props) {
     } else {
       rightData.filter(function (item) {
         item.hide = false;
-        var name = (item.name || "").toUpperCase();
-        var description = (item.description || "").toUpperCase();
+        var name = (item.name || '').toUpperCase();
+        var description = (item.description || '').toUpperCase();
         if (!(name.indexOf(str) !== -1 || description.indexOf(str) !== -1)) {
           item.hide = true;
         }
@@ -543,10 +543,10 @@ var Transfer = function Transfer(props) {
         }) : '',
         TooltipProps: {
           arrow: false,
-          placement: 'bottomRight'
+          placement: 'bottomLeft'
         },
         onClick: function onClick() {
-          onMove("right");
+          onMove('right');
         }
       }, {
         children: jsx(Right, {})
@@ -559,7 +559,7 @@ var Transfer = function Transfer(props) {
         }) : '',
         TooltipProps: {
           arrow: false,
-          placement: 'bottomRight'
+          placement: 'bottomLeft'
         },
         onClick: function onClick() {
           fluctuation('up');
@@ -575,7 +575,7 @@ var Transfer = function Transfer(props) {
         }) : '',
         TooltipProps: {
           arrow: false,
-          placement: 'bottomRight'
+          placement: 'bottomLeft'
         },
         onClick: function onClick() {
           fluctuation('down');
@@ -591,7 +591,7 @@ var Transfer = function Transfer(props) {
         }) : '',
         TooltipProps: {
           arrow: false,
-          placement: 'bottomRight'
+          placement: 'bottomLeft'
         },
         onClick: function onClick() {
           onMove('left');

package/Tree/OperateBar/index.d.ts

@@ -1,6 +1,6 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react';
 import { DataNode } from 'rc-tree/lib/interface';
-import { IActions, ActionType } from "../interface";
+import { IActions, ActionType } from '../interface';
 import './index.scss';
 interface OperateBarProps {
     opRef: any;

package/Tree/Tree.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from "react";
-import { TreeProps } from "./interface";
+import { FunctionComponent } from 'react';
+import { TreeProps } from './interface';
 declare const Tree: FunctionComponent<TreeProps>;
 export default Tree;

package/Tree/index.js

@@ -1,12 +1,12 @@
-import { T as Tree } from '../_verture/index-7ec72724.js';
-export { T as default } from '../_verture/index-7ec72724.js';
+import { T as Tree } from '../_verture/index-bc461491.js';
+export { T as default } from '../_verture/index-bc461491.js';
 import '../_verture/toConsumableArray-8f4c9589.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../_verture/defineProperty-1d116156.js';
 import '../_verture/typeof-adeedc13.js';
 import '../_verture/slicedToArray-a8206399.js';
-import '../_verture/index-d63bd287.js';
-import '../_verture/typeof-b240b062.js';
+import '../_verture/index-232d890b.js';
+import '../_verture/typeof-c310ee4a.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import 'react/jsx-runtime';
 import 'react';

package/Tree/interface.d.ts

@@ -3,11 +3,11 @@
  * @date 2021/10/18 下午4:20
  * @description tree interface
  */
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 import { TreeProps as RcTreeProps } from 'rc-tree';
-import { DataNode, EventDataNode, Key } from "rc-tree/lib/interface";
-import { EmptyProps } from "../Empty";
-import { ParaRequestConfig as RequestConfig } from "@paraview/lib/http/interface";
+import { DataNode, EventDataNode, Key } from 'rc-tree/lib/interface';
+import { EmptyProps } from '../Empty';
+import { ParaRequestConfig as RequestConfig } from '@paraview/lib/http/interface';
 type HasAction = (nodeData: DataNode) => boolean;
 type ActionItem = boolean | {
     text: string;
@@ -164,6 +164,8 @@ export interface TreeProps extends Omit<RcTreeProps, 'prefixCls' | 'showLine' |
     paramsCallback?: (params: {
         [name: string]: any;
     }) => any;
+    /** 空状态容器样式 */
+    emptyClassName?: string;
     /** 空状态属性 */
     emptyProps?: EmptyProps;
     /** 自定义空数据节点 */
@@ -174,6 +176,8 @@ export interface TreeProps extends Omit<RcTreeProps, 'prefixCls' | 'showLine' |
     wrapperStyle?: React.CSSProperties;
     /** 接口请求时显示loading */
     showLoading?: boolean;
+    /** 接口请求时显示loading的节点*/
+    loadingNode?: ReactNode;
     /** 提示最大宽度 */
     tipMaxWidth?: number | string;
     [key: string]: any;

package/Tree/utils/tools.d.ts

@@ -1,4 +1,4 @@
-import { DataNode, Key } from "rc-tree/lib/interface";
+import { DataNode, Key } from 'rc-tree/lib/interface';
 interface RFiled {
     key: string;
     parentId: string;

package/Upload/Dragger/index.d.ts

@@ -3,8 +3,8 @@
  * @date 2021/11/15 下午2:12
  * @description
  */
-import { FunctionComponent } from "react";
-import { UploadProps } from "../index";
+import { FunctionComponent } from 'react';
+import { UploadProps } from '../index';
 export type DraggerProps = Omit<UploadProps, 'type'>;
 declare const Dragger: FunctionComponent<DraggerProps>;
 export default Dragger;

package/Upload/ErroTip/index.d.ts

@@ -3,7 +3,7 @@
  * @date 2021/11/15 下午7:07
  * @description
  */
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react';
 import './index.scss';
 interface ErrorTipProps {
     message: string;

package/Upload/index.d.ts

@@ -1,8 +1,8 @@
 import { FunctionComponent } from 'react';
 import { UploadProps } from './interface';
 import ImageUpload, { ImageUploadProps } from './ImageUpload';
-import Dragger, { DraggerProps } from "./Dragger";
-import ImgCrop, { ImgCropProps } from "./ImgCrop";
+import Dragger, { DraggerProps } from './Dragger';
+import ImgCrop, { ImgCropProps } from './ImgCrop';
 import './index.scss';
 declare const InternalUpload: FunctionComponent<UploadProps>;
 type MergedUploadType = typeof InternalUpload & {

package/Upload/index.js

@@ -8,7 +8,7 @@ import RcUpload from 'rc-upload';
 import UploadIcon from '@para-ui/icons/UploadFile';
 import LoadingIcon from '@para-ui/icons/Loading';
 import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
-import { r as regenerator } from '../_verture/index-d63bd287.js';
+import { r as regenerator } from '../_verture/index-232d890b.js';
 import Delete from '@para-ui/icons/Delete';
 import TextIcon from '@para-ui/icons/Text';
 import PhotoIcon from '@para-ui/icons/Photo';
@@ -23,7 +23,7 @@ import { Slider } from '../Slider/index.js';
 import Cropper from 'react-easy-crop';
 import { Modal } from '../Modal/index.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
-import '../_verture/typeof-b240b062.js';
+import '../_verture/typeof-c310ee4a.js';
 import '@para-ui/core/GlobalContext';
 import '@para-ui/icons/LoadingF';
 import '../Tooltip/index.js';
@@ -39,7 +39,7 @@ import '../AutoTips/index.js';
 import 'rc-slider';
 import 'rc-dialog';
 import '@para-ui/icons/Close';
-import '../_verture/index-e2881a53.js';
+import '../_verture/index-19947788.js';
 import 'react-dom';
 import '@para-ui/icons/CheckCircleF';
 import '@para-ui/icons/CloseCircleF';
@@ -107,7 +107,7 @@ var UploadList = function UploadList(props) {
             }, {
               children: isImage ? jsx(PhotoIcon, {}) : jsx(TextIcon, {})
             })), renderActions(file), jsx("span", Object.assign({
-              className: "upload-list-text-name"
+              className: 'upload-list-text-name'
             }, {
               children: file.name
             }))]
@@ -274,7 +274,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午7:31\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-upload-image {\n  display: inline-flex;\n  align-items: center;\n  /*&-border {\n    .upload-image-select{\n      border: 2px dashed $A1;\n\n      &:hover {\n        border: 2px dashed $PT8;\n      }\n    }\n  }*/\n}\n.paraui-v4-upload-image .upload-image-select {\n  position: relative;\n  width: 100px;\n  height: 100px;\n  background-color: rgb(247, 248, 250);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-select-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload-image .upload-image-select .component-upload {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v4-upload-image .upload-image-select:hover .upload-image-picture-card {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-image .upload-image-picture-card {\n  display: inline-flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  cursor: default;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper img {\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper::before {\n  content: \" \";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: rgb(29, 33, 38);\n  border-radius: 4px;\n  opacity: 0;\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-name {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  background-color: rgb(29, 33, 38);\n  border-radius: 0 0 4px 4px;\n  color: rgb(255, 255, 255);\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-action {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  line-height: 0;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-action svg {\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover::before {\n  opacity: 1;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover .upload-img-wrapper-name {\n  opacity: 0;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover .upload-img-wrapper-action {\n  opacity: 1;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-icon {\n  color: rgb(46, 101, 230);\n  font-size: 30px;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-loading {\n  color: rgb(46, 101, 230);\n  font-size: 30px;\n  animation: imageLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-text {\n  margin-top: 6px;\n  color: inherit;\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-text-loading {\n  color: rgb(46, 101, 230);\n}\n@keyframes imageLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}";
+var css_248z$2 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午7:31\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-upload-image {\n  display: inline-flex;\n  align-items: center;\n  /*&-border {\n    .upload-image-select{\n      border: 2px dashed $NA1;\n\n      &:hover {\n        border: 2px dashed $NPT8;\n      }\n    }\n  }*/\n}\n.paraui-v4-upload-image .upload-image-select {\n  position: relative;\n  width: 100px;\n  height: 100px;\n  background-color: rgb(247, 248, 250);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-select-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload-image .upload-image-select .component-upload {\n  display: inline-block;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v4-upload-image .upload-image-select:hover .upload-image-picture-card {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-image .upload-image-picture-card {\n  display: inline-flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  cursor: default;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper img {\n  width: 100%;\n  height: 100%;\n  border-radius: 4px;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper::before {\n  content: \" \";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background-color: rgb(29, 33, 38);\n  border-radius: 4px;\n  opacity: 0;\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-name {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  background-color: rgb(29, 33, 38);\n  border-radius: 0 0 4px 4px;\n  color: rgb(255, 255, 255);\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-action {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  line-height: 0;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper-action svg {\n  color: rgb(255, 255, 255);\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover::before {\n  opacity: 1;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover .upload-img-wrapper-name {\n  opacity: 0;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-img-wrapper:hover .upload-img-wrapper-action {\n  opacity: 1;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-icon {\n  color: rgb(46, 101, 230);\n  font-size: 30px;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-loading {\n  color: rgb(46, 101, 230);\n  font-size: 30px;\n  animation: imageLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-text {\n  margin-top: 6px;\n  color: inherit;\n  transition: 0.3s;\n}\n.paraui-v4-upload-image .upload-image-picture-card .upload-image-text-loading {\n  color: rgb(46, 101, 230);\n}\n@keyframes imageLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}";
 styleInject(css_248z$2);
 
 //ImageUpload
@@ -570,7 +570,7 @@ var ImageUpload = function ImageUpload(props) {
           src: avatar.imageUrl,
           alt: (_a = avatar.imageName) !== null && _a !== void 0 ? _a : ''
         }), avatar.imageName && jsx("span", Object.assign({
-          className: "upload-img-wrapper-name"
+          className: 'upload-img-wrapper-name'
         }, {
           children: avatar.imageName
         })), jsx("span", Object.assign({
@@ -784,7 +784,7 @@ var EasyCrop = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 var EasyCrop$1 = /*#__PURE__*/memo(EasyCrop);
 
-var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/4/20 下午4:44\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-container {\n  position: relative;\n  width: 100%;\n  height: 40vh;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control {\n  display: flex;\n  align-items: center;\n  width: 60%;\n  margin-left: auto;\n  margin-right: auto;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control:first-of-type {\n  margin-top: 16px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control:last-of-type {\n  margin-bottom: -8px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  font-style: normal;\n  background: transparent;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control button[disabled] {\n  cursor: default;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control button + div:only-of-type {\n  flex: 1;\n  margin: 0 8px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control-zoom button {\n  font-size: 18px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control-rotate button {\n  font-size: 500;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control-rotate button:first-of-type {\n  transform: rotate(-20deg);\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control-rotate button:last-of-type {\n  transform: rotate(20deg);\n}";
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/4/20 下午4:44\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-container {\n  position: relative;\n  width: 100%;\n  height: 40vh;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control {\n  display: flex;\n  align-items: center;\n  width: 60%;\n  margin-left: auto;\n  margin-right: auto;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control:first-of-type {\n  margin-top: 16px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control:last-of-type {\n  margin-bottom: -8px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 34px;\n  height: 34px;\n  padding: 0;\n  font-style: normal;\n  background: transparent;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control button[disabled] {\n  cursor: default;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control button + div:only-of-type {\n  flex: 1;\n  margin: 0 8px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control-zoom button {\n  font-size: 18px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control-rotate button {\n  font-size: 16px;\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control-rotate button:first-of-type {\n  transform: rotate(-20deg);\n}\n.paraui-v4-img-crop-modal .paraui-v4-img-crop-control-rotate button:last-of-type {\n  transform: rotate(20deg);\n}";
 styleInject(css_248z$1);
 
 //图片裁剪组件
@@ -1000,11 +1000,11 @@ var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
               });
             }; // get the new image
             _fileRef$current = fileRef.current, type = _fileRef$current.type, name = _fileRef$current.name, uid = _fileRef$current.uid;
-            if (/svg/ig.test(type)) {
+            if (/svg/gi.test(type)) {
               //svg 转为 png
               type = 'image/png';
               idx = name.lastIndexOf('.');
-              if (idx > -1) name = name.substring(0, idx) + '.png';
+              if (idx > -1) name = "".concat(name.substring(0, idx), ".png");
             }
             //转为blob
             onBlob = function onBlob(blob) {
@@ -1123,7 +1123,7 @@ var ImgCrop = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 });
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午1:40\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-upload .component-upload {\n  position: relative;\n  display: inline-block;\n}\n.paraui-v4-upload-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload .paraui-v4-button {\n  color: rgb(92, 101, 115);\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-upload .paraui-v4-button:hover {\n  border-color: rgb(87, 131, 235);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload .paraui-v4-button-loading .button-icon {\n  color: rgb(46, 101, 230);\n  animation: uploadLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-drag {\n  position: relative;\n}\n.paraui-v4-upload-drag .component-upload {\n  display: block;\n}\n.paraui-v4-upload-drag-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload-drag-hover .upload-drag-container {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-upload-drag .upload-drag-container {\n  display: inline-flex;\n  width: 100%;\n  max-width: 590px;\n  height: 200px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  line-height: 1;\n  border: 2px dashed rgb(212, 218, 227);\n  background-color: rgb(247, 248, 250);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-upload-drag .upload-drag-container:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon {\n  line-height: 0;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon svg {\n  font-size: 48px;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon .upload-drag-loading {\n  animation: uploadLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text {\n  margin: 20px 0 12px 0;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text-loading {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text-filename {\n  margin-right: 5px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-hint {\n  color: rgb(92, 101, 115);\n  padding: 0 20px;\n  text-align: center;\n}\n@keyframes uploadLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/11 下午1:40\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-upload .component-upload {\n  position: relative;\n  display: inline-block;\n}\n.paraui-v4-upload-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload .paraui-v4-button {\n  color: rgb(29, 33, 38);\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-upload .paraui-v4-button:hover {\n  border-color: rgb(87, 131, 235);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload .paraui-v4-button-loading .button-icon {\n  color: rgb(46, 101, 230);\n  animation: uploadLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-drag {\n  position: relative;\n}\n.paraui-v4-upload-drag .component-upload {\n  display: block;\n}\n.paraui-v4-upload-drag-loading {\n  pointer-events: none;\n}\n.paraui-v4-upload-drag-hover .upload-drag-container {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-upload-drag .upload-drag-container {\n  display: inline-flex;\n  width: 100%;\n  max-width: 590px;\n  height: 200px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  line-height: 1;\n  border: 2px dashed rgb(212, 218, 227);\n  background-color: rgb(247, 248, 250);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: 0.3s;\n}\n.paraui-v4-upload-drag .upload-drag-container:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon {\n  line-height: 0;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon svg {\n  font-size: 48px;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-icon .upload-drag-loading {\n  animation: uploadLoadingCircle 1s infinite linear;\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text {\n  margin: 20px 0 12px 0;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text-loading {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-text-filename {\n  margin-right: 5px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-upload-drag .upload-drag-container .upload-drag-hint {\n  color: rgb(92, 101, 115);\n  padding: 0 20px;\n  text-align: center;\n}\n@keyframes uploadLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}";
 styleInject(css_248z);
 
 //upload
@@ -1380,7 +1380,7 @@ var InternalUpload = function InternalUpload(props) {
         className: 'upload-drag-text-loading'
       }, {
         children: [jsx("span", Object.assign({
-          className: 'upload-drag-text-filename'
+          className: "upload-drag-text-filename"
         }, {
           children: (_a = curFileRef.current) === null || _a === void 0 ? void 0 : _a.name
         })), intl({
@@ -1393,7 +1393,7 @@ var InternalUpload = function InternalUpload(props) {
     }, {
       children: children ? children : jsxs(Fragment, {
         children: [jsx("p", Object.assign({
-          className: 'upload-drag-icon'
+          className: "upload-drag-icon"
         }, {
           children: areaIcon
         })), jsx("p", Object.assign({
@@ -1401,7 +1401,7 @@ var InternalUpload = function InternalUpload(props) {
         }, {
           children: areaText
         })), !showLoading && jsx("p", Object.assign({
-          className: 'upload-drag-hint'
+          className: "upload-drag-hint"
         }, {
           children: areaDesc
         }))]

package/Upload/interface.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode } from 'react';
 import { RcFile as OriRcFile, Action, UploadRequestMethod, UploadRequestHeader, BeforeUploadFileType, UploadRequestOption } from 'rc-upload/lib/interface';
 type UploadType = 'drag' | 'select';
 export type { BeforeUploadFileType };