@nocobase/client-v2 2.3.0-beta.9 → 2.4.0-alpha.10

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

@@ -0,0 +1,48 @@
+/**
+ * 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 { validation } from '../validation';
+
+vi.mock('../../../flow-compat', () => ({ FieldValidation: () => null }));
+
+describe('validation action', () => {
+  it('rejects excess decimal places with a translated error and retains collection rules', async () => {
+    const setProps = vi.fn();
+    const collectionRule = { validator: vi.fn().mockResolvedValue(undefined) };
+    const t = vi.fn((key: string, options?: Record<string, unknown>) => {
+      return `${options?.label} 精度不能超过 ${options?.limit} 位小数`;
+    });
+    const ctx = {
+      model: {
+        props: { label: '工龄' },
+        collectionField: { getComponentProps: () => ({ rules: [collectionRule] }) },
+        setProps,
+      },
+      t,
+    } as unknown as Parameters<typeof validation.handler>[0];
+
+    await validation.handler(ctx, {
+      validation: { type: 'number', rules: [{ name: 'precision', args: { limit: 2 } }] },
+    });
+
+    const { rules } = setProps.mock.calls[0][0] as {
+      rules: { validator: (rule: unknown, value: unknown) => Promise<void> }[];
+    };
+    expect(rules).toHaveLength(2);
+    expect(rules[0]).toBe(collectionRule);
+    await expect(rules[1].validator({}, 39.2234)).rejects.toBe('工龄 精度不能超过 2 位小数');
+    expect(t).toHaveBeenCalledWith(
+      'number.precision',
+      expect.objectContaining({ ns: 'data-source-main', label: '工龄', limit: 2 }),
+    );
+    await expect(rules[1].validator({}, 39.22)).resolves.toBeUndefined();
+    await expect(rules[1].validator({}, null)).resolves.toBeUndefined();
+  });
+});

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

@@ -18,7 +18,6 @@ import { theme as antdTheme, ConfigProvider, Grid, Popover } from 'antd';
 import { createStyles, createGlobalStyle } from 'antd-style';
 import React, { FC, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import {
   AdminLayoutMenuModelRenderer,
@@ -35,7 +34,6 @@ import { ResetThemeTokenAndKeepAlgorithm } from './ResetThemeTokenAndKeepAlgorit
 import { PinnedPluginListLite } from './PinnedPluginListLite';
 import { useApplications } from './useApplications';
 import { useGlobalTheme, type CustomToken } from '../../../theme';
-import { useSystemSettings } from '../../system-settings';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
 import {
   FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT,
@@ -44,60 +42,7 @@ import {
 } from './flowSettingsPreference';
 import { joinAdminLayoutRoutePath, type AdminLayoutRoutePathLike } from './resolveAdminRouteRuntimeTarget';
 import { useAppListRender } from './AppListRender';
-
-const className1 = css`
-  height: var(--nb-header-height);
-  margin-right: 4px;
-  display: inline-flex;
-  flex-shrink: 0;
-  color: #fff;
-  padding: 0;
-  align-items: center;
-`;
-const className1WithFixedWidth = css`
-  ${className1}
-  width: 168px;
-`;
-const className1WithAutoWidth = css`
-  ${className1}
-  width: auto;
-  min-width: 168px;
-`;
-const className2 = css`
-  object-fit: contain;
-  width: 100%;
-  height: 100%;
-`;
-const className3 = css`
-  width: 100%;
-  height: 100%;
-  font-weight: 500;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const NocoBaseLogo = observer(() => {
-  const { token } = antdTheme.useToken();
-  const customToken = token as CustomToken;
-  const result = useSystemSettings();
-  const { t } = useTranslation('lm-collections');
-  const fontSizeStyle = useMemo(() => ({ fontSize: customToken.fontSizeHeading3 }), [customToken.fontSizeHeading3]);
-
-  const hasLogo = result?.data?.data?.logo?.url;
-  const logo = hasLogo ? (
-    <img className={className2} src={result?.data?.data?.logo?.url} />
-  ) : (
-    <span style={fontSizeStyle} className={className3}>
-      {t(result?.data?.data?.title)}
-    </span>
-  );
-
-  return (
-    <div className={hasLogo ? className1WithFixedWidth : className1WithAutoWidth}>{result?.loading ? null : logo}</div>
-  );
-});
+import { NocoBaseLogo } from './NocoBaseLogo';
 
 const resetStyle = css`
   .ant-layout-sider-children {

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

@@ -0,0 +1,77 @@
+/**
+ * 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 { css } from '@emotion/css';
+import { observer } from '@nocobase/flow-engine';
+import { theme as antdTheme } from 'antd';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSystemSettings } from '../../system-settings';
+import type { CustomToken } from '../../../theme';
+
+const logoContainerClassName = css`
+  height: var(--nb-header-height);
+  margin-right: 4px;
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 0;
+  align-items: center;
+`;
+
+const fixedWidthClassName = css`
+  ${logoContainerClassName}
+  width: 168px;
+`;
+
+const autoWidthClassName = css`
+  ${logoContainerClassName}
+  width: auto;
+  min-width: 168px;
+`;
+
+const logoImageClassName = css`
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+`;
+
+const titleClassName = css`
+  width: 100%;
+  height: 100%;
+  font-weight: 500;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const NocoBaseLogo = observer(() => {
+  const { token } = antdTheme.useToken();
+  const customToken = token as CustomToken;
+  const result = useSystemSettings();
+  const { t } = useTranslation('lm-collections');
+  const title = t(result?.data?.data?.title || 'NocoBase');
+  const logoUrl = result?.data?.data?.logo?.url;
+  const titleStyle = useMemo<React.CSSProperties>(
+    () => ({ color: customToken.colorTextHeaderMenu, fontSize: customToken.fontSizeHeading3 }),
+    [customToken.colorTextHeaderMenu, customToken.fontSizeHeading3],
+  );
+
+  const logo = logoUrl ? (
+    <img alt={title} className={logoImageClassName} src={logoUrl} />
+  ) : (
+    <span style={titleStyle} className={titleClassName}>
+      {title}
+    </span>
+  );
+
+  return <div className={logoUrl ? fixedWidthClassName : autoWidthClassName}>{result?.loading ? null : logo}</div>;
+});
+
+NocoBaseLogo.displayName = 'NocoBaseLogo';

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

@@ -24,7 +24,9 @@ const topbarActionsBarClassName = css`
   align-items: center;
   color: var(--nb-topbar-action-color);
 
-  .nb-topbar-actions-list {
+  .nb-topbar-actions-list,
+  .nb-topbar-utility-actions-list,
+  .nb-topbar-plugin-settings-action {
     display: inline-flex;
     align-items: center;
     height: 100%;
@@ -127,12 +129,18 @@ const getTopbarActionId = (action: TopbarActionModel) => {
   return action?.actionId || action?.uid || '';
 };
 
+const PLUGIN_SETTINGS_ACTION_ID = 'plugin-settings';
+
 const TopbarActionsContent = React.memo((props: { actions: TopbarActionModel[]; onActionClick?: () => void }) => {
   const { allow } = useAclSnippets();
   const { token } = theme.useToken();
   const customToken = token as CustomToken;
   const actions = useMemo(() => getVisibleTopbarActions(props.actions, allow), [allow, props.actions]);
-  const mainActions = actions.filter((action) => getTopbarActionId(action) !== USER_CENTER_ACTION_ID);
+  const mainActions = actions.filter((action) => {
+    const actionId = getTopbarActionId(action);
+    return actionId !== PLUGIN_SETTINGS_ACTION_ID && actionId !== USER_CENTER_ACTION_ID;
+  });
+  const pluginSettingsAction = actions.find((action) => getTopbarActionId(action) === PLUGIN_SETTINGS_ACTION_ID);
   const userCenterAction = actions.find((action) => getTopbarActionId(action) === USER_CENTER_ACTION_ID);
 
   return (
@@ -153,18 +161,33 @@ const TopbarActionsContent = React.memo((props: { actions: TopbarActionModel[];
       <ConfigProvider theme={dividerTheme}>
         <Divider type="vertical" />
       </ConfigProvider>
-      <HelpLite />
-      {userCenterAction ? (
-        <ErrorBoundary
-          key={userCenterAction.uid}
-          FallbackComponent={TopbarActionErrorFallback}
-          onError={(error) => {
-            console.error('[NocoBase] Topbar action render failed.', error);
-          }}
-        >
-          <FlowModelRenderer model={userCenterAction} />
-        </ErrorBoundary>
-      ) : null}
+      <div className="nb-topbar-utility-actions-list">
+        {pluginSettingsAction ? (
+          <span className="nb-topbar-plugin-settings-action" onClick={props.onActionClick}>
+            <ErrorBoundary
+              key={pluginSettingsAction.uid}
+              FallbackComponent={TopbarActionErrorFallback}
+              onError={(error) => {
+                console.error('[NocoBase] Topbar action render failed.', error);
+              }}
+            >
+              <FlowModelRenderer model={pluginSettingsAction} />
+            </ErrorBoundary>
+          </span>
+        ) : null}
+        <HelpLite />
+        {userCenterAction ? (
+          <ErrorBoundary
+            key={userCenterAction.uid}
+            FallbackComponent={TopbarActionErrorFallback}
+            onError={(error) => {
+              console.error('[NocoBase] Topbar action render failed.', error);
+            }}
+          >
+            <FlowModelRenderer model={userCenterAction} />
+          </ErrorBoundary>
+        ) : null}
+      </div>
     </div>
   );
 });

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

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { MemoryRouter, useLocation } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const { allowMock, appMock, flowModelRendererSpy } = vi.hoisted(() => {
@@ -17,6 +17,7 @@ const { allowMock, appMock, flowModelRendererSpy } = vi.hoisted(() => {
     allowMock: vi.fn(),
     appMock: {
       current: {
+        name: 'main',
         router: {
           getBasename: () => '/nocobase/v',
         },
@@ -86,6 +87,7 @@ describe('TopbarActionsBar helpers', () => {
     allowMock.mockReset();
     flowModelRendererSpy.mockClear();
     appMock.current = {
+      name: 'main',
       router: {
         getBasename: () => '/nocobase/v',
       },
@@ -136,6 +138,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 +171,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 +204,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 +229,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 +254,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,13 +279,38 @@ 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 open sub-app settings in the standalone SPA from 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/settings/apps/a_9xlild35jir/routes');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
+  });
   it.each(['/nocobase/v', '/v', '/nocobase/v/apps/jhb20'])(
-    'should navigate sub-app settings without document navigation with basename %s',
+    'should open standalone sub-app settings with basename %s',
     (basename) => {
+      appMock.current.name = 'jhb20';
       appMock.current.router.getBasename = () => basename;
       const items = getTopbarPluginSettingsItems({
         canManagePlugins: false,
@@ -293,22 +331,17 @@ describe('TopbarActionsBar helpers', () => {
         throw new Error('Expected settings menu item');
       }
       const appBase = basename.endsWith('/apps/jhb20') ? basename : `${basename}/apps/jhb20`;
-      const targetHref = `${appBase}/admin/settings/ai`;
-      const LocationDisplay = () => <output aria-label="Current route">{useLocation().pathname}</output>;
+      const targetHref = `${basename === '/v' ? '' : '/nocobase'}/settings/apps/jhb20/ai`;
       render(
         <MemoryRouter basename={basename} initialEntries={[`${appBase}/admin/a3pq1t1773a`]}>
           {item.label}
-          <LocationDisplay />
         </MemoryRouter>,
       );
 
       const link = screen.getByRole('link', { name: 'AI employees' });
       expect(link).toHaveAttribute('href', targetHref);
-      expect(link).not.toHaveAttribute('target', '_blank');
-      const click = new MouseEvent('click', { bubbles: true, cancelable: true, button: 0 });
-      fireEvent(link, click);
-      expect(click.defaultPrevented).toBe(true);
-      expect(screen.getByLabelText('Current route')).toHaveTextContent(targetHref.slice(basename.length));
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     },
   );
 
@@ -331,11 +364,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,
@@ -354,7 +387,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', () => {
@@ -421,6 +477,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/components/filter/VariableFilterItem.tsx

@@ -130,7 +130,9 @@ export interface VariableFilterItemProps {
   rightAsVariable?: boolean;
   /**
    * 右侧 VariableInput 的 metaTree 提供器；
-   * 默认使用整棵 ctx 的 metaTree：model.context.getPropertyMetaTree()
+   * 默认使用视图上下文的 metaTree：useFlowViewContext().getPropertyMetaTree()。
+   * 注意它取自视图上下文而非 `model.context`：当调用方传入的 model 与打开设置弹窗的模型不是同一个时，
+   * 右侧变量不会跟随 model 变化，需要显式传入本属性。
    */
   rightMetaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
   /**
@@ -139,9 +141,16 @@ export interface VariableFilterItemProps {
   rightVariableConverters?: Pick<Converters, 'resolvePathFromValue' | 'resolveValueFromPath'>;
   ignoreFieldNames?: string[];
   maxAssociationFieldDepth?: number;
+  /**
+   * 右侧变量树的关联层级上限，默认与 `maxAssociationFieldDepth` 一致。
+   * 传 `null` 表示不限制：右侧是变量树而非集合字段树，其深度可能已由调用方约束
+   * （例如工作流的变量树由触发器的「预加载关系数据」决定），此时再按左侧的层级上限裁剪
+   * 会让已配置好的深层变量选不到。
+   */
+  rightMaxAssociationFieldDepth?: number | null;
 }
 
