@nokecy/qc-ui 1.1.50 → 1.1.52

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

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * 判断「焦点离开了这个单元格」的作用域,给懒挂载格「用完卸回纯文本」用。
+ *
+ * 用 React 合成的 onFocus/onBlur 而不是原生监听:合成事件会沿 React 树冒泡,
+ * 穿过 portal。下拉面板、日期面板、选择对话框这类渲染到 body 上的弹层,焦点进去时
+ * 对本格来说仍是「格内」,不会被误判成离开;弹层的挂载点是哪、有没有 antd 的类名都不用管。
+ *
+ * 失焦不立刻判定,而是推到下一个任务再看:焦点从输入框换到格内别的元素(或弹层)时,
+ * blur 之后紧跟着 focus,后者会作废这次判定。判定时若 document.activeElement 仍在格内
+ * (窗口切走时输入框依旧是 activeElement),同样不算离开。
+ *
+ * 用 display: contents,不产生盒子,不改变单元格里原有的布局。
+ *
+ * @author nokecy
+ */
+export type CellLeaveHandler = (isStale: () => boolean) => void;
+export declare const CellFocusScope: ({ onLeave, children }: {
+    onLeave: CellLeaveHandler;
+    children: React.ReactNode;
+}) => React.JSX.Element;

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

@@ -0,0 +1,62 @@
+"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
+});
+exports.CellFocusScope = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+/**
+ * 判断「焦点离开了这个单元格」的作用域,给懒挂载格「用完卸回纯文本」用。
+ *
+ * 用 React 合成的 onFocus/onBlur 而不是原生监听:合成事件会沿 React 树冒泡,
+ * 穿过 portal。下拉面板、日期面板、选择对话框这类渲染到 body 上的弹层,焦点进去时
+ * 对本格来说仍是「格内」,不会被误判成离开;弹层的挂载点是哪、有没有 antd 的类名都不用管。
+ *
+ * 失焦不立刻判定,而是推到下一个任务再看:焦点从输入框换到格内别的元素(或弹层)时,
+ * blur 之后紧跟着 focus,后者会作废这次判定。判定时若 document.activeElement 仍在格内
+ * (窗口切走时输入框依旧是 activeElement),同样不算离开。
+ *
+ * 用 display: contents,不产生盒子,不改变单元格里原有的布局。
+ *
+ * @author nokecy
+ */
+
+var CellFocusScope = exports.CellFocusScope = function CellFocusScope(_ref) {
+  var onLeave = _ref.onLeave,
+    children = _ref.children;
+  var rootRef = (0, _react.useRef)(null);
+  var timerRef = (0, _react.useRef)();
+  // 每次焦点回到格内、或卸载时递增;进行中的异步判定拿它判断自己是否已过期
+  var generationRef = (0, _react.useRef)(0);
+  var onLeaveRef = (0, _react.useRef)(onLeave);
+  onLeaveRef.current = onLeave;
+  var cancel = function cancel() {
+    generationRef.current += 1;
+    window.clearTimeout(timerRef.current);
+  };
+  (0, _react.useEffect)(function () {
+    return cancel;
+  }, []);
+  var handleBlur = function handleBlur() {
+    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;
+      onLeaveRef.current(function () {
+        return generation !== generationRef.current;
+      });
+    }, 0);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: rootRef,
+    style: {
+      display: 'contents'
+    },
+    onFocus: cancel,
+    onBlur: handleBlur
+  }, children);
+};

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

