@nokecy/qc-ui 1.1.38 → 1.1.39

package/dist/esm/ag-grid-plus/setting/columnGroupUtils.js

@@ -16,6 +16,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 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; }
+import { logger } from "../utils/logger";
 /**
  * 生成唯一 ID
  */
@@ -267,6 +268,12 @@ export function flatConfigToGridState(flatConfig, originalColumnDefs) {
       }
     });
     if (newColumnsWithIndex.length > 0) {
+      logger.debug('[flatConfigToGridState] 检测到新增列，将插入到原始位置:', {
+        newColumnFields: newColumnsWithIndex.map(function (item) {
+          return item.col.field;
+        })
+      });
+
       // 将新增列插入到正确位置（基于其在原始定义中的相对位置）
       var _iterator4 = _createForOfIteratorHelper(newColumnsWithIndex),
         _step4;
@@ -515,6 +522,12 @@ export function flatConfigToColumnState(flatConfig, originalColumnDefs) {
       }
     });
     if (newColumnsWithIndex.length > 0) {
+      logger.debug('[flatConfigToColumnState] 检测到新增列，将插入到原始位置:', {
+        newColumnFields: newColumnsWithIndex.map(function (item) {
+          return item.col.field;
+        })
+      });
+
       // 将新增列插入到正确位置（基于其在原始定义中的相对位置）
       var _iterator6 = _createForOfIteratorHelper(newColumnsWithIndex),
         _step6;

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

@@ -1,4 +1,7 @@
+var _excluded = ["arrayField", "schema", "method", "defaultValue", "onAdd", "title", "icon", "className", "onClick"];
 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; }
 import React from "react";
 import { useField } from "@formily/react";
 import { Button } from "antd";
@@ -23,34 +26,40 @@ var getDefaultValue = function getDefaultValue(defaultValue, schema) {
 };
 var ArrayAddBtn = function ArrayAddBtn(props) {
   var self = useField();
+  // 解构出所有非 DOM 属性,只把 rest 透传给 Button,避免 arrayField/schema/method 等漏到 DOM 触发 React 警告。@author nokecy
   var arrayField = props.arrayField,
-    schema = props.schema;
+    schema = props.schema,
+    method = props.method,
+    defaultValue = props.defaultValue,
+    onAdd = props.onAdd,
+    title = props.title,
+    icon = props.icon,
+    className = props.className,
+    _onClick = props.onClick,
+    rest = _objectWithoutProperties(props, _excluded);
   var prefixCls = usePrefixCls("formily-array-base");
   if (!arrayField) return null;
   if (arrayField.pattern !== "editable" && arrayField.pattern !== "disabled") return null;
   return /*#__PURE__*/React.createElement(Button, _extends({
     type: "primary"
-  }, props, {
+  }, rest, {
     disabled: self === null || self === void 0 ? void 0 : self.disabled,
-    className: cls("".concat(prefixCls, "-addition"), props.className),
+    className: cls("".concat(prefixCls, "-addition"), className),
     onClick: function onClick(e) {
       if (arrayField !== null && arrayField !== void 0 && arrayField.disabled) return;
-      var defaultValue = getDefaultValue(props.defaultValue, schema);
-      if (props.method === "unshift") {
-        var _arrayField$unshift, _props$onAdd;
-        (_arrayField$unshift = arrayField.unshift) === null || _arrayField$unshift === void 0 || _arrayField$unshift.call(arrayField, defaultValue);
-        props === null || props === void 0 || (_props$onAdd = props.onAdd) === null || _props$onAdd === void 0 || _props$onAdd.call(props, 0);
+      var dv = getDefaultValue(defaultValue, schema);
+      if (method === "unshift") {
+        var _arrayField$unshift;
+        (_arrayField$unshift = arrayField.unshift) === null || _arrayField$unshift === void 0 || _arrayField$unshift.call(arrayField, dv);
+        onAdd === null || onAdd === void 0 || onAdd(0);
       } else {
-        var _arrayField$push, _props$onAdd2, _arrayField$value;
-        (_arrayField$push = arrayField.push) === null || _arrayField$push === void 0 || _arrayField$push.call(arrayField, defaultValue);
-        props === null || props === void 0 || (_props$onAdd2 = props.onAdd) === null || _props$onAdd2 === void 0 || _props$onAdd2.call(props, (arrayField === null || arrayField === void 0 || (_arrayField$value = arrayField.value) === null || _arrayField$value === void 0 ? void 0 : _arrayField$value.length) - 1);
-      }
-      if (props.onClick) {
-        //@ts-ignore
-        props.onClick(e);
+        var _arrayField$push, _arrayField$value;
+        (_arrayField$push = arrayField.push) === null || _arrayField$push === void 0 || _arrayField$push.call(arrayField, dv);
+        onAdd === null || onAdd === void 0 || onAdd((arrayField === null || arrayField === void 0 || (_arrayField$value = arrayField.value) === null || _arrayField$value === void 0 ? void 0 : _arrayField$value.length) - 1);
       }
+      _onClick === null || _onClick === void 0 || _onClick(e);
     },
-    icon: isUndef(props.icon) ? /*#__PURE__*/React.createElement(PlusOutlined, null) : props.icon
-  }), props.title || self.title);
+    icon: isUndef(icon) ? /*#__PURE__*/React.createElement(PlusOutlined, null) : icon
+  }), title || self.title);
 };
 export default ArrayAddBtn;

