@nokecy/qc-ui 1.1.83 → 1.1.85

package/dist/esm/array-table/cellFocusScope.js

@@ -1,15 +1,16 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 /**
  * 判断「焦点离开了这个单元格」的作用域,给懒挂载格「用完卸回纯文本」用。
  *
- * 用 React 合成的 onFocus/onBlur 而不是原生监听:合成事件会沿 React 树冒泡,
- * 穿过 portal。下拉面板、日期面板、选择对话框这类渲染到 body 上的弹层,焦点进去时
- * 对本格来说仍是「格内」,不会被误判成离开;弹层的挂载点是哪、有没有 antd 的类名都不用管。
+ * 用 React 合成的 onFocus/onBlur 判断焦点变化:合成事件会沿 React 树冒泡,穿过 portal。
+ * 下拉面板、日期面板、选择对话框这类渲染到 body 上的弹层,焦点进去时对本格仍是「格内」。
+ * 同时监听指针离开:点击到不可聚焦的文本格或页面空白不会触发 blur,需要按点击位置恢复展示态；
+ * portal 内的指针事件仍沿 React 树到达本作用域,不会被当作离开。
  *
- * 失焦不立刻判定,而是推到下一个任务再看:焦点从输入框换到格内别的元素(或弹层)时,
- * blur 之后紧跟着 focus,后者会作废这次判定。判定时若 document.activeElement 仍在格内
- * (窗口切走时输入框依旧是 activeElement),同样不算离开。
+ * 离开不立刻判定,而是推到下一个任务再看:焦点从输入框换到格内别的元素(或弹层)时,
+ * blur 之后紧跟着 focus,后者会作废这次判定。单纯 blur 时若 activeElement 仍在格内
+ * (如窗口切走),不算离开；指针明确点击到作用域外则按离开处理。
  *
  * 用 display: contents,不产生盒子,不改变单元格里原有的布局。
  *
@@ -21,34 +22,69 @@ export var CellFocusScope = function CellFocusScope(_ref) {
     children = _ref.children;
   var rootRef = useRef(null);
   var timerRef = useRef();
+  // 通过 React portal 渲染到 body 的弹层仍属于当前格；记录经过本作用域的指针事件，
+  // 避免日期/下拉弹层中的点击被 document 级离开检测误判。@author nokecy
+  var pointerEventsInScopeRef = useRef(new WeakSet());
+  var focusWithinRef = useRef(false);
   // 每次焦点回到格内、或卸载时递增;进行中的异步判定拿它判断自己是否已过期
   var generationRef = useRef(0);
   var onLeaveRef = useRef(onLeave);
   onLeaveRef.current = onLeave;
-  var cancel = function cancel() {
+  var cancel = useCallback(function () {
     generationRef.current += 1;
     window.clearTimeout(timerRef.current);
-  };
-  useEffect(function () {
-    return cancel;
   }, []);
-  var handleBlur = function handleBlur() {
+  var scheduleLeave = useCallback(function () {
+    var pointerLeftScope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var hadFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : focusWithinRef.current;
     cancel();
     var generation = generationRef.current;
     timerRef.current = window.setTimeout(function () {
       var _rootRef$current;
-      if ((_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 && _rootRef$current.contains(document.activeElement)) return;
+      // blur 后 activeElement 仍在本格通常是窗口切走或格内弹层切焦点，不算离开。
+      // 指针明确点到本格/其弹层之外时，即使目标不可聚焦导致 activeElement 没变，也应离开。
+      if (!pointerLeftScope && (_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 && _rootRef$current.contains(document.activeElement)) return;
       onLeaveRef.current(function () {
         return generation !== generationRef.current;
-      });
+      }, hadFocus);
     }, 0);
+  }, [cancel]);
+  var handleFocus = function handleFocus() {
+    focusWithinRef.current = true;
+    cancel();
   };
+  var handleBlur = function handleBlur() {
+    var hadFocus = focusWithinRef.current;
+    focusWithinRef.current = false;
+    scheduleLeave(false, hadFocus);
+  };
+  var handlePointerDownCapture = function handlePointerDownCapture(event) {
+    pointerEventsInScopeRef.current.add(event.nativeEvent);
+  };
+  useEffect(function () {
+    var handleDocumentPointerDown = function handleDocumentPointerDown(event) {
+      var root = rootRef.current;
+      if (!root) return;
+      var target = event.target;
+      // DOM 内点击以及 React portal 子树内点击都属于当前格的交互。
+      if (target instanceof Node && root.contains(target) || pointerEventsInScopeRef.current.has(event)) return;
+      // 新增行的必填空格也会预先挂载控件，但可能从未获得焦点；同样需要响应离开，
+      // 由 onLeave 根据 hadFocus 决定是否校验未触碰的空必填格。@author nokecy
+      scheduleLeave(true, focusWithinRef.current);
+    };
+    document.addEventListener('pointerdown', handleDocumentPointerDown);
+    return function () {
+      document.removeEventListener('pointerdown', handleDocumentPointerDown);
+      cancel();
+    };
+  }, [cancel, scheduleLeave]);
   return /*#__PURE__*/React.createElement("div", {
     ref: rootRef,
     style: {
       display: 'contents'
     },
-    onFocus: cancel,
-    onBlur: handleBlur
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPointerDownCapture: handlePointerDownCapture
   }, children);
 };