@@ -0,0 +1,39 @@
+/**
+ * ArrayTable 分组表头(多级表头)。
+ *
+ * 背景:schema 里的每个 ArrayTable.Column 被抽成「扁平」列定义(buildArrayTableColumns),
+ * 内部一批逻辑(懒挂载列识别、列方案还原、首列拖拽等)都按扁平列取值,不能改。
+ * 所以分组只在「交给 AG-Grid 的那一份 columnDefs」上做:
+ *  1. buildArrayTableColumns 生成列定义时,用 markHeaderGroup 把列声明的 headerGroup 记下来;
+ *  2. index.tsx 把扁平列定义交给 groupColumnDefs,得到含列组的 columnDefs 传给 AgGridReact。
+ *
+ * 分组名记在模块内的 WeakMap 里,不往 colDef 上塞自定义字段——AG-Grid 会把未知属性当作错误告警。
+ *
+ * 只支持一级分组;分组名相同但不相邻的列各自成组。
+ *
+ * @author nokecy
+ */
+import type { ColDef, ColGroupDef } from 'ag-grid-community';
+/**
+ * 记下列定义所属的表头分组。
+ * headerGroup 不是非空字符串(没声明、空串、纯空白)时不做任何事,该列按无分组处理。
+ * 返回传入的 colDef 本身,方便链式使用。
+ */
+export declare const markHeaderGroup: <T extends object>(colDef: T, headerGroup: unknown) => T;
+/**
+ * 把扁平列定义按「相邻且 headerGroup 相同」合并成 AG-Grid 列组。
+ *
+ *  - 相邻同名的列 -> 一个 { headerName, groupId, children } 列组;
+ *  - 同名但被别的列隔开 -> 各自成组,groupId 各不相同;
+ *  - 没声明分组的列原样保留(同一个对象);
+ *  - 一个分组也没有时直接返回传入的数组本身,没用到分组的表格行为零变化。
+ *
+ * groupId 由分组名派生(同名第 N 次出现追加 _N),同样的输入永远得到同样的 id:
+ * columnDefs 因别的原因重建时,AG-Grid 靠 groupId 认出还是那个列组,列组状态不丢。
+ *
+ * 有意不设 marryChildren:设了以后,任何打破组内相邻的列顺序(用户旧的扁平列方案、
+ * 列设置面板里跨组拖动的实时预览)都会被 AG-Grid 整体丢弃并报 error #39;不设则顺序照常生效,
+ * 组被隔开时表头显示成多段。
+ * openByDefault:列组默认展开(只对配了 columnGroupShow 的可折叠列组有意义)。
+ */
+export declare const groupColumnDefs: (colDefs: ColDef[]) => (ColDef | ColGroupDef)[];

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

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markHeaderGroup = exports.groupColumnDefs = void 0;
+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; }
+/**
+ * ArrayTable 分组表头(多级表头)。
+ *
+ * 背景:schema 里的每个 ArrayTable.Column 被抽成「扁平」列定义(buildArrayTableColumns),
+ * 内部一批逻辑(懒挂载列识别、列方案还原、首列拖拽等)都按扁平列取值,不能改。
+ * 所以分组只在「交给 AG-Grid 的那一份 columnDefs」上做:
+ *  1. buildArrayTableColumns 生成列定义时,用 markHeaderGroup 把列声明的 headerGroup 记下来;
+ *  2. index.tsx 把扁平列定义交给 groupColumnDefs,得到含列组的 columnDefs 传给 AgGridReact。
+ *
+ * 分组名记在模块内的 WeakMap 里,不往 colDef 上塞自定义字段——AG-Grid 会把未知属性当作错误告警。
+ *
+ * 只支持一级分组;分组名相同但不相邻的列各自成组。
+ *
+ * @author nokecy
+ */
+
+/** 列定义 -> 它在 schema 里声明的 headerGroup */
+var headerGroupOf = new WeakMap();
+
+/** 列组 id 前缀,与列方案里生成的 col_N 区分开 */
+var GROUP_ID_PREFIX = 'arrayTableGroup_';
+
+/**
+ * 记下列定义所属的表头分组。
+ * headerGroup 不是非空字符串(没声明、空串、纯空白)时不做任何事,该列按无分组处理。
+ * 返回传入的 colDef 本身,方便链式使用。
+ */
+var markHeaderGroup = exports.markHeaderGroup = function markHeaderGroup(colDef, headerGroup) {
+  if (typeof headerGroup === 'string' && headerGroup.trim() !== '') {
+    headerGroupOf.set(colDef, headerGroup);
+  }
+  return colDef;
+};
+
+/**
+ * 把扁平列定义按「相邻且 headerGroup 相同」合并成 AG-Grid 列组。
+ *
+ *  - 相邻同名的列 -> 一个 { headerName, groupId, children } 列组;
+ *  - 同名但被别的列隔开 -> 各自成组,groupId 各不相同;
+ *  - 没声明分组的列原样保留(同一个对象);
+ *  - 一个分组也没有时直接返回传入的数组本身,没用到分组的表格行为零变化。
+ *
+ * groupId 由分组名派生(同名第 N 次出现追加 _N),同样的输入永远得到同样的 id:
+ * columnDefs 因别的原因重建时,AG-Grid 靠 groupId 认出还是那个列组,列组状态不丢。
+ *
+ * 有意不设 marryChildren:设了以后,任何打破组内相邻的列顺序(用户旧的扁平列方案、
+ * 列设置面板里跨组拖动的实时预览)都会被 AG-Grid 整体丢弃并报 error #39;不设则顺序照常生效,
+ * 组被隔开时表头显示成多段。
+ * openByDefault:列组默认展开(只对配了 columnGroupShow 的可折叠列组有意义)。
+ */
+var groupColumnDefs = exports.groupColumnDefs = function groupColumnDefs(colDefs) {
+  if (!colDefs.some(function (colDef) {
+    return headerGroupOf.has(colDef);
+  })) return colDefs;
+  var usedGroupIds = new Set();
+  var makeGroupId = function makeGroupId(name) {
+    var id = "".concat(GROUP_ID_PREFIX).concat(name);
+    for (var n = 2; usedGroupIds.has(id); n++) {
+      id = "".concat(GROUP_ID_PREFIX).concat(name, "_").concat(n);
+    }
+    usedGroupIds.add(id);
+    return id;
+  };
+  var result = [];
+  var current = null;
+  var _iterator = _createForOfIteratorHelper(colDefs),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var colDef = _step.value;
+      var name = headerGroupOf.get(colDef);
+      if (name === undefined) {
+        current = null;
+        result.push(colDef);
+      } else if (current && current.name === name) {
+        current.group.children.push(colDef);
+      } else {
+        var group = {
+          headerName: name,
+          groupId: makeGroupId(name),
+          openByDefault: true,
+          children: [colDef]
+        };
+        current = {
+          name: name,
+          group: group
+        };
+        result.push(group);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return result;
+};

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

@@ -22,3 +22,13 @@ export declare const useKeyboardNavigation: (ref: RefObject<any>, dataSource: an
 export declare const useRowDrag: (field: ArrayField) => {
     handleRowDragMove: (event: any) => void;
 };
+/**
+ * AG-Grid 的 suppressKeyboardEvent:单元格里的输入框按 Ctrl/Cmd+A 时,让浏览器自己全选文字。
+ *
+ * AG-Grid 把 Ctrl+A 当成「选中所有单元格」并 preventDefault,输入框(文本框、数字框都一样)
+ * 就选不中里面的文字。这里只放行这一个组合;方向键等其余按键仍归 handleCellKeyDown 做单元格导航。
+ * 复制/粘贴/剪切/撤销 AG-Grid 本来就没拦,不必处理。@author nokecy
+ */
+export declare const suppressSelectAllInInput: ({ event }: {
+    event: KeyboardEvent;
+}) => boolean;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useRowDrag = exports.useKeyboardNavigation = exports.useCellFocus = void 0;
+exports.useRowDrag = exports.useKeyboardNavigation = exports.useCellFocus = exports.suppressSelectAllInInput = void 0;
 var _react = require("react");
 // setSelectionRange 仅 textarea 与 text/search/url/tel/password 类型 input 支持;
 // checkbox/number/date 等调用会抛 InvalidStateError,故用白名单守卫。@author nokecy
@@ -209,4 +209,19 @@ var useRowDrag = exports.useRowDrag = function useRowDrag(field) {
   return {
     handleRowDragMove: handleRowDragMove
   };
+};
+
+/**
+ * AG-Grid 的 suppressKeyboardEvent:单元格里的输入框按 Ctrl/Cmd+A 时,让浏览器自己全选文字。
+ *
+ * AG-Grid 把 Ctrl+A 当成「选中所有单元格」并 preventDefault,输入框(文本框、数字框都一样)
+ * 就选不中里面的文字。这里只放行这一个组合;方向键等其余按键仍归 handleCellKeyDown 做单元格导航。
+ * 复制/粘贴/剪切/撤销 AG-Grid 本来就没拦,不必处理。@author nokecy
+ */
+var suppressSelectAllInInput = exports.suppressSelectAllInInput = function suppressSelectAllInInput(_ref) {
+  var _target$matches;
+  var event = _ref.event;
+  if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 'a') return false;
+  var target = event.target;
+  return !!(target !== null && target !== void 0 && (_target$matches = target.matches) !== null && _target$matches !== void 0 && _target$matches.call(target, 'input, textarea, [contenteditable="true"]'));
 };

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

@@ -10,6 +10,7 @@ var _agGridReact = require("ag-grid-react");
 var _react2 = require("@formily/react");
 var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
 var _utils = require("./utils");
+var _columnGroup = require("./columnGroup");
 var _hooks = require("./hooks");
 var _arrayBase = _interopRequireDefault(require("./arrayBase"));
 var _arrayAddBtn = _interopRequireDefault(require("./arrayAddBtn"));
@@ -61,7 +62,8 @@ 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
+  // 懒挂载激活态:存放当前挂着真控件的单元格 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());
@@ -82,14 +84,16 @@ 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;
+      var _s$columnProps$header, _s$columnProps, _s$columnProps2, _s$columnProps3;
       return {
         name: s.name,
         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
+        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,
+        // 分组名变了列组结构就变,同样要重建。@author nokecy
+        headerGroup: (_s$columnProps3 = s.columnProps) === null || _s$columnProps3 === void 0 ? void 0 : _s$columnProps3.headerGroup
       };
     }));
   }, [rawSources]);
