@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.11

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

@@ -8,12 +8,20 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-const { allowMock, flowModelRendererSpy } = vi.hoisted(() => {
+const { allowMock, appMock, flowModelRendererSpy } = vi.hoisted(() => {
   return {
     allowMock: vi.fn(),
+    appMock: {
+      current: {
+        router: {
+          getBasename: () => '/nocobase/v',
+        },
+      },
+    },
     flowModelRendererSpy: vi.fn(),
   };
 });
@@ -32,6 +40,12 @@ vi.mock('../HelpLite', () => {
   };
 });
 
+vi.mock('../../../../hooks/useApp', () => {
+  return {
+    useApp: () => appMock.current,
+  };
+});
+
 vi.mock('@nocobase/flow-engine', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@nocobase/flow-engine')>();
   return {
@@ -63,10 +77,19 @@ const createAction = (options: Record<string, any>) => {
   } as any;
 };
 
+const renderSettingsLabel = (label: React.ReactNode, pathname: string) => {
+  return render(<MemoryRouter initialEntries={[pathname]}>{label}</MemoryRouter>);
+};
+
 describe('TopbarActionsBar helpers', () => {
   beforeEach(() => {
     allowMock.mockReset();
     flowModelRendererSpy.mockClear();
+    appMock.current = {
+      router: {
+        getBasename: () => '/nocobase/v',
+      },
+    };
   });
 
   afterEach(() => {
@@ -149,6 +172,195 @@ describe('TopbarActionsBar helpers', () => {
     });
   });
 
+  it('should open regular admin settings in a new tab outside admin runtime', () => {
+    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, '/sales/p1');
+
+    const link = screen.getByRole('link', { name: 'System settings' });
+    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
+  });
+
+  it('should open plugin manager in a new tab outside admin runtime', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: true,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'plugin-manager',
+          name: 'plugin-manager',
+          title: 'Plugin manager',
+          path: '/admin/settings/plugin-manager',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    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('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
+  });
+
+  it('should open sub-app admin settings in a new tab outside sub-app admin runtime', () => {
+    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, '/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('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', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'routes',
+          name: 'routes',
+          title: 'Routes',
+          path: '/admin/settings/routes',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    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');
+  });
+
+  it('should keep sub-app admin settings in the current window inside sub-app admin runtime', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'routes',
+          name: 'routes',
+          title: 'Routes',
+          path: '/admin/settings/routes',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    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');
+  });
+
+  it('should not treat admin-like paths as admin runtime', () => {
+    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, '/admin2/foo');
+
+    const link = screen.getByRole('link', { name: 'System settings' });
+    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  it('should not duplicate the basename when building new-tab settings hrefs', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'system-settings',
+          name: 'system-settings',
+          title: 'System settings',
+          path: '/nocobase/v/admin/settings/system-settings',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    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');
+  });
+
+  it('should keep external settings opening in a new tab', () => {
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'docs',
+          name: 'docs',
+          title: 'Docs',
+          link: 'https://www.nocobase.com/docs',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    renderSettingsLabel((items as any[])[0].label, '/sales/p1');
+    fireEvent.click(screen.getByText('Docs'));
+
+    expect(openSpy).toHaveBeenCalledWith('https://www.nocobase.com/docs', '_blank', 'noopener,noreferrer');
+  });
+
   it('should return empty dropdown items when plugin manager and settings are both unavailable', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,

package/src/flow/admin-shell/admin-layout/index.ts

@@ -9,6 +9,7 @@
 
 export * from './AdminLayoutComponent';
 export * from './AdminLayoutModel';
+export * from './AppSwitcherActionPanelModel';
 export * from '../BaseLayoutModel';
 export * from '../BaseLayoutRouteCoordinator';
 export * from './AdminLayoutSlotModels';

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.test.ts

@@ -52,6 +52,26 @@ describe('resolveAdminRouteRuntimeTarget', () => {
     });
   });
 
+  it('should resolve flowPage under a custom admin layout route path', () => {
+    expect(
+      resolveAdminRouteRuntimeTarget({
+        app,
+        layout: {
+          routePath: '/admin2',
+        },
+        route: {
+          type: NocoBaseDesktopRouteType.flowPage,
+          schemaUid: 'flow-page-1',
+        },
+      }),
+    ).toEqual({
+      runtimePath: '/nocobase/v2/admin2/flow-page-1',
+      navigationMode: 'spa',
+      isLegacy: false,
+      reason: 'ok',
+    });
+  });
+
   it('should mark page unsupported in v2 admin runtime', () => {
     expect(
       resolveAdminRouteRuntimeTarget({

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.ts

@@ -10,6 +10,7 @@
 import { getModernClientPrefix, getV2EffectiveBasePath } from '../../../authRedirect';
 import type { BaseApplication } from '../../../BaseApplication';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
+import type { LayoutDefinition } from '../../../layout-manager/types';
 
 export type AdminRouteNavigationMode = 'spa' | 'document';
 export type AdminRouteRuntimeTargetReason =
@@ -32,6 +33,8 @@ type LocationLike = {
   hash?: string;
 };
 
+export type AdminLayoutRoutePathLike = Pick<LayoutDefinition, 'routePath'>;
+
 type ResolveAdminRouteRuntimeTargetOptions = {
   app: Pick<BaseApplication<any>, 'getPublicPath'> & {
     router?: {
@@ -39,12 +42,14 @@ type ResolveAdminRouteRuntimeTargetOptions = {
     };
   };
   route?: NocoBaseDesktopRoute;
+  layout?: AdminLayoutRoutePathLike;
   location?: LocationLike;
   preserveLocationState?: boolean;
   log?: (message?: any, ...optionalParams: any[]) => void;
 };
 
 const LOG_PREFIX = '[NocoBase] Admin route runtime target:';
+export const DEFAULT_ADMIN_LAYOUT_ROUTE_PATH = '/admin';
 
 const EMPTY_TARGET: AdminRouteRuntimeTarget = {
   runtimePath: null,
@@ -61,6 +66,25 @@ function normalizeRootRelativePath(pathname: string) {
   return normalized;
 }
 
+export function getAdminLayoutRoutePath(layout?: AdminLayoutRoutePathLike | null) {
+  const routePath = typeof layout?.routePath === 'string' ? layout.routePath.trim() : '';
+  return routePath.startsWith('/') ? normalizeRootRelativePath(routePath) : DEFAULT_ADMIN_LAYOUT_ROUTE_PATH;
+}
+
+export function joinAdminLayoutRoutePath(
+  layout: AdminLayoutRoutePathLike | null | undefined,
+  pathname?: string | number | null,
+) {
+  const layoutRoutePath = getAdminLayoutRoutePath(layout);
+  const routePath = pathname == null ? '' : String(pathname).replace(/^\/+/, '');
+
+  if (!routePath) {
+    return layoutRoutePath;
+  }
+
+  return normalizeRootRelativePath(`${layoutRoutePath}/${routePath}`);
+}
+
 function normalizePublicPath(value = '/') {
   const normalized = normalizeRootRelativePath(value || '/');
   return normalized.endsWith('/') ? normalized : `${normalized}/`;
@@ -104,8 +128,12 @@ function joinRootRelativePath(basePath: string, pathname: string) {
   return normalizeRootRelativePath(`${normalizedBasePath}${normalizedPathname.slice(1)}`);
 }
 
-function getV2AdminPath(app: ResolveAdminRouteRuntimeTargetOptions['app'], schemaUid: string) {
-  return joinRootRelativePath(getV2EffectiveBasePath(app), `/admin/${schemaUid}`);
+function getV2AdminPath(
+  app: ResolveAdminRouteRuntimeTargetOptions['app'],
+  schemaUid: string,
+  layout?: AdminLayoutRoutePathLike,
+) {
+  return joinRootRelativePath(getV2EffectiveBasePath(app), joinAdminLayoutRoutePath(layout, schemaUid));
 }
 
 function appendLocationState(pathname: string, location?: LocationLike) {
@@ -212,7 +240,7 @@ function resolvePageRuntimeTarget(
 
   if (route.type === NocoBaseDesktopRouteType.flowPage) {
     return {
-      runtimePath: getV2AdminPath(app, route.schemaUid),
+      runtimePath: getV2AdminPath(app, route.schemaUid, options.layout),
       navigationMode: 'spa' as const,
       isLegacy: false,
       reason: 'ok' as const,
@@ -229,8 +257,8 @@ function resolvePageRuntimeTarget(
   return {
     runtimePath:
       preserveLocationState && location
-        ? appendLocationState(getV2AdminPath(app, route.schemaUid), location)
-        : getV2AdminPath(app, route.schemaUid),
+        ? appendLocationState(getV2AdminPath(app, route.schemaUid, options.layout), location)
+        : getV2AdminPath(app, route.schemaUid, options.layout),
     navigationMode: 'spa' as const,
     isLegacy: false,
     reason: 'ok' as const,

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

@@ -8,41 +8,110 @@
  */
 
 import { useApp } from '../../../flow-compat';
+import type { AppListProps } from '@ant-design/pro-layout/es/components/AppsLogoComponents/types';
 import React from 'react';
+import type { AdminLayoutModel } from './AdminLayoutModel';
+import { ADMIN_LAYOUT_MODEL_UID } from './constants';
+import type { AppSwitcherActionPanelModel } from './AppSwitcherActionPanelModel';
 
-export const useApplications = () => {
+export const APP_SWITCHER_ACTION_PANEL_MODEL_UID = `${ADMIN_LAYOUT_MODEL_UID}-app-switcher-actions`;
+
+function getErrorStatus(error: unknown) {
+  if (!error || typeof error !== 'object') {
+    return;
+  }
+  const errorLike = error as { response?: { status?: unknown }; status?: unknown };
+  const status = errorLike.response?.status ?? errorLike.status;
+  return typeof status === 'number' ? status : undefined;
+}
+
+export const useApplications = (adminLayoutModel?: AdminLayoutModel) => {
   const app = useApp();
   const loadAppList = app.apps.loadAppList;
-  const [appList, setAppList] = React.useState([]);
+  const [legacyAppList, setLegacyAppList] = React.useState<AppListProps>([]);
+  const [appSwitcherModel, setAppSwitcherModel] = React.useState<AppSwitcherActionPanelModel>();
+
+  React.useEffect(() => {
+    let canceled = false;
+    let modelWithLayoutContext: AppSwitcherActionPanelModel | undefined;
+
+    if (!adminLayoutModel) {
+      setAppSwitcherModel(undefined);
+      return;
+    }
+
+    const load = async () => {
+      try {
+        const model = await adminLayoutModel.flowEngine.loadOrCreateModel<AppSwitcherActionPanelModel>({
+          uid: APP_SWITCHER_ACTION_PANEL_MODEL_UID,
+          use: 'AppSwitcherActionPanelModel',
+          parentId: adminLayoutModel.uid,
+          subKey: 'appSwitcher',
+          subType: 'object',
+        });
+        if (canceled || !model) {
+          return;
+        }
+        model.context.addDelegate(adminLayoutModel.context);
+        modelWithLayoutContext = model;
+        setAppSwitcherModel(model);
+      } catch (error) {
+        if (canceled) {
+          return;
+        }
+        if (getErrorStatus(error) !== 404) {
+          throw error;
+        }
+        setAppSwitcherModel(undefined);
+      }
+    };
+    load();
+
+    return () => {
+      canceled = true;
+      modelWithLayoutContext?.context.removeDelegate(adminLayoutModel.context);
+    };
+  }, [adminLayoutModel]);
 
   React.useEffect(() => {
     let canceled = false;
 
+    if (adminLayoutModel) {
+      setLegacyAppList([]);
+      return;
+    }
+
     if (!loadAppList) {
-      setAppList([]);
+      setLegacyAppList([]);
       return;
     }
 
-    void Promise.resolve(loadAppList(app))
-      .then((list) => {
+    const load = async () => {
+      try {
+        const list = await Promise.resolve(loadAppList(app));
         if (!canceled) {
-          setAppList(Array.isArray(list) ? list : []);
+          setLegacyAppList(Array.isArray(list) ? list : []);
         }
-      })
-      .catch((error) => {
+      } catch (error) {
         console.error('[NocoBase] Failed to load application switcher list.', error);
         if (!canceled) {
-          setAppList([]);
+          setLegacyAppList([]);
         }
-      });
+      }
+    };
+    load();
 
     return () => {
       canceled = true;
     };
-  }, [app, loadAppList]);
+  }, [adminLayoutModel, app, loadAppList]);
+
+  const shouldRenderConfiguredSwitcher =
+    !!appSwitcherModel && (appSwitcherModel.hasActions() || app.flowEngine.context.flowSettingsEnabled);
 
   return {
     Component: app.apps.Component,
-    appList,
+    appList: shouldRenderConfiguredSwitcher ? [{ title: '', url: '#' }] : legacyAppList,
+    appSwitcherModel,
   };
 };

package/src/flow/common/Markdown/Display.tsx

@@ -12,6 +12,7 @@ import { css } from '@emotion/css';
 import { createRoot } from 'react-dom/client';
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import Vditor from 'vditor';
+import { removeMarkdownIframes, stripMarkdownIframes } from '../../../utils/markdownSanitize';
 import { useCDN } from './useCDN';
 import useStyle from './style';
 
@@ -51,8 +52,15 @@ function DisplayInner(props: { value: string; style?: CSSProperties; loadImages?
       Vditor.preview(containerRef.current, props.value ?? '', {
         mode: 'light',
         cdn,
-      });
+        markdown: {
+          sanitize: true,
+        },
+        transform: stripMarkdownIframes,
+      })
+        .then(() => removeMarkdownIframes(containerRef.current))
+        .catch(() => removeMarkdownIframes(containerRef.current));
       setTimeout(() => {
+        removeMarkdownIframes(containerRef.current);
         containerRef.current?.querySelectorAll('img').forEach((img: HTMLImageElement) => {
           img.style.cursor = 'zoom-in';
           img.addEventListener('click', () => {
@@ -129,13 +137,16 @@ export const Display = (props) => {
       Vditor.md2html(props.value, {
         mode: 'light',
         cdn,
+        markdown: {
+          sanitize: true,
+        },
       })
         .then((html) => {
-          setText(convertToText(html));
+          setText(convertToText(stripMarkdownIframes(html)));
         })
         .catch(() => setText(''));
     }
-  }, [props.value, textOnly]);
+  }, [props.value, textOnly, cdn]);
 
   const isOverflowTooltip = useCallback(() => {
     if (!elRef.current) return false;

package/src/flow/common/Markdown/Edit.tsx

@@ -17,6 +17,7 @@ import React, { useEffect, useCallback, useLayoutEffect, useMemo, useRef, useSta
 import { useTranslation } from 'react-i18next';
 import Vditor from 'vditor';
 import 'vditor/dist/index.css';
+import { stripMarkdownIframeTags, stripMarkdownIframes } from '../../../utils/markdownSanitize';
 import { useCDN } from './useCDN';
 import useStyle from './style';
 
@@ -102,13 +103,20 @@ const Edit = (props) => {
     if (!containerRef.current) return;
 
     const toolbarConfig = placeToolbarTooltipsBelow(toolbar ?? defaultToolbar);
+    const safeValue = stripMarkdownIframeTags(value ?? '');
     const vditor = new Vditor(containerRef.current, {
-      value: value ?? '',
+      value: safeValue,
       lang,
       cache: { enable: false },
       undoDelay: 0,
       mode: props.mode || 'ir',
-      preview: { math: { engine: 'KaTeX' } },
+      preview: {
+        markdown: {
+          sanitize: true,
+        },
+        math: { engine: 'KaTeX' },
+        transform: stripMarkdownIframes,
+      },
       toolbar: toolbarConfig,
       fullscreen: { index: 1200 },
       cdn,
@@ -117,7 +125,6 @@ const Edit = (props) => {
       after: () => {
         vdRef.current = vditor;
         setEditorReady(true); // Notify that the editor is ready
-        vditor.setValue(value ?? '');
         if (disabled) {
           vditor.disabled();
         } else {
@@ -131,8 +138,12 @@ const Edit = (props) => {
           });
         }
       },
-      input(value) {
-        onChange(value);
+      input(nextValue) {
+        const safeNextValue = stripMarkdownIframeTags(nextValue);
+        if (safeNextValue !== nextValue) {
+          vditor.setValue(safeNextValue);
+        }
+        onChange(safeNextValue);
       },
       upload: {
         multiple: false,
@@ -229,8 +240,9 @@ const Edit = (props) => {
   useEffect(() => {
     if (editorReady && vdRef.current) {
       const editor = vdRef.current;
-      if (value !== editor.getValue()) {
-        editor.setValue(value ?? '');
+      const safeValue = stripMarkdownIframeTags(value ?? '');
+      if (safeValue !== editor.getValue()) {
+        editor.setValue(safeValue);
 
         const preArea = containerRef.current?.querySelector(
           'div.vditor-content > div.vditor-ir > pre',

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/DefaultValue.tsx

@@ -18,7 +18,6 @@ import {
   parseValueToPath,
   isRunJSValue,
   normalizeRunJSValue,
-  runjsWithSafeGlobals,
   useFlowContext,
   extractPropertyPath,
   FlowModel,
@@ -240,7 +239,7 @@ export const DefaultValue = connect((props: Props) => {
       if (isRunJSValue(out)) {
         try {
           const { code, version } = normalizeRunJSValue(out);
-          const ret = await runjsWithSafeGlobals(model?.context, code, { version });
+          const ret = await model?.context?.runjs(code, undefined, { version });
           out = ret?.success ? ret.value : undefined;
         } catch {
           out = undefined;