package/dist/esm/array-table/hooks.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from 'react';
+import { GridApi } from 'ag-grid-community';
 import { ArrayField } from '@formily/core';
 /**
  * 单元格聚焦 Hook
@@ -11,7 +12,7 @@ export declare const useCellFocus: () => {
  * 键盘导航 Hook
  * 处理方向键在表格单元格间的导航
  */
-export declare const useKeyboardNavigation: (ref: RefObject<any>, dataSource: any[], focusInputInCell: (cell: Element) => void) => {
+export declare const useKeyboardNavigation: (ref: RefObject<any>, dataSource: any[], focusInputInCell: (cell: Element) => void, activateCell?: ((api: GridApi, node: any, colId: string) => boolean) | undefined) => {
     handleCellKeyDown: (event: any) => void;
 };
 /**

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

@@ -1,7 +1,10 @@
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-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; }
 import { useCallback } from 'react';
+// setSelectionRange 仅 textarea 与 text/search/url/tel/password 类型 input 支持;
+// checkbox/number/date 等调用会抛 InvalidStateError,故用白名单守卫。@author nokecy
+var supportsSelectionRange = function supportsSelectionRange(el) {
+  return el.tagName === 'TEXTAREA' || /^(text|search|url|tel|password)$/i.test(el.type || 'text');
+};
+
 /**
  * 单元格聚焦 Hook
  * 处理 Editable 包装和普通输入框的聚焦逻辑
@@ -18,7 +21,7 @@ export var useCellFocus = function useCellFocus() {
         var existingInput = editableElement.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
         if (existingInput) {
           existingInput.focus();
-          if ('setSelectionRange' in existingInput && existingInput.type !== 'number' && existingInput.type !== 'date') {
+          if (supportsSelectionRange(existingInput)) {
             var _existingInput$value;
             var length = ((_existingInput$value = existingInput.value) === null || _existingInput$value === void 0 ? void 0 : _existingInput$value.length) || 0;
             setTimeout(function () {
@@ -39,7 +42,7 @@ export var useCellFocus = function useCellFocus() {
           var newInput = editableElement.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
           if (newInput) {
             newInput.focus();
-            if ('setSelectionRange' in newInput && newInput.type !== 'number' && newInput.type !== 'date') {
+            if (supportsSelectionRange(newInput)) {
               var _newInput$value;
               var _length = ((_newInput$value = newInput.value) === null || _newInput$value === void 0 ? void 0 : _newInput$value.length) || 0;
               setTimeout(function () {
@@ -68,7 +71,7 @@ export var useCellFocus = function useCellFocus() {
         inputElement.focus();
 
         // 将光标定位到末尾
-        if ('setSelectionRange' in inputElement && inputElement.type !== 'number' && inputElement.type !== 'date') {
+        if (supportsSelectionRange(inputElement)) {
           var _inputElement$value;
           var _length2 = ((_inputElement$value = inputElement.value) === null || _inputElement$value === void 0 ? void 0 : _inputElement$value.length) || 0;
           setTimeout(function () {
@@ -90,7 +93,7 @@ export var useCellFocus = function useCellFocus() {
  * 键盘导航 Hook
  * 处理方向键在表格单元格间的导航
  */
-export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSource, focusInputInCell) {
+export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSource, focusInputInCell, activateCell) {
   var handleCellKeyDown = useCallback(function (event) {
     var keyEvent = event.event,
       node = event.node,
@@ -141,46 +144,23 @@ export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSourc
       if (isValidTarget) {
         // 延迟执行以确保当前编辑完成
         setTimeout(function () {
+          var _api$getDisplayedRowA;
           api.setFocusedCell(targetRowIndex, targetColId);
 
+          // 懒挂载:目标格若是懒列存量格,先激活挂树(refreshCells),下方 150ms 内完成挂载再聚焦 @author nokecy
+          var targetNode = (_api$getDisplayedRowA = api.getDisplayedRowAtIndex) === null || _api$getDisplayedRowA === void 0 ? void 0 : _api$getDisplayedRowA.call(api, targetRowIndex);
+          if (activateCell && targetNode) {
+            activateCell(api, targetNode, targetColId);
+          }
+
           // 不使用原生startEditingCell,而是手动触发编辑状态
-          // 使用DOM选择器查找目标单元格
+          // v33 themeQuartz 容器不再有 .ag-theme-alpine 类;且行虚拟化下 DOM 顺序与 rowIndex 不一致,
+          // 改为直接在 ref 容器内按 row-index + col-id 属性定位目标单元格 @author nokecy
           setTimeout(function () {
             var _ref$current;
-            // 通过ref获取网格容器
-            var gridContainer = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.ag-theme-alpine');
-            if (gridContainer) {
-              // 尝试通过行和列分步查找目标单元格
-              var rows = gridContainer.querySelectorAll('.ag-row');
-              if (rows[targetRowIndex]) {
-                var targetRow = rows[targetRowIndex];
-
-                // 在行内查找指定列的单元格
-                var targetCell = targetRow.querySelector(".ag-cell[col-id=\"".concat(targetColId, "\"]"));
-                if (!targetCell) {
-                  // 如果通过col-id找不到,遍历所有单元格查找匹配的列
-                  var cells = targetRow.querySelectorAll('.ag-cell');
-                  var _iterator = _createForOfIteratorHelper(cells),
-                    _step;
-                  try {
-                    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                      var _cell = _step.value;
-                      var colId = _cell.getAttribute('col-id') || _cell.getAttribute('data-col-id');
-                      if (colId === targetColId) {
-                        targetCell = _cell;
-                        break;
-                      }
-                    }
-                  } catch (err) {
-                    _iterator.e(err);
-                  } finally {
-                    _iterator.f();
-                  }
-                }
-                if (targetCell) {
-                  focusInputInCell(targetCell);
-                }
-              }
+            var targetCell = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".ag-row[row-index=\"".concat(targetRowIndex, "\"] .ag-cell[col-id=\"").concat(targetColId, "\"]"));
+            if (targetCell) {
+              focusInputInCell(targetCell);
             }
           }, 150);
         }, 10);
@@ -188,7 +168,7 @@ export var useKeyboardNavigation = function useKeyboardNavigation(ref, dataSourc
       keyEvent.preventDefault();
       keyEvent.stopPropagation();
     }
-  }, [dataSource, focusInputInCell, ref]);
+  }, [dataSource, focusInputInCell, ref, activateCell]);
   return {
     handleCellKeyDown: handleCellKeyDown
   };

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

