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

package/src/flow/models/actions/DisassociateActionModel.tsx

@@ -0,0 +1,57 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { tExpr } from '@nocobase/flow-engine';
+import type { ButtonProps } from 'antd';
+import { ActionModel, ActionSceneEnum } from '../base';
+import { applyDisassociateAction, isAssociationBlockContext } from './AssociationActionUtils';
+
+export class DisassociateActionModel extends ActionModel {
+  static scene = ActionSceneEnum.record;
+  static capabilityActionName = 'update';
+
+  defaultProps: ButtonProps = {
+    type: 'link',
+    title: tExpr('Disassociate'),
+    icon: 'DisconnectOutlined',
+  };
+
+  getAclActionName() {
+    return 'update';
+  }
+}
+
+DisassociateActionModel.define({
+  label: tExpr('Disassociate'),
+  sort: 65,
+  hide(ctx) {
+    return !isAssociationBlockContext(ctx);
+  },
+});
+
+DisassociateActionModel.registerFlow({
+  key: 'disassociateSettings',
+  title: tExpr('Disassociate settings'),
+  on: 'click',
+  steps: {
+    confirm: {
+      use: 'confirm',
+      defaultParams: {
+        enable: true,
+        title: tExpr('Disassociate record'),
+        content: tExpr('Are you sure you want to disassociate it?'),
+      },
+    },
+    disassociate: {
+      async handler(ctx) {
+        await applyDisassociateAction(ctx);
+      },
+    },
+  },
+});

package/src/flow/models/actions/FilterActionModel.tsx

@@ -8,6 +8,7 @@
  */
 
 import { tExpr, MobilePopup, MultiRecordResource, useFlowSettingsContext } from '@nocobase/flow-engine';
+import type { CollectionFieldInterfaceDataSourceManager } from '@nocobase/flow-engine';
 import { isEmptyFilter, transformFilter } from '@nocobase/utils/client';
 import { ButtonProps, Popover, Transfer } from 'antd';
 import React from 'react';
@@ -15,6 +16,7 @@ import { FilterGroup, VariableFilterItem } from '../../components/filter';
 import { ActionModel, CollectionBlockModel } from '../base';
 import { FilterContainer } from '../../components/filter/FilterContainer';
 import _ from 'lodash';
