@para-ui/core 4.0.0-rc → 4.0.0-rc.2

package/Drawer/index.js

@@ -13,10 +13,10 @@ import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../_verture/typeof-adeedc13.js';
 import '@para-ui/icons/LoadingF';
-import '@para-ui/icons/Forbid';
 import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Forbid';
 import '@para-ui/icons/Down';
 import '../_verture/index-e9007d6a.js';
 import 'rc-dropdown';
@@ -55,7 +55,7 @@ var closest = function closest(el, selector) {
   return el;
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/8 下午2:51\n* @description drawer样式\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-drawer {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  pointer-events: none;\n}\n\n.paraui-v4-drawer-inline {\n  position: absolute;\n}\n\n.paraui-v4-drawer-mask {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  background: rgba(29, 33, 38, 0.9);\n  pointer-events: auto;\n}\n\n.paraui-v4-drawer-content-wrapper {\n  position: absolute;\n  z-index: 1000;\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-resizing .paraui-v4-drawer-content-wrapper {\n  transition: none;\n}\n\n.paraui-v4-drawer-content-wrapper-hidden {\n  display: none;\n}\n\n.paraui-v4-drawer-left > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-right > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-top > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  right: 0;\n  left: 0;\n  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-bottom > .paraui-v4-drawer-content-wrapper {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-content {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background: rgb(255, 255, 255);\n  pointer-events: auto;\n  position: relative;\n}\n.paraui-v4-drawer-content .drawer-handle {\n  position: absolute;\n  z-index: 999;\n  user-select: none;\n}\n.paraui-v4-drawer-content .drawer-handle .drawer-handle-icon {\n  background: #2e65e6;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.paraui-v4-drawer-content .drawer-handle:hover .drawer-handle-icon {\n  opacity: 1;\n}\n.paraui-v4-drawer-content .drawer-content-body {\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: none;\n  height: 50px;\n  padding: 0 20px;\n  font-size: 16px;\n  font-weight: 700;\n  color: rgb(29, 33, 38);\n  border-bottom: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-title {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-title-ellipsis {\n  overflow: hidden;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-extra {\n  margin-left: 30px;\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-align: right;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-extra button + button {\n  margin-left: 16px;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-content {\n  flex: 1;\n  padding: 20px;\n  overflow: auto;\n  word-wrap: break-word;\n  position: relative;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-footer {\n  display: flex;\n  align-items: center;\n  flex: none;\n  padding: 20px;\n  font-size: 16px;\n  color: rgb(29, 33, 38);\n  border-top: 1px solid rgb(234, 236, 241);\n}\n\n.paraui-v4-drawer-left .drawer-handle,\n.paraui-v4-drawer-right .drawer-handle {\n  top: 0;\n  width: 6px;\n  height: 100%;\n  cursor: e-resize;\n}\n\n.paraui-v4-drawer-left .drawer-handle {\n  right: 0;\n  padding: 0 0 0 4px;\n}\n\n.paraui-v4-drawer-right .drawer-handle {\n  left: 0;\n  padding: 0 4px 0 0;\n}\n\n.paraui-v4-drawer-top .drawer-handle,\n.paraui-v4-drawer-bottom .drawer-handle {\n  left: 0;\n  height: 6px;\n  width: 100%;\n  cursor: n-resize;\n}\n\n.paraui-v4-drawer-top .drawer-handle {\n  bottom: 0;\n  padding: 4px 0 0 0;\n}\n\n.paraui-v4-drawer-bottom .drawer-handle {\n  top: 0;\n  padding: 0 0 4px 0;\n}\n\n.panel-motion-enter-start,\n.panel-motion-appear-start,\n.panel-motion-leave-start {\n  transition: none;\n}\n\n.panel-motion-enter-active,\n.panel-motion-appear-active,\n.panel-motion-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-mask-motion-enter-active,\n.paraui-v4-drawer-mask-motion-appear-active,\n.paraui-v4-drawer-mask-motion-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-mask-motion-enter,\n.paraui-v4-drawer-mask-motion-appear {\n  opacity: 0;\n}\n\n.paraui-v4-drawer-mask-motion-enter-active,\n.paraui-v4-drawer-mask-motion-appear-active {\n  opacity: 1;\n}\n\n.paraui-v4-drawer-mask-motion-leave {\n  opacity: 1;\n}\n\n.paraui-v4-drawer-mask-motion-leave-active {\n  opacity: 0;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-start,\n.paraui-v4-drawer-panel-motion-left-appear-start,\n.paraui-v4-drawer-panel-motion-left-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-active,\n.paraui-v4-drawer-panel-motion-left-appear-active,\n.paraui-v4-drawer-panel-motion-left-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-start,\n.paraui-v4-drawer-panel-motion-left-appear-start {\n  transform: translateX(-100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-active,\n.paraui-v4-drawer-panel-motion-left-appear-active {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-left-leave {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-left-leave-active {\n  transform: translateX(-100%);\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-start,\n.paraui-v4-drawer-panel-motion-right-appear-start,\n.paraui-v4-drawer-panel-motion-right-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-active,\n.paraui-v4-drawer-panel-motion-right-appear-active,\n.paraui-v4-drawer-panel-motion-right-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-start,\n.paraui-v4-drawer-panel-motion-right-appear-start {\n  transform: translateX(100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-active,\n.paraui-v4-drawer-panel-motion-right-appear-active {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-right-leave {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-right-leave-active {\n  transform: translateX(100%);\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-start,\n.paraui-v4-drawer-panel-motion-top-appear-start,\n.paraui-v4-drawer-panel-motion-top-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-active,\n.paraui-v4-drawer-panel-motion-top-appear-active,\n.paraui-v4-drawer-panel-motion-top-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-start,\n.paraui-v4-drawer-panel-motion-top-appear-start {\n  transform: translateY(-100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-active,\n.paraui-v4-drawer-panel-motion-top-appear-active {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-top-leave {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-top-leave-active {\n  transform: translateY(-100%);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-start,\n.paraui-v4-drawer-panel-motion-bottom-appear-start,\n.paraui-v4-drawer-panel-motion-bottom-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-active,\n.paraui-v4-drawer-panel-motion-bottom-appear-active,\n.paraui-v4-drawer-panel-motion-bottom-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-start,\n.paraui-v4-drawer-panel-motion-bottom-appear-start {\n  transform: translateY(100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-active,\n.paraui-v4-drawer-panel-motion-bottom-appear-active {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-leave {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-leave-active {\n  transform: translateY(100%);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/8 下午2:51\n* @description drawer样式\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-drawer {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  pointer-events: none;\n}\n\n.paraui-v4-drawer-inline {\n  position: absolute;\n}\n\n.paraui-v4-drawer-mask {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1000;\n  pointer-events: auto;\n  background: rgba(29, 33, 38, 0.4);\n}\n\n.paraui-v4-drawer-content-wrapper {\n  position: absolute;\n  z-index: 1000;\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-resizing .paraui-v4-drawer-content-wrapper {\n  transition: none;\n}\n\n.paraui-v4-drawer-content-wrapper-hidden {\n  display: none;\n}\n\n.paraui-v4-drawer-left > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-right > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  box-shadow: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-top > .paraui-v4-drawer-content-wrapper {\n  top: 0;\n  right: 0;\n  left: 0;\n  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-bottom > .paraui-v4-drawer-content-wrapper {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);\n}\n\n.paraui-v4-drawer-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  pointer-events: auto;\n  background: rgb(255, 255, 255);\n}\n.paraui-v4-drawer-content .drawer-handle {\n  position: absolute;\n  z-index: 999;\n  user-select: none;\n}\n.paraui-v4-drawer-content .drawer-handle .drawer-handle-icon {\n  width: 100%;\n  height: 100%;\n  background: #2e65e6;\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.paraui-v4-drawer-content .drawer-handle:hover .drawer-handle-icon {\n  opacity: 1;\n}\n.paraui-v4-drawer-content .drawer-content-body {\n  display: flex;\n  flex-flow: column nowrap;\n  width: 100%;\n  height: 100%;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header {\n  position: relative;\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: space-between;\n  height: 50px;\n  padding: 0 20px;\n  font-size: 16px;\n  font-weight: 700;\n  color: rgb(29, 33, 38);\n  border-bottom: 1px solid rgb(234, 236, 241);\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-title {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-title-ellipsis {\n  overflow: hidden;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-extra {\n  flex-shrink: 0;\n  margin-left: 30px;\n  text-align: right;\n  white-space: nowrap;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-header .drawer-header-extra button + button {\n  margin-left: 16px;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-content {\n  position: relative;\n  flex: 1;\n  padding: 20px;\n  overflow: auto;\n  word-wrap: break-word;\n}\n.paraui-v4-drawer-content .drawer-content-body .drawer-body-footer {\n  display: flex;\n  flex: none;\n  align-items: center;\n  padding: 20px;\n  font-size: 16px;\n  color: rgb(29, 33, 38);\n  border-top: 1px solid rgb(234, 236, 241);\n}\n\n.paraui-v4-drawer-left .drawer-handle,\n.paraui-v4-drawer-right .drawer-handle {\n  top: 0;\n  width: 6px;\n  height: 100%;\n  cursor: e-resize;\n}\n\n.paraui-v4-drawer-left .drawer-handle {\n  right: 0;\n  padding: 0 0 0 4px;\n}\n\n.paraui-v4-drawer-right .drawer-handle {\n  left: 0;\n  padding: 0 4px 0 0;\n}\n\n.paraui-v4-drawer-top .drawer-handle,\n.paraui-v4-drawer-bottom .drawer-handle {\n  left: 0;\n  width: 100%;\n  height: 6px;\n  cursor: n-resize;\n}\n\n.paraui-v4-drawer-top .drawer-handle {\n  bottom: 0;\n  padding: 4px 0 0;\n}\n\n.paraui-v4-drawer-bottom .drawer-handle {\n  top: 0;\n  padding: 0 0 4px;\n}\n\n.panel-motion-enter-start,\n.panel-motion-appear-start,\n.panel-motion-leave-start {\n  transition: none;\n}\n\n.panel-motion-enter-active,\n.panel-motion-appear-active,\n.panel-motion-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-mask-motion-enter-active,\n.paraui-v4-drawer-mask-motion-appear-active,\n.paraui-v4-drawer-mask-motion-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-mask-motion-enter,\n.paraui-v4-drawer-mask-motion-appear {\n  opacity: 0;\n}\n\n.paraui-v4-drawer-mask-motion-enter-active,\n.paraui-v4-drawer-mask-motion-appear-active {\n  opacity: 1;\n}\n\n.paraui-v4-drawer-mask-motion-leave {\n  opacity: 1;\n}\n\n.paraui-v4-drawer-mask-motion-leave-active {\n  opacity: 0;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-start,\n.paraui-v4-drawer-panel-motion-left-appear-start,\n.paraui-v4-drawer-panel-motion-left-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-active,\n.paraui-v4-drawer-panel-motion-left-appear-active,\n.paraui-v4-drawer-panel-motion-left-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-start,\n.paraui-v4-drawer-panel-motion-left-appear-start {\n  transform: translateX(-100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-left-enter-active,\n.paraui-v4-drawer-panel-motion-left-appear-active {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-left-leave {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-left-leave-active {\n  transform: translateX(-100%);\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-start,\n.paraui-v4-drawer-panel-motion-right-appear-start,\n.paraui-v4-drawer-panel-motion-right-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-active,\n.paraui-v4-drawer-panel-motion-right-appear-active,\n.paraui-v4-drawer-panel-motion-right-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-start,\n.paraui-v4-drawer-panel-motion-right-appear-start {\n  transform: translateX(100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-right-enter-active,\n.paraui-v4-drawer-panel-motion-right-appear-active {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-right-leave {\n  transform: translateX(0);\n}\n\n.paraui-v4-drawer-panel-motion-right-leave-active {\n  transform: translateX(100%);\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-start,\n.paraui-v4-drawer-panel-motion-top-appear-start,\n.paraui-v4-drawer-panel-motion-top-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-active,\n.paraui-v4-drawer-panel-motion-top-appear-active,\n.paraui-v4-drawer-panel-motion-top-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-start,\n.paraui-v4-drawer-panel-motion-top-appear-start {\n  transform: translateY(-100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-top-enter-active,\n.paraui-v4-drawer-panel-motion-top-appear-active {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-top-leave {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-top-leave-active {\n  transform: translateY(-100%);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-start,\n.paraui-v4-drawer-panel-motion-bottom-appear-start,\n.paraui-v4-drawer-panel-motion-bottom-leave-start {\n  transition: none;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-active,\n.paraui-v4-drawer-panel-motion-bottom-appear-active,\n.paraui-v4-drawer-panel-motion-bottom-leave-active {\n  transition: all 0.3s;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-start,\n.paraui-v4-drawer-panel-motion-bottom-appear-start {\n  transform: translateY(100%) !important;\n}\n\n.paraui-v4-drawer-panel-motion-bottom-enter-active,\n.paraui-v4-drawer-panel-motion-bottom-appear-active {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-leave {\n  transform: translateY(0);\n}\n\n.paraui-v4-drawer-panel-motion-bottom-leave-active {\n  transform: translateY(100%);\n}";
 styleInject(css_248z);
 
 //drawer 抽屉
@@ -63,8 +63,6 @@ var Drawer = function Drawer(props) {
   var _a;
   var className = props.className,
     resizable = props.resizable,
-    _props$resizeMinimum = props.resizeMinimum,
-    resizeMinimum = _props$resizeMinimum === void 0 ? 400 : _props$resizeMinimum,
     onClose = props.onClose,
     _props$destroyOnClose = props.destroyOnClose,
     destroyOnClose = _props$destroyOnClose === void 0 ? false : _props$destroyOnClose,
@@ -86,7 +84,7 @@ var Drawer = function Drawer(props) {
     push = _props$push === void 0 ? {
       distance: 100
     } : _props$push,
-    restProps = __rest(props, ["className", "resizable", "resizeMinimum", "onClose", "destroyOnClose", "style", "title", "extra", "showExtra", "footer", "children", "size", "onOk", "onCancel", "afterVisibleChange", "okButtonProps", "cancelButtonProps", "push"]);
+    restProps = __rest(props, ["className", "resizable", "onClose", "destroyOnClose", "style", "title", "extra", "showExtra", "footer", "children", "size", "onOk", "onCancel", "afterVisibleChange", "okButtonProps", "cancelButtonProps", "push"]);
   var intl = useFormatMessage('Drawer', localeJson);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -103,7 +101,9 @@ var Drawer = function Drawer(props) {
   var timerRef = useRef();
   var isHorizontal = ['left', 'right'].includes((_a = props.placement) !== null && _a !== void 0 ? _a : 'right');
   var startRef = useRef(0);
-  var drawerRootEle = useRef(document.body);
+  var rootEleSize = useRef(0);
+  var initialContentEleSize = useRef();
+  var contentEleSize = useRef(0);
   useEffect(function () {
     return function () {
       // 销毁时销毁timer
@@ -112,10 +112,14 @@ var Drawer = function Drawer(props) {
       timerRef.current = null;
       window.removeEventListener('mouseup', onHandlerMouseUp);
       window.removeEventListener('mousemove', onHandlerMouseMove);
+      initialContentEleSize.current = undefined;
     };
   }, []);
   useEffect(function () {
     setOffsetStyle(getOffsetStyle);
+    if (!props.open) {
+      initialContentEleSize.current = undefined;
+    }
   }, [props.open, props.placement, props.width, props.height, size]);
   //设置drawer width、height
   var getOffsetStyle = function getOffsetStyle() {
@@ -123,28 +127,20 @@ var Drawer = function Drawer(props) {
       return {};
     }
     var sizeMap = {
-      large: 1000,
-      medium: 630,
-      small: 400
+      large: '1000px',
+      medium: '630px',
+      small: '400px'
     };
     var offsetStyle = {};
     if (props.placement === 'left' || props.placement === 'right') {
       var defaultWidth = sizeMap[size];
       if (size !== 'auto') {
-        if (props.width) {
-          offsetStyle.width = typeof props.width === 'string' ? parseInt(props.width) : props.width;
-        } else {
-          offsetStyle.width = defaultWidth;
-        }
+        offsetStyle.width = props.width === undefined ? defaultWidth : props.width;
       }
     } else {
       var defaultHeight = size === 'large' ? 736 : 378;
       if (size !== 'auto') {
-        if (props.height !== undefined) {
-          offsetStyle.height = typeof props.height === 'string' ? parseInt(props.height) : props.height;
-        } else {
-          offsetStyle.height = defaultHeight;
-        }
+        offsetStyle.height = props.height === undefined ? defaultHeight : props.height;
       }
     }
     return offsetStyle;
@@ -162,10 +158,15 @@ var Drawer = function Drawer(props) {
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   };
   var onHandlerMouseDown = function onHandlerMouseDown(e) {
-    var _a;
+    var _a, _b, _c;
     setIsResizing(true);
-    drawerRootEle.current = (_a = closest(e.target, ".".concat($prefixCls, "-drawer-open"))) !== null && _a !== void 0 ? _a : document.body;
     startRef.current = isHorizontal ? e.clientX : e.clientY;
+    var rootEle = (_a = closest(e.target, ".".concat($prefixCls, "-drawer-open"))) !== null && _a !== void 0 ? _a : document.body;
+    var contentCls = ".".concat($prefixCls, "-drawer-content-wrapper");
+    var contentEle = (_b = closest(e.target, contentCls)) !== null && _b !== void 0 ? _b : rootEle.querySelector(contentCls);
+    rootEleSize.current = isHorizontal ? rootEle.offsetWidth : rootEle.offsetHeight;
+    contentEleSize.current = isHorizontal ? contentEle.offsetWidth : contentEle.offsetHeight;
+    initialContentEleSize.current = (_c = initialContentEleSize.current) !== null && _c !== void 0 ? _c : contentEleSize.current;
     document.addEventListener('mousemove', onHandlerMouseMove);
     document.addEventListener('mouseup', onHandlerMouseUp);
   };
@@ -175,12 +176,13 @@ var Drawer = function Drawer(props) {
     document.removeEventListener('mouseup', onHandlerMouseUp);
   };
   var onHandlerMouseMove = function onHandlerMouseMove(e) {
-    var maximum = isHorizontal ? drawerRootEle.current.offsetWidth : drawerRootEle.current.offsetHeight;
+    var _a;
+    var resizeMinimum = (_a = initialContentEleSize.current) !== null && _a !== void 0 ? _a : 400;
     switch (props.placement) {
       case 'left':
         {
-          var newWidth = Number(offsetStyle.width) + (e.clientX - startRef.current);
-          if (newWidth + 100 >= maximum || newWidth < resizeMinimum) return;
+          var newWidth = contentEleSize.current + (e.clientX - startRef.current);
+          if (newWidth + 100 >= rootEleSize.current || newWidth < resizeMinimum) return;
           setOffsetStyle({
             width: newWidth
           });
@@ -188,8 +190,8 @@ var Drawer = function Drawer(props) {
         }
       case 'right':
         {
-          var _newWidth = Number(offsetStyle.width) - (e.clientX - startRef.current);
-          if (_newWidth + 100 >= maximum || _newWidth < resizeMinimum) return;
+          var _newWidth = contentEleSize.current - (e.clientX - startRef.current);
+          if (_newWidth + 100 >= rootEleSize.current || _newWidth < resizeMinimum) return;
           setOffsetStyle({
             width: _newWidth
           });
@@ -197,8 +199,8 @@ var Drawer = function Drawer(props) {
         }
       case 'top':
         {
-          var newHeight = Number(offsetStyle.height) + (e.clientY - startRef.current);
-          if (newHeight + 100 >= maximum || newHeight < resizeMinimum) return;
+          var newHeight = contentEleSize.current + (e.clientY - startRef.current);
+          if (newHeight + 100 >= rootEleSize.current || newHeight < resizeMinimum) return;
           setOffsetStyle({
             height: newHeight
           });
@@ -206,8 +208,8 @@ var Drawer = function Drawer(props) {
         }
       case 'bottom':
         {
-          var _newHeight = Number(offsetStyle.height) - (e.clientY - startRef.current);
-          if (_newHeight + 100 >= maximum || _newHeight < resizeMinimum) return;
+          var _newHeight = contentEleSize.current - (e.clientY - startRef.current);
+          if (_newHeight + 100 >= rootEleSize.current || _newHeight < resizeMinimum) return;
           setOffsetStyle({
             height: _newHeight
           });
@@ -243,16 +245,16 @@ var Drawer = function Drawer(props) {
       }, {
         children: extra || jsxs(Fragment, {
           children: [jsx(Button, Object.assign({
-            variant: 'outlined',
-            size: 'medium',
+            variant: "outlined",
+            size: "medium",
             onClick: handleCancel
           }, cancelButtonProps, {
             children: (cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.children) || intl({
               id: 'cancel'
             })
           })), jsx(Button, Object.assign({
-            variant: 'contained',
-            size: 'medium',
+            variant: "contained",
+            size: "medium",
             onClick: handleOk
           }, okButtonProps, {
             children: (okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.children) || intl({
@@ -285,7 +287,7 @@ var Drawer = function Drawer(props) {
     return null;
   }
   var maskMotion = {
-    motionName: $prefixCls + '-drawer-mask-motion',
+    motionName: "".concat($prefixCls, "-drawer-mask-motion"),
     motionAppear: true,
     motionEnter: true,
     motionLeave: true,
@@ -293,7 +295,7 @@ var Drawer = function Drawer(props) {
   };
   var panelMotion = function panelMotion(motionPlacement) {
     return {
-      motionName: $prefixCls + "-drawer-panel-motion-".concat(motionPlacement),
+      motionName: "".concat($prefixCls, "-drawer-panel-motion-").concat(motionPlacement),
       motionAppear: true,
       motionEnter: true,
       motionLeave: true,
@@ -321,11 +323,11 @@ var Drawer = function Drawer(props) {
     }
   }, {
     children: [resizable && jsx("div", Object.assign({
-      className: 'drawer-handle',
+      className: "drawer-handle",
       onMouseDown: onHandlerMouseDown
     }, {
       children: jsx("div", {
-        className: 'drawer-handle-icon'
+        className: "drawer-handle-icon"
       })
     })), renderContent()]
   }));

package/Drawer/interface.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { ButtonProps } from "../Button";
+import React from 'react';
+import { ButtonProps } from '../Button';
 /**
  * @author Hanz
  * @date 2021/11/8 下午3:07
@@ -7,7 +7,7 @@ import { ButtonProps } from "../Button";
  */
 type GetContainer = string | HTMLElement | (() => HTMLElement) | false;
 type ILevelMove = number | [number, number];
-type IPlacement = 'left' | 'top' | 'right' | 'bottom';
+export type IPlacement = 'left' | 'top' | 'right' | 'bottom';
 export interface IOffsetStyle {
     width?: string | number;
     height?: string | number;
@@ -19,10 +19,8 @@ export interface DrawerProps {
     width?: string | number;
     /** 高度 */
     height?: string | number;
-    /** 可拖拽边线调整大小 */
+    /** 可拖拽边线调整大小。请注意拖拽只可以增大抽屉尺寸，不可以减小！因为减小尺寸会失去设计时给出尺寸的意义 */
     resizable?: boolean;
-    /** 拖拽最小尺寸，抽屉方向为纵向时表示最小高度，横向时表示最小宽度，默认400 */
-    resizeMinimum?: number;
     /** 打开 */
     open?: boolean;
     /** 默认打开 */

package/Dropdown/index.d.ts

@@ -5,7 +5,7 @@
  */
 import React, { FC } from 'react';
 import './index.scss';
-export type Placement = "top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight";
+export type Placement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
 export interface DropdownProps {
     /** 触发下拉的行为 */
     trigger?: ('click' | 'hover' | 'contextMenu')[];

package/DynamicMultiBox/formItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IConfig, IErrors, IValueList } from "./interface";
+import { IConfig, IErrors, IValueList } from './interface';
 export type IFormItem = {
     /** 表单值集合*/
     valueList?: IValueList[];

package/DynamicMultiBox/index.d.ts

@@ -3,7 +3,7 @@
  * @date 2022/11/7 10:32 AM
  * @description 多值框组件
  */
-import { FunctionComponent } from "react";
+import { FunctionComponent } from 'react';
 import { IMultiValueProps } from './interface';
 import './index.scss';
 declare const DynamicMultiBox: FunctionComponent<IMultiValueProps>;

package/DynamicMultiBox/index.js

@@ -73,7 +73,7 @@ import 'rc-pagination';
 import '@para-ui/icons/Right';
 import '@para-ui/icons/DoubleLeft';
 import '@para-ui/icons/DoubleRight';
-import '../_verture/index-47297a40.js';
+import '../_verture/index-692e29c1.js';
 import 'rc-tree';
 import '@para-ui/icons/Document';
 import 'react-dom';
@@ -81,6 +81,7 @@ import '@para-ui/icons/EditFile';
 import '@para-ui/icons/PlusCircle';
 import '@para-ui/icons/MoreCircle';
 import '../_verture/utils-06d86594.js';
+import '../Search/index.js';
 import 'rc-picker/es/generate/dayjs';
 import '../Tag/index.js';
 import '@para-ui/icons/EditOutline';
@@ -180,7 +181,7 @@ var FormItem = function FormItem(props) {
   var getTextField = function getTextField() {
     return jsx(TextField, Object.assign({}, rest, {
       required: false,
-      label: '',
+      label: "",
       disabled: disabled,
       onChange: function onChange(e) {
         return inputChange(e.target.value);
@@ -196,7 +197,7 @@ var FormItem = function FormItem(props) {
     return jsx(Select, Object.assign({}, rest, {
       list: selectList,
       required: false,
-      label: '',
+      label: "",
       disabled: disabled,
       onChange: function onChange(value) {
         return inputChange(value);
@@ -242,7 +243,7 @@ var FormItem = function FormItem(props) {
   var getInputNumber = function getInputNumber() {
     return jsx(InputNumber, Object.assign({}, rest, {
       required: false,
-      label: '',
+      label: "",
       disabled: disabled,
       onChange: function onChange(value) {
         return inputChange(value);
@@ -256,7 +257,7 @@ var FormItem = function FormItem(props) {
   var getInputLang = function getInputLang() {
     return jsx(InputLang, Object.assign({}, rest, {
       required: false,
-      label: '',
+      label: "",
       onChange: function onChange(value) {
         return inputChange(value);
       }
@@ -269,7 +270,7 @@ var FormItem = function FormItem(props) {
   var getDatePicker = function getDatePicker() {
     return jsx(DatePicker, Object.assign({}, rest, {
       required: false,
-      label: '',
+      label: "",
       disabled: disabled,
       onChange: onDatePickerChange,
       getPopupContainer: function getPopupContainer() {
@@ -284,7 +285,7 @@ var FormItem = function FormItem(props) {
   var getComboSelect = function getComboSelect() {
     return jsx(ComboSelect, Object.assign({}, rest, {
       required: false,
-      label: '',
+      label: "",
       disabled: disabled,
       onChange: function onChange(options) {
         return inputChange(options);
@@ -306,7 +307,9 @@ var FormItem = function FormItem(props) {
 };
 
 var RowForm = function RowForm(props) {
-  var _props$valueList = props.valueList,
+  var _props$rowKey = props.rowKey,
+    rowKey = _props$rowKey === void 0 ? 'id' : _props$rowKey,
+    _props$valueList = props.valueList,
     valueList = _props$valueList === void 0 ? [] : _props$valueList,
     rowError = props.rowError,
     _props$errors = props.errors,
@@ -339,13 +342,13 @@ var RowForm = function RowForm(props) {
           othersData = __rest(data, ["style"]);
         var formItemProps = (data === null || data === void 0 ? void 0 : data.inputType) !== 'Switch' ? Object.assign({
           rowIndex: rowIndex,
-          id: rowValue.id,
+          id: rowValue[rowKey],
           value: rowValue === null || rowValue === void 0 ? void 0 : rowValue[data.name || ''],
           error: !!(rowError === null || rowError === void 0 ? void 0 : rowError[data.name || '']),
           helperText: rowError === null || rowError === void 0 ? void 0 : rowError[data.name || '']
         }, othersData) : Object.assign({
           rowIndex: rowIndex,
-          id: rowValue.id,
+          id: rowValue[rowKey],
           checked: rowValue === null || rowValue === void 0 ? void 0 : rowValue[data.name || '']
         }, othersData);
         return jsxs("div", Object.assign({
@@ -926,11 +929,13 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-dynamic-multi-box {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box svg {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content {\n  width: 100%;\n  position: relative;\n  overflow-x: auto;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n  display: flex;\n  align-items: center;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n  flex: 0;\n  min-width: 80px;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 {\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box {\n  height: 24px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(247, 248, 250);\n  border-radius: 2px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover {\n  background: rgb(247, 248, 250);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon {\n  display: none;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .center-line {\n  width: 1px;\n  height: 12px;\n  background-color: rgb(212, 218, 227);\n  margin: 0 3px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 {\n  width: 72px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form {\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  min-height: 42px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .paraui-v4-select {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n  display: flex;\n  align-items: flex-start;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n  margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n  flex: 0;\n  box-sizing: content-box;\n  align-items: center;\n  height: 32px;\n  min-width: 80px;\n}\n.paraui-v4-dynamic-multi-box .add-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 32px;\n  background: rgb(247, 248, 250);\n  border: 1px dashed rgb(212, 218, 227);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button .text {\n  font-size: 14px;\n  margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .add-button.add-button-scroll {\n  margin-top: 14px;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button {\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button .text {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button:hover {\n  background: rgb(240, 245, 255);\n  border: 1px dashed rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add {\n  cursor: not-allowed;\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add .text {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .paraui-v4-comboselect,\n.paraui-v4-dynamic-multi-box .paraui-v4-picker-wrapper {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch-text {\n  color: rgb(161, 168, 179);\n  margin-right: 4px;\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch {\n  flex: 1;\n}\n\n.paraui-v4-dynamic-multi-box-popover .filter-config {\n  width: 140px;\n  padding-top: 4px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .title {\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n  padding: 0 10px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group {\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group.paraui-v4-checkbox-group-column .checkbox-group-content > span {\n  padding: 0 10px;\n  margin-bottom: 0;\n  line-height: 30px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .restore-default {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 40px;\n  color: rgb(46, 101, 230);\n  cursor: pointer;\n  border-top: 1px solid rgb(247, 248, 250);\n}\n.paraui-v4-dynamic-multi-box-popover .no-other-property {\n  width: 200px;\n  padding: 16px 0;\n  text-align: center;\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-dynamic-multi-box {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box svg {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content {\n  width: 100%;\n  position: relative;\n  overflow-x: auto;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n  display: flex;\n  align-items: center;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n  flex: 0;\n  min-width: 80px;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 {\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  margin-right: 1px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box {\n  height: 24px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgb(247, 248, 250);\n  border-radius: 2px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel .svg-box svg:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover {\n  background: rgb(247, 248, 250);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon {\n  display: none;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-40 .center-line {\n  width: 1px;\n  height: 12px;\n  background-color: rgb(212, 218, 227);\n  margin: 0 3px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .operator-column-80 {\n  width: 72px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form {\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  min-height: 42px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .paraui-v4-select {\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n  display: flex;\n  align-items: flex-start;\n  min-width: 180px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .form-item-icon {\n  margin-left: 10px;\n}\n.paraui-v4-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n  flex: 0;\n  box-sizing: content-box;\n  align-items: center;\n  height: 32px;\n  min-width: 80px;\n}\n.paraui-v4-dynamic-multi-box .add-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 32px;\n  background: rgb(247, 248, 250);\n  border: 1px dashed rgb(212, 218, 227);\n  border-radius: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button .text {\n  font-size: 14px;\n  margin-left: 4px;\n}\n.paraui-v4-dynamic-multi-box .add-button.add-button-scroll {\n  margin-top: 14px;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button {\n  cursor: pointer;\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button .text {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-dynamic-multi-box .add-button.normal-button:hover {\n  background: rgb(240, 245, 255);\n  border: 1px dashed rgb(87, 131, 235);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add {\n  cursor: not-allowed;\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add .text {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .add-button.disabled-add svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-dynamic-multi-box .paraui-v4-comboselect,\n.paraui-v4-dynamic-multi-box .paraui-v4-picker-wrapper {\n  width: 100%;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch-text {\n  color: rgb(161, 168, 179);\n  margin-right: 4px;\n  overflow: hidden;\n}\n.paraui-v4-dynamic-multi-box .multi-value-switch .switch {\n  flex: 1;\n}\n\n.paraui-v4-dynamic-multi-box-popover .filter-config {\n  width: 140px;\n  padding-top: 4px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .title {\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n  padding: 0 10px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group {\n  max-height: 320px;\n  overflow-y: auto;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .check-list .paraui-v4-checkbox-group.paraui-v4-checkbox-group-column .checkbox-group-content > span {\n  padding: 0 10px;\n  margin-bottom: 0;\n  line-height: 30px;\n}\n.paraui-v4-dynamic-multi-box-popover .filter-config .restore-default {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 36px;\n  color: rgb(46, 101, 230);\n  cursor: pointer;\n  border-top: 1px solid rgb(247, 248, 250);\n}\n.paraui-v4-dynamic-multi-box-popover .no-other-property {\n  width: 200px;\n  padding: 16px 0;\n  text-align: center;\n  font-size: 12px;\n  color: rgb(161, 168, 179);\n}";
 styleInject(css_248z);
 
 var DynamicMultiBox = function DynamicMultiBox(props) {
-  var valueList = props.valueList,
+  var _props$rowKey = props.rowKey,
+    rowKey = _props$rowKey === void 0 ? 'id' : _props$rowKey,
+    valueList = props.valueList,
     _props$config = props.config,
     config = _props$config === void 0 ? [] : _props$config,
     _props$errors = props.errors,
@@ -1140,8 +1145,8 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
     });
   };
   var popoverHandClass = function popoverHandClass() {
-    var str = $prefixCls + '-dynamic-multi-box-popover';
-    if (popoverClassName) str += ' ' + popoverClassName;
+    var str = "".concat($prefixCls, "-dynamic-multi-box-popover");
+    if (popoverClassName) str += " ".concat(popoverClassName);
     return str;
   };
   /**
@@ -1161,20 +1166,21 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
             required = item.required,
             className = item.className,
             inputType = item.inputType,
-            style = item.style;
+            style = item.style,
+            labelProps = item.labelProps;
           var str = 'title-config-row-item';
           if (inputType === 'Switch') str += ' row-form-switch';
-          if (className) str += ' ' + className;
+          if (className) str += " ".concat(className);
           var styleCom = Object.assign({}, style);
           if (!(style === null || style === void 0 ? void 0 : style.width) && !(style === null || style === void 0 ? void 0 : style.flex)) styleCom.flex = 1;
           return jsx("div", Object.assign({
             className: str,
             style: styleCom
           }, {
-            children: jsx(Label, {
+            children: jsx(Label, Object.assign({
               required: required,
               label: label
-            })
+            }, labelProps))
           }), index);
         })
       })) : titleMode === 'single' ? jsx(Label, {
@@ -1206,7 +1212,7 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
         }))]
       }))]
     }));
-  }, [titleMode, fixedConfig, selectedConfig, isSort, isFilter, checked, onCheckChange, onRestoreDefault]);
+  }, [titleMode, fixedConfig, selectedConfig, isSort, isFilter, checked, onCheckChange, onRestoreDefault, rowKey]);
   /**
    * 判断是否全部隐藏删除
    * 默认全部隐藏
@@ -1218,7 +1224,7 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
       return false;
     }
     for (var i = 0, l = valueList === null || valueList === void 0 ? void 0 : valueList.length; i < l; i++) {
-      var id = (_a = valueList[i]) === null || _a === void 0 ? void 0 : _a.id;
+      var id = (_a = valueList[i]) === null || _a === void 0 ? void 0 : _a[rowKey];
       if (id && deleteDisable.indexOf(id) === -1) {
         bol = false;
         break;
@@ -1237,9 +1243,9 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
       return jsx(Fragment, {
         children: valueList.map(function (item, rowIndex) {
           var _a;
-          var id = item.id;
+          var id = item[rowKey];
           var rowError = (_a = errors === null || errors === void 0 ? void 0 : errors.filter(function (item) {
-            return item.id === id;
+            return item[rowKey] === id;
           })) === null || _a === void 0 ? void 0 : _a[0];
           return jsxs("div", Object.assign({
             className: 'content-row-form'
@@ -1280,7 +1286,7 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
         })
       });
     }
-  }, [valueList, isSort, isFilter, errors, fixedConfig, selectedConfig, keepLastItem, deleteRender]);
+  }, [valueList, isSort, isFilter, errors, fixedConfig, selectedConfig, keepLastItem, deleteRender, rowKey]);
   /**
    * @desc 删除事件
    * */
@@ -1321,12 +1327,8 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
     var id = UUID();
     // 取出已经筛选的配置数据
     var configArr = [].concat(_toConsumableArray(fixedConfig), _toConsumableArray(selectedConfig));
-    valueArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'value')), {
-      id: id
-    }));
-    errorArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'error')), {
-      id: id
-    }));
+    valueArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'value')), _defineProperty({}, rowKey, id)));
+    errorArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'error')), _defineProperty({}, rowKey, id)));
     onAdd && onAdd(valueArr, errorArr);
   };
   /**
@@ -1346,12 +1348,12 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
   var onDragSort = function onDragSort(newValueList) {
     // 获取排序后 id映射下标集合
     var idMapIndex = newValueList.reduce(function (acc, cur, index) {
-      return Object.assign(Object.assign({}, acc), _defineProperty({}, cur.id, index));
+      return Object.assign(Object.assign({}, acc), _defineProperty({}, cur[rowKey], index));
     }, {});
     // 需要交换的下标集合
     var swapIds = [];
     valueList.forEach(function (item, idx) {
-      if (idx !== idMapIndex[item.id]) swapIds.push(idx);
+      if (idx !== idMapIndex[item[rowKey]]) swapIds.push(idx);
     });
     onSort && onSort(newValueList, swapIds);
   };
@@ -1369,8 +1371,8 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
    * @desc 处理className
    * */
   var handClass = function handClass() {
-    var str = $prefixCls + '-dynamic-multi-box';
-    if (className) str += ' ' + className;
+    var str = "".concat($prefixCls, "-dynamic-multi-box");
+    if (className) str += " ".concat(className);
     return str;
   };
   return jsxs("div", Object.assign({
@@ -1380,14 +1382,15 @@ var DynamicMultiBox = function DynamicMultiBox(props) {
     children: [jsxs("div", Object.assign({
       className: "multi-value-content"
     }, {
-      children: [renderTitle, jsx(dist.exports.ReactSortable, Object.assign({
+      children: [renderTitle, isSort ? jsx(dist.exports.ReactSortable, Object.assign({
+        id: rowKey,
         list: valueList,
         handle: '.sort-handler',
         animation: 150,
         setList: onDragSort
       }, {
         children: renderContent
-      }))]
+      })) : renderContent]
     })), jsxs("div", Object.assign({
       className: "add-button ".concat(disabledAdd ? 'disabled-add' : 'normal-button'),
       onClick: onAddEvent

package/DynamicMultiBox/interface.d.ts

@@ -3,8 +3,9 @@
  * @date 2022/11/7 10:32 AM
  * @description 多值框组件接口定义
  */
-import { ReactNode } from "react";
-import { TextFieldProps, SelectProps, SwitchProps, InputNumberProps, InputLangProps, ComboSelectProps, DatePickerProps } from "@para-ui/core";
+import { ReactNode } from 'react';
+import { TextFieldProps, SelectProps, SwitchProps, InputNumberProps, InputLangProps, ComboSelectProps, DatePickerProps } from '@para-ui/core';
+import { LabelProps } from "../Label";
 /**组件类型：输入框，下拉框，开关，数字输入框，国际化输入框，日期框，时间选择框，组合选择器,自定义组件*/
 export type IInputType = 'TextField' | 'Select' | 'Switch' | 'InputNumber' | 'InputLang' | 'ComboSelect' | 'DatePicker' | 'custom';
 /** 配置项*/
@@ -27,31 +28,28 @@ export type IConfig = {
     list?: ((rowIndex: number, id: string, name: string, valueList: IValueList[]) => any[]) | any[];
     /** 样式 */
     style?: React.CSSProperties;
+    /** 标题样式 */
+    labelProps?: LabelProps;
     /** 其他*/
     [name: string]: any;
 } & (TextFieldProps | SelectProps | SwitchProps | InputNumberProps | InputLangProps | ComboSelectProps | DatePickerProps);
 /** value集合*/
 export interface IValueList {
-    /** id*/
-    id: string;
     /** 每行value值集合， name映射configItem中的name*/
     [name: string]: any;
 }
 export interface IErrors {
-    /** id*/
-    id: string;
     /** 每行错误集合，name映射configItem中的name*/
     [name: string]: any;
 }
 export interface ICurrentItem {
     /** 表单名*/
     name?: string;
-    /** 表单所处行id*/
-    id: string;
     /** 表单值*/
     value?: any;
     /** 表单所处下标*/
     rowIndex?: number;
+    [name: string]: any;
 }
 /** 过滤回调出参*/
 export interface IFilterParams {
@@ -66,6 +64,8 @@ export interface IFilterParams {
 }
 /** 主体接口定义*/
 export interface IMultiValueProps {
+    /** 指定每行key */
+    rowKey?: string;
     /**
      * 组件配置项
      */

package/DynamicMultiBox/rowForm.d.ts

@@ -1,6 +1,8 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 import { IConfig, IErrors, IValueList } from './interface';
 export interface IRowForm {
+    /** 指定每行key */
+    rowKey?: string;
     /** 行数据*/
     valueList?: IValueList[];
     /**行错误数据 */