@nocobase/client-v2 2.1.0-beta.26 → 2.1.0-beta.27

package/src/flow/models/blocks/filter-form/FilterFormGridModel.tsx

@@ -12,7 +12,10 @@ import {
   AddSubModelButton,
   DragOverlayConfig,
   FlowSettingsButton,
+  GridCellV2,
+  GridLayoutData,
   GridLayoutV2,
+  GridRowV2,
   normalizeGridLayout,
   observable,
   projectLayoutToLegacyRows,
@@ -24,6 +27,8 @@ import { FilterFormItemModel } from './FilterFormItemModel';
 
 export class FilterFormGridModel extends GridModel {
   private fullLayoutBeforeCollapse?: GridLayoutV2;
+  private normalizedItemUidsOverride?: string[];
+  private readingFullLayoutForSettingsInteraction = false;
   itemSettingsMenuLevel = 2;
   itemFlowSettings = {
     showBackground: true,
@@ -64,6 +69,182 @@ export class FilterFormGridModel extends GridModel {
     return filterTargetKey || 'id';
   }
 
+  private normalizeFilterFormLayout(
+    source?: Partial<GridLayoutData>,
+    options?: {
+      useVisibleItemUids?: boolean;
+    },
+  ): GridLayoutV2 {
+    const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
+    const useVisibleItemUids = options?.useVisibleItemUids !== false;
+
+    return normalizeGridLayout({
+      layout: source?.layout ?? this.props.layout ?? params.layout,
+      rows: source?.rows ?? this.props.rows ?? params.rows,
+      sizes: source?.sizes ?? this.props.sizes ?? params.sizes,
+      rowOrder: source?.rowOrder ?? this.props.rowOrder ?? params.rowOrder,
+      // 折叠态只保留当前可见字段，避免归一化时把被裁掉的字段重新补回布局。
+      itemUids: useVisibleItemUids ? this.normalizedItemUidsOverride ?? this.getItemUids() : this.getItemUids(),
+      gridUid: this.uid,
+      logger: console,
+    });
+  }
+
+  private normalizeStoredFullLayout(): GridLayoutV2 {
+    const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
+
+    return normalizeGridLayout({
+      layout: this.fullLayoutBeforeCollapse ?? params.layout ?? this.props.layout,
+      rows: params.rows ?? this.props.rows,
+      sizes: params.sizes ?? this.props.sizes,
+      rowOrder: params.rowOrder ?? this.props.rowOrder,
+      itemUids: this.getItemUids(),
+      gridUid: this.uid,
+      logger: console,
+    });
+  }
+
+  protected override normalizeLayoutFromSource(source?: Partial<GridLayoutData>): GridLayoutV2 {
+    // 只有运行时读取当前展示布局时才应用折叠态可见字段覆盖；
+    // 带 source 的路径通常用于重算/持久化布局，必须始终基于完整字段集。
+    if (!source && this.readingFullLayoutForSettingsInteraction) {
+      return this.normalizeStoredFullLayout();
+    }
+
+    return this.normalizeFilterFormLayout(source, {
+      useVisibleItemUids: !source && !this.readingFullLayoutForSettingsInteraction,
+    });
+  }
+
+  getGridLayout(): GridLayoutV2 {
+    if (this.context.flowSettingsEnabled && this.normalizedItemUidsOverride) {
+      return this.normalizeStoredFullLayout();
+    }
+
+    return super.getGridLayout();
+  }
+
+  saveGridLayout(layout?: GridLayoutData | GridLayoutV2) {
+    super.saveGridLayout(layout);
+
+    if (this.context.flowSettingsEnabled && this.normalizedItemUidsOverride) {
+      const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
+      this.fullLayoutBeforeCollapse = normalizeGridLayout({
+        layout: params.layout ?? this.props.layout,
+        rows: params.rows ?? this.props.rows,
+        sizes: params.sizes ?? this.props.sizes,
+        rowOrder: params.rowOrder ?? this.props.rowOrder,
+        itemUids: this.getItemUids(),
+        gridUid: this.uid,
+        logger: console,
+      });
+    }
+  }
+
+  handleDragStart(event: Parameters<GridModel['handleDragStart']>[0]) {
+    this.readingFullLayoutForSettingsInteraction = Boolean(
+      this.context.flowSettingsEnabled && this.normalizedItemUidsOverride,
+    );
+    try {
+      super.handleDragStart(event);
+    } finally {
+      this.readingFullLayoutForSettingsInteraction = false;
+    }
+  }
+
+  private collectLayoutItemUids(rows: GridLayoutV2['rows']) {
+    const itemUids = new Set<string>();
+
+    const visitRows = (currentRows: GridLayoutV2['rows']) => {
+      currentRows.forEach((row) => {
+        row.cells.forEach((cell) => {
+          cell.items?.forEach((uid) => {
+            if (uid && this.flowEngine.getModel(uid)) {
+              itemUids.add(uid);
+            }
+          });
+
+          if (cell.rows?.length) {
+            visitRows(cell.rows);
+          }
+        });
+      });
+    };
+
+    visitRows(rows);
+
+    return Array.from(itemUids);
+  }
+
+  private getCellVisibleRowCount(cell: GridCellV2): number {
+    if (cell.rows?.length) {
+      return cell.rows.reduce((count, row) => count + this.getRowVisibleRowCount(row), 0);
+    }
+
+    return cell.items?.length || 0;
+  }
+
+  private getRowVisibleRowCount(row: GridRowV2): number {
+    return row.cells.reduce((count, cell) => Math.max(count, this.getCellVisibleRowCount(cell)), 0);
+  }
+
+  private limitCellByVisibleCount(cell: GridCellV2, visibleRows: number): GridCellV2 | null {
+    if (visibleRows <= 0) {
+      return null;
+    }
+
+    if (cell.rows?.length) {
+      const rows = this.limitLayoutRowsByVisibleCount(cell.rows, visibleRows);
+      return rows.length ? { id: cell.id, rows } : null;
+    }
+
+    if (cell.items) {
+      const items = cell.items.slice(0, visibleRows);
+      return items.length ? { id: cell.id, items } : null;
+    }
+
+    return null;
+  }
+
+  private limitRowByVisibleCount(row: GridRowV2, visibleRows: number): GridRowV2 | null {
+    const cellsWithSizes = row.cells
+      .map((cell, index) => {
+        const limitedCell = this.limitCellByVisibleCount(cell, visibleRows);
+        return limitedCell ? { cell: limitedCell, size: row.sizes?.[index] } : null;
+      })
+      .filter(Boolean) as { cell: GridCellV2; size?: number }[];
+
+    if (!cellsWithSizes.length) {
+      return null;
+    }
+
+    return {
+      id: row.id,
+      cells: cellsWithSizes.map((entry) => entry.cell),
+      sizes: cellsWithSizes.map((entry) => entry.size ?? 1),
+    };
+  }
+
+  private limitLayoutRowsByVisibleCount(rows: GridLayoutV2['rows'], visibleRows: number): GridLayoutV2['rows'] {
+    const limitedRows: GridLayoutV2['rows'] = [];
+    let remainingRows = visibleRows;
+
+    rows.forEach((row) => {
+      if (remainingRows <= 0) {
+        return;
+      }
+
+      const rowHeight = this.getRowVisibleRowCount(row);
+      const limitedRow = this.limitRowByVisibleCount(row, Math.min(rowHeight, remainingRows));
+      if (limitedRow) {
+        limitedRows.push(limitedRow);
+        remainingRows -= Math.min(rowHeight, remainingRows);
+      }
+    });
+
+    return limitedRows;
+  }
+
   /**
    * 获取筛选表单当前“完整布局”。
    * 折叠态会临时裁剪 props.rows，因此这里优先选取行数更多的那份布局，
@@ -71,8 +252,12 @@ export class FilterFormGridModel extends GridModel {
    */
   private getFullLayout() {
     const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
-    const currentLayout = this.props.layout ? this.getGridLayout() : undefined;
-    const savedLayout = params.layout ? this.normalizeLayoutFromSource(params) : undefined;
+    const currentLayout = this.props.layout
+      ? this.normalizeFilterFormLayout(undefined, { useVisibleItemUids: false })
+      : undefined;
+    const savedLayout = params.layout
+      ? this.normalizeFilterFormLayout(params, { useVisibleItemUids: false })
+      : undefined;
     const currentProjection = currentLayout
       ? projectLayoutToLegacyRows(currentLayout)
       : { rows: this.props.rows || {}, rowOrder: this.props.rowOrder };
@@ -103,41 +288,11 @@ export class FilterFormGridModel extends GridModel {
     };
   }
 
-  /**
-   * 按“可视字段行数”裁剪布局，而不是只按 grid row 数裁剪。
-   * 这样即使拖拽后多个字段被排进同一个 cell，也仍然可以正确折叠。
-   */
-  private limitRowsByVisibleCount(
-    rows: Record<string, string[][]>,
-    rowOrder: string[],
-    visibleRows: number,
-  ): Record<string, string[][]> {
-    const limitedRows: Record<string, string[][]> = {};
-    let remainingRows = visibleRows;
-
-    rowOrder.forEach((rowKey) => {
-      if (remainingRows <= 0 || !rows[rowKey]) {
-        return;
-      }
-
-      const cells = rows[rowKey];
-      const rowHeight = cells.reduce((max, cell) => Math.max(max, cell.length), 0);
-      const visibleCount = Math.min(rowHeight, remainingRows);
-      const nextCells = cells.map((cell) => cell.slice(0, visibleCount));
-
-      if (nextCells.some((cell) => cell.length > 0)) {
-        limitedRows[rowKey] = nextCells;
-        remainingRows -= visibleCount;
-      }
-    });
-
-    return limitedRows;
-  }
-
   toggleFormFieldsCollapse(collapse: boolean, visibleRows: number) {
     const { rows: fullRows, rowOrder, layout } = this.getFullLayout();
 
     if (!collapse) {
+      this.normalizedItemUidsOverride = undefined;
       const restoredLayout = this.fullLayoutBeforeCollapse || layout;
       if (restoredLayout) {
         this.syncLayoutProps(restoredLayout);
@@ -159,12 +314,21 @@ export class FilterFormGridModel extends GridModel {
         });
     }
 
-    const limitedRows = this.limitRowsByVisibleCount(fullRows, rowOrder, visibleRows);
+    const fullLayout =
+      layout ||
+      normalizeGridLayout({
+        rows: fullRows,
+        rowOrder,
+        itemUids: this.getItemUids(),
+      });
     const limitedLayout = normalizeGridLayout({
-      rows: limitedRows,
-      rowOrder,
+      layout: {
+        version: 2,
+        rows: this.limitLayoutRowsByVisibleCount(fullLayout.rows, visibleRows),
+      },
     });
 
+    this.normalizedItemUidsOverride = this.collectLayoutItemUids(limitedLayout.rows);
     this.syncLayoutProps(limitedLayout);
     this.setProps('rowOrder', rowOrder);
   }

package/src/flow/models/blocks/filter-form/__tests__/FilterFormGridModel.toggleFormFieldsCollapse.test.ts

@@ -8,7 +8,7 @@
  */
 
 import { beforeEach, describe, expect, it } from 'vitest';
-import { FlowEngine } from '@nocobase/flow-engine';
+import { FlowEngine, projectLayoutToLegacyRows } from '@nocobase/flow-engine';
 import '../../../../index';
 import { GRID_FLOW_KEY, GRID_STEP } from '../../../base';
 import { FilterFormGridModel } from '../FilterFormGridModel';
@@ -147,6 +147,71 @@ describe('FilterFormGridModel.toggleFormFieldsCollapse', () => {
     expect(model.props.layout.rows[0].cells[0].items).toEqual(['field-1', 'field-2', 'field-3']);
   });
 
+  it('keeps nested columns inside the first visible row when collapsing a v2 layout', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-nested-v2',
+      use: 'FilterFormGridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'first',
+              cells: [
+                {
+                  id: 'first-cell',
+                  rows: [
+                    {
+                      id: 'first-nested-row',
+                      cells: [
+                        { id: 'first-nested-cell-1', items: ['field-1'] },
+                        { id: 'first-nested-cell-2', items: ['field-2'] },
+                      ],
+                      sizes: [12, 12],
+                    },
+                  ],
+                },
+              ],
+              sizes: [24],
+            },
+            {
+              id: 'second',
+              cells: [{ id: 'second-cell', items: ['field-3'] }],
+              sizes: [24],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = {
+      items: [
+        engine.createModel({ use: 'FlowModel', uid: 'field-1' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-2' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-3' }),
+      ],
+    };
+
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, {
+      layout: model.props.layout,
+    });
+
+    model.toggleFormFieldsCollapse(true, 1);
+
+    const collapsedNestedRow = model.props.layout.rows[0].cells[0].rows?.[0];
+    expect(collapsedNestedRow?.cells.map((cell) => cell.items)).toEqual([['field-1'], ['field-2']]);
+    expect(collapsedNestedRow?.sizes).toEqual([12, 12]);
+    expect(model.props.layout.rows).toHaveLength(1);
+
+    model.toggleFormFieldsCollapse(false, 1);
+
+    expect(model.props.layout.rows).toHaveLength(2);
+    expect(model.props.layout.rows[0].cells[0].rows?.[0].cells.map((cell) => cell.items)).toEqual([
+      ['field-1'],
+      ['field-2'],
+    ]);
+  });
+
   it('restores the persisted full layout when current props rows were already truncated', () => {
     const model = engine.createModel<FilterFormGridModel>({
       uid: 'filter-grid-collapse-restore',
@@ -185,4 +250,208 @@ describe('FilterFormGridModel.toggleFormFieldsCollapse', () => {
     });
     expect(model.props.rowOrder).toEqual(['first', 'second', 'third']);
   });
+
+  it('does not reinsert collapsed items when the render layout is normalized again', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-visible-item-uids',
+      use: 'FilterFormGridModel',
+      props: {
+        rows: {
+          first: [['field-1']],
+          second: [['field-2']],
+          third: [['field-3']],
+        },
+        rowOrder: ['first', 'second', 'third'],
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = {
+      items: [
+        engine.createModel({ use: 'FlowModel', uid: 'field-1' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-2' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-3' }),
+      ],
+    };
+
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, {
+      rows: {
+        first: [['field-1']],
+        second: [['field-2']],
+        third: [['field-3']],
+      },
+      rowOrder: ['first', 'second', 'third'],
+    });
+
+    model.toggleFormFieldsCollapse(true, 1);
+
+    expect(projectLayoutToLegacyRows(model.getGridLayout()).rows).toEqual({
+      first: [['field-1']],
+    });
+
+    model.toggleFormFieldsCollapse(false, 1);
+
+    expect(projectLayoutToLegacyRows(model.getGridLayout()).rows).toEqual({
+      first: [['field-1']],
+      second: [['field-2']],
+      third: [['field-3']],
+    });
+  });
+
+  it('keeps the persisted layout intact when resetRows runs during collapsed mode', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-reset-rows',
+      use: 'FilterFormGridModel',
+      props: {
+        rows: {
+          first: [['field-1']],
+          second: [['field-2']],
+          third: [['field-3']],
+        },
+        rowOrder: ['first', 'second', 'third'],
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = {
+      items: [
+        engine.createModel({ use: 'FlowModel', uid: 'field-1' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-2' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-3' }),
+      ],
+    };
+
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, {
+      rows: {
+        first: [['field-1']],
+        second: [['field-2']],
+        third: [['field-3']],
+      },
+      rowOrder: ['first', 'second', 'third'],
+    });
+
+    model.toggleFormFieldsCollapse(true, 1);
+    model.resetRows(true);
+
+    const persistedLayout = model.getStepParams(GRID_FLOW_KEY, GRID_STEP).layout;
+    const persistedRows = projectLayoutToLegacyRows(persistedLayout).rows;
+    const persistedItems = Object.values(persistedRows).flat().flat().sort();
+    expect(persistedItems).toEqual(['field-1', 'field-2', 'field-3']);
+    expect(projectLayoutToLegacyRows(model.getGridLayout()).rows).toEqual({
+      first: [['field-1']],
+    });
+  });
+
+  it('uses the full layout for flow-settings layout reads during collapsed mode', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-settings-full-layout',
+      use: 'FilterFormGridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'first',
+              cells: [{ id: 'first-cell', items: ['field-1'] }],
+              sizes: [24],
+            },
+            {
+              id: 'second',
+              cells: [
+                { id: 'second-cell-1', items: ['field-2'] },
+                { id: 'second-cell-2', items: ['field-3'] },
+              ],
+              sizes: [12, 12],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = {
+      items: [
+        engine.createModel({ use: 'FlowModel', uid: 'field-1' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-2' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-3' }),
+      ],
+    };
+    (model.context as any).flowSettingsEnabled = true;
+
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, {
+      layout: model.props.layout,
+    });
+
+    model.toggleFormFieldsCollapse(true, 1);
+
+    expect(projectLayoutToLegacyRows((model as any).normalizeLayoutFromSource()).rows).toEqual({
+      first: [['field-1']],
+    });
+    expect(projectLayoutToLegacyRows(model.getGridLayout()).rows).toEqual({
+      first: [['field-1']],
+      second: [['field-2'], ['field-3']],
+    });
+
+    model.saveGridLayout(model.getGridLayout());
+
+    expect(projectLayoutToLegacyRows(model.getStepParams(GRID_FLOW_KEY, GRID_STEP).layout).rows).toEqual({
+      first: [['field-1']],
+      second: [['field-2'], ['field-3']],
+    });
+  });
+
+  it('restores the latest saved full layout after editing while collapsed in flow settings', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-settings-latest-layout',
+      use: 'FilterFormGridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'first',
+              cells: [{ id: 'first-cell', items: ['field-1'] }],
+              sizes: [24],
+            },
+            {
+              id: 'second',
+              cells: [{ id: 'second-cell', items: ['field-2'] }],
+              sizes: [24],
+            },
+          ],
+        },
+      },
+      structure: {} as any,
+    });
+    (model as any).subModels = {
+      items: [
+        engine.createModel({ use: 'FlowModel', uid: 'field-1' }),
+        engine.createModel({ use: 'FlowModel', uid: 'field-2' }),
+      ],
+    };
+    (model.context as any).flowSettingsEnabled = true;
+
+    model.setStepParams(GRID_FLOW_KEY, GRID_STEP, {
+      layout: model.props.layout,
+    });
+    model.toggleFormFieldsCollapse(true, 1);
+
+    const editedLayout = {
+      version: 2 as const,
+      rows: [
+        {
+          id: 'first',
+          cells: [
+            { id: 'first-cell-1', items: ['field-1'] },
+            { id: 'first-cell-2', items: ['field-2'] },
+          ],
+          sizes: [12, 12],
+        },
+      ],
+    };
+
+    model.saveGridLayout(editedLayout);
+    model.toggleFormFieldsCollapse(false, 1);
+
+    expect(projectLayoutToLegacyRows(model.props.layout).rows).toEqual({
+      first: [['field-1'], ['field-2']],
+    });
+  });
 });

