@nocobase/client-v2 2.1.0-alpha.3 → 2.1.0-alpha.31

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

@@ -0,0 +1,259 @@
+/**
+ * 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 { FlowModel, FlowModelRenderer, observable, tExpr } from '@nocobase/flow-engine';
+import { Icon, type NocoBaseDesktopRoute } from '../../../../flow-compat';
+import { useRequest } from 'ahooks';
+import React from 'react';
+import { SkeletonFallback } from '../../../components/SkeletonFallback';
+import { TextAreaWithContextSelector } from '../../../components/TextAreaWithContextSelector';
+import { BlockGridModel } from '../BlockGridModel';
+
+function PageTabChildrenRenderer({ ctx, options }) {
+  const { data, loading } = useRequest(
+    async () => {
+      const model: FlowModel = await ctx.engine.loadOrCreateModel(options, { skipSave: !ctx.flowSettingsEnabled });
+      model.context.addDelegate(ctx);
+      return model;
+    },
+    {
+      refreshDeps: [ctx.model.uid],
+    },
+  );
+  const margin = ctx?.isMobileLayout ? 8 : ctx?.themeToken.marginBlock;
+  if (loading || !data?.uid) {
+    return <SkeletonFallback style={{ margin }} />;
+  }
+  return <FlowModelRenderer model={data} fallback={<SkeletonFallback style={{ margin }} />} />;
+}
+
+/**
+ * 统一归一化 `desktopRoutes:updateOrCreate` 的返回值。
+ *
+ * 该接口在 create/update 场景下可能分别返回对象或数组，
+ * 这里始终抽出第一条 route 记录，便于把持久化 id 回填到前端模型。
+ *
+ * @param payload - 接口返回的 data 节点
+ * @returns 可用于回填的 route 记录
+ */
+function normalizePersistedRoute(payload: unknown): Partial<NocoBaseDesktopRoute> | undefined {
+  if (Array.isArray(payload)) {
+    return payload.find((item): item is Partial<NocoBaseDesktopRoute> => !!item && typeof item === 'object');
+  }
+  if (payload && typeof payload === 'object') {
+    return payload as Partial<NocoBaseDesktopRoute>;
+  }
+  return undefined;
+}
+
+export class BasePageTabModel extends FlowModel<{
+  subModels: {
+    grid: BlockGridModel;
+  };
+}> {
+  onInit(options) {
+    super.onInit(options);
+    this.context.defineProperty('tabActive', {
+      value: observable.ref(true), // TODO: 默认值应该是 false，且需要在 onMount 中设置为 true。但现在 onMount 有 BUG，会在每次切换 tab 时触发
+      info: {
+        description: 'Whether current tab is active (observable.ref).',
+        detail: 'observable.ref<boolean>',
+      },
+    });
+  }
+
+  getTabTitle(defaultTitle = 'Untitled') {
+    const translatedDefaultTitle = this.context.t(defaultTitle, { ns: 'client' });
+    const translatedTitle = this.context.t(this.stepParams.pageTabSettings?.tab?.title, { ns: 'lm-desktop-routes' });
+    return translatedTitle || translatedDefaultTitle;
+  }
+
+  getTabIcon() {
+    return this.stepParams.pageTabSettings?.tab?.icon;
+  }
+
+  renderChildren() {
+    return null;
+  }
+
+  renderHiddenInConfig() {
+    return (
+      <span style={{ display: 'inline-block', opacity: 0.5 }}>
+        <Icon style={{ marginRight: 8 }} type={this.getTabIcon()} />
+        {this.getTabTitle()}
+      </span>
+    );
+  }
+
+  render() {
+    return (
+      <span style={{ display: 'inline-block' }}>
+        <Icon style={{ marginRight: 8 }} type={this.getTabIcon()} />
+        {this.getTabTitle()}
+      </span>
+    );
+  }
+}
+
+BasePageTabModel.registerFlow({
+  key: 'pageTabSettings',
+  title: tExpr('Tab settings'),
+  steps: {
+    tab: {
+      title: tExpr('Edit tab'),
+      preset: true,
+      uiSchema: {
+        title: {
+          title: tExpr('Tab name'),
+          'x-component': 'Input',
+          'x-decorator': 'FormItem',
+          required: true,
+        },
+        documentTitle: {
+          type: 'string',
+          title: tExpr('Document title'),
+          description: tExpr(
+            'Used as the browser tab title when this tab is active. Supports variables. Leave empty to use Tab name.',
+          ),
+          'x-decorator': 'FormItem',
+          'x-component': TextAreaWithContextSelector,
+          'x-component-props': {
+            rows: 1,
+            maxRows: 6,
+          },
+        },
+        icon: {
+          title: tExpr('Icon'),
+          'x-decorator': 'FormItem',
+          'x-component': 'IconPicker',
+        },
+      },
+      async handler(ctx, params) {
+        const translate = typeof ctx?.t === 'function' ? ctx.t.bind(ctx) : (value: string) => value;
+        ctx.model.setProps('title', translate(params.title, { ns: 'lm-desktop-routes' }));
+        ctx.model.setProps('icon', params.icon);
+        const pageModel = ctx.engine.getModel(ctx.model.parentId) as { updateDocumentTitle?: () => Promise<void> };
+        void pageModel?.updateDocumentTitle?.();
+      },
+    },
+  },
+});
+
+export class RootPageTabModel extends BasePageTabModel {
+  renderChildren() {
+    return (
+      <PageTabChildrenRenderer
+        ctx={this.context}
+        options={{
+          parentId: this.uid,
+          subKey: 'grid',
+          async: true,
+          subType: 'object',
+          use: 'BlockGridModel',
+        }}
+      />
+    );
+  }
+
+  async saveStepParams() {
+    return this.save();
+  }
+
+  async save() {
+    const json = this.serialize();
+    const documentTitle = this.stepParams?.pageTabSettings?.tab?.documentTitle;
+    const response = await this.context.api.request({
+      method: 'post',
+      url: 'desktopRoutes:updateOrCreate',
+      params: {
+        filterKeys: ['schemaUid'],
+      },
+      data: {
+        ...this.props.route,
+        title: this.getTabTitle(''),
+        icon: this.getTabIcon(),
+        options: {
+          flowRegistry: json.flowRegistry,
+          documentTitle,
+        },
+      },
+    });
+    const persistedRoute = normalizePersistedRoute(response?.data?.data);
+
+    // 新建 tab 首次保存后需要立即拿到持久化 route id，拖拽排序会直接依赖它。
+    if (persistedRoute) {
+      this.setProps('route', {
+        ...this.props.route,
+        ...persistedRoute,
+        options: {
+          ...this.props.route?.options,
+          ...persistedRoute.options,
+        },
+      });
+    }
+  }
+
+  async destroy() {
+    this.observerDispose();
+    this.invalidateFlowCache('beforeRender', true);
+    this.flowEngine.removeModel(this.uid);
+    await this.context.api.request({
+      method: 'post',
+      url: 'desktopRoutes:destroy',
+      params: {
+        filter: {
+          schemaUid: this.uid,
+        },
+      },
+      data: this.props.route,
+    });
+    return true;
+  }
+}
+
+export class ChildPageTabModel extends BasePageTabModel {
+  renderChildren() {
+    return (
+      <PageTabChildrenRenderer
+        ctx={this.context}
+        options={{
+          parentId: this.uid,
+          subKey: 'grid',
+          async: true,
+          subType: 'object',
+          use: 'BlockGridModel',
+        }}
+      />
+    );
+  }
+}
+
+/**
+ * @deprecated Use `BasePageTabModel` instead.
+ */
+export class PageTabModel extends FlowModel<{
+  subModels: {
+    grid: BlockGridModel;
+  };
+}> {
+  render() {
+    return (
+      <PageTabChildrenRenderer
+        ctx={this.context}
+        options={{
+          parentId: this.uid,
+          subKey: 'grid',
+          async: true,
+          subType: 'object',
+          use: 'BlockGridModel',
+        }}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,161 @@
+/**
+ * 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 { DragEndEvent } from '@dnd-kit/core';
+import { reaction } from '@nocobase/flow-engine';
+import type { FlowModel } from '@nocobase/flow-engine';
+import type { NocoBaseDesktopRoute } from '../../../../flow-compat';
+import _ from 'lodash';
+import { PageModel } from './PageModel';
+
+export class RootPageModel extends PageModel {
+  mounted = false;
+
+  /**
+   * 新建 tab 在首次保存完成前，前端 route 里可能还没有数据库 id。
+   * 拖拽前兜底触发一次保存，确保 move 接口拿到真实主键。
+   *
+   * @param model - 当前参与拖拽的 tab model
+   * @returns 可用于排序接口的 route id
+   */
+  private async ensurePersistedRouteId(model?: FlowModel): Promise<string | number | undefined> {
+    const routeId = model?.props?.route?.id;
+    if (routeId != null) {
+      return routeId;
+    }
+
+    if (typeof model?.save === 'function') {
+      await model.save();
+    }
+
+    return model?.props?.route?.id;
+  }
+
+  onMount() {
+    super.onMount();
+
+    reaction(
+      () => this.context.pageActive.value,
+      () => {
+        if (this.context.pageActive.value && this.mounted) {
+          const firstTab = this.subModels.tabs?.[0];
+          if (firstTab) {
+            this.setProps('tabActiveKey', firstTab.uid);
+            this.invokeTabModelLifecycleMethod(firstTab.uid, 'onActive', true);
+          }
+        }
+        if (this.context.pageActive.value === false) {
+          if (this.props.tabActiveKey) {
+            this.invokeTabModelLifecycleMethod(this.props.tabActiveKey, 'onInactive');
+          } else {
+            const firstTab = this.subModels.tabs?.[0];
+            if (firstTab) {
+              this.invokeTabModelLifecycleMethod(firstTab.uid, 'onInactive');
+            }
+          }
+        }
+        this.mounted = true;
+      },
+    );
+  }
+
+  async saveStepParams() {
+    await super.saveStepParams();
+
+    if (this.stepParams.pageSettings) {
+      // 更新路由
+      this.context.api.request({
+        url: `desktopRoutes:update?filter[id]=${this.props.routeId}`,
+        method: 'post',
+        data: {
+          enableTabs: !!this.stepParams.pageSettings.general.enableTabs,
+        },
+      });
+    }
+  }
+
+  async handleDragEnd(event: DragEndEvent) {
+    const activeModel = this.flowEngine.getModel(event.active?.id as string);
+    const overModel = this.flowEngine.getModel(event.over?.id as string);
+
+    if (!activeModel || !overModel) {
+      return;
+    }
+
+    // 自拖拽不需要排序，也要避免对同一个新建 tab 并发保存两次。
+    if (activeModel.uid === overModel.uid) {
+      return;
+    }
+
+    const [sourceId, targetId] = await Promise.all([
+      this.ensurePersistedRouteId(activeModel),
+      this.ensurePersistedRouteId(overModel),
+    ]);
+
+    if (sourceId == null || targetId == null) {
+      return;
+    }
+
+    await this.context.api.request({
+      url: `desktopRoutes:move`,
+      method: 'post',
+      params: {
+        sourceId,
+        targetId,
+        sortField: 'sort',
+      },
+    });
+
+    this.flowEngine.moveModel(activeModel.uid, overModel.uid, { persist: false });
+  }
+}
+
+RootPageModel.registerFlow({
+  key: 'rootPageSettings',
+  steps: {
+    init: {
+      async handler(ctx, params) {
+        if (ctx.model.hasSubModel('tabs')) {
+          return;
+        }
+        const route = ctx.routeRepository.getRouteBySchemaUid(ctx.model.parentId);
+        ctx.model.setProps('routeId', route?.id);
+        const routes: NocoBaseDesktopRoute[] = _.castArray(route?.children);
+        for (const route of routes.sort((a, b) => a.sort - b.sort)) {
+          // 过滤掉隐藏的路由
+          if (route.hideInMenu) {
+            continue;
+          }
+          const model = ctx.engine.createModel({
+            parentId: ctx.model.uid,
+            uid: route.schemaUid,
+            subKey: 'tabs',
+            subType: 'array',
+            use: 'RootPageTabModel',
+            sortIndex: route.sort,
+            props: {
+              route,
+            },
+            flowRegistry: route.options?.flowRegistry,
+            stepParams: {
+              pageTabSettings: {
+                tab: {
+                  title: route.title,
+                  icon: route.icon,
+                  documentTitle: route.options?.documentTitle,
+                },
+              },
+            },
+          });
+          ctx.model.addSubModel('tabs', model);
+        }
+      },
+    },
+  },
+});

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

@@ -0,0 +1,32 @@
+/**
+ * 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 { PageHeader } from '@ant-design/pro-layout';
+import { FlowModel, FlowModelRenderer, FlowSettingsButton, tExpr } from '@nocobase/flow-engine';
+import _ from 'lodash';
+import React from 'react';
+import { OldPageModel } from './OldPageModel';
+
+/**
+ * @deprecated Use `ChildPageModel` instead.
+ */
+export class SubPageModel extends OldPageModel {
+  renderFirstTab() {
+    return <FlowModelRenderer model={this.subModels.tabs?.[0]} />;
+  }
+
+  render() {
+    return (
+      <>
+        {this.props.displayTitle && <PageHeader title={this.props.title} style={this.props.headerStyle} />}
+        {this.renderFirstTab()}
+      </>
+    );
+  }
+}

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

@@ -0,0 +1,196 @@
+/**
+ * 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 React from 'react';
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChildPageModel } from '../ChildPageModel';
+import { DragEndEvent } from '@dnd-kit/core';
+
+// Mock PageModel
+const mockPageModel = {
+  static: {
+    registerFlow: vi.fn(),
+  },
+};
+
+vi.mock('../PageModel', () => ({
+  PageModel: class {
+    static registerFlow() {}
+  },
+}));
+
+// Mock FlowEngine
+const { mockUseFlowContext } = vi.hoisted(() => ({
+  mockUseFlowContext: vi.fn(),
+}));
+
+vi.mock('@nocobase/flow-engine', () => ({
+  CreateModelOptions: {},
+  useFlowContext: mockUseFlowContext,
+}));
+
+vi.mock('antd', () => ({
+  Button: ({ children, ...props }: any) => React.createElement('button', props, children),
+}));
+
+vi.mock('@ant-design/icons', () => ({
+  ArrowLeftOutlined: () => null,
+}));
+
+vi.mock('@ant-design/pro-layout', () => ({
+  PageHeader: () => null,
+}));
+
+describe('ChildPageModel', () => {
+  let childPageModel: ChildPageModel;
+  let mockFlowEngine: any;
+  let mockDragEndEvent: DragEndEvent;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock FlowEngine
+    mockFlowEngine = {
+      moveModel: vi.fn(),
+    };
+
+    // Create ChildPageModel instance
+    childPageModel = new ChildPageModel({});
+    (childPageModel as any).flowEngine = mockFlowEngine;
+
+    // Mock DragEndEvent
+    mockDragEndEvent = {
+      active: {
+        id: 'active-model-id',
+        data: { current: {} },
+        rect: { current: { initial: null, translated: null } },
+      },
+      over: {
+        id: 'over-model-id',
+        data: { current: {} },
+        rect: {
+          width: 100,
+          height: 100,
+          top: 0,
+          left: 0,
+          bottom: 100,
+          right: 100,
+        },
+      },
+      delta: { x: 0, y: 0 },
+      collisions: null,
+      activatorEvent: null,
+    } as DragEndEvent;
+  });
+
+  describe('createPageTabModelOptions', () => {
+    it('should return CreateModelOptions with ChildPageTabModel use', () => {
+      const options = childPageModel.createPageTabModelOptions();
+      expect(options).toEqual({
+        use: 'ChildPageTabModel',
+      });
+    });
+  });
+
+  describe('handleDragEnd', () => {
+    it('should call flowEngine.moveModel with correct parameters', async () => {
+      await childPageModel.handleDragEnd(mockDragEndEvent);
+
+      expect(mockFlowEngine.moveModel).toHaveBeenCalledTimes(1);
+      expect(mockFlowEngine.moveModel).toHaveBeenCalledWith('active-model-id', 'over-model-id');
+    });
+
+    it('should handle case when over is null', async () => {
+      const eventWithNullOver = {
+        ...mockDragEndEvent,
+        over: null,
+      };
+
+      await expect(childPageModel.handleDragEnd(eventWithNullOver)).rejects.toThrow();
+
+      expect(mockFlowEngine.moveModel).toBeCalledTimes(0);
+    });
+  });
+
+  describe('tab bar extra content', () => {
+    it('should render spacer in drawer mode', () => {
+      mockUseFlowContext.mockReturnValue({
+        themeToken: { paddingLG: 16, paddingXS: 8 },
+        view: { type: 'drawer', close: vi.fn() },
+      });
+
+      const element = childPageModel.tabBarExtraContent.left as React.ReactElement;
+      const { container } = render(element);
+      const spacer = container.querySelector('span[aria-hidden="true"]') as HTMLSpanElement | null;
+
+      expect(spacer).not.toBeNull();
+      expect(spacer?.style.width).toBe('16px');
+    });
+
+    it('should render back button in embed mode', () => {
+      mockUseFlowContext.mockReturnValue({
+        themeToken: { paddingLG: 16, paddingXS: 8 },
+        view: { type: 'embed', close: vi.fn() },
+      });
+
+      const element = childPageModel.tabBarExtraContent.left as React.ReactElement;
+      render(element);
+
+      expect(screen.getByRole('button', { name: 'back-button' })).toBeTruthy();
+    });
+  });
+
+  describe('render', () => {
+    it('should render back button when tabs are disabled in embed mode', () => {
+      mockUseFlowContext.mockReturnValue({
+        themeToken: { paddingLG: 16, paddingXS: 8 },
+        view: { type: 'embed', close: vi.fn() },
+      });
+
+      (childPageModel as any).props = {
+        displayTitle: false,
+        enableTabs: false,
+        tabBarStyle: { backgroundColor: 'var(--colorBgContainer)' },
+      };
+      (childPageModel as any).context = {
+        view: { type: 'embed' },
+        themeToken: { paddingXS: 8 },
+      };
+      (childPageModel as any).renderFirstTab = vi.fn(() => React.createElement('div', { 'data-testid': 'first-tab' }));
+
+      render(childPageModel.render());
+
+      expect(screen.getByRole('button', { name: 'back-button' })).toBeTruthy();
+      expect(screen.getByTestId('first-tab')).toBeTruthy();
+    });
+
+    it('should not render back button when tabs are disabled in non-embed mode', () => {
+      mockUseFlowContext.mockReturnValue({
+        themeToken: { paddingLG: 16, paddingXS: 8 },
+        view: { type: 'drawer', close: vi.fn() },
+      });
+
+      (childPageModel as any).props = {
+        displayTitle: false,
+        enableTabs: false,
+      };
+      (childPageModel as any).context = {
+        view: { type: 'drawer' },
+        themeToken: { paddingXS: 8 },
+      };
+      (childPageModel as any).renderFirstTab = vi.fn(() => React.createElement('div', { 'data-testid': 'first-tab' }));
+
+      render(childPageModel.render());
+
+      expect(screen.queryByRole('button', { name: 'back-button' })).toBeNull();
+      expect(screen.getByTestId('first-tab')).toBeTruthy();
+    });
+  });
+});