@nocobase/client-v2 2.1.0-alpha.30 → 2.1.0-alpha.32

package/src/flow/models/base/PageModel/__tests__/RootPageModel.test.ts

@@ -12,10 +12,32 @@ import { RootPageModel } from '../RootPageModel';
 
 // Mock PageModel
 const mockPageModelSaveStepParams = vi.fn();
+const mockPageModelOpenFlowSettings = vi.fn();
 vi.mock('../PageModel', () => ({
   PageModel: class {
+    props: any = {};
+    stepParams: any = {};
+
     static registerFlow() {}
 
+    setProps(key: string, value: any) {
+      this.props[key] = value;
+    }
+
+    setStepParams(flowKey: string, stepKey: string, params: Record<string, any>) {
+      if (!this.stepParams[flowKey]) {
+        this.stepParams[flowKey] = {};
+      }
+      this.stepParams[flowKey][stepKey] = {
+        ...this.stepParams[flowKey][stepKey],
+        ...params,
+      };
+    }
+
+    async openFlowSettings(options?: any) {
+      return mockPageModelOpenFlowSettings(options);
+    }
+
     async saveStepParams() {
       return mockPageModelSaveStepParams();
     }
@@ -26,6 +48,7 @@ describe('RootPageModel', () => {
   let rootPageModel: RootPageModel;
   let mockContext: any;
   let mockApi: any;
+  let mockRefreshDesktopRoutes: any;
   let mockFlowEngine: any;
 
   beforeEach(() => {
@@ -35,6 +58,7 @@ describe('RootPageModel', () => {
     mockApi = {
       request: vi.fn().mockResolvedValue({ data: { success: true } }),
     };
+    mockRefreshDesktopRoutes = vi.fn().mockResolvedValue(undefined);
 
     // Mock FlowEngine
     mockFlowEngine = {
@@ -45,6 +69,11 @@ describe('RootPageModel', () => {
     // Mock context
     mockContext = {
       api: mockApi,
+      refreshDesktopRoutes: mockRefreshDesktopRoutes,
+      currentRoute: {
+        id: 'route-123',
+        enableTabs: true,
+      },
     };
 
     // Create RootPageModel instance
@@ -63,6 +92,65 @@ describe('RootPageModel', () => {
     };
   });
 
+  describe('openFlowSettings', () => {
+    it('should use desktop route enableTabs as settings dialog initial value', async () => {
+      mockContext.currentRoute.enableTabs = false;
+      (rootPageModel as any).stepParams = {
+        pageSettings: {
+          general: {
+            displayTitle: true,
+            enableTabs: true,
+          },
+        },
+      };
+
+      await rootPageModel.openFlowSettings({ flowKey: 'pageSettings', stepKey: 'general' } as any);
+
+      expect((rootPageModel as any).stepParams.pageSettings.general).toMatchObject({
+        displayTitle: true,
+        enableTabs: false,
+      });
+      expect(mockPageModelOpenFlowSettings).toHaveBeenCalledWith({
+        flowKey: 'pageSettings',
+        stepKey: 'general',
+      });
+    });
+
+    it('should keep flow model enableTabs when route status is unavailable', async () => {
+      mockContext.currentRoute = {};
+      (rootPageModel as any).stepParams = {
+        pageSettings: {
+          general: {
+            enableTabs: true,
+          },
+        },
+      };
+
+      await rootPageModel.openFlowSettings({ flowKey: 'pageSettings', stepKey: 'general' } as any);
+
+      expect((rootPageModel as any).stepParams.pageSettings.general.enableTabs).toBe(true);
+    });
+
+    it('should not sync enableTabs when opening other settings steps', async () => {
+      mockContext.currentRoute.enableTabs = false;
+      (rootPageModel as any).stepParams = {
+        pageSettings: {
+          general: {
+            enableTabs: true,
+          },
+        },
+      };
+
+      await rootPageModel.openFlowSettings({ flowKey: 'otherSettings', stepKey: 'general' } as any);
+
+      expect((rootPageModel as any).stepParams.pageSettings.general.enableTabs).toBe(true);
+      expect(mockPageModelOpenFlowSettings).toHaveBeenCalledWith({
+        flowKey: 'otherSettings',
+        stepKey: 'general',
+      });
+    });
+  });
+
   describe('saveStepParams', () => {
     it('should call parent saveStepParams method', async () => {
       await rootPageModel.saveStepParams();
@@ -89,6 +177,34 @@ describe('RootPageModel', () => {
         },
       });
     });
+
+    it('should refresh desktop routes after route update is persisted', async () => {
+      await rootPageModel.saveStepParams();
+
+      expect(mockApi.request).toHaveBeenCalledTimes(1);
+      expect(mockRefreshDesktopRoutes).toHaveBeenCalledTimes(1);
+      expect(mockApi.request.mock.invocationCallOrder[0]).toBeLessThan(
+        mockRefreshDesktopRoutes.mock.invocationCallOrder[0],
+      );
+    });
+
+    it('should apply enableTabs to current page immediately after route update is persisted', async () => {
+      (rootPageModel as any).stepParams = {
+        pageSettings: {
+          general: {
+            enableTabs: false,
+          },
+        },
+      };
+
+      await rootPageModel.saveStepParams();
+
+      expect(mockContext.currentRoute.enableTabs).toBe(false);
+      expect((rootPageModel as any).props.enableTabs).toBe(false);
+      expect(mockApi.request.mock.invocationCallOrder[0]).toBeLessThan(
+        mockRefreshDesktopRoutes.mock.invocationCallOrder[0],
+      );
+    });
   });
 
   describe('handleDragEnd', () => {

package/src/flow/models/base/__tests__/GridModel.dragSnapshotContainer.test.ts

@@ -283,4 +283,102 @@ describe('GridModel drag snapshot container', () => {
       type: 'column',
     });
   });
+
+  it('clears persisted drag overlay on init', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-hidden-stale-overlay',
+      props: {
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    expect(model.props.dragOverlayRect).toBeNull();
+  });
+
+  it('omits drag overlay rect from serialized props', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-serialize-overlay',
+      props: {
+        rowGap: 24,
+        dragOverlayRect: {
+          top: 10,
+          left: 20,
+          width: 100,
+          height: 40,
+          type: 'column',
+        },
+      },
+      structure: {} as any,
+    });
+
+    const serialized = model.serialize();
+
+    expect(serialized.props).toMatchObject({ rowGap: 24 });
+    expect(serialized.props).not.toHaveProperty('dragOverlayRect');
+  });
+
+  it('recomputes the final slot from drag end position before saving layout', () => {
+    const model = engine.createModel<GridModel>({
+      use: 'GridModel',
+      uid: 'grid-drag-final-slot',
+      props: {},
+      structure: {} as any,
+    });
+    const applyPreview = vi.fn((slot) => {
+      (model as any).dragState.previewLayout = slot
+        ? {
+            rows: { 'row-final': [['item-1']] },
+            sizes: { 'row-final': [24] },
+          }
+        : undefined;
+    });
+    const resolveDragSlot = vi.fn(() => ({
+      type: 'row-gap',
+      targetRowId: 'row-final',
+      position: 'below',
+      rect: { top: 200, left: 20, width: 440, height: 32 },
+    }));
+    const saveGridLayout = vi.fn();
+    const syncLayoutProps = vi.fn();
+    const finishDrag = vi.fn();
+
+    (model as any).applyPreview = applyPreview;
+    (model as any).resolveDragSlot = resolveDragSlot;
+    (model as any).saveGridLayout = saveGridLayout;
+    (model as any).syncLayoutProps = syncLayoutProps;
+    (model as any).finishDrag = finishDrag;
+    (model as any).dragState = {
+      sourceUid: 'item-1',
+      snapshot: { rows: {}, sizes: {} },
+      slots: [],
+      containerEl: null,
+      containerRect: { top: 0, left: 0, width: 0, height: 0 },
+      pointerOrigin: { x: 100, y: 100 },
+      activeSlotKey: null,
+      previewLayout: undefined,
+      refreshTimer: null,
+      generatedIds: new Map(),
+    };
+
+    model.handleDragEnd({
+      delta: { x: 30, y: 220 },
+    } as any);
+
+    expect(resolveDragSlot).toHaveBeenCalledWith({ x: 130, y: 320 });
+    expect(applyPreview).toHaveBeenCalledOnce();
+    expect(saveGridLayout).toHaveBeenCalledWith({
+      rows: { 'row-final': [['item-1']] },
+      sizes: { 'row-final': [24] },
+    });
+    expect(finishDrag).toHaveBeenCalledOnce();
+  });
 });

package/src/flow/models/blocks/details/DetailsItemModel.tsx

@@ -379,6 +379,9 @@ DetailsItemModel.registerFlow({
   steps: {
     aclCheckRefresh: {
       use: 'aclCheckRefresh',
+      defaultParams: {
+        strategy: 'formItem',
+      },
     },
   },
 });

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);
   }