@nokecy/qc-ui 1.0.81 → 1.0.83

package/dist/esm/draggableModal/index.js

@@ -1,20 +1,22 @@
+var _excluded = ["wrapClassName", "width"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { ShrinkOutlined, ArrowsAltOutlined } from '@ant-design/icons';
+import { ShrinkOutlined, ArrowsAltOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
 import React, { useRef, useState } from 'react';
 import Draggable from 'react-draggable';
 import "./style.less";
-
 /**
- * 可拖拽Modal
- * @param props 
- * @returns 
+ * 可拖拽Modal - 支持拖拽、全屏切换和缩放
+ * @param props
+ * @returns
  */
 var DraggableModal = function DraggableModal(props) {
   var _useState = useState(true),
@@ -35,6 +37,39 @@ var DraggableModal = function DraggableModal(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     fullScreen = _useState6[0],
     setFullScreen = _useState6[1];
+  var _useState7 = useState('normal'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    zoom = _useState8[0],
+    setZoom = _useState8[1];
+
+  // 调整大小相关状态
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isResizing = _useState10[0],
+    setIsResizing = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    resizeDirection = _useState12[0],
+    setResizeDirection = _useState12[1];
+  var _useState13 = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    modalSize = _useState14[0],
+    setModalSize = _useState14[1];
+  var _useState15 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    modalPosition = _useState16[0],
+    setModalPosition = _useState16[1];
+
+  // 解构 props,分离出 wrapClassName
+  var propsWrapClassName = props.wrapClassName,
+    width = props.width,
+    restProps = _objectWithoutProperties(props, _excluded);
   var _onStart = function onStart(_event, uiData) {
     var _draggleRef$current;
     var _window$document$docu = window.document.documentElement,
@@ -54,50 +89,240 @@ var DraggableModal = function DraggableModal(props) {
   var toggleFullScreen = function toggleFullScreen() {
     setFullScreen(!fullScreen);
   };
-  var titleRender = function titleRender() {
-    var title = props.title;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, title, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: "ant-modal-close",
-      style: {
-        right: 42
-      },
-      onClick: toggleFullScreen
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "ant-modal-close-x"
-    }, fullScreen ? /*#__PURE__*/React.createElement(ShrinkOutlined, null) : /*#__PURE__*/React.createElement(ArrowsAltOutlined, null))));
+  var handleZoomIn = function handleZoomIn() {
+    if (zoom === 'small') {
+      setZoom('normal');
+    } else if (zoom === 'normal') {
+      setZoom('large');
+    }
+  };
+  var handleZoomOut = function handleZoomOut() {
+    if (zoom === 'large') {
+      setZoom('normal');
+    } else if (zoom === 'normal') {
+      setZoom('small');
+    }
   };
+
+  // 拖动调整大小的处理函数
+  var handleResizeMouseDown = function handleResizeMouseDown(e, direction) {
+    var _draggleRef$current2;
+    e.preventDefault();
+    e.stopPropagation();
+    if (fullScreen) return;
+
+    // 查找.ant-modal,它在draggleRef的父级
+    var modal = (_draggleRef$current2 = draggleRef.current) === null || _draggleRef$current2 === void 0 ? void 0 : _draggleRef$current2.closest('.ant-modal');
+    if (!modal) {
+      return;
+    }
+    var rect = modal.getBoundingClientRect();
+    setModalSize({
+      width: rect.width,
+      height: rect.height
+    });
+    setModalPosition({
+      x: rect.left,
+      y: rect.top
+    });
+    setResizeDirection(direction);
+    setIsResizing(true);
+    var startX = e.clientX;
+    var startY = e.clientY;
+    var startWidth = rect.width;
+    var startHeight = rect.height;
+    var startLeft = rect.left;
+    var startTop = rect.top;
+    var handleMouseMove = function handleMouseMove(moveEvent) {
+      var deltaX = moveEvent.clientX - startX;
+      var deltaY = moveEvent.clientY - startY;
+      var newWidth = startWidth;
+      var newHeight = startHeight;
+      var newLeft = startLeft;
+      var newTop = startTop;
+
+      // 根据方向计算新尺寸
+      if (direction.includes('e')) {
+        newWidth = Math.max(400, startWidth + deltaX);
+      }
+      if (direction.includes('w')) {
+        newWidth = Math.max(400, startWidth - deltaX);
+        newLeft = startLeft + (startWidth - newWidth);
+      }
+      if (direction.includes('s')) {
+        newHeight = Math.max(300, startHeight + deltaY);
+      }
+      if (direction.includes('n')) {
+        newHeight = Math.max(300, startHeight - deltaY);
+        newTop = startTop + (startHeight - newHeight);
+      }
+
+      // 限制最大尺寸
+      var maxWidth = window.innerWidth * 0.95;
+      var maxHeight = window.innerHeight * 0.95;
+      newWidth = Math.min(newWidth, maxWidth);
+      newHeight = Math.min(newHeight, maxHeight);
+
+      // 直接更新DOM以实现实时效果
+      modal.style.width = "".concat(newWidth, "px");
+      modal.style.height = "".concat(newHeight, "px");
+
+      // 同时更新 modal-content 的高度
+      var modalContent = modal.querySelector('.ant-modal-content');
+      if (modalContent) {
+        modalContent.style.height = "".concat(newHeight, "px");
+        modalContent.style.display = 'flex';
+        modalContent.style.flexDirection = 'column';
+      }
+
+      // 仍然更新state以保持React状态同步
+      setModalSize({
+        width: newWidth,
+        height: newHeight
+      });
+      setModalPosition({
+        x: newLeft,
+        y: newTop
+      });
+    };
+    var handleMouseUp = function handleMouseUp() {
+      setIsResizing(false);
+      setResizeDirection('');
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  // 合并类名
+  var zoomClass = !fullScreen && zoom !== 'normal' ? "modal-wrap-zoom-".concat(zoom) : '';
+  var fullScreenClass = fullScreen ? 'modal-wrap-fullscreen' : '';
+  var resizingClass = isResizing ? 'modal-wrap-resizing' : '';
+  var mergedWrapClassName = [propsWrapClassName, fullScreenClass, zoomClass, resizingClass].filter(Boolean).join(' ');
   return /*#__PURE__*/React.createElement(Modal, _extends({
     maskClosable: false,
-    wrapClassName: "".concat(fullScreen ? 'modal-wrap-fullscreen' : '')
-  }, props, {
+    width: width
+  }, restProps, {
+    wrapClassName: mergedWrapClassName,
     title: /*#__PURE__*/React.createElement("div", {
       style: {
         width: '100%',
-        cursor: 'move'
+        cursor: fullScreen ? 'default' : 'move'
       },
       onMouseOver: function onMouseOver() {
-        if (disabled) {
+        if (!fullScreen && disabled) {
           setDisabled(false);
         }
       },
       onMouseOut: function onMouseOut() {
-        setDisabled(true);
+        if (!fullScreen) {
+          setDisabled(true);
+        }
       },
       onFocus: function onFocus() {},
       onBlur: function onBlur() {}
-    }, titleRender()),
+    }, props.title, !fullScreen && zoom !== 'large' && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "ant-modal-close",
+      style: {
+        right: 106
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleZoomIn();
+      },
+      title: "\u653E\u5927"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ant-modal-close-x"
+    }, /*#__PURE__*/React.createElement(ZoomInOutlined, null))), !fullScreen && zoom !== 'small' && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "ant-modal-close",
+      style: {
+        right: 74
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleZoomOut();
+      },
+      title: "\u7F29\u5C0F"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ant-modal-close-x"
+    }, /*#__PURE__*/React.createElement(ZoomOutOutlined, null))), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "ant-modal-close",
+      style: {
+        right: 42
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        toggleFullScreen();
+      },
+      title: fullScreen ? '退出全屏' : '全屏'
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "ant-modal-close-x"
+    }, fullScreen ? /*#__PURE__*/React.createElement(ShrinkOutlined, null) : /*#__PURE__*/React.createElement(ArrowsAltOutlined, null)))),
     modalRender: function modalRender(modal) {
       return /*#__PURE__*/React.createElement(Draggable, {
-        disabled: disabled,
+        disabled: disabled || fullScreen,
         bounds: bounds,
         nodeRef: draggleRef,
         onStart: function onStart(event, uiData) {
           return _onStart(event, uiData);
-        }
+        },
+        cancel: ".resize-handle"
       }, /*#__PURE__*/React.createElement("div", {
-        ref: draggleRef
-      }, modal));
+        ref: draggleRef,
+        style: isResizing && modalSize.width > 0 ? {
+          position: 'relative',
+          height: '100%',
+          '--modal-width': "".concat(modalSize.width, "px"),
+          '--modal-height': "".concat(modalSize.height, "px")
+        } : {
+          position: 'relative',
+          height: '100%'
+        }
+      }, modal, !fullScreen && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-e",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'e');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-s",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 's');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-w",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'w');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-n",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'n');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-se",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'se');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-sw",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'sw');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-ne",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'ne');
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "resize-handle resize-handle-nw",
+        onMouseDown: function onMouseDown(e) {
+          return handleResizeMouseDown(e, 'nw');
+        }
+      }))));
     }
   }));
 };

