@nocobase/client-v2 2.2.0-alpha.6 → 2.2.0-alpha.8

package/src/flow/FlowPage.tsx

@@ -60,7 +60,9 @@ type FlowPageProps = {
 type FlowPageViewContext = FlowEngineContext & {
   view?: {
     inputArgs?: {
+      filterByTk?: unknown;
       isMobileLayout?: unknown;
+      sourceId?: unknown;
     };
   };
 };
@@ -102,6 +104,10 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
         subType: 'object',
         use: pageModelClass,
       };
+      const isRuntimeRecordScopedPage =
+        !flowEngine.context.flowSettingsEnabled &&
+        (typeof ctx?.view?.inputArgs?.filterByTk !== 'undefined' ||
+          typeof ctx?.view?.inputArgs?.sourceId !== 'undefined');
       if (shouldInjectDefaultChildTab) {
         const tabTitle = defaultTabTitle || flowEngine.translate?.('Details');
         options['subModels'] = {
@@ -128,7 +134,9 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
           },
         };
       }
-      const data = await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled });
+      const data =
+        (isRuntimeRecordScopedPage && (await flowEngine.loadModel({ ...options, refresh: true }))) ||
+        (await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled }));
       if (data?.uid && onModelLoaded) {
         data.context.addDelegate(ctx);
         bindViewLayoutState(data, ctx);

package/src/flow/__tests__/FlowPage.test.tsx

@@ -9,7 +9,7 @@
 
 import { render, waitFor } from '@testing-library/react';
 import React from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { FlowPage } from '../FlowPage';
 
 type TestContextProperty = {
@@ -71,10 +71,15 @@ const createPageModel = (): TestPageModel => {
 };
 
 const mocks = vi.hoisted(() => ({
+  flowSettingsEnabled: false,
+  loadModel: vi.fn(),
+  loadOrCreateModel: vi.fn(),
   rendererMobileStates: [] as boolean[],
   rendererProps: undefined as RendererProps | undefined,
   model: undefined as TestPageModel | undefined,
+  viewFilterByTk: undefined as unknown,
   viewInputMobileLayout: true as boolean | undefined,
+  viewSourceId: undefined as unknown,
   contextMobileLayout: undefined as boolean | undefined,
 }));
 
@@ -94,15 +99,20 @@ vi.mock('@nocobase/flow-engine', async () => {
     }),
     useFlowEngine: vi.fn(() => ({
       getModelClassAsync: vi.fn(async () => TestPageModelClass),
-      loadOrCreateModel: vi.fn(async () => mocks.model),
-      context: {},
+      loadModel: mocks.loadModel,
+      loadOrCreateModel: mocks.loadOrCreateModel,
+      context: {
+        flowSettingsEnabled: mocks.flowSettingsEnabled,
+      },
       translate: vi.fn((value: string) => value),
     })),
     useFlowModelById: vi.fn(() => mocks.model),
     useFlowViewContext: vi.fn(() => ({
       view: {
         inputArgs: {
+          ...(typeof mocks.viewFilterByTk !== 'undefined' ? { filterByTk: mocks.viewFilterByTk } : {}),
           ...(typeof mocks.viewInputMobileLayout === 'boolean' ? { isMobileLayout: mocks.viewInputMobileLayout } : {}),
+          ...(typeof mocks.viewSourceId !== 'undefined' ? { sourceId: mocks.viewSourceId } : {}),
         },
       },
       ...(typeof mocks.contextMobileLayout === 'boolean' ? { isMobileLayout: mocks.contextMobileLayout } : {}),
@@ -154,11 +164,21 @@ vi.mock('ahooks', async () => {
 });
 
 describe('FlowPage', () => {
+  beforeEach(() => {
+    mocks.loadModel.mockImplementation(async () => null);
+    mocks.loadOrCreateModel.mockImplementation(async () => mocks.model);
+  });
+
   afterEach(() => {
+    mocks.flowSettingsEnabled = false;
+    mocks.loadModel.mockReset();
+    mocks.loadOrCreateModel.mockReset();
     mocks.rendererMobileStates = [];
     mocks.rendererProps = undefined;
     mocks.model = undefined;
+    mocks.viewFilterByTk = undefined;
     mocks.viewInputMobileLayout = true;
+    mocks.viewSourceId = undefined;
     mocks.contextMobileLayout = undefined;
   });
 
@@ -203,4 +223,31 @@ describe('FlowPage', () => {
       expect(mocks.rendererMobileStates[0]).toBe(expected);
     },
   );
+
+  it('reloads runtime page models for record scoped views', async () => {
+    mocks.model = createPageModel();
+    mocks.viewFilterByTk = 1;
+    mocks.loadModel.mockImplementation(async () => mocks.model);
+
+    render(<FlowPage onModelLoaded={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(mocks.loadModel).toHaveBeenCalled();
+    });
+    expect(mocks.loadModel.mock.calls[0]?.[0]).toMatchObject({ refresh: true });
+    expect(mocks.loadOrCreateModel).not.toHaveBeenCalled();
+  });
+
+  it('keeps configured page model cache behavior in flow settings mode', async () => {
+    mocks.flowSettingsEnabled = true;
+    mocks.model = createPageModel();
+    mocks.viewFilterByTk = 1;
+
+    render(<FlowPage onModelLoaded={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(mocks.loadOrCreateModel).toHaveBeenCalled();
+    });
+    expect(mocks.loadModel).not.toHaveBeenCalled();
+  });
 });

package/src/flow/__tests__/FlowRoute.test.tsx

@@ -1666,7 +1666,7 @@ describe('FlowRoute', () => {
     expect(engine.getModel('public-form-1')).toBeUndefined();
   });
 
-  it('should not skip accessible route loading just because layout authCheck is false', async () => {
+  it('should skip accessible route loading when layout authCheck is false', async () => {
     const engine = new FlowEngine();
     const ensureAccessibleLoaded = vi.fn().mockRejectedValue(new Error('cannot load accessible routes'));
     const getRouteBySchemaUid = vi.fn();
@@ -1735,7 +1735,7 @@ describe('FlowRoute', () => {
     await waitFor(() => {
       expect(layoutModel.registerRoutePage).toHaveBeenCalledWith('public-form-1', expect.any(Object));
     });
-    expect(ensureAccessibleLoaded).toHaveBeenCalledTimes(1);
+    expect(ensureAccessibleLoaded).not.toHaveBeenCalled();
     expect(getRouteBySchemaUid).not.toHaveBeenCalled();
   });
 

package/src/flow/actions/__tests__/linkageRulesRefresh.test.ts

@@ -135,11 +135,15 @@ describe('linkageRulesRefresh action', () => {
     expect(handler).toHaveBeenCalledWith(ctx, { value: ['master-mounted'] });
   });
 
-  it('runs linkage action on master model when forks exist in design mode', async () => {
+  it('skips master model when forks can handle flow in design mode', async () => {
     const handler = vi.fn(async () => {});
     const model: any = {
       isFork: false,
-      forks: new Set([{}]),
+      forks: new Set([
+        {
+          getFlow: vi.fn(() => ({})),
+        },
+      ]),
       getFlow: vi.fn(() => ({})),
       getStepParams: vi.fn(() => ({ value: ['master'] })),
       context: {
@@ -157,7 +161,7 @@ describe('linkageRulesRefresh action', () => {
       flowKey: 'buttonSettings',
     });
 
-    expect(handler).toHaveBeenCalledWith(ctx, { value: ['master'] });
+    expect(handler).not.toHaveBeenCalled();
   });
 
   it('runs linkage action on fork model and resolves params', async () => {

package/src/flow/actions/linkageRulesRefresh.tsx

@@ -35,12 +35,8 @@ export const linkageRulesRefresh = defineAction({
     // Prefer running on the current model; fallback to blockModel when the current model doesn't own the flow.
     if (!hasFlow) return;
 
-    // In runtime, only skip master when there are mounted forks that can handle the same flow.
+    // Skip master when unmounted forks can handle the same flow.
     // Otherwise master is likely the rendered model and still needs refresh.
-    // In design mode, always refresh master so the currently edited model state stays in sync.
-    const flowSettingsEnabled = Boolean(
-      (ctx as any)?.flowSettingsEnabled || (model as any)?.context?.flowSettingsEnabled,
-    );
     const hasForkWithFlow =
       !model?.isFork &&
       !!model?.forks?.size &&
@@ -49,7 +45,7 @@ export const linkageRulesRefresh = defineAction({
         return !!fork?.getFlow?.(flowKey);
       });
     const isMasterMounted = Boolean((model as any)?.context?.ref?.current);
-    if (hasForkWithFlow && !isMasterMounted && !flowSettingsEnabled) {
+    if (hasForkWithFlow && !isMasterMounted) {
       return;
     }
 

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -712,7 +712,6 @@ export const AdminLayoutComponent = observer((props: any) => {
         <MobileMenuControlContext.Provider value={{ closeMobileMenu }}>
           <DndProvider collisionDetection={menuCollisionDetection} onDragEnd={handleMenuDragEnd}>
             <ProLayout
-              key={`admin-layout-menu-${menuRouteRefreshVersion}`}
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutComponent.test.tsx

@@ -11,23 +11,58 @@ import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import React, { useEffect } from 'react';
 import { createMemoryRouter, RouterProvider, useParams } from 'react-router-dom';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../../flow-compat';
 import type { LayoutDefinition } from '../../../../layout-manager/types';
 import { AdminLayoutComponent } from '../AdminLayoutComponent';
 import { AdminLayoutModel } from '../AdminLayoutModel';
+import { AdminLayoutMenuItemModel } from '../AdminLayoutMenuModels';
 import { AdminLayoutContent } from '../AdminLayoutSlotModels';
 
+const proLayoutLifecycle = vi.hoisted(() => ({
+  events: [] as string[],
+  routes: [] as Array<{ children?: Array<{ name?: React.ReactNode }> }>,
+}));
+
 vi.mock('@ant-design/pro-layout', async () => {
   const ReactModule = await import('react');
   const RouteContext = ReactModule.createContext({ isMobile: false });
+  const ProLayoutMock = (props: {
+    children?: React.ReactNode;
+    route?: { children?: Array<{ name?: React.ReactNode }> };
+  }) => {
+    ReactModule.useEffect(() => {
+      proLayoutLifecycle.events.push('pro-layout:mount');
+      return () => {
+        proLayoutLifecycle.events.push('pro-layout:unmount');
+      };
+    }, []);
+    proLayoutLifecycle.routes.push(props.route || {});
 
-  return {
-    default: (props: { children?: React.ReactNode }) =>
+    return ReactModule.createElement(
+      RouteContext.Provider,
+      { value: { isMobile: false } },
       ReactModule.createElement(
-        RouteContext.Provider,
-        { value: { isMobile: false } },
-        ReactModule.createElement('div', { 'data-testid': 'pro-layout' }, props.children),
+        'div',
+        { 'data-testid': 'pro-layout' },
+        ReactModule.createElement(
+          'nav',
+          { 'data-testid': 'pro-layout-menu' },
+          (props.route?.children || []).map((item) =>
+            ReactModule.createElement(
+              'span',
+              { key: String(item.name), 'data-testid': 'pro-layout-menu-item' },
+              item.name,
+            ),
+          ),
+        ),
+        props.children,
       ),
+    );
+  };
+
+  return {
+    default: ProLayoutMock,
     RouteContext,
   };
 });
@@ -53,6 +88,10 @@ vi.mock('../AppListRender', () => ({
   useAppListRender: () => undefined,
 }));
 
+afterEach(() => {
+  delete (window as Window & { __nocobase_modern_client_prefix__?: string }).__nocobase_modern_client_prefix__;
+});
+
 describe('AdminLayoutComponent', () => {
   it('keeps custom admin layout pages alive by layout route name', async () => {
     const layout: LayoutDefinition = {
@@ -185,4 +224,212 @@ describe('AdminLayoutComponent', () => {
 
     expect(deactivateLayout).toHaveBeenCalledTimes(1);
   });
+
+  it('keeps layout content mounted when the menu route tree refreshes', async () => {
+    proLayoutLifecycle.events = [];
+    proLayoutLifecycle.routes = [];
+    const layout: LayoutDefinition = {
+      routeName: 'admin',
+      routePath: '/admin',
+      rootRouteName: 'admin',
+      uid: 'admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    const events: string[] = [];
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout: vi.fn(() => vi.fn()),
+        ensureAccessibleLoaded: vi.fn(async () => []),
+        listAccessible: () => [],
+        subscribe: vi.fn(),
+        unsubscribe: vi.fn(),
+      },
+    });
+    engine.context.defineProperty('t', {
+      value: (key: string) => key,
+    });
+    const model = engine.createModel<AdminLayoutModel>({
+      uid: layout.uid,
+      use: AdminLayoutModel,
+      props: {
+        layout,
+      },
+    });
+
+    const Page = () => {
+      useEffect(() => {
+        events.push('page:mount');
+        return () => {
+          events.push('page:unmount');
+        };
+      }, []);
+
+      return <div data-testid="custom-admin-route">Workflow tasks</div>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutComponent model={model} />,
+          children: [
+            {
+              id: 'admin.workflow.tasks',
+              path: 'workflow/tasks/:taskType?/:status?/:popupId?',
+              element: <Page />,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/workflow/tasks/approval-apply/pending'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+
+    act(() => {
+      model.refreshMenuRouteTree();
+    });
+
+    await act(async () => {
+      await router.navigate('/admin/workflow/tasks/approval-apply/pending/1');
+    });
+
+    expect(screen.getByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+    expect(events).toEqual(['page:mount']);
+  });
+
+  it('updates ProLayout menu routes after accessible routes change without remounting the layout', async () => {
+    proLayoutLifecycle.events = [];
+    proLayoutLifecycle.routes = [];
+    (window as Window & { __nocobase_modern_client_prefix__?: string }).__nocobase_modern_client_prefix__ = 'v2';
+    const layout: LayoutDefinition = {
+      routeName: 'admin',
+      routePath: '/admin',
+      rootRouteName: 'admin',
+      uid: 'admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    let accessibleRoutes: NocoBaseDesktopRoute[] = [
+      {
+        id: 1,
+        title: 'Visible page',
+        schemaUid: 'visible-page',
+        type: NocoBaseDesktopRouteType.flowPage,
+      },
+    ];
+    let routeRepositorySubscriber: (() => void) | undefined;
+    const events: string[] = [];
+    const engine = new FlowEngine();
+    engine.registerModels({
+      AdminLayoutMenuItemModel,
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout: vi.fn(() => vi.fn()),
+        ensureAccessibleLoaded: vi.fn(async () => accessibleRoutes),
+        listAccessible: () => accessibleRoutes,
+        subscribe: vi.fn((subscriber: () => void) => {
+          routeRepositorySubscriber = subscriber;
+        }),
+        unsubscribe: vi.fn(),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v/',
+        router: {
+          getBasename: () => '/v',
+        },
+      },
+    });
+    engine.context.defineProperty('t', {
+      value: (key: string) => key,
+    });
+    const model = engine.createModel<AdminLayoutModel>({
+      uid: layout.uid,
+      use: AdminLayoutModel,
+      props: {
+        layout,
+      },
+    });
+
+    const Page = () => {
+      useEffect(() => {
+        events.push('page:mount');
+        return () => {
+          events.push('page:unmount');
+        };
+      }, []);
+
+      return <div data-testid="custom-admin-route">Workflow tasks</div>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutComponent model={model} />,
+          children: [
+            {
+              id: 'admin.workflow.tasks',
+              path: 'workflow/tasks/:taskType?/:status?/:popupId?',
+              element: <Page />,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/workflow/tasks/approval-apply/pending'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('Visible page')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+
+    act(() => {
+      accessibleRoutes = [];
+      routeRepositorySubscriber?.();
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Visible page')).not.toBeInTheDocument();
+    });
+
+    await act(async () => {
+      await router.navigate('/admin/workflow/tasks/approval-apply/pending/1');
+    });
+
+    expect(screen.getByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+    expect(events).toEqual(['page:mount']);
+    expect(
+      proLayoutLifecycle.routes.some((route) => route.children?.some((item) => item.name === 'Visible page')),
+    ).toBe(true);
+    expect(proLayoutLifecycle.routes.at(-1)?.children?.some((item) => item.name === 'Visible page')).toBe(false);
+  });
 });

package/src/flow/components/FieldAssignExactDatePicker.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { DatePicker, Select, Space } from 'antd';
 import { inferPickerType } from '../../flow-compat';
 import { dayjs, getDateTimeFormat, getPickerFormat } from '@nocobase/utils/client';
@@ -29,6 +29,7 @@ export interface FieldAssignExactDatePickerProps {
   isRange?: boolean;
   onChange?: (value: ExactDatePickerValue) => void;
   style?: React.CSSProperties;
+  disabled?: boolean;
 }
 
 function getRawSingleValue(value: unknown, isRange: boolean): unknown {
@@ -114,7 +115,7 @@ function parseRangeValue(value: unknown, format: string): [dayjs.Dayjs, dayjs.Da
 }
 
 export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProps> = (props) => {
-  const { picker = 'date', format, showTime, timeFormat, value, isRange = false, onChange, style } = props;
+  const { picker = 'date', format, showTime, timeFormat, value, isRange = false, onChange, style, disabled } = props;
   const flowCtx = useFlowContext();
   const t = flowCtx.model.translate.bind(flowCtx.model);
 
@@ -124,17 +125,17 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     return inferPickerFromRawValue(rawSingleValue, picker);
   });
 
-  const getResolvedFormat = (nextPicker: ExactDatePickerMode) => {
-    const baseFormat = nextPicker === picker && format ? format : getPickerFormat(nextPicker);
-    const dateFormat = nextPicker === 'date' ? stripTimeFromFormat(baseFormat) : baseFormat;
-    return getDateTimeFormat(nextPicker, dateFormat, showTime, timeFormat);
-  };
-
-  const resolvedFormat = useMemo(
-    () => getResolvedFormat(targetPicker),
-    [targetPicker, format, picker, showTime, timeFormat],
+  const getResolvedFormat = useCallback(
+    (nextPicker: ExactDatePickerMode) => {
+      const baseFormat = nextPicker === picker && format ? format : getPickerFormat(nextPicker);
+      const dateFormat = nextPicker === 'date' ? stripTimeFromFormat(baseFormat) : baseFormat;
+      return getDateTimeFormat(nextPicker, dateFormat, showTime, timeFormat);
+    },
+    [format, picker, showTime, timeFormat],
   );
 
+  const resolvedFormat = useMemo(() => getResolvedFormat(targetPicker), [getResolvedFormat, targetPicker]);
+
   const singleValue = useMemo(() => {
     if (isRange) return null;
     return parseDateFromRawValue(value, resolvedFormat);
@@ -156,6 +157,10 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
   );
 
   const handlePickerTypeChange = (nextPicker: ExactDatePickerMode) => {
+    if (disabled) {
+      return;
+    }
+
     setTargetPicker(nextPicker);
 
     if (!onChange) {
@@ -182,7 +187,11 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     inputReadOnly: flowCtx.isMobileLayout,
     showTime: showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,
     value: singleValue,
+    disabled,
     onChange: (nextDate: dayjs.Dayjs | null) => {
+      if (disabled) {
+        return;
+      }
       if (nextDate && dayjs.isDayjs(nextDate)) {
         onChange?.(nextDate);
         return;
@@ -200,7 +209,11 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     inputReadOnly: flowCtx.isMobileLayout,
     showTime: showTime ? { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] } : false,
     value: rangeValue,
+    disabled,
     onChange: (nextDates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null) => {
+      if (disabled) {
+        return;
+      }
       if (Array.isArray(nextDates) && nextDates[0] && nextDates[1]) {
         onChange?.([nextDates[0], nextDates[1]]);
         return;
@@ -218,6 +231,7 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
         value={targetPicker}
         options={pickerOptions}
         onChange={handlePickerTypeChange}
+        disabled={disabled}
       />
       {isRange ? <DatePicker.RangePicker {...rangePickerProps} /> : <DatePicker {...singlePickerProps} />}
     </Space.Compact>