@nokecy/qc-ui 1.1.84 → 1.1.86

package/dist/cjs/array-table/arrayAddBtn.js

@@ -46,7 +46,8 @@ var ArrayAddBtn = function ArrayAddBtn(props) {
     rest = _objectWithoutProperties(props, _excluded);
   var prefixCls = (0, _builtins__.usePrefixCls)("formily-array-base");
   if (!arrayField) return null;
-  if (arrayField.pattern !== "editable" && arrayField.pattern !== "disabled") return null;
+  // 明细处于只读或禁用状态时不显示新增入口，避免出现灰色的无效操作。
+  if (arrayField.pattern !== "editable") return null;
   return /*#__PURE__*/_react.default.createElement(_antd.Button, _extends({
     type: "primary"
   }, rest, {

package/dist/cjs/array-table/cellFocusScope.d.ts

@@ -2,19 +2,20 @@ import React 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,不产生盒子,不改变单元格里原有的布局。
  *
  * @author nokecy
  */
-export type CellLeaveHandler = (isStale: () => boolean) => void;
+export type CellLeaveHandler = (isStale: () => boolean, hadFocus: boolean) => void;
 export declare const CellFocusScope: ({ onLeave, children }: {
     onLeave: CellLeaveHandler;
     children: React.ReactNode;

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

@@ -11,13 +11,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 /**
  * 判断「焦点离开了这个单元格」的作用域,给懒挂载格「用完卸回纯文本」用。
  *
- * 用 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,不产生盒子,不改变单元格里原有的布局。
  *
@@ -29,34 +30,69 @@ var CellFocusScope = exports.CellFocusScope = function CellFocusScope(_ref) {
     children = _ref.children;
   var rootRef = (0, _react.useRef)(null);
   var timerRef = (0, _react.useRef)();
+  // 通过 React portal 渲染到 body 的弹层仍属于当前格；记录经过本作用域的指针事件，
+  // 避免日期/下拉弹层中的点击被 document 级离开检测误判。@author nokecy
+  var pointerEventsInScopeRef = (0, _react.useRef)(new WeakSet());
+  var focusWithinRef = (0, _react.useRef)(false);
   // 每次焦点回到格内、或卸载时递增;进行中的异步判定拿它判断自己是否已过期
   var generationRef = (0, _react.useRef)(0);
   var onLeaveRef = (0, _react.useRef)(onLeave);
   onLeaveRef.current = onLeave;
-  var cancel = function cancel() {
+  var cancel = (0, _react.useCallback)(function () {
     generationRef.current += 1;
     window.clearTimeout(timerRef.current);
-  };
-  (0, _react.useEffect)(function () {
-    return cancel;
   }, []);
-  var handleBlur = function handleBlur() {
+  var scheduleLeave = (0, _react.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);
+  };
+  (0, _react.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.default.createElement("div", {
     ref: rootRef,
     style: {
       display: 'contents'
     },
-    onFocus: cancel,
-    onBlur: handleBlur
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onPointerDownCapture: handlePointerDownCapture
   }, children);
 };

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

@@ -1,6 +1,5 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _agGridReact = require("ag-grid-react");
 var _react2 = require("@formily/react");
 var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+var _locale = require("../ag-grid-plus/locale");
 var _utils = require("./utils");
 var _columnGroup = require("./columnGroup");
 var _indexColumn = require("./indexColumn");
@@ -30,6 +30,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
@@ -38,7 +39,6 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // AG-Grid v33 主题:行高、单元格居中、去聚焦/选区视觉(编辑态与阅读态共用一份,见 theme.ts)
 //@ts-ignore
 var ArrayTableInner = (0, _react2.observer)(function (props) {
-  var _addition$props;
   var height = props.height,
     gridKey = props.gridKey;
   var arrayTableTheme = (0, _theme.useArrayTableTheme)(true);
@@ -314,21 +314,39 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
     style: {
       marginBottom: 5
     }
-  }, addition ? /*#__PURE__*/_react.default.createElement(_arrayAddBtn.default, _extends({
-    title: "新增",
-    onAdd: function onAdd() {
-      setIsAdd(true);
-    }
-  }, addition.props, {
-    // 框架关键属性钉在 spread 之后:不可被 addition.props 覆盖;
-    // defaultValue 合并自定义字段但始终携带 _id/_isNew 标记。@author nokecy
-    arrayField: field,
-    schema: schema,
-    defaultValue: _objectSpread({
-      _id: (0, _uniqueId.default)(),
-      _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.default.createElement(_arrayAddBtn.default, _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: (0, _uniqueId.default)(),
+        _isNew: true
+      }, rowDefaults)
+    }));
+  }() : null, actions.map(function (column, key) {
     return /*#__PURE__*/_react.default.createElement(_react2.RecursionField, {
       schema: column.schema,
       name: key,
@@ -347,6 +365,7 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
     }
   }, /*#__PURE__*/_react.default.createElement(_agGridReact.AgGridReact, {
     theme: arrayTableTheme,
+    localeText: _locale.localeText,
     context: gridContext,
     onGridReady: function onGridReady(params) {
       params.api.hidePopupMenu();
@@ -393,8 +412,8 @@ var ArrayTableInner = (0, _react2.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);
       }
     },
@@ -416,9 +435,9 @@ var ArrayTableInner = (0, _react2.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/cjs/array-table/utils.js

@@ -385,52 +385,60 @@ var LazyAgField = exports.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);
     };
   }();

package/dist/cjs/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/cjs/draggableModal/index.js

@@ -48,24 +48,31 @@ var DraggableModal = function DraggableModal(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     isResizing = _useState6[0],
     setIsResizing = _useState6[1];
-  var _useState7 = (0, _react.useState)(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    resizeDirection = _useState8[0],
-    setResizeDirection = _useState8[1];
-  var _useState9 = (0, _react.useState)({
+  var _useState7 = (0, _react.useState)({
       width: 0,
       height: 0
     }),
-    _useState10 = _slicedToArray(_useState9, 2),
-    modalSize = _useState10[0],
-    setModalSize = _useState10[1];
-  var _useState11 = (0, _react.useState)({
+    _useState8 = _slicedToArray(_useState7, 2),
+    modalSize = _useState8[0],
+    setModalSize = _useState8[1];
+  var _useState9 = (0, _react.useState)({
       x: 0,
       y: 0
     }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    modalPosition = _useState10[0],
+    setModalPosition = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
     _useState12 = _slicedToArray(_useState11, 2),
-    modalPosition = _useState12[0],
-    setModalPosition = _useState12[1];
+    hasResized = _useState12[0],
+    setHasResized = _useState12[1];
+  var _useState13 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    dragPosition = _useState14[0],
+    setDragPosition = _useState14[1];
 
   // 解构 props,分离出 wrapClassName 和 open
   var propsWrapClassName = props.wrapClassName,
@@ -89,6 +96,25 @@ var DraggableModal = function DraggableModal(props) {
       if (timer !== undefined) clearTimeout(timer);
     };
   }, [open]);
+
+  // 每次关闭后还原弹窗定位；下次打开仍按调用方传入的默认尺寸居中显示。@author nokecy
+  (0, _react.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,
@@ -126,7 +152,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;
@@ -139,30 +170,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");
@@ -191,7 +220,6 @@ var DraggableModal = function DraggableModal(props) {
     };
     var handleMouseUp = function handleMouseUp() {
       setIsResizing(false);
-      setResizeDirection('');
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
 
@@ -206,7 +234,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.default.createElement(_antd.Modal, _extends({
     maskClosable: false,
     width: width,
@@ -232,18 +261,27 @@ var DraggableModal = function DraggableModal(props) {
     }, props.title),
     modalRender: function modalRender(modal) {
       return /*#__PURE__*/_react.default.createElement(_reactDraggable.default, {
-        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.default.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/cjs/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;
     }

package/dist/cjs/readPretty/controls.js

@@ -8,6 +8,7 @@ var _antdV = require("@formily/antd-v5");
 var _antd = require("antd");
 var _react = _interopRequireDefault(require("react"));
 var _hoistStatics = require("./hoistStatics");
+var _selectNumberInputTextOnClick = require("./selectNumberInputTextOnClick");
 var _values = require("./values");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -16,6 +17,7 @@ var readingControl = function readingControl(Control, Preview) {
   var map = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (props) {
     return props;
   };
+  var selectNumberOnClick = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var Component = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var _props$disabled;
     var _ConfigProvider$useCo = _antd.ConfigProvider.useConfig(),
@@ -23,7 +25,9 @@ var readingControl = function readingControl(Control, Preview) {
     var reading = props.readOnly || ((_props$disabled = props.disabled) !== null && _props$disabled !== void 0 ? _props$disabled : componentDisabled);
     return reading ? /*#__PURE__*/_react.default.createElement(_antdV.PreviewText.Placeholder, {
       value: "\u2014"
-    }, /*#__PURE__*/_react.default.createElement(Preview, map(props))) : /*#__PURE__*/_react.default.createElement(Control, _extends({}, props, {
+    }, /*#__PURE__*/_react.default.createElement(Preview, map(props))) : /*#__PURE__*/_react.default.createElement(Control, _extends({}, props, selectNumberOnClick ? {
+      onClick: (0, _selectNumberInputTextOnClick.selectNumberInputTextOnClick)(props.onClick)
+    } : {}, {
       ref: ref
     }));
   });
@@ -53,7 +57,7 @@ var Input = exports.Input = readingControl(_antd.Input, _antdV.PreviewText.Input
 Input.TextArea = readingControl(_antd.Input.TextArea, _antdV.PreviewText.Input);
 Input.Password = readingControl(_antd.Input.Password, PasswordPreview);
 Input.Search = readingControl(_antd.Input.Search, _antdV.PreviewText.Input);
-var InputNumber = exports.InputNumber = readingControl(_antd.InputNumber, _antdV.PreviewText.NumberPicker);
+var InputNumber = exports.InputNumber = readingControl(_antd.InputNumber, _antdV.PreviewText.NumberPicker, undefined, true);
 var Select = exports.Select = readingControl(_antd.Select, ChoicePreview);
 var Switch = exports.Switch = readingControl(_antd.Switch, BooleanPreview);
 var Checkbox = exports.Checkbox = readingControl(_antd.Checkbox, BooleanPreview);

package/dist/cjs/readPretty/formily.js

@@ -8,6 +8,7 @@ var _react = require("@formily/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _hoistStatics = require("./hoistStatics");
 var Reading = _interopRequireWildcard(require("./controls"));
+var _selectNumberInputTextOnClick = require("./selectNumberInputTextOnClick");
 var _arrayTable = require("./arrayTable");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -30,6 +31,7 @@ function withReadingFields(components) {
     Password: Reading.Input.Password
   });
   var wrap = function wrap(Control, Preview) {
+    var selectNumberOnClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var Component = (0, _react.observer)(function (props) {
       var field = (0, _react.useField)();
       if (props.disabled || props.readOnly || field !== null && field !== void 0 && field.disabled || field !== null && field !== void 0 && field.readOnly) {
@@ -41,7 +43,9 @@ function withReadingFields(components) {
           disabled: true
         }));
       }
-      return /*#__PURE__*/_react2.default.createElement(Control, props);
+      return /*#__PURE__*/_react2.default.createElement(Control, _extends({}, props, selectNumberOnClick ? {
+        onClick: (0, _selectNumberInputTextOnClick.selectNumberInputTextOnClick)(props.onClick)
+      } : {}));
     });
     var Wrapped = (0, _hoistStatics.hoistStatics)(Component, Control);
     // 嵌套控件同样按字段状态展示，例如Input.TextArea、DatePicker.RangePicker。
@@ -58,7 +62,7 @@ function withReadingFields(components) {
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var name = _step.value;
-      result[name] = wrap(components[name], previews[name]);
+      result[name] = wrap(components[name], previews[name], name === 'NumberPicker');
     }
     // ArrayTable 阅读态保留动态列的标题和显隐状态。@author nokecy
   } catch (err) {

package/dist/cjs/readPretty/selectNumberInputTextOnClick.d.ts

@@ -0,0 +1,3 @@
+import type { MouseEventHandler } from 'react';
+/** 数字框点击时全选当前输入文本，便于直接替换数值。@author nokecy */
+export declare const selectNumberInputTextOnClick: (onClick?: MouseEventHandler<HTMLElement>) => MouseEventHandler<HTMLElement>;