@nokecy/qc-ui 1.1.87 → 1.1.89

package/dist/cjs/ag-grid-plus/ag-gridPlus.js

@@ -43,7 +43,7 @@ var _requestParams = require("./utils/requestParams");
 var _errors = require("./errors");
 var _logger = require("./utils/logger");
 var _entityExtensionColumns = require("./utils/entityExtensionColumns");
-var _excluded = ["style", "loading", "params", "request", "dataSource", "treeKeyName", "treeParentName", "rowData", "gridRef", "headerTitle", "toolBarRender", "search", "hideTool", "onGridReady", "gridKey", "children", "defaultSearchExpand", "overlayNoRowsTemplateText", "queryDefaultRows", "onSelectedRowsChange", "emptyState", "accessible", "enableClickSelection", "rowSelection", "useNativeTreeFilter", "entityType", "valueEnumContrast"];
+var _excluded = ["style", "loading", "params", "request", "dataSource", "treeKeyName", "treeParentName", "rowData", "gridRef", "headerTitle", "toolBarRender", "search", "hideTool", "onGridReady", "gridKey", "children", "defaultSearchExpand", "overlayNoRowsTemplateText", "queryDefaultRows", "onSelectedRowsChange", "onQueryValuesChange", "emptyState", "accessible", "enableClickSelection", "rowSelection", "useNativeTreeFilter", "entityType", "valueEnumContrast"];
 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; }