package/dist/esm/array-table/index.js

@@ -1,10 +1,10 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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); }
@@ -34,7 +34,6 @@ import { useGridSchemes } from "../ag-grid-plus";
 
 //@ts-ignore
 var ArrayTableInner = observer(function (props) {
-  var _addition$props;
   var height = props.height,
     gridKey = props.gridKey;
   var arrayTableTheme = useArrayTableTheme(true);
@@ -310,21 +309,39 @@ var ArrayTableInner = observer(function (props) {
     style: {
       marginBottom: 5
     }
-  }, addition ? /*#__PURE__*/React.createElement(ArrayAddBtn, _extends({
-    title: "新增",
-    onAdd: function onAdd() {
-      setIsAdd(true);
-    }
-  }, addition.props, {
-    // 框架关键属性钉在 spread 之后:不可被 addition.props 覆盖;
-    // defaultValue 合并自定义字段但始终携带 _id/_isNew 标记。@author nokecy
-    arrayField: field,
-    schema: schema,
-    defaultValue: _objectSpread({
-      _id: uniqueId(),
-      _isNew: true
-    }, ((_addition$props = addition.props) === null || _addition$props === void 0 ? void 0 : _addition$props.defaultValue) || {})
-  })) : null, actions.map(function (column, key) {
+  }, addition ? function (_addition$props, _additionSchema$xCom, _ref, _additionProps$title, _additionProps$method) {
+    // addition 是 RecursionField 元素；业务配置在其 schema.x-component-props 中，
+    // 不能从 React 元素的 props 直接读取，否则默认值和标题会丢失。@author nokecy
+    var additionSchema = (_addition$props = addition.props) === null || _addition$props === void 0 ? void 0 : _addition$props.schema;
+    var additionProps = (_additionSchema$xCom = additionSchema === null || additionSchema === void 0 ? void 0 : additionSchema['x-component-props']) !== null && _additionSchema$xCom !== void 0 ? _additionSchema$xCom : {};
+    var configuredDefaults = additionProps.defaultValue;
+    var rowDefaults = configuredDefaults && _typeof(configuredDefaults) === 'object' && !Array.isArray(configuredDefaults) ? configuredDefaults : {};
+    return /*#__PURE__*/React.createElement(ArrayAddBtn, _extends({}, additionProps, {
+      title: (_ref = (_additionProps$title = additionProps.title) !== null && _additionProps$title !== void 0 ? _additionProps$title : additionSchema === null || additionSchema === void 0 ? void 0 : additionSchema.title) !== null && _ref !== void 0 ? _ref : '新增'
+      // 新增行总是回到数组顺序，避免当前列排序把空白新行插到旧明细前面。
+      ,
+      onAdd: function onAdd(index) {
+        var _apiRef$current;
+        setIsAdd(true);
+        (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.applyColumnState({
+          defaultState: {
+            sort: null,
+            sortIndex: null
+          }
+        });
+        if (typeof additionProps.onAdd === 'function') additionProps.onAdd(index);
+      }
+      // 框架属性在业务配置之后设置；新行默认追加到明细末尾。@author nokecy
+      ,
+      method: (_additionProps$method = additionProps.method) !== null && _additionProps$method !== void 0 ? _additionProps$method : 'push',
+      arrayField: field,
+      schema: schema,
+      defaultValue: _objectSpread({
+        _id: uniqueId(),
+        _isNew: true
+      }, rowDefaults)
+    }));
+  }() : null, actions.map(function (column, key) {
     return /*#__PURE__*/React.createElement(RecursionField, {
       schema: column.schema,
       name: key,
@@ -389,8 +406,8 @@ var ArrayTableInner = observer(function (props) {
         });
       }
       if (isAdd) {
-        var _apiRef$current;
-        (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || _apiRef$current.ensureIndexVisible(dataSource.length - 1, "bottom");
+        var _apiRef$current2;
+        (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || _apiRef$current2.ensureIndexVisible(dataSource.length - 1, "bottom");
         setIsAdd(false);
       }
     },
@@ -412,9 +429,9 @@ var ArrayTableInner = observer(function (props) {
         '    <span data-ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon"></span>' + '    <span data-ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon"></span>' + '    <span data-ref="eSortNone" class="ag-header-icon ag-sort-none-icon"></span>' + "  </div>" + "</div>"
       }
     },
-    getRowId: function getRowId(_ref) {
+    getRowId: function getRowId(_ref2) {
       var _data$_id;
-      var data = _ref.data;
+      var data = _ref2.data;
       var id = (_data$_id = data === null || data === void 0 ? void 0 : data._id) !== null && _data$_id !== void 0 ? _data$_id : data === null || data === void 0 ? void 0 : data.id;
       if (id != null) return String(id);
       // 既无 _id 也无 id 的外部数据:按对象引用从 WeakMap 取/分配稳定 id。

package/dist/esm/array-table/indexColumn.js

@@ -6,7 +6,8 @@ var containsIndexComponent = function containsIndexComponent(schema) {
   var _schema$properties;
   if (!schema) return false;
   var component = schema['x-component'];
-  if (typeof component === 'string' && /(?:^|\.)Index$/.test(component)) return true;
+  // ArrayTable.Index / ArrayBase.Index，以及业务常用的 ArrayTableIndex（还会把行号写进数据字段）
+  if (typeof component === 'string' && /(?:^|\.)(?:Array(?:Table)?)?Index$/.test(component)) return true;
   return Object.values((_schema$properties = schema.properties) !== null && _schema$properties !== void 0 ? _schema$properties : {}).some(containsIndexComponent);
 };
 

package/dist/esm/array-table/utils.js

@@ -376,52 +376,60 @@ var LazyAgField = function LazyAgField(params) {
   // 内层字段名:Column key 与它可能不一致(设计器形态),取值/找字段节点都按它
   var dataKey = (_fieldSchema$name = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name !== void 0 ? _fieldSchema$name : colDef === null || colDef === void 0 ? void 0 : colDef.field;
 
-  /** 焦点离开本格:校验通过才卸回懒挂载文本。isStale 为真说明校验期间焦点又回来了或格子已销毁 */
+  /** 离开本格:校验通过才卸回懒挂载文本。未触碰的空必填格保留控件等待填写。@author nokecy */
   var handleLeave = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(isStale) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(isStale, hadFocus) {
       var _field$value$indexOf3, _field$value3, _field$value3$indexOf, _field$form;
-      var index, cellField;
+      var currentValue, index, cellField;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            currentValue = dataKey != null ? readByFieldPath(record, dataKey) : value; // 新增行的必填空格会预先挂载以参与提交校验；若用户从未进入该格，不在点击页面其他位置时
+            // 主动触发校验，但已带值的格子仍可恢复静默文本态。@author nokecy
+            if (!(required && isBlank(currentValue) && !hadFocus)) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
             index = (_field$value$indexOf3 = field === null || field === void 0 || (_field$value3 = field.value) === null || _field$value3 === void 0 || (_field$value3$indexOf = _field$value3.indexOf) === null || _field$value3$indexOf === void 0 ? void 0 : _field$value3$indexOf.call(_field$value3, record)) !== null && _field$value$indexOf3 !== void 0 ? _field$value$indexOf3 : -1; // 字段节点按数据路径找(不含 void 容器);从没挂载过就没有节点,无需校验
             cellField = index >= 0 && dataKey ? (_field$form = field.form) === null || _field$form === void 0 ? void 0 : _field$form.query(field.path.concat(index).concat(dataKey)).take() : undefined;
             if (!cellField) {
-              _context.next = 11;
+              _context.next = 14;
               break;
             }
-            _context.prev = 3;
-            _context.next = 6;
+            _context.prev = 6;
+            _context.next = 9;
             return cellField.validate();
-          case 6:
-            _context.next = 11;
+          case 9:
+            _context.next = 14;
             break;
-          case 8:
-            _context.prev = 8;
-            _context.t0 = _context["catch"](3);
-            return _context.abrupt("return");
           case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](6);
+            return _context.abrupt("return");
+          case 14:
             if (!isStale()) {
-              _context.next = 13;
+              _context.next = 16;
               break;
             }
             return _context.abrupt("return");
-          case 13:
+          case 16:
             if (!(required && isBlank(dataKey != null ? readByFieldPath(record, dataKey) : undefined))) {
-              _context.next = 15;
+              _context.next = 18;
               break;
             }
             return _context.abrupt("return");
-          case 15:
+          case 18:
             activeCells.delete(key);
             rerender();
-          case 17:
+          case 20:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[3, 8]]);
+      }, _callee, null, [[6, 11]]);
     }));
-    return function handleLeave(_x) {
+    return function handleLeave(_x, _x2) {
       return _ref5.apply(this, arguments);
     };
   }();
@@ -794,7 +802,6 @@ var useAddition = function useAddition() {
   }, null);
 };
 export { isColumnComponent, useArrayTableSources, useArrayTableActions, buildArrayTableColumns, useAddition, LazyAgField, LazyReadOnlyText };
-
 /** 简单字段名（非路径、非解构），默认值回填只处理这一种 */
 var SIMPLE_FIELD_NAME = /^[A-Za-z_$][\w$]*$/;
 /**

package/dist/esm/dialogSelect/index.less

@@ -7,8 +7,9 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 100%;
-		height: 100%;
+		width: 24px;
+		height: 24px;
+		font-size: 16px;
 		cursor: pointer;
 		pointer-events: auto;
 		color: var(--qc-dialog-select-trigger-color, rgba(0, 0, 0, 0.45));
@@ -19,18 +20,24 @@
 		}
 	}
 
+	// 为放大后的入口预留文本空间，避免选中值与图标重叠。
+	&.ant-select-single:not(.ant-select-allow-clear) .ant-select-selection-item,
+	&.ant-select-single:not(.ant-select-allow-clear) .ant-select-selection-placeholder {
+		padding-inline-end: 24px;
+	}
+
 	// 悬停时 antd 会把后缀淡出、换成清除图标；这里让入口始终可见，清除图标左移一格并排。
 	&.ant-select.ant-select:hover .ant-select-arrow:not(:last-child) {
 		opacity: 1;
 	}
 
 	&.ant-select-allow-clear .ant-select-clear {
-		inset-inline-end: 31px;
+		inset-inline-end: 37px;
 	}
 
 	&.ant-select-allow-clear .ant-select-selection-item,
 	&.ant-select-allow-clear .ant-select-selection-placeholder {
-		padding-inline-end: 36px;
+		padding-inline-end: 42px;
 	}
 
 	&.ant-select-multiple .ant-select-selector {

package/dist/esm/draggableModal/index.js

@@ -39,24 +39,31 @@ var DraggableModal = function DraggableModal(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     isResizing = _useState6[0],
     setIsResizing = _useState6[1];
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    resizeDirection = _useState8[0],
-    setResizeDirection = _useState8[1];
-  var _useState9 = useState({
+  var _useState7 = useState({
       width: 0,
       height: 0
     }),
-    _useState10 = _slicedToArray(_useState9, 2),
-    modalSize = _useState10[0],
-    setModalSize = _useState10[1];
-  var _useState11 = useState({
+    _useState8 = _slicedToArray(_useState7, 2),
+    modalSize = _useState8[0],
+    setModalSize = _useState8[1];
+  var _useState9 = useState({
       x: 0,
       y: 0
     }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    modalPosition = _useState10[0],
+    setModalPosition = _useState10[1];
+  var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    modalPosition = _useState12[0],
-    setModalPosition = _useState12[1];
+    hasResized = _useState12[0],
+    setHasResized = _useState12[1];
+  var _useState13 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dragPosition = _useState14[0],
+    setDragPosition = _useState14[1];
 
   // 解构 props,分离出 wrapClassName 和 open
   var propsWrapClassName = props.wrapClassName,
@@ -80,6 +87,25 @@ var DraggableModal = function DraggableModal(props) {
       if (timer !== undefined) clearTimeout(timer);
     };
   }, [open]);
+
+  // 每次关闭后还原弹窗定位；下次打开仍按调用方传入的默认尺寸居中显示。@author nokecy
+  useEffect(function () {
+    if (open) return;
+    setIsResizing(false);
+    setHasResized(false);
+    setModalSize({
+      width: 0,
+      height: 0
+    });
+    setModalPosition({
+      x: 0,
+      y: 0
+    });
+    setDragPosition({
+      x: 0,
+      y: 0
+    });
+  }, [open]);
   var _onStart = function onStart(_event, uiData) {
     var _draggleRef$current;
     var _window$document$docu = window.document.documentElement,
@@ -117,7 +143,12 @@ var DraggableModal = function DraggableModal(props) {
       x: rect.left,
       y: rect.top
     });
-    setResizeDirection(direction);
+    setHasResized(true);
+    // 将当前视觉位置作为新定位基点，避免弹窗自身和 react-draggable 位移重复叠加。@author nokecy
+    setDragPosition({
+      x: 0,
+      y: 0
+    });
     setIsResizing(true);
     var startX = e.clientX;
     var startY = e.clientY;
@@ -130,30 +161,28 @@ var DraggableModal = function DraggableModal(props) {
       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);
+        newWidth = startWidth + deltaX;
       }
       if (direction.includes('w')) {
-        newWidth = Math.max(400, startWidth - deltaX);
-        newLeft = startLeft + (startWidth - newWidth);
+        newWidth = startWidth - deltaX;
       }
       if (direction.includes('s')) {
-        newHeight = Math.max(300, startHeight + deltaY);
+        newHeight = startHeight + deltaY;
       }
       if (direction.includes('n')) {
-        newHeight = Math.max(300, startHeight - deltaY);
-        newTop = startTop + (startHeight - newHeight);
+        newHeight = startHeight - deltaY;
       }
 
-      // 限制最大尺寸
+      // 限制最小与最大尺寸，再按固定边计算另一侧位置，确保拖哪条边就移动哪条边。@author nokecy
       var maxWidth = window.innerWidth * 0.95;
       var maxHeight = window.innerHeight * 0.95;
-      newWidth = Math.min(newWidth, maxWidth);
-      newHeight = Math.min(newHeight, maxHeight);
+      newWidth = Math.min(Math.max(400, newWidth), maxWidth);
+      newHeight = Math.min(Math.max(300, newHeight), maxHeight);
+      var newLeft = direction.includes('w') ? startLeft + startWidth - newWidth : startLeft;
+      var newTop = direction.includes('n') ? startTop + startHeight - newHeight : startTop;
 
       // 直接更新DOM以实现实时效果
       modal.style.width = "".concat(newWidth, "px");
@@ -182,7 +211,6 @@ var DraggableModal = function DraggableModal(props) {
     };
     var handleMouseUp = function handleMouseUp() {
       setIsResizing(false);
-      setResizeDirection('');
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
 
@@ -197,7 +225,8 @@ var DraggableModal = function DraggableModal(props) {
 
   // 合并类名
   var resizingClass = isResizing ? 'modal-wrap-resizing' : '';
-  var mergedWrapClassName = [propsWrapClassName, resizingClass].filter(Boolean).join(' ');
+  var resizedClass = hasResized ? 'modal-wrap-resized' : '';
+  var mergedWrapClassName = [propsWrapClassName, resizingClass, resizedClass].filter(Boolean).join(' ');
   return /*#__PURE__*/React.createElement(Modal, _extends({
     maskClosable: false,
     width: width,
@@ -223,18 +252,27 @@ var DraggableModal = function DraggableModal(props) {
     }, props.title),
     modalRender: function modalRender(modal) {
       return /*#__PURE__*/React.createElement(Draggable, {
-        disabled: disabled,
+        disabled: disabled || isResizing,
         bounds: bounds,
+        position: dragPosition,
         nodeRef: draggleRef,
         onStart: function onStart(event, uiData) {
           return _onStart(event, uiData);
         },
+        onDrag: function onDrag(_event, uiData) {
+          return setDragPosition({
+            x: uiData.x,
+            y: uiData.y
+          });
+        },
         cancel: ".resize-handle"
       }, /*#__PURE__*/React.createElement("div", {
         ref: draggleRef,
-        style: isResizing && modalSize.width > 0 ? {
-          position: 'relative',
-          height: '100%',
+        style: hasResized && modalSize.width > 0 ? {
+          position: 'fixed',
+          left: modalPosition.x,
+          top: modalPosition.y,
+          height: "".concat(modalSize.height, "px"),
           width: "".concat(modalSize.width, "px"),
           '--modal-width': "".concat(modalSize.width, "px"),
           '--modal-height': "".concat(modalSize.height, "px")

package/dist/esm/draggableModal/style.less

@@ -1,6 +1,11 @@
 :global {
-  .modal-wrap-resizing {
+  .modal-wrap-resizing,
+  .modal-wrap-resized {
     .ant-modal {
+      position: absolute;
+      left: 0 !important;
+      top: 0 !important;
+      margin: 0 !important;
       width: var(--modal-width) !important;
       transition: none;
     }