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

package/src/flow/models/base/PageModel/RootPageModel.tsx

@@ -17,6 +17,31 @@ import { PageModel } from './PageModel';
 export class RootPageModel extends PageModel {
   mounted = false;
 
+  /**
+   * 打开页面设置前，把标签页开关表单值同步为路由表中的当前状态。
+   */
+  private syncPageSettingsEnableTabsFromRoute() {
+    const routeEnableTabs = (this.context as any)?.currentRoute?.enableTabs;
+    if (typeof routeEnableTabs !== 'boolean') {
+      return;
+    }
+    this.setStepParams('pageSettings', 'general', {
+      enableTabs: routeEnableTabs,
+    });
+  }
+
+  /**
+   * 保存页面设置后立即同步当前页面状态，让标签页显隐无需等路由列表刷新或页面重载。
+   */
+  private syncEnableTabsToCurrentPage(enableTabs: boolean) {
+    const currentRoute = (this.context as any)?.currentRoute;
+    const routeId = this.props.routeId;
+    if (currentRoute && (routeId == null || currentRoute.id == null || String(currentRoute.id) === String(routeId))) {
+      currentRoute.enableTabs = enableTabs;
+    }
+    this.setProps('enableTabs', enableTabs);
+  }
+
   /**
    * 新建 tab 在首次保存完成前，前端 route 里可能还没有数据库 id。
    * 拖拽前兜底触发一次保存，确保 move 接口拿到真实主键。
@@ -65,18 +90,28 @@ export class RootPageModel extends PageModel {
     );
   }
 
+  async openFlowSettings(options?: Parameters<PageModel['openFlowSettings']>[0]) {
+    if (options?.flowKey === 'pageSettings' && options?.stepKey === 'general') {
+      this.syncPageSettingsEnableTabsFromRoute();
+    }
+    return super.openFlowSettings(options);
+  }
+
   async saveStepParams() {
     await super.saveStepParams();
 
     if (this.stepParams.pageSettings) {
+      const enableTabs = !!this.stepParams.pageSettings.general.enableTabs;
       // 更新路由
-      this.context.api.request({
+      await this.context.api.request({
         url: `desktopRoutes:update?filter[id]=${this.props.routeId}`,
         method: 'post',
         data: {
-          enableTabs: !!this.stepParams.pageSettings.general.enableTabs,
+          enableTabs,
         },
       });
+      this.syncEnableTabsToCurrentPage(enableTabs);
+      await this.context.refreshDesktopRoutes?.();
     }
   }
 

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

@@ -412,6 +412,7 @@ describe('PageModel', () => {
   describe('render header spacing with tabs', () => {
     it('should compact page header bottom spacing when tabs are enabled', () => {
       pageModel.props = {
+        routeId: 'route-1',
         displayTitle: true,
         enableTabs: true,
         title: 'Title',
@@ -430,6 +431,7 @@ describe('PageModel', () => {
 
     it('should keep original header style when tabs are disabled', () => {
       pageModel.props = {
+        routeId: 'route-1',
         displayTitle: true,
         enableTabs: false,
         title: 'Title',
@@ -442,6 +444,57 @@ describe('PageModel', () => {
 
       expect(header.props.style).toEqual({ backgroundColor: 'var(--colorBgLayout)' });
     });
+
+    it('should use desktop route enableTabs=false before flow model props', () => {
+      pageModel.props = {
+        routeId: 'route-1',
+        displayTitle: true,
+        enableTabs: true,
+        title: 'Title',
+        headerStyle: { backgroundColor: 'var(--colorBgLayout)' },
+      } as any;
+      (pageModel as any).context = {
+        currentRoute: {
+          enableTabs: false,
+        },
+      };
+      pageModel.renderTabs = vi.fn(() => null);
+      pageModel.renderFirstTab = vi.fn(() => null);
+
+      const result = pageModel.render() as any;
+      const header = result.props.children[0];
+
+      expect(pageModel.renderTabs).not.toHaveBeenCalled();
+      expect(pageModel.renderFirstTab).toHaveBeenCalled();
+      expect(header.props.style).toEqual({ backgroundColor: 'var(--colorBgLayout)' });
+    });
+
+    it('should use desktop route enableTabs=true before flow model props', () => {
+      pageModel.props = {
+        routeId: 'route-1',
+        displayTitle: true,
+        enableTabs: false,
+        title: 'Title',
+        headerStyle: { backgroundColor: 'var(--colorBgLayout)' },
+      } as any;
+      (pageModel as any).context = {
+        currentRoute: {
+          enableTabs: true,
+        },
+      };
+      pageModel.renderTabs = vi.fn(() => null);
+      pageModel.renderFirstTab = vi.fn(() => null);
+
+      const result = pageModel.render() as any;
+      const header = result.props.children[0];
+
+      expect(pageModel.renderTabs).toHaveBeenCalled();
+      expect(pageModel.renderFirstTab).not.toHaveBeenCalled();
+      expect(header.props.style).toMatchObject({
+        backgroundColor: 'var(--colorBgLayout)',
+        paddingBottom: 0,
+      });
+    });
   });
 
   describe('dirty refresh signal', () => {
@@ -574,6 +627,26 @@ describe('PageModel', () => {
       expect(document.title).toBe('Resolved tab doc title');
     });
 
+    it('should use page documentTitle when desktop route disables tabs even if flow model enables tabs', async () => {
+      pageModel.props = { routeId: 'route-1', enableTabs: true, title: 'Route page title' } as any;
+      (pageModel as any).context.currentRoute = {
+        enableTabs: false,
+      };
+      (pageModel as any).stepParams = {
+        pageSettings: {
+          general: {
+            documentTitle: 'Route page doc title',
+          },
+        },
+      };
+      (pageModel as any).context.resolveJsonTemplate = vi.fn(async () => 'Resolved route page doc title');
+
+      await (pageModel as any).updateDocumentTitle();
+
+      expect((pageModel as any).context.resolveJsonTemplate).toHaveBeenCalledWith('Route page doc title');
+      expect(document.title).toBe('Resolved route page doc title');
+    });
+
     it('should fallback to tab title when active tab documentTitle is empty', async () => {
       pageModel.props = { enableTabs: true } as any;
       const activeTab = {

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