@@ -85,6 +85,7 @@ function useDeepCompareStable(value) {
   return ref.current;
 }
 function AgGridPlus(props) {
+  var _ref;
   var gridTheme = (0, _theme.useAgGridTheme)();
   var _theme$useToken = _antd.theme.useToken(),
     token = _theme$useToken.token; // 高级筛选入口跟随主题及客户主色。@author nokecy
@@ -108,6 +109,7 @@ function AgGridPlus(props) {
     overlayNoRowsTemplateText = props.overlayNoRowsTemplateText,
     queryDefaultRows = props.queryDefaultRows,
     onSelectedRowsChange = props.onSelectedRowsChange,
+    onQueryValuesChange = props.onQueryValuesChange,
     emptyState = props.emptyState,
     _props$accessible = props.accessible,
     accessible = _props$accessible === void 0 ? true : _props$accessible,
@@ -236,35 +238,6 @@ function AgGridPlus(props) {
     _useState28 = _slicedToArray(_useState27, 2),
     advancedQueryRules = _useState28[0],
     setAdvancedQueryRules = _useState28[1];
-
-  /**
-   * 【P1 架构优化】使用单向数据流架构
-   *
-   * 数据流层次：
-   * 1. Source of Truth: useSchemeDataFlow (Scheme State)
-   * 2. Derived State: derivedColumnDefs/derivedColumnState (只读派生)
-   * 3. UI State: Context State (仅用于 UI 交互)
-   *
-   * 优势：
-   * - 清晰的数据流向（单向可追踪）
-   * - 消除状态同步冲突（单一数据源）
-   * - 架构清晰度 +60%，Bug -40%
-   */
-  var schemeDataFlow = (0, _useSchemeDataFlow.useSchemeDataFlow)(gridKey || '', allColDefsRef.current, {
-    columnSchemes: columnSchemes,
-    querySchemes: querySchemes,
-    currentSchemes: currentSchemes
-  });
-
-  // 解构单向数据流的数据
-  var currentColumnSchemes = schemeDataFlow.columnSchemes,
-    currentColumnScheme = schemeDataFlow.currentColumnScheme,
-    currentQuerySchemes = schemeDataFlow.querySchemes,
-    currentQueryScheme = schemeDataFlow.currentQueryScheme,
-    derivedColumnDefs = schemeDataFlow.derivedColumnDefs,
-    derivedColumnState = schemeDataFlow.derivedColumnState,
-    isUsingGlobalFallback = schemeDataFlow.isUsingGlobalFallback,
-    isUsingGlobalQueryFallback = schemeDataFlow.isUsingGlobalQueryFallback;
   (0, _react.useImperativeHandle)(propsGridRef, function () {
     return gridRef.current;
   });
@@ -321,117 +294,6 @@ function AgGridPlus(props) {
 
   // 用于列类型推断的首行数据。为什么必须是 state 而不是 ref,见该 hook 的注释。@author nokecy
   var typeInferenceRow = (0, _useTypeInferenceRow.useTypeInferenceRow)(rowData);
-
-  /**
-   * 【P0 + P1 优化】使用派生状态应用方案（单向数据流）
-   *
-   * 优势：
-   * 1. 使用已派生的状态，避免重复计算
-   * 2. 单向数据流，状态同步更可靠
-   * 3. 性能提升 67%，代码更清晰
-   * 4. 使用 Promise 链和 requestAnimationFrame 解决竞态条件
-   */
-  (0, _react.useEffect)(function () {
-    if (!gridKey || !apiRef.current) return;
-
-    // 使用 Promise 链确保顺序执行，避免竞态条件
-    var cancelled = false;
-    Promise.resolve().then(function () {
-      if (cancelled || !apiRef.current) return;
-
-      // 1. 应用派生的列状态（使用 applyColumnState API）
-      if (derivedColumnState && derivedColumnState.length > 0) {
-        // 使用 applyColumnState 而不是 setGridOption("columnDefs")
-        apiRef.current.applyColumnState({
-          state: derivedColumnState,
-          applyOrder: true // 应用列顺序
-        });
-      }
-
-      // 2. 应用派生的列样式
-      if (derivedColumnState) {
-        setColumnCellClass(handelgridPlusColumnState(derivedColumnState));
-      }
-    }).then(function () {
-      // 等待 Grid 状态稳定（使用 requestAnimationFrame 而非固定延迟）
-      return new Promise(function (resolve) {
-        if (cancelled) {
-          resolve();
-          return;
-        }
-        requestAnimationFrame(function () {
-          // 双重 RAF 确保渲染完成
-          requestAnimationFrame(function () {
-            return resolve();
-          });
-        });
-      });
-    }).then(function () {
-      if (cancelled || !apiRef.current) return;
-
-      // 3. 应用过滤器（在列状态稳定后执行）
-      if (currentColumnScheme !== null && currentColumnScheme !== void 0 && currentColumnScheme.filterModel) {
-        apiRef.current.setFilterModel(currentColumnScheme.filterModel);
-      }
-    }).catch(function (error) {
-      if (!cancelled) {
-        console.error('[AgGridPlus] 应用方案失败:', error);
-        _logger.logger.error('[AgGridPlus] 应用方案失败', error);
-      }
-    });
-
-    // 清理函数：取消进行中的操作
-    return function () {
-      cancelled = true;
-    };
-  }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, derivedColumnState, ready // 添加 ready 依赖，确保 Grid 初始化完成后再应用方案
-  ]);
-
-  /**
-   * 【新增】监听当前方案 ID 变化，当方案被删除时重置列状态
-   *
-   * 场景：
-   * - 用户删除当前正在使用的方案
-   * - currentColumnScheme?.id 从有值变为 null
-   *
-   * 行为：
-   * - 重置列状态为初始状态（默认顺序、宽度等）
-   * - 清除所有过滤器
-   * - 清除列样式配置
-   *
-   * 优势：
-   * - 符合单向数据流架构
-   * - 适用于所有方案切换场景（删除/取消选择）
-   * - 用户体验好，自动恢复到初始状态
-   */
-  var prevSchemeIdRef = (0, _react.useRef)(currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id);
-  (0, _react.useEffect)(function () {
-    if (!gridKey || !apiRef.current || !ready) return;
-    var prevSchemeId = prevSchemeIdRef.current;
-    var currentSchemeId = currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id;
-
-    // 检测方案被删除：从有值变为 null/undefined
-    if (prevSchemeId && !currentSchemeId) {
-      Promise.resolve().then(function () {
-        if (!apiRef.current) return;
-
-        // 1. 重置列状态为初始状态
-        apiRef.current.resetColumnState();
-
-        // 2. 清除所有过滤器
-        apiRef.current.setFilterModel(null);
-
-        // 3. 清除列样式配置
-        setColumnCellClass({});
-      }).catch(function (error) {
-        console.error('[AgGridPlus] 重置列状态失败:', error);
-        _logger.logger.error('[AgGridPlus] 重置列状态失败', error);
-      });
-    }
-
-    // 更新引用
-    prevSchemeIdRef.current = currentSchemeId;
-  }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, ready]);
   (0, _react.useEffect)(function () {
     setRowData(dataSource || propRowData || []);
   }, [dataSource, propRowData]);
@@ -570,6 +432,147 @@ function AgGridPlus(props) {
     return cols;
   }, [_react.default.Children.count(children), props.columnDefs, extensibleColumns, gridKey, entityType, hostEntityExtensions, typeInferenceRow, valueEnumContrast ? token.colorBgContainer : undefined]);
 
+  // 方案派生依赖本轮源码列，避免读取尚未更新的 ref 快照。@author nokecy
+  /**
+   * 【P1 架构优化】使用单向数据流架构
+   *
+   * 数据流层次：
+   * 1. Source of Truth: useSchemeDataFlow (Scheme State)
+   * 2. Derived State: derivedColumnDefs/derivedColumnState (只读派生)
+   * 3. UI State: Context State (仅用于 UI 交互)
+   *
+   * 优势：
+   * - 清晰的数据流向（单向可追踪）
+   * - 消除状态同步冲突（单一数据源）
+   * - 架构清晰度 +60%，Bug -40%
+   */
+  var schemeDataFlow = (0, _useSchemeDataFlow.useSchemeDataFlow)(gridKey || '', allColDefs, {
+    columnSchemes: columnSchemes,
+    querySchemes: querySchemes,
+    currentSchemes: currentSchemes
+  });
+
+  // 解构单向数据流的数据
+  var currentColumnSchemes = schemeDataFlow.columnSchemes,
+    currentColumnScheme = schemeDataFlow.currentColumnScheme,
+    currentQuerySchemes = schemeDataFlow.querySchemes,
+    currentQueryScheme = schemeDataFlow.currentQueryScheme,
+    derivedColumnDefs = schemeDataFlow.derivedColumnDefs,
+    derivedColumnState = schemeDataFlow.derivedColumnState,
+    isUsingGlobalFallback = schemeDataFlow.isUsingGlobalFallback,
+    isUsingGlobalQueryFallback = schemeDataFlow.isUsingGlobalQueryFallback;
+
+  /**
+   * 【P0 + P1 优化】使用派生状态应用方案（单向数据流）
+   *
+   * 优势：
+   * 1. 使用已派生的状态，避免重复计算
+   * 2. 单向数据流，状态同步更可靠
+   * 3. 性能提升 67%，代码更清晰
+   * 4. 使用 Promise 链和 requestAnimationFrame 解决竞态条件
+   */
+  (0, _react.useEffect)(function () {
+    if (!gridKey || !apiRef.current) return;
+
+    // 使用 Promise 链确保顺序执行，避免竞态条件
+    var cancelled = false;
+    Promise.resolve().then(function () {
+      if (cancelled || !apiRef.current) return;
+
+      // 1. 应用派生的列状态（使用 applyColumnState API）
+      if (derivedColumnState && derivedColumnState.length > 0) {
+        // 使用 applyColumnState 而不是 setGridOption("columnDefs")
+        apiRef.current.applyColumnState({
+          state: derivedColumnState,
+          applyOrder: true // 应用列顺序
+        });
+      }
+
+      // 2. 应用派生的列样式
+      if (derivedColumnState) {
+        setColumnCellClass(handelgridPlusColumnState(derivedColumnState));
+      }
+    }).then(function () {
+      // 等待 Grid 状态稳定（使用 requestAnimationFrame 而非固定延迟）
+      return new Promise(function (resolve) {
+        if (cancelled) {
+          resolve();
+          return;
+        }
+        requestAnimationFrame(function () {
+          // 双重 RAF 确保渲染完成
+          requestAnimationFrame(function () {
+            return resolve();
+          });
+        });
+      });
+    }).then(function () {
+      if (cancelled || !apiRef.current) return;
+
+      // 3. 应用过滤器（在列状态稳定后执行）
+      if (currentColumnScheme !== null && currentColumnScheme !== void 0 && currentColumnScheme.filterModel) {
+        apiRef.current.setFilterModel(currentColumnScheme.filterModel);
+      }
+    }).catch(function (error) {
+      if (!cancelled) {
+        console.error('[AgGridPlus] 应用方案失败:', error);
+        _logger.logger.error('[AgGridPlus] 应用方案失败', error);
+      }
+    });
+
+    // 清理函数：取消进行中的操作
+    return function () {
+      cancelled = true;
+    };
+  }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, derivedColumnState, ready // 添加 ready 依赖，确保 Grid 初始化完成后再应用方案
+  ]);
+
+  /**
+   * 【新增】监听当前方案 ID 变化，当方案被删除时重置列状态
+   *
+   * 场景：
+   * - 用户删除当前正在使用的方案
+   * - currentColumnScheme?.id 从有值变为 null
+   *
+   * 行为：
+   * - 重置列状态为初始状态（默认顺序、宽度等）
+   * - 清除所有过滤器
+   * - 清除列样式配置
+   *
+   * 优势：
+   * - 符合单向数据流架构
+   * - 适用于所有方案切换场景（删除/取消选择）
+   * - 用户体验好，自动恢复到初始状态
+   */
+  var prevSchemeIdRef = (0, _react.useRef)(currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id);
+  (0, _react.useEffect)(function () {
+    if (!gridKey || !apiRef.current || !ready) return;
+    var prevSchemeId = prevSchemeIdRef.current;
+    var currentSchemeId = currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id;
+
+    // 检测方案被删除：从有值变为 null/undefined
+    if (prevSchemeId && !currentSchemeId) {
+      Promise.resolve().then(function () {
+        if (!apiRef.current) return;
+
+        // 1. 重置列状态为初始状态
+        apiRef.current.resetColumnState();
+
+        // 2. 清除所有过滤器
+        apiRef.current.setFilterModel(null);
+
+        // 3. 清除列样式配置
+        setColumnCellClass({});
+      }).catch(function (error) {
+        console.error('[AgGridPlus] 重置列状态失败:', error);
+        _logger.logger.error('[AgGridPlus] 重置列状态失败', error);
+      });
+    }
+
+    // 更新引用
+    prevSchemeIdRef.current = currentSchemeId;
+  }, [gridKey, currentColumnScheme === null || currentColumnScheme === void 0 ? void 0 : currentColumnScheme.id, ready]);
+
   // 稳定化 gridParams 和 sortColumn 的引用(深比较,内容不变即复用旧引用)
   var stableGridParams = useDeepCompareStable(gridParams);
   var stableSortColumn = useDeepCompareStable(sortColumn);
