@nocobase/client-v2 2.1.0-beta.23 → 2.1.0-beta.24

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

@@ -8,13 +8,22 @@
  */
 
 import { SettingOutlined } from '@ant-design/icons';
-import { AddSubModelButton, DragOverlayConfig, FlowSettingsButton, observable } from '@nocobase/flow-engine';
+import {
+  AddSubModelButton,
+  DragOverlayConfig,
+  FlowSettingsButton,
+  GridLayoutV2,
+  normalizeGridLayout,
+  observable,
+  projectLayoutToLegacyRows,
+} from '@nocobase/flow-engine';
 import React from 'react';
 import { CollectionBlockModel, GRID_FLOW_KEY, GRID_STEP, GridModel } from '../../base';
 import { getAllDataModels } from '../filter-manager/utils';
 import { FilterFormItemModel } from './FilterFormItemModel';
 
 export class FilterFormGridModel extends GridModel {
+  private fullLayoutBeforeCollapse?: GridLayoutV2;
   itemSettingsMenuLevel = 2;
   itemFlowSettings = {
     showBackground: true,
@@ -28,8 +37,8 @@ export class FilterFormGridModel extends GridModel {
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
-      before: { offsetTop: -12, height: 24 },
-      after: { offsetTop: 7, height: 24 },
+      before: { offsetTop: -6, height: 24 },
+      after: { offsetTop: 3, height: 24 },
     },
     // 列边缘
     columnEdge: {
@@ -38,8 +47,8 @@ export class FilterFormGridModel extends GridModel {
     },
     // 行间隙
     rowGap: {
-      above: { offsetTop: 0, height: 24 },
-      below: { offsetTop: -14, height: 24 },
+      above: { offsetTop: -2, height: 24 },
+      below: { offsetTop: -12, height: 24 },
     },
   };
 
@@ -62,8 +71,16 @@ export class FilterFormGridModel extends GridModel {
    */
   private getFullLayout() {
     const params = this.getStepParams(GRID_FLOW_KEY, GRID_STEP) || {};
-    const rawCurrentRows = (this.props.rows || {}) as Record<string, string[][]>;
-    const rawSavedRows = (params.rows || {}) as Record<string, string[][]>;
+    const currentLayout = this.props.layout ? this.getGridLayout() : undefined;
+    const savedLayout = params.layout ? this.normalizeLayoutFromSource(params) : undefined;
+    const currentProjection = currentLayout
+      ? projectLayoutToLegacyRows(currentLayout)
+      : { rows: this.props.rows || {}, rowOrder: this.props.rowOrder };
+    const savedProjection = savedLayout
+      ? projectLayoutToLegacyRows(savedLayout)
+      : { rows: params.rows || {}, rowOrder: params.rowOrder };
+    const rawCurrentRows = currentProjection.rows as Record<string, string[][]>;
+    const rawSavedRows = (savedProjection.rows || {}) as Record<string, string[][]>;
     const currentCount = Object.keys(rawCurrentRows).length;
     const savedCount = Object.keys(rawSavedRows).length;
     const getItemCount = (rows: Record<string, string[][]>) =>
@@ -77,10 +94,13 @@ export class FilterFormGridModel extends GridModel {
       currentCount > savedCount || (currentCount === savedCount && currentItemCount >= savedItemCount);
     const sourceRows = this.mergeRowsWithItems(useCurrentLayout ? rawCurrentRows : rawSavedRows);
     const sourceRowOrder = useCurrentLayout
-      ? this.props.rowOrder || params.rowOrder
-      : params.rowOrder || this.props.rowOrder;
+      ? currentProjection.rowOrder || this.props.rowOrder || params.rowOrder
+      : savedProjection.rowOrder || params.rowOrder || this.props.rowOrder;
 
-    return this.normalizeRowsWithOrder(sourceRows, sourceRowOrder);
+    return {
+      ...this.normalizeRowsWithOrder(sourceRows, sourceRowOrder),
+      layout: useCurrentLayout ? currentLayout : savedLayout,
+    };
   }
 
   /**
@@ -115,17 +135,37 @@ export class FilterFormGridModel extends GridModel {
   }
 
   toggleFormFieldsCollapse(collapse: boolean, visibleRows: number) {
-    const { rows: fullRows, rowOrder } = this.getFullLayout();
+    const { rows: fullRows, rowOrder, layout } = this.getFullLayout();
 
     if (!collapse) {
-      this.setProps('rows', fullRows);
-      this.setProps('rowOrder', rowOrder);
+      const restoredLayout = this.fullLayoutBeforeCollapse || layout;
+      if (restoredLayout) {
+        this.syncLayoutProps(restoredLayout);
+      } else {
+        this.setProps('rows', fullRows);
+        this.setProps('rowOrder', rowOrder);
+      }
+      this.fullLayoutBeforeCollapse = undefined;
       return;
     }
 
+    if (!this.fullLayoutBeforeCollapse) {
+      this.fullLayoutBeforeCollapse =
+        layout ||
+        normalizeGridLayout({
+          rows: fullRows,
+          rowOrder,
+          itemUids: this.getItemUids(),
+        });
+    }
+
     const limitedRows = this.limitRowsByVisibleCount(fullRows, rowOrder, visibleRows);
+    const limitedLayout = normalizeGridLayout({
+      rows: limitedRows,
+      rowOrder,
+    });
 
-    this.setProps('rows', limitedRows);
+    this.syncLayoutProps(limitedLayout);
     this.setProps('rowOrder', rowOrder);
   }
 

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

@@ -102,6 +102,51 @@ describe('FilterFormGridModel.toggleFormFieldsCollapse', () => {
     expect(model.props.rowOrder).toEqual(['first']);
   });
 
+  it('updates render layout when collapsing a v2 layout', () => {
+    const model = engine.createModel<FilterFormGridModel>({
+      uid: 'filter-grid-collapse-v2',
+      use: 'FilterFormGridModel',
+      props: {
+        layout: {
+          version: 2,
+          rows: [
+            {
+              id: 'first',
+              cells: [{ id: 'first-cell', items: ['field-1', 'field-2', '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);
+
+    expect(model.props.rows).toEqual({
+      first: [['field-1']],
+    });
+    expect(model.props.layout.rows[0].cells[0].items).toEqual(['field-1']);
+
+    model.toggleFormFieldsCollapse(false, 1);
+
+    expect(model.props.rows).toEqual({
+      first: [['field-1', 'field-2', 'field-3']],
+    });
+    expect(model.props.layout.rows[0].cells[0].items).toEqual(['field-1', 'field-2', 'field-3']);
+  });
+
   it('restores the persisted full layout when current props rows were already truncated', () => {
     const model = engine.createModel<FilterFormGridModel>({
       uid: 'filter-grid-collapse-restore',

package/src/flow/models/blocks/form/FormGridModel.tsx

@@ -8,12 +8,12 @@
  */
 
 import { SettingOutlined } from '@ant-design/icons';
-import { AddSubModelButton, FlowSettingsButton, DragOverlayConfig } from '@nocobase/flow-engine';
+import { AddSubModelButton, DragOverlayConfig, FlowSettingsButton } from '@nocobase/flow-engine';
+import { Skeleton } from 'antd';
 import React from 'react';
 import { FieldModel } from '../../base/FieldModel';
 import { GridModel } from '../../base/GridModel';
 import { FormBlockModel } from './FormBlockModel';
-import { Skeleton } from 'antd';
 
 export type DefaultFormGridStructure = {
   parent: FormBlockModel;
@@ -35,8 +35,8 @@ export class FormGridModel<T extends DefaultFormGridStructure = DefaultFormGridS
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
-      before: { offsetTop: -12, height: 24 },
-      after: { offsetTop: 7, height: 24 },
+      before: { offsetTop: -6, height: 24 },
+      after: { offsetTop: 3, height: 24 },
     },
     // 列边缘
     columnEdge: {
@@ -45,8 +45,8 @@ export class FormGridModel<T extends DefaultFormGridStructure = DefaultFormGridS
     },
     // 行间隙
     rowGap: {
-      above: { offsetTop: 0, height: 24 },
-      below: { offsetTop: -14, height: 24 },
+      above: { offsetTop: -2, height: 24 },
+      below: { offsetTop: -12, height: 24 },
     },
   };
   renderAddSubModelButton() {