package/dist/esm/draggableModal/style.less

@@ -1,16 +1,189 @@
-.modal-wrap-fullscreen {
-  top: 0;
-  margin: 0;
-  width: 100%;
-  max-width: 100%;
-  height: 100vh;
-  max-height: 100vh;
-  padding: 0;
-
-  :global {
-    .acud-modal-content {
-      height: 100%;
+:global {
+  .modal-wrap-fullscreen {
+    .ant-modal {
+      top: 0 !important;
+      margin: 0 !important;
+      width: 100vw !important;
+      max-width: 100vw !important;
+      height: 100vh !important;
+      max-height: 100vh !important;
+      padding: 0 !important;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .ant-modal-content {
+      height: 100vh;
       border-radius: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ant-modal-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+    }
+
+    .ant-modal-header {
+      flex-shrink: 0;
+    }
+
+    .ant-modal-footer {
+      flex-shrink: 0;
+    }
+  }
+
+  .modal-wrap-zoom-large {
+    .ant-modal {
+      width: 90vw !important;
+      max-width: 90vw !important;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .ant-modal-content {
+      max-height: 85vh;
+      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .ant-modal-body {
+      max-height: calc(85vh - 110px);
+      overflow-y: auto;
+      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  }
+
+  .modal-wrap-zoom-small {
+    .ant-modal {
+      width: 50vw !important;
+      max-width: 50vw !important;
+      min-width: 400px !important;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .ant-modal-content {
+      max-height: 50vh;
+      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .ant-modal-body {
+      max-height: calc(50vh - 110px);
+      overflow-y: auto;
+      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  }
+
+  .modal-wrap-resizing {
+    .ant-modal {
+      width: var(--modal-width) !important;
+      transition: none;
+    }
+
+    .ant-modal-content {
+      height: var(--modal-height);
+      transition: none;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ant-modal-body {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .ant-modal-header {
+      flex-shrink: 0;
+    }
+
+    .ant-modal-footer {
+      flex-shrink: 0;
     }
   }
 }
+
+// 拖动调整大小的手柄样式
+.resize-handle {
+  position: absolute;
+  z-index: 10;
+  background: transparent;
+  transition: all 0.2s ease;
+  pointer-events: auto;
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+    background-color: rgba(24, 144, 255, 0.5);
+  }
+}
+
+// 当鼠标悬停在 modal 上时显示手柄
+.ant-modal:hover .resize-handle {
+  opacity: 1;
+  background: rgba(24, 144, 255, 0.15);
+}
+
+
+// 边缘手柄
+.resize-handle-e {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: e-resize;
+}
+
+.resize-handle-w {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: w-resize;
+}
+
+.resize-handle-s {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  cursor: s-resize;
+}
+
+.resize-handle-n {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 8px;
+  cursor: n-resize;
+}
+
+// 角落手柄
+.resize-handle-se {
+  right: 0;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  cursor: se-resize;
+}
+
+.resize-handle-sw {
+  left: 0;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  cursor: sw-resize;
+}
+
+.resize-handle-ne {
+  right: 0;
+  top: 0;
+  width: 12px;
+  height: 12px;
+  cursor: ne-resize;
+}
+
+.resize-handle-nw {
+  left: 0;
+  top: 0;
+  width: 12px;
+  height: 12px;
+  cursor: nw-resize;
+}