@nocobase/client-v2 2.2.0-beta.9 → 3.0.0-alpha.1

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/admin-shell/admin-layout/__tests__/TopbarActionsBar.test.tsx

@@ -136,6 +136,16 @@ describe('TopbarActionsBar helpers', () => {
           title: 'Plugin manager',
           path: '/admin/settings/plugin-manager',
           icon: null,
+          sort: -200,
+          componentLoader: async () => null,
+        },
+        {
+          key: 'multi-portal',
+          name: 'multi-portal',
+          title: 'Portal manager',
+          path: '/admin/settings/multi-portal',
+          icon: null,
+          sort: -300,
           componentLoader: async () => null,
         },
         {
@@ -159,13 +169,14 @@ describe('TopbarActionsBar helpers', () => {
     });
 
     expect((items as any[]).map((item) => item.type || item.key)).toEqual([
+      'multi-portal',
       'plugin-manager',
       'divider',
       'system-settings',
       'divider',
       'security',
     ]);
-    expect((items as any[])[2]).toMatchObject({
+    expect((items as any[]).find((item) => item.key === 'system-settings')).toMatchObject({
       key: 'system-settings',
       name: 'system-settings',
       path: '/admin/settings/system-settings',
@@ -191,7 +202,7 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
@@ -216,7 +227,7 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'Plugin manager' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/plugin-manager');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/plugin-manager');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
@@ -241,13 +252,13 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/crm-amd/ekeisumx1zu');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/apps/a_9xlild35jir/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
   });
 
-  it('should keep regular admin settings as SPA links inside admin runtime', () => {
+  it('should open regular admin settings in the standalone SPA from admin runtime', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -266,11 +277,12 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/admin/settings/routes');
 
     const link = screen.getByRole('link', { name: 'Routes' });
-    expect(link).toHaveAttribute('href', '/admin/settings/routes');
-    expect(link).not.toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/routes');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
   });
 
-  it('should keep sub-app admin settings in the current window inside sub-app admin runtime', () => {
+  it('should open sub-app settings in the standalone SPA from sub-app admin runtime', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -289,8 +301,9 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/admin/settings/routes');
 
     const link = screen.getByRole('link', { name: 'Routes' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/routes');
-    expect(link).not.toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/apps/a_9xlild35jir/routes');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
   });
 
   it('should not treat admin-like paths as admin runtime', () => {
@@ -312,11 +325,11 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/admin2/foo');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
   });
 
-  it('should not duplicate the basename when building new-tab settings hrefs', () => {
+  it('should remove the modern basename when building standalone settings hrefs', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -335,7 +348,30 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
+  });
+
+  it('should preserve the new sub-app scope in standalone settings hrefs', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'system-settings',
+          name: 'system-settings',
+          title: 'System settings',
+          path: '/admin/settings/system-settings',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    renderSettingsLabel((items as any[])[0].label, '/_app/a_new/admin/settings/system-settings');
+
+    const link = screen.getByRole('link', { name: 'System settings' });
+    expect(link).toHaveAttribute('href', '/nocobase/settings/_app/a_new/system-settings');
+    expect(link).toHaveAttribute('target', '_blank');
   });
 
   it('should keep external settings opening in a new tab', () => {
@@ -402,6 +438,34 @@ describe('TopbarActionsBar', () => {
     vi.restoreAllMocks();
   });
 
+  it('should group plugin settings with Help and user center', () => {
+    render(
+      <TopbarActionsBar
+        actions={[
+          createAction({ uid: 'notification', actionId: 'notification' }),
+          createAction({ uid: 'plugin-settings', actionId: 'plugin-settings' }),
+          createAction({ uid: 'user-center', actionId: 'user-center' }),
+        ]}
+      />,
+    );
+
+    const notification = screen.getByTestId('flow-model-notification');
+    const pluginSettings = screen.getByTestId('flow-model-plugin-settings');
+    const help = screen.getByTestId('help-lite');
+    const userCenter = screen.getByTestId('flow-model-user-center');
+    const mainGroup = notification.closest('.nb-topbar-actions-list');
+    const utilityGroup = pluginSettings.closest('.nb-topbar-utility-actions-list');
+
+    expect(mainGroup).toContainElement(notification);
+    expect(mainGroup).not.toContainElement(pluginSettings);
+    expect(utilityGroup).not.toBeNull();
+    expect(utilityGroup).toContainElement(pluginSettings);
+    expect(utilityGroup).toContainElement(help);
+    expect(utilityGroup).toContainElement(userCenter);
+    expect(pluginSettings.compareDocumentPosition(help) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(help.compareDocumentPosition(userCenter) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it('should keep HelpLite rendered when one action fails', () => {
     vi.spyOn(console, 'error').mockImplementation(() => {});
 

package/src/flow/common/Markdown/style.ts

@@ -26,6 +26,10 @@ export default function useStyle() {
     () => ({
       [`.${COMPONENT_CLS}`]: {
         '.vditor-reset': { fontSize: `${token.fontSize}px !important`, color: 'unset' },
+        '.vditor-reset h2': {
+          borderBottom: 'none !important',
+          boxShadow: 'none !important',
+        },
         '.vditor': {
           borderRadius: 8,
         },

package/src/flow/components/BlockItemCard.tsx

@@ -150,7 +150,7 @@ export const BlockItemCard = React.forwardRef(
   ) => {
     const { t } = useTranslation();
     const { token } = theme.useToken();
-    const { title: blockTitle, description, children, className, heightMode, ...rest } = props;
+    const { title: blockTitle, description, children, className, heightMode, style, ...rest } = props;
     const cardRef = useRef<HTMLDivElement | null>(null);
     const setCardRef = useCallback(
       (node: HTMLDivElement | null) => {
@@ -185,7 +185,7 @@ export const BlockItemCard = React.forwardRef(
       <Card
         ref={setCardRef as any}
         title={title}
-        style={{ display: 'flex', flexDirection: 'column', height: height }}
+        style={{ display: 'flex', flexDirection: 'column', ...style, height: height ?? style?.height }}
         styles={{
           body: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto' },
           header: {

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>