@nokecy/qc-ui 1.1.38 → 1.1.39

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

@@ -22,20 +22,32 @@ var _agGridPlus = require("../ag-grid-plus");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
+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; } // 导入 AG-Grid v33 主题
+// array-table 派生主题:去掉单元格聚焦/选区视觉(行内编辑更干净)。
+//   focusShadow            -> 聚焦光环
+//   rangeSelectionBorder   -> 单格点击形成的 1×1 选区蓝边
+//   rangeSelectionBackground -> 选区淡蓝填充
+// 仅去视觉,不动焦点功能——键盘导航/点击进编辑仍依赖 cell focus。共用主题不受影响。@author nokecy
+var arrayTableTheme = _theme.agGridTheme.withParams({
+  focusShadow: 'none',
+  rangeSelectionBorderColor: 'transparent',
+  rangeSelectionBackgroundColor: 'transparent'
+});
+
 //@ts-ignore
 var ArrayTableInner = (0, _react2.observer)(function (props) {
+  var _addition$props;
   var height = props.height,
     gridKey = props.gridKey;
 
@@ -49,6 +61,10 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
     isAdd = _useState2[0],
     setIsAdd = _useState2[1];
   var apiRef = (0, _react.useRef)();
+  // 懒挂载激活态:存放已激活(点击/导航进过)的单元格 key(`rowId:colId`),供 LazyAgField 经 context 读取。@author nokecy
+  var activeCellsRef = (0, _react.useRef)(new Set());
+  // 无 _id/id 的外部数据按对象引用分配稳定 rowId(避免 getRowId 返回 undefined)。@author nokecy
+  var rowIdMapRef = (0, _react.useRef)(new WeakMap());
   var ref = (0, _react.useRef)();
   var field = (0, _react2.useField)();
   var _useState3 = (0, _react.useState)(undefined),
@@ -66,10 +82,14 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
   // 通过 JSON.stringify 比较内容，只有内容真正变化时才返回新引用
   var sourcesKey = (0, _react.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]);
@@ -87,8 +107,6 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
   // 使用自定义 hooks
   var _useCellFocus = (0, _hooks.useCellFocus)(),
     focusInputInCell = _useCellFocus.focusInputInCell;
-  var _useKeyboardNavigatio = (0, _hooks.useKeyboardNavigation)(ref, dataSource, focusInputInCell),
-    handleCellKeyDown = _useKeyboardNavigatio.handleCellKeyDown;
   var _useRowDrag = (0, _hooks.useRowDrag)(field),
     handleRowDragMove = _useRowDrag.handleRowDragMove;
 
@@ -123,7 +141,7 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
    */
   var stableColumnDefs = (0, _react.useMemo)(function () {
     // 只依赖 sources，不依赖 dataSource 和 field.value
-    var cols = (0, _utils.useArrayTableColumns)([], field, sources);
+    var cols = (0, _utils.buildArrayTableColumns)([], field, sources);
     //@ts-ignore
     if (cols.length > 0 && props.onRowDrag) {
       //@ts-ignore
@@ -132,6 +150,47 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
     return cols;
   }, [sources, props.onRowDrag]); // 移除 field 依赖，避免数据变化时重新计算
 
+  // 懒挂载:把激活态 Set 通过 AG-Grid context 暴露给 LazyAgField(引用稳定,原地 mutate)。@author nokecy
+  var gridContext = (0, _react.useMemo)(function () {
+    return {
+      activeCells: activeCellsRef.current
+    };
+  }, []);
+
+  // 走懒挂载渲染器的列 id 集合(供点击/键盘导航判断是否需要激活)。@author nokecy
+  var lazyColIds = (0, _react.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 = (0, _react.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 = (0, _hooks.useKeyboardNavigation)(ref, dataSource, focusInputInCell, activateCell),
+    handleCellKeyDown = _useKeyboardNavigatio.handleCellKeyDown;
+
   /**
    * 方案自动加载
    *
@@ -165,7 +224,9 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
 
       // 如果包含分组，先更新 columnDefs
       if (hasGroups) {
-        var gridColumnDefs = (0, _columnGroupUtils.flatConfigToGridState)(currentScheme.columnConfig);
+        // 传入 stableColumnDefs 作为原始定义,保留 cellRenderer(AgField/LazyAgField)及其
+        // cellRendererParams——否则分组方案重建出的是裸列,单元格退化为纯文本、编辑失效。@author nokecy
+        var gridColumnDefs = (0, _columnGroupUtils.flatConfigToGridState)(currentScheme.columnConfig, stableColumnDefs);
         gridApiState.setGridOption('columnDefs', gridColumnDefs);
       }
 
@@ -239,17 +300,20 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
       marginBottom: 5
     }
   }, addition ? /*#__PURE__*/_react.default.createElement(_arrayAddBtn.default, _extends({
-    arrayField: field,
-    schema: schema,
-    defaultValue: {
-      _id: (0, _uniqueId.default)(),
-      _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: (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) {
     return /*#__PURE__*/_react.default.createElement(_react2.RecursionField, {
       schema: column.schema,
       name: key,
@@ -267,7 +331,8 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
       minHeight: 0
     }
   }, /*#__PURE__*/_react.default.createElement(_agGridReact.AgGridReact, {
-    theme: _theme.agGridTheme,
+    theme: arrayTableTheme,
+    context: gridContext,
     onGridReady: function onGridReady(params) {
       params.api.hidePopupMenu();
       apiRef.current = params.api;
@@ -287,15 +352,20 @@ var ArrayTableInner = (0, _react2.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) {
@@ -322,8 +392,18 @@ var ArrayTableInner = (0, _react2.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 = (0, _uniqueId.default)('row_');
+        rowIdMapRef.current.set(data, gen);
+      }
+      return gen;
     }
     // rowDragEntireRow={true}
     // onRowDragEnd={(event) => {

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

@@ -15,7 +15,7 @@ var ArrayTable = function ArrayTable(props) {
   var field = (0, _react2.useField)();
   var dataSource = Array.isArray(field.value) ? field.value.slice() : [];
   var sources = (0, _utils.useArrayTableSources)();
-  var columns = (0, _utils.useArrayTableColumns)(dataSource, field, sources);
+  var columns = (0, _utils.buildArrayTableColumns)(dataSource, field, sources);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: height ? height : 400

package/dist/cjs/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/cjs/array-table/readOnlyFormatters.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerReadOnlyFormatter = exports.getReadOnlyFormatter = void 0;
+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
+};
+
+/** 消费方扩展自定义只读列的显示逻辑 */
+var registerReadOnlyFormatter = exports.registerReadOnlyFormatter = function registerReadOnlyFormatter(component, formatter) {
+  registry[component] = formatter;
+};
+
+/**
+ * 取某组件类型的只读格式化器。命中返回函数,未命中返回 null(调用方回退 AgField)。
+ */
+var getReadOnlyFormatter = exports.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/cjs/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 };

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

@@ -4,12 +4,13 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useArrayTableSources = exports.useArrayTableColumns = exports.useArrayTableActions = exports.useAddition = exports.isColumnComponent = void 0;
+exports.useArrayTableSources = exports.useArrayTableActions = exports.useAddition = exports.isColumnComponent = exports.buildArrayTableColumns = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@formily/react");
 var _shared = require("@formily/shared");
 var _arrayBase = _interopRequireDefault(require("./arrayBase"));
-var _excluded = ["hide", "sort", "sortIndex"];
+var _readOnlyFormatters = require("./readOnlyFormatters");
+var _excluded = ["hide", "sort", "sortIndex", "forceAgField"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -109,24 +110,26 @@ var useArrayTableActions = exports.useArrayTableActions = function useArrayTable
   return schema.properties ? parseSources(schema.properties['actions'] || {}) : [];
 };
 var AgField = function AgField(_ref) {
-  var _ref2, _node$rowIndex;
+  var _field$value$indexOf, _field$value, _field$value$indexOf2, _ref2, _node$rowIndex;
   var value = _ref.value,
     record = _ref.data,
     dataSource = _ref.dataSource,
     schema = _ref.schema,
     field = _ref.field,
     node = _ref.node;
-  // 【修复】优先使用 AG-Grid 的 node.rowIndex，避免依赖 dataSource
-  // 这样即使 columnDefs 中的 dataSource 是空数组，也能正确获取索引
-  var index = (_ref2 = (_node$rowIndex = node === null || node === void 0 ? void 0 : node.rowIndex) !== null && _node$rowIndex !== void 0 ? _node$rowIndex : dataSource === null || dataSource === void 0 ? void 0 : dataSource.indexOf(record)) !== null && _ref2 !== void 0 ? _ref2 : -1;
+  // 数据序绑定:用 field.value.indexOf(record) 取数据数组下标(record === field.value 元素引用)。
+  // 排序/过滤后 node.rowIndex 是显示序 ≠ 数据序,会把单元格绑到别的行——故 indexOf 优先,
+  // 仅在未命中(理论不应发生)时才回退 rowIndex/dataSource。@author nokecy
+  var dataIndex = (_field$value$indexOf = field === null || field === void 0 || (_field$value = field.value) === null || _field$value === void 0 || (_field$value$indexOf2 = _field$value.indexOf) === null || _field$value$indexOf2 === void 0 ? void 0 : _field$value$indexOf2.call(_field$value, record)) !== null && _field$value$indexOf !== void 0 ? _field$value$indexOf : -1;
+  var index = dataIndex >= 0 ? dataIndex : (_ref2 = (_node$rowIndex = node === null || node === void 0 ? void 0 : node.rowIndex) !== null && _node$rowIndex !== void 0 ? _node$rowIndex : dataSource === null || dataSource === void 0 ? void 0 : dataSource.indexOf(record)) !== null && _ref2 !== void 0 ? _ref2 : -1;
   var children =
   /*#__PURE__*/
   //@ts-ignore
   _react.default.createElement(_arrayBase.default.Item, {
     index: index,
     record: function record() {
-      var _field$value;
-      return (_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value[index];
+      var _field$value2;
+      return (_field$value2 = field.value) === null || _field$value2 === void 0 ? void 0 : _field$value2[index];
     },
     schema: schema,
     field: field
@@ -137,7 +140,108 @@ var AgField = function AgField(_ref) {
   }));
   return children;
 };
-var useArrayTableColumns = exports.useArrayTableColumns = function useArrayTableColumns(dataSource, field, sources) {
+
+/**
+ * 懒挂载单元格渲染器(可编辑列)。
+ *
+ * 已有行的可编辑格被 Editable 装饰器默认转成 readPretty 只读文本态(点击才进编辑),
+ * 但仍挂着完整 Formily 树——这是行多列多滚动卡的主因。本渲染器:
+ *  - 新增行(_isNew,保持编辑态需即时校验) 或 已被激活(点击/导航进过)的格 -> 挂 AgField 全树;
+ *  - 其余(存量行、没碰过) -> 只渲染廉价纯文本(复用 readOnlyFormatters),不挂 Formily 树。
+ *
+ * 激活态存放在 AG-Grid context.activeCells(Set),由 index.tsx 在点击/键盘导航时写入并 refreshCells。
+ * 「挂了不卸」:一旦激活保持挂载(直到行被虚拟化销毁),不做失焦退回,避开一堆边界。
+ *
+ * 校验安全:未碰过的存量格本就是 readPretty、本就不参与校验,不挂树校验语义零变化。@author nokecy
+ */
+var LazyAgField = function LazyAgField(params) {
+  var _context$activeCells, _context$activeCells$;
+  var value = params.value,
+    record = params.data,
+    dataSource = params.dataSource,
+    schema = params.schema,
+    field = params.field,
+    node = params.node,
+    colDef = params.colDef,
+    context = params.context,
+    formatter = params.formatter,
+    columnProps = params.columnProps,
+    fieldSchema = params.fieldSchema;
+  var key = "".concat(node === null || node === void 0 ? void 0 : node.id, ":").concat(colDef === null || colDef === void 0 ? void 0 : colDef.field);
+  var activated = (record === null || record === void 0 ? void 0 : record._isNew) === true || (context === null || context === void 0 || (_context$activeCells = context.activeCells) === null || _context$activeCells === void 0 || (_context$activeCells$ = _context$activeCells.has) === null || _context$activeCells$ === void 0 ? void 0 : _context$activeCells$.call(_context$activeCells, key)) === true;
+  if (activated) {
+    return /*#__PURE__*/_react.default.createElement(AgField, {
+      value: value,
+      data: record,
+      dataSource: dataSource,
+      schema: schema,
+      field: field,
+      node: node
+    });
+  }
+  var text = formatter ? formatter(value, {
+    columnProps: columnProps,
+    fieldSchema: fieldSchema
+  }) : value == null ? '' : String(value);
+  // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "ag-array-table-lazy-text",
+    style: {
+      display: 'inline-block',
+      width: '100%',
+      cursor: 'text'
+    }
+  }, text);
+};
+
+// 在 Column 的子 schema 里递归找到内层数据字段(可读 x-component / x-pattern / x-reactions / enum) @author nokecy
+var findDataFieldSchema = function findDataFieldSchema(columnSchema, name) {
+  if (!columnSchema || !columnSchema.properties) return null;
+  var matched = null;
+  var firstField = null;
+  var walk = function walk(s) {
+    if (!s || !s.properties) return;
+    s.reduceProperties(function (_, child) {
+      if (matched) return _;
+      var comp = child === null || child === void 0 ? void 0 : child['x-component'];
+      // 兜底:记录第一个带 x-component 的叶子字段(排除 Column/Operations/Addition 等包裹组件)
+      if (!firstField && typeof comp === 'string' && !/Column|Operations|Addition/.test(comp)) {
+        firstField = child;
+      }
+      if ((child === null || child === void 0 ? void 0 : child.name) === name) {
+        matched = child;
+        return _;
+      }
+      walk(child);
+      return _;
+    }, null);
+  };
+  walk(columnSchema);
+  return matched || firstField;
+};
+
+/**
+ * 判断某列是否可走「只读纯文本快路径」(不挂 Formily 树)。
+ *
+ * 安全不对称:误判「可编辑->只读」会丢编辑/校验/reaction 计算(灾难);
+ * 误判「只读->可编辑」只是没优化(无害)。所以仅在能证明永久只读时才放行,其余一律回退。
+ *
+ * @author nokecy
+ */
+var isColumnReadOnlyEligible = function isColumnReadOnlyEligible(arrayPattern, dataField, columnProps) {
+  if ((columnProps === null || columnProps === void 0 ? void 0 : columnProps.forceAgField) === true) return false;
+  // 有 x-reactions:可能运行时切 pattern 或计算字段值,静态判不准 -> 保守回退 AgField
+  if (dataField && dataField['x-reactions']) return false;
+  if (arrayPattern === 'readPretty') return true; // 整表只读(明细/详情页)
+  if (!dataField) return false;
+  if (dataField['x-pattern'] === 'readPretty') return true;
+  if (dataField['x-read-pretty'] === true) return true;
+  return false;
+};
+
+// 重命名自 useArrayTableColumns:内部无任何 Hook 调用,use 前缀违反 Hook 命名约定且曾在 useMemo 内被调用 @author nokecy
+var buildArrayTableColumns = exports.buildArrayTableColumns = function buildArrayTableColumns(dataSource, field, sources) {
+  var arrayPattern = field === null || field === void 0 ? void 0 : field.pattern;
   return sources.reduce(function (buf, _ref3, key) {
     var name = _ref3.name,
       columnProps = _ref3.columnProps,
@@ -154,13 +258,60 @@ var useArrayTableColumns = exports.useArrayTableColumns = function useArrayTable
     var hide = columnProps.hide,
       sort = columnProps.sort,
       sortIndex = columnProps.sortIndex,
+      forceAgField = columnProps.forceAgField,
       safeColumnProps = _objectWithoutProperties(columnProps, _excluded);
-    return buf.concat(_objectSpread(_objectSpread({}, safeColumnProps), {}, {
+    var base = _objectSpread(_objectSpread({}, safeColumnProps), {}, {
       // 保留 width 作为列的初始宽度
       width: columnProps.width,
       //@ts-ignore
       headerName: columnProps.headerName || columnProps.title,
-      field: name,
+      field: name
+    });
+
+    // 三分流渲染策略:@author nokecy
+    //   ① 只读纯文本(永不可编辑):只读列 + 有格式化器 -> valueFormatter,不挂 Formily 树。
+    //   ② 可编辑懒挂载:可编辑列 + 有格式化器 + 无 reactions + 未强制 eager -> LazyAgField,
+    //      存量格先出廉价文本、点击/导航才挂全树(挂了不卸)。
+    //   ③ 兜底全树:其余(无格式化器/带 reactions/forceAgField/只读但无格式化器) -> AgField。
+    var dataField = findDataFieldSchema(schema, name);
+    var component = dataField === null || dataField === void 0 ? void 0 : dataField['x-component'];
+    var formatter = (0, _readOnlyFormatters.getReadOnlyFormatter)(component);
+    var readOnly = isColumnReadOnlyEligible(arrayPattern, dataField, columnProps);
+    var hasReactions = !!(dataField && dataField['x-reactions']);
+    var forceEager = (columnProps === null || columnProps === void 0 ? void 0 : columnProps.forceAgField) === true;
+
+    // ① 只读纯文本
+    if (readOnly && formatter) {
+      return buf.concat(_objectSpread(_objectSpread({}, base), {}, {
+        // 显式清掉可能从 safeColumnProps 漏带的 cellRenderer(AG-Grid 中 renderer 优先级高于 formatter)
+        cellRenderer: undefined,
+        valueFormatter: function valueFormatter(params) {
+          return formatter(params.value, {
+            columnProps: columnProps,
+            fieldSchema: dataField
+          });
+        }
+      }));
+    }
+
+    // ② 可编辑懒挂载
+    if (!readOnly && formatter && !hasReactions && !forceEager) {
+      return buf.concat(_objectSpread(_objectSpread({}, base), {}, {
+        cellRenderer: LazyAgField,
+        cellRendererParams: {
+          dataSource: dataSource,
+          schema: schema,
+          field: field,
+          formatter: formatter,
+          columnProps: columnProps,
+          fieldSchema: dataField,
+          lazyEditable: true // 供 index.tsx 识别懒列(激活/导航用)
+        }
+      }));
+    }
+
+    // ③ 兜底全树
+    return buf.concat(_objectSpread(_objectSpread({}, base), {}, {
       cellRendererParams: {
         dataSource: dataSource,
         schema: schema,

package/dist/cjs/editable/index.js

@@ -107,7 +107,9 @@ var InternalEditable = (0, _react.observer)(function (props) {
     var input = (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.querySelector('input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])');
     if (input) {
       input.focus();
-      if ('setSelectionRange' in input && input.type !== 'number' && input.type !== 'date') {
+      // setSelectionRange 仅 textarea 与 text/search/url/tel/password 类型 input 支持;
+      // checkbox/number/date 等会抛 InvalidStateError,故用白名单守卫。@author nokecy
+      if (input.tagName === 'TEXTAREA' || /^(text|search|url|tel|password)$/i.test(input.type || 'text')) {
         var _input$value;
         var length = ((_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.length) || 0;
         setTimeout(function () {