+import { getFlowFieldInterfaceOptions } from '../../../flow-compat';
 
 export class FilterActionModel extends ActionModel {
   static scene = 'collection';
@@ -135,9 +137,11 @@ FilterActionModel.registerFlow({
           'x-component': (props) => {
             // eslint-disable-next-line react-hooks/rules-of-hooks
             const { model } = useFlowSettingsContext();
-            const dm = model?.context?.app?.dataSourceManager;
-            const fiMgr = dm?.collectionFieldInterfaceManager;
-            const filterable = getFilterableFields(model.context.blockModel.collection, fiMgr);
+            const filterable = getFilterableFields(
+              model.context.blockModel.collection,
+              model.context.dataSourceManager,
+              model.context.app?.dataSourceManager,
+            );
             const dataSource = filterable.map((field: any) => ({ key: field.name, title: field.title }));
             return (
               <Transfer
@@ -157,9 +161,11 @@ FilterActionModel.registerFlow({
       },
       defaultParams(ctx) {
         // 默认仅包含“可筛选”的字段（与 1.0 一致），以避免 JSON 等未提供 operators 的字段出现在默认允许集合中
-        const dm = ctx?.model?.context?.app?.dataSourceManager;
-        const fiMgr = dm?.collectionFieldInterfaceManager;
-        const names = getFilterableFields(ctx.blockModel.collection, fiMgr).map((field: any) => field.name);
+        const names = getFilterableFields(
+          ctx.blockModel.collection,
+          ctx.model?.context?.dataSourceManager,
+          ctx.model?.context?.app?.dataSourceManager,
+        ).map((field: any) => field.name);
         return {
           filterableFieldNames: names || [],
         };
@@ -304,13 +310,15 @@ FilterActionModel.registerFlow({
   },
 });
 
-function getFilterableFields(collection: any, fiMgr: any) {
+function getFilterableFields(
+  collection: any,
+  ...dataSourceManagers: Array<CollectionFieldInterfaceDataSourceManager | null | undefined>
+) {
   const fields = collection?.getFields?.() || [];
-  if (!fiMgr) return [];
   return fields.filter((field: any) => {
     if (!field?.interface) return false;
     if (field?.filterable === false) return false;
-    const fi = fiMgr.getFieldInterface(field.interface);
+    const fi = getFlowFieldInterfaceOptions(field.interface, ...dataSourceManagers);
     return !!fi?.filterable;
   });
 }

package/src/flow/models/actions/__tests__/AssociationActionModel.test.ts

@@ -0,0 +1,250 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { BaseRecordResource, FlowEngine } from '@nocobase/flow-engine';
+import {
+  applyDisassociateAction,
+  ActionModel,
+  applyAssociateAction,
+  AssociateActionModel,
+  CollectionActionGroupModel,
+  DisassociateActionModel,
+  getAssociationTargetResourceSettings,
+  PopupActionModel,
+  RecordActionGroupModel,
+} from '../../..';
+
+class TestAssociationResource<T = any> extends BaseRecordResource<T> {
+  async refresh(): Promise<void> {}
+}
+
+const createEngine = () => {
+  const engine = new FlowEngine();
+  engine.registerModels({
+    ActionModel,
+    AssociateActionModel,
+    DisassociateActionModel,
+    PopupActionModel,
+    CollectionActionGroupModel,
+    RecordActionGroupModel,
+  });
+  return engine;
+};
+
+const createContext = (engine: FlowEngine, resourceSettingsInit: any) => {
+  const collection = {
+    options: {
+      availableActions: ['list', 'update'],
+    },
+    getFilterByTK: vi.fn((record) => record.id),
+  };
+  return {
+    engine,
+    collection,
+    blockModel: {
+      collection,
+      getResourceSettingsInitParams: () => resourceSettingsInit,
+    },
+  } as any;
+};
+
+describe('association action models', () => {
+  it('uses update permission for association operations', () => {
+    expect(AssociateActionModel.prototype.getAclActionName.call({})).toBe('update');
+    expect(DisassociateActionModel.prototype.getAclActionName.call({})).toBe('update');
+    expect(AssociateActionModel.capabilityActionName).toBe('update');
+    expect(DisassociateActionModel.capabilityActionName).toBe('update');
+  });
+
+  it('uses association target collection for selector table blocks', () => {
+    const ctx: any = {
+      blockModel: {
+        association: {
+          target: 'transports',
+          targetCollection: {
+            name: 'transports',
+            dataSourceKey: 'main',
+          },
+        },
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.transports',
+        }),
+      },
+    };
+
+    expect(getAssociationTargetResourceSettings(ctx)).toEqual({
+      dataSourceKey: 'main',
+      collectionName: 'transports',
+    });
+  });
+
+  it('shows Associate only in collection actions of association blocks', async () => {
+    const engine = createEngine();
+
+    const relationItems = await CollectionActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+        associationName: 'products.o2m_orders',
+      }),
+    );
+    const normalItems = await CollectionActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+      }),
+    );
+
+    expect(relationItems.map((item: any) => item.useModel)).toContain('AssociateActionModel');
+    expect(relationItems.map((item: any) => item.useModel)).not.toContain('DisassociateActionModel');
+    expect(normalItems.map((item: any) => item.useModel)).not.toContain('AssociateActionModel');
+  });
+
+  it('shows Disassociate only in record actions of association blocks', async () => {
+    const engine = createEngine();
+
+    const relationItems = await RecordActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+        associationName: 'products.o2m_orders',
+      }),
+    );
+    const normalItems = await RecordActionGroupModel.defineChildren(
+      createContext(engine, {
+        dataSourceKey: 'main',
+        collectionName: 'orders',
+      }),
+    );
+
+    expect(relationItems.map((item: any) => item.useModel)).toContain('DisassociateActionModel');
+    expect(relationItems.map((item: any) => item.useModel)).not.toContain('AssociateActionModel');
+    expect(normalItems.map((item: any) => item.useModel)).not.toContain('DisassociateActionModel');
+  });
+
+  it('disassociates the current record through association resource remove action', async () => {
+    const resource = {
+      runAction: vi.fn(async () => ({})),
+      refresh: vi.fn(async () => {}),
+    };
+    const collection = {
+      getFilterByTK: vi.fn(() => 12),
+    };
+    const ctx: any = {
+      blockModel: {
+        collection,
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+        }),
+      },
+      record: {
+        id: 12,
+      },
+      message: {
+        success: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyDisassociateAction(ctx);
+
+    expect(collection.getFilterByTK).toHaveBeenCalledWith(ctx.record);
+    expect(resource.runAction).toHaveBeenCalledWith('remove', {
+      data: [12],
+    });
+    expect(resource.refresh).toHaveBeenCalled();
+    expect(ctx.message.success).toHaveBeenCalledWith('Record disassociated successfully');
+  });
+
+  it('associates selected records through association resource add action', async () => {
+    const resource = {
+      runAction: vi.fn(async () => ({})),
+      refresh: vi.fn(async () => {}),
+    };
+    const collection = {
+      getFilterByTK: vi.fn((record) => record.id),
+    };
+    const ctx: any = {
+      blockModel: {
+        collection,
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+        }),
+      },
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyAssociateAction(ctx, [{ id: 11 }, { id: 12 }]);
+
+    expect(collection.getFilterByTK).toHaveBeenCalledWith({ id: 11 });
+    expect(collection.getFilterByTK).toHaveBeenCalledWith({ id: 12 });
+    expect(resource.runAction).toHaveBeenCalledWith('add', {
+      data: [11, 12],
+    });
+    expect(resource.refresh).toHaveBeenCalled();
+    expect(ctx.message.success).toHaveBeenCalledWith('Record associated successfully');
+  });
+
+  it('uses nested association resource url when adding associated records', async () => {
+    const engine = createEngine();
+    const resource = engine.createResource(TestAssociationResource);
+    const api = {
+      request: vi.fn().mockResolvedValue({ data: { data: {} } }),
+    };
+    resource.setAPIClient(api as any);
+    resource.setResourceName('products.o2m_orders');
+    resource.setSourceId('362872646860800');
+
+    const ctx: any = {
+      blockModel: {
+        collection: {
+          getFilterByTK: vi.fn((record) => record.id),
+        },
+        resource,
+        getResourceSettingsInitParams: () => ({
+          dataSourceKey: 'main',
+          collectionName: 'orders',
+          associationName: 'products.o2m_orders',
+          sourceId: '362872646860800',
+        }),
+      },
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+
+    await applyAssociateAction(ctx, [{ id: 11 }]);
+
+    expect(api.request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        method: 'post',
+        url: 'products/362872646860800/o2m_orders:add',
+        data: [11],
+      }),
+    );
+  });
+});