package/src/flow/models/blocks/filter-form/__tests__/customFieldOperators.test.tsx

@@ -37,6 +37,8 @@ function createEngineWithCollections() {
     fields: [
       { name: 'id', type: 'integer', interface: 'number', filterable: { operators: [] } },
       { name: 'uid', type: 'string', interface: 'input', filterable: { operators: [] } },
+      { name: 'status', type: 'string', interface: 'select', filterable: { operators: [] } },
+      { name: 'tags', type: 'array', interface: 'multipleSelect', filterable: { operators: [] } },
       { name: 'createdAt', type: 'date', interface: 'datetime', filterable: { operators: [] } },
       {
         name: 'pluginInSource',
@@ -106,6 +108,27 @@ describe('custom field operators', () => {
     expect(checkboxGroupOps.some((item) => item.value === '$match')).toBe(true);
   });
 
+  it('uses multi-value scalar operators for multiple select custom fields bound to scalar source fields', () => {
+    const engine = createEngineWithCollections();
+
+    const scalarSourceOps = resolveCustomFieldOperatorList({
+      flowEngine: engine,
+      fieldModel: 'SelectFieldModel',
+      fieldModelProps: { mode: 'multiple' },
+      source: ['main', 'users', 'status'],
+    });
+    expect(scalarSourceOps[0]?.value).toBe('$in');
+    expect(scalarSourceOps.some((item) => item.value === '$match')).toBe(false);
+
+    const arraySourceOps = resolveCustomFieldOperatorList({
+      flowEngine: engine,
+      fieldModel: 'SelectFieldModel',
+      fieldModelProps: { mode: 'multiple' },
+      source: ['main', 'users', 'tags'],
+    });
+    expect(arraySourceOps[0]?.value).toBe('$match');
+  });
+
   it('resolves record select operators by value field and multiple mode', () => {
     const engine = createEngineWithCollections();
 

package/src/flow/models/blocks/filter-form/customFieldOperators.ts

@@ -8,6 +8,7 @@
  */
 
 import { operators } from '../../../../flow-compat';
+import { isArrayLikeField } from '../shared/filterOperators';
 
 type OperatorMeta = {
   label: string;
@@ -186,12 +187,22 @@ function resolveByModelOrSource(params: ResolveOperatorParams): { operatorList:
     return resolveByRecordSelect(params);
   }
 
+  const sourceField = getSourceField(flowEngine, source);
+  if (fieldModel === 'SelectFieldModel' && fieldModelProps?.mode === 'multiple' && sourceField) {
+    const sourceOperators = getFieldOperators(sourceField);
+    return {
+      operatorList: isArrayLikeField(sourceField)
+        ? getOperatorListByModel(fieldModel, fieldModelProps)
+        : toMultiValueOperators(sourceOperators),
+      meta: sourceField,
+    };
+  }
+
   const modelOperators = getOperatorListByModel(fieldModel, fieldModelProps);
   if (modelOperators.length > 0) {
     return { operatorList: modelOperators, meta: { fieldModel } };
   }
 
-  const sourceField = getSourceField(flowEngine, source);
   return {
     operatorList: getFieldOperators(sourceField),
     meta: sourceField,