@@ -1018,10 +1021,11 @@ function AgGridPlus(props) {
 
   // 构建查询表单项（带 order 属性）
   var queryFormItems = (0, _react.useMemo)(function () {
-    var _allColDefs$filter;
-    var items = (allColDefs === null || allColDefs === void 0 || (_allColDefs$filter = allColDefs.filter(function (col) {
+    var _flattenColumnState;
+    // 查询方案按叶列排序和隐藏，分组本身不作为查询字段。@author nokecy
+    var items = ((_flattenColumnState = (0, _processFormColumnState.default)(allColDefs)) === null || _flattenColumnState === void 0 || (_flattenColumnState = _flattenColumnState.filter(function (col) {
       return col.filter !== false && !col.hideInSearch;
-    })) === null || _allColDefs$filter === void 0 ? void 0 : _allColDefs$filter.map(function (col) {
+    })) === null || _flattenColumnState === void 0 ? void 0 : _flattenColumnState.map(function (col) {
       var _col$queryField, _col$searchSort;
       return _objectSpread({
         field: (_col$queryField = col.queryField) !== null && _col$queryField !== void 0 ? _col$queryField : col.field,
@@ -1153,10 +1157,12 @@ function AgGridPlus(props) {
     }
   }, search == false ? null : /*#__PURE__*/_react.default.createElement(_queryForm.default, {
     colDefs: (0, _processFormColumnState.default)(visibleFormItems),
+    effectiveColDefs: (0, _processFormColumnState.default)(colDefs),
     defaultRows: queryDefaultRows,
-    columnStates: columnState || [],
+    columnStates: (_ref = derivedColumnState !== null && derivedColumnState !== void 0 ? derivedColumnState : columnState) !== null && _ref !== void 0 ? _ref : [],
     defaultExpand: defaultSearchExpand,
     gridApi: apiRef.current,
+    onValuesChange: onQueryValuesChange,
     onQuery: function onQuery(formValues) {
       // 优先使用高级搜索：如果存在高级搜索条件，忽略简单查询
       if (advancedQueryRules.children.length > 0) {

package/dist/cjs/ag-grid-plus/context/useSchemeDataFlow.js

@@ -179,8 +179,8 @@ function useDerivedGridState(currentScheme, allColDefs) {
       console.error('[useDerivedGridState] 转换失败:', error);
       return null;
     }
-  }, [// 使用 scheme.id 作为依赖，避免深度对象比较
-  currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.id, allColDefs]);
+  }, [// 同一方案的内容修改也要重新派生，保持表格与查询区使用相同快照。@author nokecy
+  currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.id, currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.columnConfig, allColDefs]);
 }
 
 /**
@@ -215,8 +215,8 @@ function useDerivedColumnState(currentScheme, allColDefs) {
       console.error('[useDerivedColumnState] 转换失败:', error);
       return null;
     }
-  }, [// 使用 scheme.id 作为依赖
-  currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.id, allColDefs]);
+  }, [// 同一方案保存后 columnConfig 会更新，不能只比较方案 ID。@author nokecy
+  currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.id, currentScheme === null || currentScheme === void 0 ? void 0 : currentScheme.columnConfig, allColDefs]);
 }
 
 /**

package/dist/cjs/ag-grid-plus/interface.d.ts

@@ -85,6 +85,12 @@ interface GridProps extends AgGridReactProps {
      * 选中行变化回调函数
      */
     onSelectedRowsChange?: (selectedRows: any[]) => void;
+    /**
+     * 查询区条件值变化时回调（输入、默认值落位、重置都会触发），参数为当前条件快照，以查询字段名为键。
+     * 只通知、不发起查询；宿主可据此与上次查询用的条件比较，提示「条件已变更，请查询」。
+     * @author nokecy
+     */
+    onQueryValuesChange?: (values: Record<string, any>) => void;
     /**
      * 错误处理回调函数
      * 当组件发生错误时调用，可用于自定义错误处理逻辑
@@ -144,6 +150,8 @@ interface AgGridColumnPropsClone extends ColDef {
     hideInTable?: boolean;
     hideInSearch?: boolean;
     queryField?: string;
+    /** 查询区独立标题；优先于列方案中的表头名称。@author nokecy */
+    searchTitle?: string;
     /**
      * 是否文本缩略显示,并使用tooltip
      */

package/dist/cjs/ag-grid-plus/queryForm/index.d.ts

@@ -5,10 +5,14 @@ declare const FormRender: (props: {
     className?: any;
     gridApi?: GridApi<any> | undefined;
     colDefs: ColDef[];
+    /** 与表格同轮渲染的生效列定义快照。@author nokecy */
+    effectiveColDefs?: ColDef<any, any>[] | undefined;
     columnStates: ColumnState[];
     defaultExpand?: Boolean | undefined;
     defaultRows?: number | undefined;
     onQuery: (formValue: any) => void;
     onInit?: ((defaultValues: any) => void) | undefined;
+    /** 查询条件值变化（输入、默认值落位、重置）时回调，参数为当前条件快照；不触发查询。@author nokecy */
+    onValuesChange?: ((values: Record<string, any>) => void) | undefined;
 }) => React.JSX.Element;
 export default FormRender;

package/dist/cjs/ag-grid-plus/queryForm/index.js

@@ -13,6 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = _interopRequireWildcard(require("react"));
 var _queryForm = _interopRequireDefault(require("./queryForm"));
 var _schemaKey = require("./schemaKey");
+var _queryColumns = require("./queryColumns");
 var _boolSelect = _interopRequireDefault(require("../_utils/boolSelect"));
 require("./index.less");
 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); }
@@ -31,15 +32,17 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // @author nokecy
 var FormRender = function FormRender(props) {
   var className = props.className,
-    gridApi = props.gridApi,
     colDefs = props.colDefs,
+    _props$effectiveColDe = props.effectiveColDefs,
+    effectiveColDefs = _props$effectiveColDe === void 0 ? colDefs : _props$effectiveColDe,
     columnStates = props.columnStates,
     onQuery = props.onQuery,
     _props$defaultRows = props.defaultRows,
     defaultRows = _props$defaultRows === void 0 ? 1 : _props$defaultRows;
   var _theme$useToken = _antd.theme.useToken(),
     token = _theme$useToken.token; // 筛选区跟随宿主主题。@author nokecy
-
+  var queryColumns = (0, _queryColumns.resolveQueryColumns)(colDefs, effectiveColDefs, columnStates);
+  var schemaKey = (0, _schemaKey.queryFormSchemaKey)(undefined, queryColumns);
   var _useState = (0, _react2.useState)({
       type: 'object',
       properties: {}
@@ -47,25 +50,25 @@ var FormRender = function FormRender(props) {
     _useState2 = _slicedToArray(_useState, 2),
     schema = _useState2[0],
     setSchema = _useState2[1];
+
+  // 表单与 SchemaField 实例保持稳定，元数据更新不清空已输入的查询值。@author nokecy
   var form = (0, _react2.useMemo)(function () {
-    return (0, _core.createForm)({
-      effects: function effects() {
-        return [(0, _core.onFieldInit)('queryForm', function (field) {
-          field.query('queryForm').take(function (node) {
-            node.setComponentProps({
-              onReset: onReset,
-              defaultExpand: props.defaultExpand
-            });
-          });
-        })];
-      }
-    });
+    return (0, _core.createForm)();
   }, []);
 
-  // 【修复】移除此处的 onInit 调用
-  // 原因：此时 schema 尚未设置，form.values 为空，默认值还未应用
-  // 改为在下方 schema 设置完成后调用 onInit
-
+  // 条件变化只通知宿主（如提示「条件已变更」），回调走 ref，宿主每次渲染传新函数也不重复订阅。@author nokecy
+  var onValuesChangeRef = (0, _react2.useRef)(props.onValuesChange);
+  onValuesChangeRef.current = props.onValuesChange;
+  (0, _react2.useEffect)(function () {
+    var id = form.subscribe(function (_ref) {
+      var _onValuesChangeRef$cu;
+      var type = _ref.type;
+      if (type === _core.LifeCycleTypes.ON_FORM_VALUES_CHANGE) (_onValuesChangeRef$cu = onValuesChangeRef.current) === null || _onValuesChangeRef$cu === void 0 || _onValuesChangeRef$cu.call(onValuesChangeRef, _objectSpread({}, form.values));
+    });
+    return function () {
+      return form.unsubscribe(id);
+    };
+  }, [form]);
   var SchemaField = (0, _react2.useMemo)(function () {
     return (0, _react.createSchemaField)({
       components: {
@@ -81,7 +84,7 @@ var FormRender = function FormRender(props) {
         BoolSelect: _boolSelect.default
       }
     });
-  }, [schema]);
+  }, []);
   var onSubmit = function onSubmit() {
     onQuery && onQuery(form.values);
   };
@@ -121,47 +124,31 @@ var FormRender = function FormRender(props) {
       return component ? component : "Input";
     }
   };
-  var getSchema = function getSchema(reset) {
-    var _columns, _columns2;
+  var getSchema = function getSchema() {
     var rootSchema = {
       type: 'object',
       properties: {}
     };
-    if (!columnStates) {
-      return rootSchema;
-    }
     var gridSchema = {
       type: 'void',
       "name": 'queryForm',
       "x-component": 'QueryForm',
       properties: {},
       "x-component-props": {
-        defaultRows: defaultRows // 在这里添加defaultRows参数
+        defaultRows: defaultRows,
+        defaultExpand: props.defaultExpand,
+        onReset: onReset
       }
     };
-    var columns = colDefs === null || colDefs === void 0 ? void 0 : colDefs.map(function (colDef) {
-      var _searchComponentProps;
-      var state = columnStates.find(function (x) {
-        return x.colId == colDef.field;
-      });
-      var columnDefs = gridApi === null || gridApi === void 0 ? void 0 : gridApi.getColumnDef(colDef.field);
-      // 查询组件属性（下拉选项）以本次传入的列为准：AG Grid 在本副作用之后才应用新 columnDefs，此刻取到的还是上一版。@author nokecy
-      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colDef), columnDefs), state), {}, {
-        searchComponentProps: (_searchComponentProps = colDef.searchComponentProps) !== null && _searchComponentProps !== void 0 ? _searchComponentProps : columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.searchComponentProps
-      });
-    });
-    columns = columns ? (_columns = columns) === null || _columns === void 0 ? void 0 : _columns.filter(function (i) {
-      return (i === null || i === void 0 ? void 0 : i.visible) != false && !(i !== null && i !== void 0 && i.hide) && !(i !== null && i !== void 0 && i.hideInSearch) || (i === null || i === void 0 ? void 0 : i.hideInTable);
-    }) : [];
-    columns.map(function (col) {
-      var _colDef$queryField;
+    queryColumns.forEach(function (col) {
+      var _colDef$queryField, _colDef$searchTitle;
       var colDef = col;
       var name = (_colDef$queryField = colDef.queryField) !== null && _colDef$queryField !== void 0 ? _colDef$queryField : colDef.field;
-      var headerName = colDef.headerName;
+      var headerName = (_colDef$searchTitle = colDef.searchTitle) !== null && _colDef$searchTitle !== void 0 ? _colDef$searchTitle : colDef.headerName;
       //表单自定义组件
       var component = getComponent(colDef);
       if (colDef.filter != false) {
-        var _colDef$searchCompone, _colDef$searchCompone2, _colDef$searchCompone3;
+        var _colDef$searchCompone, _colDef$searchCompone2, _colDef$searchCompone3, _colDef$searchCompone4;
         // 为多选下拉框添加maxTagCount配置
         var componentProps = _objectSpread({
           placeholder: "\u8BF7\u8F93\u5165".concat(headerName),
@@ -183,7 +170,7 @@ var FormRender = function FormRender(props) {
           type: 'string',
           title: headerName,
           required: (colDef === null || colDef === void 0 || (_colDef$searchCompone = colDef.searchComponentProps) === null || _colDef$searchCompone === void 0 ? void 0 : _colDef$searchCompone.required) || false,
-          default: (colDef === null || colDef === void 0 || (_colDef$searchCompone2 = colDef.searchComponentProps) === null || _colDef$searchCompone2 === void 0 ? void 0 : _colDef$searchCompone2.default) || (colDef === null || colDef === void 0 || (_colDef$searchCompone3 = colDef.searchComponentProps) === null || _colDef$searchCompone3 === void 0 ? void 0 : _colDef$searchCompone3.defaultValue),
+          default: (_colDef$searchCompone2 = colDef === null || colDef === void 0 || (_colDef$searchCompone3 = colDef.searchComponentProps) === null || _colDef$searchCompone3 === void 0 ? void 0 : _colDef$searchCompone3.default) !== null && _colDef$searchCompone2 !== void 0 ? _colDef$searchCompone2 : colDef === null || colDef === void 0 || (_colDef$searchCompone4 = colDef.searchComponentProps) === null || _colDef$searchCompone4 === void 0 ? void 0 : _colDef$searchCompone4.defaultValue,
           enum: colDef === null || colDef === void 0 ? void 0 : colDef.enum,
           "x-component": component,
           "x-component-props": componentProps,
@@ -198,7 +185,7 @@ var FormRender = function FormRender(props) {
     });
     ///@ts-ignore
     rootSchema.properties["queryForm"] = gridSchema;
-    if (!((_columns2 = columns) !== null && _columns2 !== void 0 && _columns2.length)) {
+    if (!queryColumns.length) {
       ///@ts-ignore
       delete rootSchema.properties["queryForm"];
     }
@@ -207,18 +194,40 @@ var FormRender = function FormRender(props) {
 
   // 【新增】用于追踪是否已完成首次初始化
   var initializedRef = (0, _react2.useRef)(false);
+  var previousFieldsRef = (0, _react2.useRef)([]);
   (0, _react2.useEffect)(function () {
     var _new_schema$propertie, _new_schema$propertie2;
-    var new_schema = getSchema(onReset);
+    var new_schema = getSchema();
+    var fieldSchemas = (_new_schema$propertie = (_new_schema$propertie2 = new_schema.properties) === null || _new_schema$propertie2 === void 0 || (_new_schema$propertie2 = _new_schema$propertie2.queryForm) === null || _new_schema$propertie2 === void 0 ? void 0 : _new_schema$propertie2.properties) !== null && _new_schema$propertie !== void 0 ? _new_schema$propertie : {};
+    // 移除失效查询项的字段图和值，避免界面已经移除却仍提交旧筛选。@author nokecy
+    previousFieldsRef.current.filter(function (name) {
+      return !(name in fieldSchemas);
+    }).forEach(function (name) {
+      form.clearFormGraph(name);
+      form.deleteValuesIn(name);
+      form.deleteInitialValuesIn(name);
+    });
+    previousFieldsRef.current = Object.keys(fieldSchemas);
     setSchema(new_schema);
-    // Formily 只在字段首次创建时读取 schema：已有查询项要把新标题、组件属性（如下拉选项）写回字段。@author nokecy
-    Object.entries((_new_schema$propertie = (_new_schema$propertie2 = new_schema.properties) === null || _new_schema$propertie2 === void 0 || (_new_schema$propertie2 = _new_schema$propertie2.queryForm) === null || _new_schema$propertie2 === void 0 ? void 0 : _new_schema$propertie2.properties) !== null && _new_schema$propertie !== void 0 ? _new_schema$propertie : {}).forEach(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-        name = _ref2[0],
-        fieldSchema = _ref2[1];
+    // 已有字段同步元数据，不触碰仍有效字段的查询值，也不触发查询。@author nokecy
+    Object.entries(fieldSchemas).forEach(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        name = _ref3[0],
+        fieldSchema = _ref3[1];
       form.query(name).take(function (field) {
+        var _fieldSchema$enum;
         field.title = fieldSchema.title;
-        field.setComponentProps(fieldSchema['x-component-props']);
+        field.required = fieldSchema.required;
+        // Select 会把 dataSource 映射为 options；仅配置 options 时也同步该数据源。@author nokecy
+        field.dataSource = (_fieldSchema$enum = fieldSchema.enum) !== null && _fieldSchema$enum !== void 0 ? _fieldSchema$enum : fieldSchema['x-component-props'].options;
+        field.component = [fieldSchema['x-component'], fieldSchema['x-component-props']];
+      });
+    });
+    form.query('queryForm').take(function (field) {
+      return field.setComponentProps({
+        defaultRows: defaultRows,
+        defaultExpand: props.defaultExpand,
+        onReset: onReset
       });
     });
 
@@ -233,7 +242,7 @@ var FormRender = function FormRender(props) {
         }, 0);
       });
     }
-  }, [(0, _schemaKey.queryFormSchemaKey)(columnStates, colDefs)]);
+  }, [schemaKey, defaultRows, props.defaultExpand]);
   return /*#__PURE__*/_react2.default.createElement("div", {
     className: (0, _classnames.default)(className, "ag-grid-table-search ag-grid-table-search-query-filter"),
     style: {
@@ -242,6 +251,7 @@ var FormRender = function FormRender(props) {
   }, /*#__PURE__*/_react2.default.createElement(_antdV.Form, {
     form: form,
     labelWidth: 100,
+    labelWrap: true,
     feedbackLayout: "none",
     onAutoSubmit: onSubmit
   }, /*#__PURE__*/_react2.default.createElement(SchemaField, {

package/dist/cjs/ag-grid-plus/queryForm/queryColumns.d.ts

@@ -0,0 +1,8 @@
+import type { ColumnState } from 'ag-grid-community';
+import type { ExtendedColDef } from '../types';
+/**
+ * 从同一轮渲染的列定义快照派生查询项，不在副作用中读取 AG Grid 的上一轮定义。
+ * 表头名称跟随生效列方案；查询专用元数据和独立标题由页面声明。
+ * @author nokecy
+ */
+export declare const resolveQueryColumns: (sourceColumns: readonly ExtendedColDef[], effectiveColumns: readonly ExtendedColDef[], columnStates: readonly ColumnState[]) => ExtendedColDef[];