package/src/flow/models/actions/index.ts

@@ -8,8 +8,11 @@
  */
 
 export * from './AddNewActionModel';
+export * from './AssociateActionModel';
+export * from './AssociationActionUtils';
 export * from './BulkDeleteActionModel';
 export * from './DeleteActionModel';
+export * from './DisassociateActionModel';
 export * from './EditActionModel';
 export * from './FilterActionModel';
 export * from './JSActionModel';

package/src/flow/models/base/GridModel.tsx

@@ -118,6 +118,14 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
   private dragState?: DragState;
   private _memoItemFlowSettings?: Exclude<FlowModelRendererProps['showFlowSettings'], boolean>;
 
+  onInit(options) {
+    super.onInit(options);
+    // 历史数据里可能残留拖拽高亮框，初始化时立即清理，避免刷新页面后常驻显示。
+    if (this.props.dragOverlayRect) {
+      this.setProps('dragOverlayRect', null);
+    }
+  }
+
   private updateDragPointerPosition = (event: Event) => {
     if (!this.dragState) {
       return;
@@ -243,6 +251,12 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     return this.normalizeLayoutFromSource();
   }
 
+  serialize(): Record<string, any> {
+    const data = super.serialize();
+    data.props = _.omit(data.props, ['dragOverlayRect']);
+    return data;
+  }
+
   syncLayoutProps(layout: GridLayoutV2) {
     const projection = projectLayoutToLegacyRows(layout);
     this.setProps('layout', layout);
@@ -801,11 +815,17 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     this.setProps('dragOverlayRect', null);
   }
 
-  handleDragEnd(_event: DragEndEvent) {
+  handleDragEnd(event: DragEndEvent) {
     if (!this.dragState) {
       return;
     }
 
+    const finalPoint = this.computePointerPosition(event);
+    if (finalPoint) {
+      const finalSlot = this.resolveDragSlot(finalPoint);
+      this.applyPreview(finalSlot);
+    }
+
     const previewLayout = this.dragState.previewLayout;
     if (previewLayout) {
       if (previewLayout.layout) {

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

@@ -49,6 +49,17 @@ export class PageModel extends FlowModel<PageModelStructure> {
   private unmounted = false;
   private documentTitleUpdateVersion = 0;
 
+  /**
+   * 根页面标签页开关以路由表为准，避免 flow model 里的旧配置覆盖路由管理设置。
+   */
+  private getEnableTabs(): boolean {
+    const routeEnableTabs = (this.context as any)?.currentRoute?.enableTabs;
+    if (this.props.routeId != null && typeof routeEnableTabs === 'boolean') {
+      return routeEnableTabs;
+    }
+    return !!this.props.enableTabs;
+  }
+
   private getActiveTabKey(): string | undefined {
     const viewParams = this.context.view?.navigation?.viewParams;
     if (viewParams) {
@@ -193,7 +204,7 @@ export class PageModel extends FlowModel<PageModelStructure> {
     };
 
     let nextTitle = '';
-    if (this.props.enableTabs) {
+    if (this.getEnableTabs()) {
       const activeTabKey = preferredActiveTabKey || this.getActiveTabKey();
       const activeTabModel = activeTabKey
         ? (this.flowEngine.getModel(activeTabKey) as BasePageTabModel | undefined)
@@ -356,13 +367,14 @@ export class PageModel extends FlowModel<PageModelStructure> {
       headerStyle.paddingBlock = token.paddingSM;
       headerStyle.paddingInline = token.paddingLG;
     }
-    if (this.props.enableTabs) {
+    const enableTabs = this.getEnableTabs();
+    if (enableTabs) {
       headerStyle.paddingBottom = 0;
     }
     return (
       <>
         {this.props.displayTitle && <PageHeader title={this.props.title} style={headerStyle} />}
-        {this.props.enableTabs ? this.renderTabs() : this.renderFirstTab()}
+        {enableTabs ? this.renderTabs() : this.renderFirstTab()}
       </>
     );
   }

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 = {