@@ -1,23 +1,23 @@
 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 _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 _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 React, { Fragment, useEffect, useRef, useState, useMemo } from "react";
+import React, { Fragment, useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { AgGridReact } from "ag-grid-react";
 import { useField, observer, RecursionField } from "@formily/react";
 import { useFieldSchema } from "@formily/react";
 import { connect, mapProps, mapReadPretty } from "@formily/react";
 import uniqueId from "lodash/uniqueId";
-import { useAddition, useArrayTableColumns, useArrayTableSources, useArrayTableActions, isColumnComponent } from "./utils";
+import { useAddition, buildArrayTableColumns, useArrayTableSources, useArrayTableActions, isColumnComponent } from "./utils";
 import { useCellFocus, useKeyboardNavigation, useRowDrag } from "./hooks";
 import ArrayBase from "./arrayBase";
 import ArrayAddBtn from "./arrayAddBtn";
@@ -30,8 +30,20 @@ import { flatConfigToColumnState, flatConfigToGridState } from "../ag-grid-plus/
 import { agGridTheme } from "../ag-grid-plus/theme";
 import { useGridSchemes } from "../ag-grid-plus";
 
+// array-table 派生主题:去掉单元格聚焦/选区视觉(行内编辑更干净)。
+//   focusShadow            -> 聚焦光环
+//   rangeSelectionBorder   -> 单格点击形成的 1×1 选区蓝边
+//   rangeSelectionBackground -> 选区淡蓝填充
+// 仅去视觉,不动焦点功能——键盘导航/点击进编辑仍依赖 cell focus。共用主题不受影响。@author nokecy
+var arrayTableTheme = agGridTheme.withParams({
+  focusShadow: 'none',
+  rangeSelectionBorderColor: 'transparent',
+  rangeSelectionBackgroundColor: 'transparent'
+});
+
 //@ts-ignore
 var ArrayTableInner = observer(function (props) {
+  var _addition$props;
   var height = props.height,
     gridKey = props.gridKey;
 
@@ -45,6 +57,10 @@ var ArrayTableInner = observer(function (props) {
     isAdd = _useState2[0],
     setIsAdd = _useState2[1];
   var apiRef = useRef();
+  // 懒挂载激活态:存放已激活(点击/导航进过)的单元格 key(`rowId:colId`),供 LazyAgField 经 context 读取。@author nokecy
+  var activeCellsRef = useRef(new Set());
+  // 无 _id/id 的外部数据按对象引用分配稳定 rowId(避免 getRowId 返回 undefined)。@author nokecy
+  var rowIdMapRef = useRef(new WeakMap());
   var ref = useRef();
   var field = useField();
   var _useState3 = useState(undefined),
@@ -62,10 +78,14 @@ var ArrayTableInner = observer(function (props) {
   // 通过 JSON.stringify 比较内容，只有内容真正变化时才返回新引用
   var sourcesKey = useMemo(function () {
     return JSON.stringify(rawSources.map(function (s) {
+      var _s$columnProps$header, _s$columnProps, _s$columnProps2;
       return {
         name: s.name,
-        display: s.display
-        // 只提取稳定的标识信息
+        display: s.display,
+        // 列标题可由 reactions 运行时改写,纳入 key 才能让 stableColumnDefs 跟着重建。
+        // 宽度/隐藏/固定由 applyColumnState(方案)管,故意不纳入,避免行编辑时列状态被重置。
+        // 可编辑性:带 x-reactions 的列在 buildArrayTableColumns 里已强制走 AgField 全树(尊重运行时 pattern),无需进 key。@author nokecy
+        headerName: (_s$columnProps$header = (_s$columnProps = s.columnProps) === null || _s$columnProps === void 0 ? void 0 : _s$columnProps.headerName) !== null && _s$columnProps$header !== void 0 ? _s$columnProps$header : (_s$columnProps2 = s.columnProps) === null || _s$columnProps2 === void 0 ? void 0 : _s$columnProps2.title
       };
     }));
   }, [rawSources]);
@@ -83,8 +103,6 @@ var ArrayTableInner = observer(function (props) {
   // 使用自定义 hooks
   var _useCellFocus = useCellFocus(),
     focusInputInCell = _useCellFocus.focusInputInCell;
-  var _useKeyboardNavigatio = useKeyboardNavigation(ref, dataSource, focusInputInCell),
-    handleCellKeyDown = _useKeyboardNavigatio.handleCellKeyDown;
   var _useRowDrag = useRowDrag(field),
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
@@ -119,7 +137,7 @@ var ArrayTableInner = observer(function (props) {
    */
   var stableColumnDefs = useMemo(function () {
     // 只依赖 sources，不依赖 dataSource 和 field.value
-    var cols = useArrayTableColumns([], field, sources);
+    var cols = buildArrayTableColumns([], field, sources);
     //@ts-ignore
     if (cols.length > 0 && props.onRowDrag) {
       //@ts-ignore
@@ -128,6 +146,47 @@ var ArrayTableInner = observer(function (props) {
     return cols;
   }, [sources, props.onRowDrag]); // 移除 field 依赖，避免数据变化时重新计算
 
+  // 懒挂载:把激活态 Set 通过 AG-Grid context 暴露给 LazyAgField(引用稳定,原地 mutate)。@author nokecy
+  var gridContext = useMemo(function () {
+    return {
+      activeCells: activeCellsRef.current
+    };
+  }, []);
+
+  // 走懒挂载渲染器的列 id 集合(供点击/键盘导航判断是否需要激活)。@author nokecy
+  var lazyColIds = useMemo(function () {
+    return new Set(stableColumnDefs.filter(function (c) {
+      var _c$cellRendererParams;
+      return c === null || c === void 0 || (_c$cellRendererParams = c.cellRendererParams) === null || _c$cellRendererParams === void 0 ? void 0 : _c$cellRendererParams.lazyEditable;
+    }).map(function (c) {
+      return c.field;
+    }));
+  }, [stableColumnDefs]);
+
+  /**
+   * 激活某个懒挂载单元格:加入激活集合并强制重渲该格 -> LazyAgField 改挂 AgField 全树。
+   * 返回 true 表示「本次新激活」(调用方需等挂载完成再聚焦);false 表示无需激活(非懒列/新增行/已激活)。@author nokecy
+   */
+  var activateCell = useCallback(function (api, node, colId) {
+    var _node$data;
+    if (!api || !node || !colId) return false;
+    if (!lazyColIds.has(colId)) return false; // 非懒列(已是 AgField/纯文本)
+    if ((_node$data = node.data) !== null && _node$data !== void 0 && _node$data._isNew) return false; // 新增行本就 eager 挂着
+    var key = "".concat(node.id, ":").concat(colId);
+    if (activeCellsRef.current.has(key)) return false; // 已激活
+    activeCellsRef.current.add(key);
+    api.refreshCells({
+      rowNodes: [node],
+      columns: [colId],
+      force: true
+    });
+    return true;
+  }, [lazyColIds]);
+
+  // 键盘导航 hook 需要 activateCell(导航进懒列时先挂载再聚焦),故置于其后。@author nokecy
+  var _useKeyboardNavigatio = useKeyboardNavigation(ref, dataSource, focusInputInCell, activateCell),
+    handleCellKeyDown = _useKeyboardNavigatio.handleCellKeyDown;
+
   /**
    * 方案自动加载
    *
@@ -161,7 +220,9 @@ var ArrayTableInner = observer(function (props) {
 
       // 如果包含分组，先更新 columnDefs
       if (hasGroups) {
-        var gridColumnDefs = flatConfigToGridState(currentScheme.columnConfig);
+        // 传入 stableColumnDefs 作为原始定义,保留 cellRenderer(AgField/LazyAgField)及其
+        // cellRendererParams——否则分组方案重建出的是裸列,单元格退化为纯文本、编辑失效。@author nokecy
+        var gridColumnDefs = flatConfigToGridState(currentScheme.columnConfig, stableColumnDefs);
         gridApiState.setGridOption('columnDefs', gridColumnDefs);
       }
 
@@ -235,17 +296,20 @@ var ArrayTableInner = observer(function (props) {
       marginBottom: 5
     }
   }, addition ? /*#__PURE__*/React.createElement(ArrayAddBtn, _extends({
-    arrayField: field,
-    schema: schema,
-    defaultValue: {
-      _id: uniqueId(),
-      _isNew: true
-    },
     title: "新增",
     onAdd: function onAdd() {
       setIsAdd(true);
     }
-  }, addition.props)) : null, actions.map(function (column, key) {
+  }, 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) {
     return /*#__PURE__*/React.createElement(RecursionField, {
       schema: column.schema,
       name: key,
@@ -263,7 +327,8 @@ var ArrayTableInner = observer(function (props) {
       minHeight: 0
     }
   }, /*#__PURE__*/React.createElement(AgGridReact, {
-    theme: agGridTheme,
+    theme: arrayTableTheme,
+    context: gridContext,
     onGridReady: function onGridReady(params) {
       params.api.hidePopupMenu();
       apiRef.current = params.api;
@@ -283,15 +348,20 @@ var ArrayTableInner = observer(function (props) {
     },
     onCellKeyDown: handleCellKeyDown,
     onCellClicked: function onCellClicked(event) {
-      var _event$event;
-      // 点击单元格时触发编辑状态
-      var cellElement = (_event$event = event.event) === null || _event$event === void 0 ? void 0 : _event$event.target;
-      setTimeout(function () {
-        var gridCell = cellElement === null || cellElement === void 0 ? void 0 : cellElement.closest('[data-ag-grid-cell]');
-        if (gridCell) {
-          focusInputInCell(gridCell);
-        }
-      }, 10);
+      var _event$colDef;
+      // 懒挂载:点击懒列存量格时先激活挂树,等挂载完成再聚焦进编辑;否则沿用原即时聚焦。@author nokecy
+      var node = event.node;
+      var colId = (_event$colDef = event.colDef) === null || _event$colDef === void 0 ? void 0 : _event$colDef.field;
+      var justActivated = activateCell(event.api, node, colId);
+      var rowIndex = node === null || node === void 0 ? void 0 : node.rowIndex;
+      var focus = function focus() {
+        var _ref$current, _event$event;
+        // 行虚拟化下 DOM 顺序与 rowIndex 不一致,按 row-index + col-id 属性精确定位刚渲染的格 @author nokecy
+        var gridCell = justActivated && rowIndex != null ? (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".ag-row[row-index=\"".concat(rowIndex, "\"] .ag-cell[col-id=\"").concat(colId, "\"]")) : (_event$event = event.event) === null || _event$event === void 0 || (_event$event = _event$event.target) === null || _event$event === void 0 ? void 0 : _event$event.closest('.ag-cell');
+        if (gridCell) focusInputInCell(gridCell);
+      };
+      // 新激活需等 AgField(RecursionField/Editable) 挂载完成,给足时间;否则原 10ms。@author nokecy
+      setTimeout(focus, justActivated ? 80 : 10);
     },
     onRowDragMove: handleRowDragMove,
     onRowDataUpdated: function onRowDataUpdated(e) {
@@ -318,8 +388,18 @@ var ArrayTableInner = observer(function (props) {
       }
     },
     getRowId: function getRowId(_ref) {
+      var _data$_id;
       var data = _ref.data;
-      return data._id || data.id;
+      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。
+      // 不能用 uniqueId 直返(每次调用都变会让 AG-Grid 行身份错乱),也不能改写 data(触发 Formily 反应)。@author nokecy
+      var gen = rowIdMapRef.current.get(data);
+      if (!gen) {
+        gen = uniqueId('row_');
+        rowIdMapRef.current.set(data, gen);
+      }
+      return gen;
     }
     // rowDragEntireRow={true}
     // onRowDragEnd={(event) => {

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { useField } from "@formily/react";
-import { useArrayTableColumns, useArrayTableSources } from "./utils";
+import { buildArrayTableColumns, useArrayTableSources } from "./utils";
 import { AgGridPlus } from "../ag-grid-plus";
 //@ts-ignore
 var ArrayTable = function ArrayTable(props) {
@@ -8,7 +8,7 @@ var ArrayTable = function ArrayTable(props) {
   var field = useField();
   var dataSource = Array.isArray(field.value) ? field.value.slice() : [];
   var sources = useArrayTableSources();
-  var columns = useArrayTableColumns(dataSource, field, sources);
+  var columns = buildArrayTableColumns(dataSource, field, sources);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       height: height ? height : 400

package/dist/esm/array-table/readOnlyFormatters.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 只读列「纯文本快路径」格式化器注册表
+ *
+ * 背景:ArrayTable 每个可见单元格默认挂一棵完整 Formily 字段树(AgField),
+ * 行虚拟化滚动时整行销毁重建,列多必然掉帧。只读列没有编辑/校验/写回,
+ * 完全可以不挂 Formily 树、改用 AG-Grid 的 valueFormatter 出纯文本。
+ *
+ * 本注册表负责「内层组件类型 -> 显示文本」的映射。命中返回格式化器,
+ * 未命中返回 null —— 调用方据此安全回退 AgField(正确优先于速度)。
+ *
+ * 取舍:这是 Formily readPretty 之外的一份精简显示逻辑,可能与定制 readPretty
+ * 发散。靠「未命中即回退 + 消费方可 registerReadOnlyFormatter 扩展」控制风险。
+ *
+ * @author nokecy
+ */
+export type ReadOnlyFormatterCtx = {
+    /** 列的 x-component-props(headerName/width/options/format 等) */
+    columnProps: any;
+    /** 内层数据字段的 schema(可读 enum / x-component-props) */
+    fieldSchema: any;
+};
+export type ReadOnlyFormatter = (value: any, ctx: ReadOnlyFormatterCtx) => string;
+/** 消费方扩展自定义只读列的显示逻辑 */
+export declare const registerReadOnlyFormatter: (component: string, formatter: ReadOnlyFormatter) => void;
+/**
+ * 取某组件类型的只读格式化器。命中返回函数,未命中返回 null(调用方回退 AgField)。
+ */
+export declare const getReadOnlyFormatter: (component: string | undefined) => ReadOnlyFormatter | null;

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

@@ -0,0 +1,107 @@
+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); }
+/**
+ * 只读列「纯文本快路径」格式化器注册表
+ *
+ * 背景:ArrayTable 每个可见单元格默认挂一棵完整 Formily 字段树(AgField),
+ * 行虚拟化滚动时整行销毁重建,列多必然掉帧。只读列没有编辑/校验/写回,
+ * 完全可以不挂 Formily 树、改用 AG-Grid 的 valueFormatter 出纯文本。
+ *
+ * 本注册表负责「内层组件类型 -> 显示文本」的映射。命中返回格式化器,
+ * 未命中返回 null —— 调用方据此安全回退 AgField(正确优先于速度)。
+ *
+ * 取舍:这是 Formily readPretty 之外的一份精简显示逻辑,可能与定制 readPretty
+ * 发散。靠「未命中即回退 + 消费方可 registerReadOnlyFormatter 扩展」控制风险。
+ *
+ * @author nokecy
+ */
+
+/** 从字段 schema / 列 props 里尽量取到 Select 的可选项(value->label 映射用) */
+var resolveOptions = function resolveOptions(ctx) {
+  var _ref, _ref2, _ref3, _fieldSchema$enum, _fieldSchema$xCompon, _fieldSchema$xCompon2;
+  var columnProps = ctx.columnProps,
+    fieldSchema = ctx.fieldSchema;
+  var candidate = (_ref = (_ref2 = (_ref3 = (_fieldSchema$enum = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.enum) !== null && _fieldSchema$enum !== void 0 ? _fieldSchema$enum : fieldSchema === null || fieldSchema === void 0 || (_fieldSchema$xCompon = fieldSchema['x-component-props']) === null || _fieldSchema$xCompon === void 0 ? void 0 : _fieldSchema$xCompon.options) !== null && _ref3 !== void 0 ? _ref3 : fieldSchema === null || fieldSchema === void 0 || (_fieldSchema$xCompon2 = fieldSchema['x-component-props']) === null || _fieldSchema$xCompon2 === void 0 ? void 0 : _fieldSchema$xCompon2.dataSource) !== null && _ref2 !== void 0 ? _ref2 : columnProps === null || columnProps === void 0 ? void 0 : columnProps.options) !== null && _ref !== void 0 ? _ref : columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataSource;
+  return Array.isArray(candidate) ? candidate : [];
+};
+
+/** 单个值映射成 label:兼容 labelInValue 对象、{label,value} 选项、原始值 */
+var mapOptionLabel = function mapOptionLabel(value, options) {
+  var _ref4, _value$label, _ref5, _hit$label;
+  if (value == null) return '';
+  // labelInValue: 值本身就是 { label, value }
+  if (_typeof(value) === 'object') return String((_ref4 = (_value$label = value.label) !== null && _value$label !== void 0 ? _value$label : value.value) !== null && _ref4 !== void 0 ? _ref4 : '');
+  // 严格相等优先;退一步按 String 宽松比对,容忍后端类型漂移(如返回 "0" 而 enum 存数字 0)
+  var hit = options.find(function (o) {
+    var ov = o && _typeof(o) === 'object' ? o.value : o;
+    return ov === value || String(ov) === String(value);
+  });
+  if (hit && _typeof(hit) === 'object') return String((_ref5 = (_hit$label = hit.label) !== null && _hit$label !== void 0 ? _hit$label : hit.value) !== null && _ref5 !== void 0 ? _ref5 : value);
+  return String(value);
+};
+var textFormatter = function textFormatter(value) {
+  return value == null ? '' : String(value);
+};
+var selectFormatter = function selectFormatter(value, ctx) {
+  if (value == null) return '';
+  var options = resolveOptions(ctx);
+  // 多选:数组 -> 逗号拼接
+  if (Array.isArray(value)) {
+    return value.map(function (v) {
+      return mapOptionLabel(v, options);
+    }).filter(Boolean).join(', ');
+  }
+  return mapOptionLabel(value, options);
+};
+var dateFormatter = function dateFormatter(value, ctx) {
+  var _ref6, _ctx$columnProps$form, _ctx$columnProps, _ctx$fieldSchema;
+  if (value == null || value === '') return '';
+  var fmt = (_ref6 = (_ctx$columnProps$form = (_ctx$columnProps = ctx.columnProps) === null || _ctx$columnProps === void 0 ? void 0 : _ctx$columnProps.format) !== null && _ctx$columnProps$form !== void 0 ? _ctx$columnProps$form : (_ctx$fieldSchema = ctx.fieldSchema) === null || _ctx$fieldSchema === void 0 || (_ctx$fieldSchema = _ctx$fieldSchema['x-component-props']) === null || _ctx$fieldSchema === void 0 ? void 0 : _ctx$fieldSchema.format) !== null && _ref6 !== void 0 ? _ref6 : 'YYYY-MM-DD';
+  // 值多为 dayjs 对象(有 .format)或已格式化的字符串;不强引 dayjs,保持轻量
+  if (value && typeof value.format === 'function') return value.format(fmt);
+  return String(value);
+};
+var booleanFormatter = function booleanFormatter(value, ctx) {
+  var _ctx$fieldSchema$xCo, _ctx$fieldSchema2, _props$checkedChildre, _props$unCheckedChild;
+  if (value == null || value === '') return '';
+  var props = (_ctx$fieldSchema$xCo = (_ctx$fieldSchema2 = ctx.fieldSchema) === null || _ctx$fieldSchema2 === void 0 ? void 0 : _ctx$fieldSchema2['x-component-props']) !== null && _ctx$fieldSchema$xCo !== void 0 ? _ctx$fieldSchema$xCo : {};
+  var truthy = (_props$checkedChildre = props.checkedChildren) !== null && _props$checkedChildre !== void 0 ? _props$checkedChildre : '是';
+  var falsy = (_props$unCheckedChild = props.unCheckedChildren) !== null && _props$unCheckedChild !== void 0 ? _props$unCheckedChild : '否';
+  return value ? String(truthy) : String(falsy);
+};
+
+/**
+ * 内置注册表。key 为 Formily x-component 名。
+ * 未列出的组件类型 -> getReadOnlyFormatter 返回 null -> 回退 AgField。
+ */
+var registry = {
+  Input: textFormatter,
+  'Input.TextArea': textFormatter,
+  Password: textFormatter,
+  Text: textFormatter,
+  Preview: textFormatter,
+  NumberPicker: textFormatter,
+  InputNumber: textFormatter,
+  Select: selectFormatter,
+  TreeSelect: selectFormatter,
+  Cascader: selectFormatter,
+  'Radio.Group': selectFormatter,
+  'Checkbox.Group': selectFormatter,
+  DatePicker: dateFormatter,
+  TimePicker: dateFormatter,
+  Switch: booleanFormatter,
+  Checkbox: booleanFormatter
+};
+
+/** 消费方扩展自定义只读列的显示逻辑 */
+export var registerReadOnlyFormatter = function registerReadOnlyFormatter(component, formatter) {
+  registry[component] = formatter;
+};
+
+/**
+ * 取某组件类型的只读格式化器。命中返回函数,未命中返回 null(调用方回退 AgField)。
+ */
+export var getReadOnlyFormatter = function getReadOnlyFormatter(component) {
+  var _registry$component;
+  if (!component) return null;
+  return (_registry$component = registry[component]) !== null && _registry$component !== void 0 ? _registry$component : null;
+};

package/dist/esm/array-table/utils.d.ts

@@ -6,6 +6,6 @@ import { ObservableColumnSource } from './interface';
 declare const isColumnComponent: (schema: Schema) => boolean;
 declare const useArrayTableSources: () => ObservableColumnSource[];
 declare const useArrayTableActions: () => ObservableColumnSource[];
-declare const useArrayTableColumns: (dataSource: any[], field: ArrayField, sources: ObservableColumnSource[]) => AgGridReactProps['columnDefs'];
+declare const buildArrayTableColumns: (dataSource: any[], field: ArrayField, sources: ObservableColumnSource[]) => AgGridReactProps['columnDefs'];
 declare const useAddition: () => React.JSX.Element | null;
-export { isColumnComponent, useArrayTableSources, useArrayTableActions, useArrayTableColumns, useAddition };
+export { isColumnComponent, useArrayTableSources, useArrayTableActions, buildArrayTableColumns, useAddition };