@@ -150,6 +154,12 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
     return cols;
   }, [sources, props.onRowDrag]); // 移除 field 依赖，避免数据变化时重新计算
 
+  // 交给 AgGridReact 的列定义:按 x-component-props.headerGroup 把相邻同组的列合并成列组(多级表头)。
+  // stableColumnDefs 保持扁平,懒列识别、列方案还原等内部逻辑仍用它;只有喂给 AG-Grid 的这一份带分组。@author nokecy
+  var gridColumnDefs = (0, _react.useMemo)(function () {
+    return (0, _columnGroup.groupColumnDefs)(stableColumnDefs);
+  }, [stableColumnDefs]);
+
   // 懒挂载:把激活态 Set 通过 AG-Grid context 暴露给 LazyAgField(引用稳定,原地 mutate)。@author nokecy
   var gridContext = (0, _react.useMemo)(function () {
     return {
@@ -169,15 +179,15 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
 
   /**
    * 激活某个懒挂载单元格:加入激活集合并强制重渲该格 -> LazyAgField 改挂 AgField 全树。
-   * 返回 true 表示「本次新激活」(调用方需等挂载完成再聚焦);false 表示无需激活(非懒列/新增行/已激活)。@author nokecy
+   * 焦点离开后 LazyAgField 自己把它从集合里移除并卸回文本(见 utils.tsx)。
+   * 返回 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; // 已激活
+    if (activeCellsRef.current.has(key)) return false; // 已挂载
     activeCellsRef.current.add(key);
     api.refreshCells({
       rowNodes: [node],
@@ -226,8 +236,8 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
       if (hasGroups) {
         // 传入 stableColumnDefs 作为原始定义,保留 cellRenderer(AgField/LazyAgField)及其
         // cellRendererParams——否则分组方案重建出的是裸列,单元格退化为纯文本、编辑失效。@author nokecy
-        var gridColumnDefs = (0, _columnGroupUtils.flatConfigToGridState)(currentScheme.columnConfig, stableColumnDefs);
-        gridApiState.setGridOption('columnDefs', gridColumnDefs);
+        var _gridColumnDefs = (0, _columnGroupUtils.flatConfigToGridState)(currentScheme.columnConfig, stableColumnDefs);
+        gridApiState.setGridOption('columnDefs', _gridColumnDefs);
       }
 
       // 2. 应用列状态（列顺序、宽度、隐藏、固定等）
@@ -382,6 +392,8 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
     enableCellTextSelection: true,
     defaultColDef: {
       resizable: true,
+      // 输入框里的 Ctrl/Cmd+A 交给浏览器全选文字,不让 AG-Grid 当成「选中所有单元格」拦走
+      suppressKeyboardEvent: _hooks.suppressSelectAllInInput,
       headerComponentParams: {
         template: '<div class="ag-cell-label-container" role="presentation">' +
         // '  <span data-ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>' +
@@ -420,7 +432,7 @@ var ArrayTableInner = (0, _react2.observer)(function (props) {
     ,
     rowHeight: 38,
     pagination: false,
-    columnDefs: stableColumnDefs,
+    columnDefs: gridColumnDefs,
     rowData: dataSource
   })), sources.map(function (column, key) {
     //专门用来承接对Column的状态管理

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

@@ -3,9 +3,28 @@ import { FieldDisplayTypes, GeneralField } from "@formily/core";
 import { Schema } from "@formily/json-schema";
 import { AgGridReactProps } from "ag-grid-react";
 import React from "react";
+/**
+ * ArrayTable.Column 的 x-component-props 里 qc-ui 自己认的扩展属性;
+ * 其余属性(width、headerName、pinned 等)按 AG-Grid 列定义处理。
+ *
+ * @author nokecy
+ */
+interface ArrayTableColumnProps {
+    /**
+     * 表头分组名(多级表头,仅一级)。
+     * 相邻且 headerGroup 相同的列合并成一个列组,分组名作为组头;
+     * 同名但不相邻的列各自成组;不写则该列不分组。
+     */
+    headerGroup?: string;
+    /**
+     * 默认隐藏:为 true 时该列首次出现时是隐藏的,用户可在列设置里打开,列方案(applyColumnState)优先。
+     * 对应 AG-Grid 的 initialHide。注意 hide 在 ArrayTable 里不生效(状态归列方案管),要默认隐藏请用它。
+     */
+    defaultHide?: boolean;
+}
 interface ObservableColumnSource {
     field: GeneralField;
-    columnProps: any;
+    columnProps: ArrayTableColumnProps & Record<string, any>;
     schema: Schema;
     display: FieldDisplayTypes;
     name: string;
@@ -13,4 +32,4 @@ interface ObservableColumnSource {
 type ComposedArrayTable = React.FC<React.PropsWithChildren<AgGridReactProps>> & ArrayBaseMixins & {
     Column?: any;
 };
-export { ComposedArrayTable, ObservableColumnSource };
+export { ComposedArrayTable, ObservableColumnSource, ArrayTableColumnProps };

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

@@ -1,18 +1,3 @@
-/**
- * 只读列「纯文本快路径」格式化器注册表
- *
- * 背景: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;

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

@@ -4,8 +4,9 @@ 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); }
-/**
+var _dayjs = _interopRequireDefault(require("dayjs"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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),
@@ -20,7 +21,6 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
  *
  * @author nokecy
  */
-
 /** 从字段 schema / 列 props 里尽量取到 Select 的可选项(value->label 映射用) */
 var resolveOptions = function resolveOptions(ctx) {
   var _ref, _ref2, _ref3, _fieldSchema$enum, _fieldSchema$xCompon, _fieldSchema$xCompon2;
@@ -62,9 +62,11 @@ 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);
+  if (typeof value.format === 'function') return value.format(fmt);
+  // 后端回来的多是 ISO 串(2024-10-19T00:00:00)或时间戳:与 Formily readPretty 一致,按 dayjs(value).format(fmt) 显示;
+  // 解析不了的文本(如「待定」)原样显示,不吞掉。dayjs 随 antd 传递依赖引入,本库其他模块已直接使用。
+  var parsed = (0, _dayjs.default)(value);
+  return parsed.isValid() ? parsed.format(fmt) : String(value);
 };
 var booleanFormatter = function booleanFormatter(value, ctx) {
   var _ctx$fieldSchema$xCo, _ctx$fieldSchema2, _props$checkedChildre, _props$unCheckedChild;

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

@@ -10,14 +10,21 @@ declare const useArrayTableActions: () => ObservableColumnSource[];
  * 懒挂载单元格渲染器(可编辑列)。
  *
  * 已有行的可编辑格被 Editable 装饰器默认转成 readPretty 只读文本态(点击才进编辑),
- * 但仍挂着完整 Formily 树——这是行多列多滚动卡的主因。本渲染器:
- *  - 新增行(_isNew,保持编辑态需即时校验) 或 已被激活(点击/导航进过)的格 -> 挂 AgField 全树;
- *  - 其余(存量行、没碰过) -> 只渲染廉价纯文本(复用 readOnlyFormatters),不挂 Formily 树。
+ * 但仍挂着完整 Formily 树——这是行多列多滚动卡的主因。本渲染器让每个格在两种形态间切换:
+ *  - 懒挂载文本:只渲染廉价纯文本(复用 readOnlyFormatters),不挂 Formily 树。默认形态。
+ *  - 挂载态:挂 AgField 全树,可编辑、可校验。
  *
- * 激活态存放在 AG-Grid context.activeCells(Set),由 index.tsx 在点击/键盘导航时写入并 refreshCells。
- * 「挂了不卸」:一旦激活保持挂载(直到行被虚拟化销毁),不做失焦退回,避开一堆边界。
+ * 何时挂载:
+ *  1. 被激活(点击/键盘导航进来):激活态存放在 AG-Grid context.activeCells(Set),
+ *     由 index.tsx 写入并 refreshCells;
+ *  2. 必填且为空:空的必填格必须是真控件,否则没有字段节点,提交时没人校验它。
+ *     不区分新增行、存量行、initialValues 带进来的行——只看「必填且空」。
+ *     例外:Editable 装饰器的非新增行,Editable 自己会把它转成只读态,挂了也不校验,留在文本态。
+ * 何时卸回文本:焦点离开本格,且该字段校验通过(必填的已填上、没有格式错误)。
+ *  必填仍为空或校验有错则留着控件,让用户看见错误——与 Editable 失焦时的判断一致。
+ *  卸掉的只是渲染树,Formily 字段节点与值都还在,再次点击会接着用。
  *
- * 校验安全:未碰过的存量格本就是 readPretty、本就不参与校验,不挂树校验语义零变化。@author nokecy
+ * 校验安全:空的必填格不会卸成文本(见上);其余格卸载前已校验通过。@author nokecy
  */
 declare const LazyAgField: (params: any) => React.JSX.Element;
 /**