-function limitMetaTreeIfNeeded(nodes: MetaTreeNode[], maxAssociationFieldDepth?: number) {
+function limitMetaTreeIfNeeded(nodes: MetaTreeNode[], maxAssociationFieldDepth?: number | null) {
   if (typeof maxAssociationFieldDepth !== 'number') {
     return nodes;
   }
@@ -367,6 +376,7 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
     rightVariableConverters,
     ignoreFieldNames,
     maxAssociationFieldDepth,
+    rightMaxAssociationFieldDepth = maxAssociationFieldDepth,
   }) => {
     // 使用 View 上下文，确保可访问 ctx.view 的异步子树
     const ctx = useFlowViewContext();
@@ -685,10 +695,10 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
             { title: t('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
             ...nodes,
           ],
-          maxAssociationFieldDepth,
+          rightMaxAssociationFieldDepth,
         );
       };
-    }, [rightMetaTree, ctx, staticInputRenderer, NullComponent, t, maxAssociationFieldDepth]);
+    }, [rightMetaTree, ctx, staticInputRenderer, NullComponent, t, rightMaxAssociationFieldDepth]);
 
     // 当启用右侧变量输入时，构造 VariableInput 的 converters：
     // - 变量模式：返回 null 让 VariableInput 渲染 VariableTag