@nocobase/client-v2 2.2.0-beta.9 → 2.2.0

package/src/flow/models/fields/mobile-components/MobileLazySelect.tsx

@@ -23,6 +23,20 @@ import {
 } from '../AssociationFieldModel/recordSelectShared';
 import _ from 'lodash';
 
+const mobileSelectSafeAreaPaddingBottom = 'calc(12px + env(safe-area-inset-bottom, 0px))';
+
+const mobileSelectConfirmFooterStyle: CSSProperties = {
+  paddingBottom: mobileSelectSafeAreaPaddingBottom,
+};
+
+function getMobileSelectListStyle(hasConfirmFooter: boolean): CSSProperties {
+  return {
+    maxHeight: '60vh',
+    overflowY: 'auto',
+    paddingBottom: hasConfirmFooter ? undefined : mobileSelectSafeAreaPaddingBottom,
+  };
+}
+
 const labelClassName = css`
   div {
     white-space: nowrap !important;
@@ -192,6 +206,11 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
         return;
       }
       const selectedId = vals[0];
+      if (selectedId === undefined) {
+        onChange(undefined as unknown as AssociationOption);
+        handleClose();
+        return;
+      }
       const record = optionMap.get(selectedId);
       if (record) {
         if (valueMode === 'value') {
@@ -277,16 +296,11 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
             value={searchText}
             onChange={handleSearchChange}
             onCancel={handleClose}
+            cancelText={t('Cancel')}
             showCancelButton
           />
         </div>
-        <div
-          style={{
-            maxHeight: '60vh',
-            overflowY: 'auto',
-          }}
-          onScroll={handleScroll}
-        >
+        <div style={getMobileSelectListStyle(isMultiple)} onScroll={handleScroll}>
           <CheckList multiple={isMultiple} value={selectedValueIds} onChange={handleListChange}>
             {realOptions.map((item) => {
               const optionValue = item?.[valueKey];
@@ -311,9 +325,11 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
           )}
         </div>
         {isMultiple && (
-          <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
-            {t('Confirm')}
-          </Button>
+          <div style={mobileSelectConfirmFooterStyle}>
+            <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
+              {t('Confirm')}
+            </Button>
+          </div>
         )}
       </Popup>
     </>

package/src/flow/models/fields/mobile-components/MobileSelect.tsx

@@ -9,13 +9,45 @@
 
 import { useFlowModelContext } from '@nocobase/flow-engine';
 import { Select } from 'antd';
-import { Button, CheckList, Popup, SearchBar } from 'antd-mobile';
+import { Button, CheckList, ConfigProvider, Popup, SearchBar, useConfig } from 'antd-mobile';
 import React, { useEffect, useMemo, useState } from 'react';
 
+const mobileSelectSafeAreaPaddingBottom = 'calc(12px + env(safe-area-inset-bottom, 0px))';
+
+const mobileSelectConfirmFooterStyle: React.CSSProperties = {
+  paddingBottom: mobileSelectSafeAreaPaddingBottom,
+};
+
+function getMobileSelectListStyle(hasConfirmFooter: boolean): React.CSSProperties {
+  return {
+    maxHeight: '60vh',
+    overflowY: 'auto',
+    paddingBottom: hasConfirmFooter ? undefined : mobileSelectSafeAreaPaddingBottom,
+  };
+}
+
+function normalizeMobileLocale(locale?: string) {
+  return locale === 'zh-CH' ? 'zh-CN' : locale;
+}
+
 export function MobileSelect(props) {
   const { value, displayValue, onChange, onChangeComplete, disabled, options = [], mode } = props;
+  const isMultiple = ['multiple', 'tags'].includes(mode);
   const ctx = useFlowModelContext();
   const t = ctx.t;
+  const { locale: mobileLocale } = useConfig();
+  const searchBarLocale = useMemo(() => {
+    const currentLocale = normalizeMobileLocale(ctx.locale);
+    const inheritedLocale = normalizeMobileLocale(mobileLocale.locale);
+
+    return {
+      ...mobileLocale,
+      SearchBar: {
+        ...mobileLocale.SearchBar,
+        name: currentLocale === inheritedLocale ? mobileLocale.SearchBar.name : t('Search'),
+      },
+    };
+  }, [ctx.locale, mobileLocale, t]);
   const [visible, setVisible] = useState(false);
   const [selected, setSelected] = useState(value || []);
   const [searchText, setSearchText] = useState(null);
@@ -62,19 +94,22 @@ export function MobileSelect(props) {
         destroyOnClose
       >
         <div style={{ margin: '10px' }}>
-          <SearchBar placeholder={t('search')} value={searchText} onChange={(v) => setSearchText(v)} showCancelButton />
+          <ConfigProvider locale={searchBarLocale}>
+            <SearchBar
+              placeholder={t('search')}
+              value={searchText}
+              onChange={(v) => setSearchText(v)}
+              cancelText={t('Cancel')}
+              showCancelButton
+            />
+          </ConfigProvider>
         </div>
-        <div
-          style={{
-            maxHeight: '60vh',
-            overflowY: 'auto',
-          }}
-        >
+        <div style={getMobileSelectListStyle(isMultiple)}>
           <CheckList
-            multiple={['multiple', 'tags'].includes(mode)}
+            multiple={isMultiple}
             value={Array.isArray(selected) ? selected : [selected]}
             onChange={(val) => {
-              if (['multiple', 'tags'].includes(mode)) {
+              if (isMultiple) {
                 setSelected(val);
               } else {
                 setSelected(val[0]);
@@ -91,10 +126,12 @@ export function MobileSelect(props) {
             ))}
           </CheckList>
         </div>
-        {['multiple', 'tags'].includes(mode) && (
-          <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
-            {t('Confirm')}
-          </Button>
+        {isMultiple && (
+          <div style={mobileSelectConfirmFooterStyle}>
+            <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
+              {t('Confirm')}
+            </Button>
+          </div>
         )}
       </Popup>
     </>

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 import { beforeEach, describe, it, expect, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@nocobase/test/client';
 import { MobileLazySelect } from '../MobileLazySelect';
@@ -23,11 +23,29 @@ const RELATION_OPTIONS = [
   { uuid: 'c7d99828-a1de-9e70-4c2d-b0139abdf02e' },
 ];
 
+type SelectProps = ComponentProps<(typeof import('antd'))['Select']>;
+type PopupProps = ComponentProps<(typeof import('antd-mobile'))['Popup']>;
+type CheckListProps = ComponentProps<(typeof import('antd-mobile'))['CheckList']>;
+type ButtonProps = ComponentProps<(typeof import('antd-mobile'))['Button']>;
+type SearchBarProps = ComponentProps<(typeof import('antd-mobile'))['SearchBar']>;
+type ConfigProviderProps = ComponentProps<(typeof import('antd-mobile'))['ConfigProvider']>;
+type MobileLocale = {
+  locale: string;
+  common: { cancel: string };
+  SearchBar: { name: string };
+};
+
 const mockState = vi.hoisted(() => ({
-  selectProps: undefined as any,
-  popupProps: undefined as any,
-  checklistProps: undefined as any,
-  confirmButtonProps: undefined as any,
+  selectProps: undefined as SelectProps | undefined,
+  popupProps: undefined as PopupProps | undefined,
+  checklistProps: undefined as CheckListProps | undefined,
+  confirmButtonProps: undefined as ButtonProps | undefined,
+  mobileLocale: {
+    locale: 'zh-CH',
+    common: { cancel: '取消' },
+    SearchBar: { name: '搜索框' },
+  },
+  flowLocale: 'en-US',
 }));
 
 function resetMockState() {
@@ -35,6 +53,12 @@ function resetMockState() {
   mockState.popupProps = undefined;
   mockState.checklistProps = undefined;
   mockState.confirmButtonProps = undefined;
+  mockState.mobileLocale = {
+    locale: 'zh-CH',
+    common: { cancel: '取消' },
+    SearchBar: { name: '搜索框' },
+  };
+  mockState.flowLocale = 'en-US';
 }
 
 function clickTrigger() {
@@ -115,7 +139,20 @@ vi.mock('@nocobase/flow-engine', async () => {
   return {
     ...actual,
     useFlowModelContext: () => ({
-      t: (value: string) => value,
+      locale: mockState.flowLocale,
+      t: (value: string) =>
+        ({
+          'zh-CN': {
+            Cancel: '取消',
+            Search: '搜索',
+            search: '搜索',
+          },
+          'zh-TW': {
+            Cancel: '取消',
+            Search: '搜尋',
+            search: '搜尋',
+          },
+        })[mockState.flowLocale]?.[value] || value,
     }),
     useFlowModel: () => ({
       context: {
@@ -130,7 +167,7 @@ vi.mock('antd', async () => {
   const actual = await vi.importActual<any>('antd');
   return {
     ...actual,
-    Select: (props: any) => {
+    Select: (props: SelectProps) => {
       mockState.selectProps = props;
       return <div data-testid="antd-select" />;
     },
@@ -138,15 +175,22 @@ vi.mock('antd', async () => {
 });
 
 vi.mock('antd-mobile', () => {
-  const MockCheckList: any = (props: any) => {
+  const MockCheckList = (props: CheckListProps) => {
     mockState.checklistProps = props;
     return <div data-testid="checklist">{props.children}</div>;
   };
 
-  MockCheckList.Item = ({ value, children }: any) => <div data-testid={`item-${value}`}>{children}</div>;
+  MockCheckList.Item = ({ value, children }: { value: string | number; children?: ReactNode }) => (
+    <div data-testid={`item-${value}`}>{children}</div>
+  );
 
   return {
-    Button: (props: any) => {
+    ConfigProvider: ({ children, locale }: ConfigProviderProps) => {
+      mockState.mobileLocale = locale as MobileLocale;
+      return <>{children}</>;
+    },
+    useConfig: () => ({ locale: mockState.mobileLocale }),
+    Button: (props: ButtonProps) => {
       mockState.confirmButtonProps = props;
       return (
         <button type="button" data-testid="confirm" onClick={props.onClick}>
@@ -154,12 +198,26 @@ vi.mock('antd-mobile', () => {
         </button>
       );
     },
-    Popup: (props: any) => {
+    Popup: (props: PopupProps) => {
       mockState.popupProps = props;
       return props.visible ? <div data-testid="popup">{props.children}</div> : null;
     },
-    SearchBar: ({ value, onChange }: any) => (
-      <input data-testid="search" value={value ?? ''} onChange={(e) => onChange?.(e.target.value)} />
+    SearchBar: ({ value, onChange, onCancel, cancelText, placeholder, showCancelButton }: SearchBarProps) => (
+      <div>
+        <input
+          aria-label={mockState.mobileLocale.SearchBar.name}
+          data-testid="search"
+          placeholder={placeholder}
+          type="search"
+          value={value ?? ''}
+          onChange={(e) => onChange?.(e.target.value)}
+        />
+        {showCancelButton && value ? (
+          <button type="button" onClick={onCancel}>
+            {cancelText ?? mockState.mobileLocale.common.cancel}
+          </button>
+        ) : null}
+      </div>
     ),
     CheckList: MockCheckList,
   };
@@ -199,6 +257,47 @@ describe('MobileSelect', () => {
     expect(onChangeComplete).toHaveBeenCalledTimes(1);
   });
 
+  it('localizes the search input accessible name', () => {
+    renderMobileSelect();
+
+    openPopup();
+
+    expect(screen.getByRole('searchbox', { name: 'Search' })).toBeInTheDocument();
+  });
+
+  it('renders a translated cancel action after searching', () => {
+    renderMobileSelect();
+
+    openPopup();
+    act(() => {
+      fireEvent.change(screen.getByTestId('search'), { target: { value: 'Option' } });
+    });
+
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
+
+  it('preserves the Chinese search input accessible name', () => {
+    mockState.flowLocale = 'zh-CN';
+    renderMobileSelect();
+
+    openPopup();
+    act(() => {
+      fireEvent.change(screen.getByTestId('search'), { target: { value: 'Option' } });
+    });
+
+    expect(screen.getByRole('searchbox', { name: '搜索框' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '取消' })).toBeInTheDocument();
+  });
+
+  it('does not reuse the simplified Chinese accessible name for traditional Chinese', () => {
+    mockState.flowLocale = 'zh-TW';
+    renderMobileSelect();
+
+    openPopup();
+
+    expect(screen.getByRole('searchbox', { name: '搜尋' })).toBeInTheDocument();
+  });
+
   it('defers commit until confirm in multiple mode', () => {
     const { onChange, onChangeComplete } = renderMobileSelect({ value: [], mode: 'multiple' });
     openPopup();
@@ -289,6 +388,33 @@ describe('MobileLazySelect', () => {
     resetMockState();
   });
 
+  it('renders a translated cancel action after searching', () => {
+    renderMobileLazySelect();
+
+    openLazyPopup();
+    act(() => {
+      fireEvent.change(screen.getByTestId('search'), { target: { value: '11' } });
+    });
+
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
+
+  it('clears the selected relation record when it is tapped again in single mode', () => {
+    const { onChange } = renderMobileLazySelect({
+      value: RELATION_OPTIONS[0],
+      multiple: false,
+    });
+
+    openLazyPopup();
+    expect(mockState.checklistProps?.value).toEqual([RELATION_OPTIONS[0].uuid]);
+
+    selectValues([]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(undefined);
+    expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
+  });
+
   it('keeps pending relation records selected until confirm', () => {
     const { onChange, rerender } = renderMobileLazySelect();
 

package/src/flow/utils/dataScopeFormValueClear.ts

@@ -105,9 +105,6 @@ function resolveItemDependencyPath(ctx: FlowContext, depPath: NamePath): DataSco
     ctx,
     parseFieldIndexEntries((ctx.model as any)?.context?.fieldIndex ?? (ctx as any)?.fieldIndex),
   );
-  if (!entries.length) {
-    return wildcardDeps();
-  }
 
   let parentDepth = 0;
   let cursor = [...depPath];
@@ -121,6 +118,10 @@ function resolveItemDependencyPath(ctx: FlowContext, depPath: NamePath): DataSco
     return wildcardDeps();
   }
 
+  if (!entries.length) {
+    return parentDepth === 0 ? resolveRootItemDependencyPath(cursor) : emptyDeps();
+  }
+
   if (parentDepth === entries.length) {
     return resolveRootItemDependencyPath(cursor);
   }

package/src/flow-compat/fieldValidationConstants.ts

@@ -231,7 +231,7 @@ export const FIELDS_VALIDATION_OPTIONS = {
     },
     {
       key: 'multiple',
-      label: 'Multiple',
+      label: 'Multiple of',
       hasValue: true,
       params: [{ key: 'base', label: 'Base', componentType: 'inputNumber', required: true }],
     },

package/src/flow-compat/routeTypes.ts

@@ -18,6 +18,7 @@ export enum NocoBaseDesktopRouteType {
 
 export interface NocoBaseDesktopRouteOptions {
   hasPersistedMenuInstanceFlow?: boolean;
+  hasPersistedPageTabFlowModel?: boolean;
   [key: string]: any;
 }
 

package/src/index.ts

@@ -30,6 +30,8 @@ export * from './layout-manager';
 export * from './hooks';
 export { default as languageCodes } from './locale/languageCodes';
 export * from './nocobase-buildin-plugin';
+export { getRouteRuntimeVersion } from './utils/getRouteRuntimeVersion';
+export type { RouteRuntimeVersion } from './utils/getRouteRuntimeVersion';
 export * from './collection-field-interface/CollectionFieldInterface';
 export * from './collection-field-interface/CollectionFieldInterfaceManager';
 export * from './collection-manager/field-configure';
@@ -40,6 +42,8 @@ export * from './collection-manager/template-fields';
 export * from './data-source';
 export * from './entry-actions';
 export * from './flow';
+export { CodeEditorExtension } from './flow/components/code-editor/extension';
+export type { CodeEditorExtra, CodeEditorExtraRegistry, EditorRef } from './flow/components/code-editor/types';
 export {
   DEFAULT_DATA_SOURCE_KEY,
   IconPicker,
@@ -49,4 +53,5 @@ export {
 } from './flow-compat';
 export type { NocoBaseDesktopRoute } from './flow-compat';
 export * from './utils/markdownSanitize';
+export * from './ui-operation';
 export { default as AntdAppProvider } from './theme/AntdAppProvider';

package/src/layout-manager/LayoutContentRoute.tsx

@@ -38,11 +38,12 @@ export const LayoutContentRoute = (props: LayoutContentRouteProps) => {
       id: lastMatch?.id,
       name: lastMatch?.id,
       pathname: location.pathname,
+      state: location.state,
       params: (lastMatch?.params || {}) as Record<string, string | undefined>,
       layoutRouteName: layout.routeName,
       layoutBasePathname: layoutMatch?.pathname,
     };
-  }, [layout.routeName, location.pathname, matches]);
+  }, [layout.routeName, location.pathname, location.state, matches]);
   if (!model) {
     throw new Error(`[NocoBase] Layout '${layout.routeName}' model '${layout.uid}' is not mounted.`);
   }

package/src/layout-manager/LayoutRoute.tsx

@@ -71,11 +71,12 @@ export const LayoutRoute = (props: LayoutRouteProps) => {
       id: lastMatch?.id,
       name: lastMatch?.id,
       pathname: location.pathname,
+      state: location.state,
       params: lastMatchParams,
       layoutRouteName: layout.routeName,
       layoutBasePathname: layoutMatch?.pathname,
     };
-  }, [lastMatch?.id, lastMatchParams, layout.routeName, layoutMatch?.pathname, location.pathname]);
+  }, [lastMatch?.id, lastMatchParams, layout.routeName, layoutMatch?.pathname, location.pathname, location.state]);
   const { loading, data, error } = useRequest(
     async () => {
       const existingModel = flowEngine.getModel<BaseLayoutModel>(layout.uid);

package/src/layout-manager/__tests__/LayoutRoute.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import { FlowEngine, FlowEngineProvider, observer } from '@nocobase/flow-engine';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { createMemoryRouter, Outlet, RouterProvider, useOutlet } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
@@ -106,6 +106,64 @@ describe('LayoutRoute', () => {
     });
   });
 
+  it('syncs updated router state when navigating to the same layout pathname', async () => {
+    const syncLayoutRoute = vi.fn();
+
+    class StateTrackingLayoutModel extends TestLayoutModel {
+      syncLayoutRoute(routeLike: Parameters<BaseLayoutModel['syncLayoutRoute']>[0]) {
+        syncLayoutRoute(routeLike);
+        return super.syncLayoutRoute(routeLike);
+      }
+    }
+
+    const stateTrackingLayout: LayoutDefinition = {
+      ...layout,
+      layoutModelClass: 'StateTrackingLayoutModel',
+    };
+    const engine = new FlowEngine();
+    engine.registerModels({ StateTrackingLayoutModel });
+    engine.context.defineProperty('app', {
+      value: {
+        layoutManager: {
+          getLayout: () => stateTrackingLayout,
+        },
+      },
+    });
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <LayoutRoute layoutRouteName="test" />,
+        },
+      ],
+      {
+        initialEntries: ['/test'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByTestId('layout-route')).toHaveTextContent('test');
+    syncLayoutRoute.mockClear();
+
+    const routeState = {
+      __nocobaseOpenViewInputArgs: { popup: { formData: { status: 'todo' } } },
+    };
+    await act(async () => {
+      await router.navigate('/test', { state: routeState });
+    });
+
+    await waitFor(() => {
+      expect(syncLayoutRoute).toHaveBeenCalledWith(expect.objectContaining({ state: routeState }));
+    });
+  });
+
   it('does not activate desktop route loading for generic layouts', async () => {
     const activateLayout = vi.fn(() => vi.fn());
     const engine = new FlowEngine();
@@ -413,6 +471,34 @@ describe('LayoutContentRoute', () => {
     });
   });
 
+  it('syncs updated router state when navigating to the same content pathname', async () => {
+    const syncLayoutRoute = vi.fn();
+
+    class StateTrackingLayoutModel extends TestLayoutModel {
+      syncLayoutRoute(routeLike: Parameters<BaseLayoutModel['syncLayoutRoute']>[0]) {
+        syncLayoutRoute(routeLike);
+        return super.syncLayoutRoute(routeLike);
+      }
+    }
+
+    const { router } = setup('/test/page-1/view/popup', layout, StateTrackingLayoutModel);
+    await waitFor(() => {
+      expect(syncLayoutRoute).toHaveBeenCalled();
+    });
+    syncLayoutRoute.mockClear();
+
+    const routeState = {
+      __nocobaseOpenViewInputArgs: { popup: { formData: { status: 'todo' } } },
+    };
+    await act(async () => {
+      await router.navigate('/test/page-1/view/popup', { state: routeState });
+    });
+
+    await waitFor(() => {
+      expect(syncLayoutRoute).toHaveBeenCalledWith(expect.objectContaining({ state: routeState }));
+    });
+  });
+
   it('parses nested layout route by matched layout pathname', async () => {
     const nestedLayout: LayoutDefinition = {
       ...layout,

package/src/locale/languageCodes.ts

@@ -54,6 +54,7 @@ export const languageCodes: Record<string, LocaleOptions> = {
   'ml-IN': { label: 'മലയാളം' },
   'mn-MN': { label: 'Монгол хэл' },
   'ms-MY': { label: 'بهاس ملايو' },
+  'my-MM': { label: 'မြန်မာဘာသာ' },
   'nb-NO': { label: 'Norsk bokmål' },
   'ne-NP': { label: 'नेपाली' },
   'nl-BE': { label: 'Vlaams' },
@@ -73,7 +74,8 @@ export const languageCodes: Record<string, LocaleOptions> = {
   'tk-TK': { label: 'Turkmen' },
   'tr-TR': { label: 'Türkçe' },
   'uk-UA': { label: 'Українська' },
-  'ur-PK': { label: 'Oʻzbekcha' },
+  'ur-PK': { label: 'اردو' },
+  'uz-UZ': { label: 'Oʻzbekcha' },
   'vi-VN': { label: 'Tiếng Việt' },
   'zh-CN': { label: '简体中文' },
   'zh-HK': { label: '繁體中文（香港）' },

package/src/nocobase-buildin-plugin/index.tsx

@@ -240,6 +240,16 @@ const CurrentUserProvider: FC = ({ children }) => {
           return;
         }
 
+        try {
+          await app.apiClient.auth.syncCookies();
+        } catch {
+          // Cookie bootstrap is best-effort; auth:check remains the source of truth for the current page load.
+        }
+
+        if (!mounted) {
+          return;
+        }
+
         const userMeta = createCollectionContextMeta(
           () => app.flowEngine.context.dataSourceManager?.getDataSource('main')?.getCollection('users') || null,
           app.flowEngine.translate('Current user'),
@@ -298,6 +308,8 @@ const CurrentUserProvider: FC = ({ children }) => {
   return <CurrentUserContext.Provider value={contextValue}>{children}</CurrentUserContext.Provider>;
 };
 
+CurrentUserProvider.displayName = 'CurrentUserProvider';
+
 const RootRedirect: FC = () => {
   const app = useApp<Application>();
   const hasToken = !!app?.apiClient?.auth?.token;

package/src/settings-center/AdminSettingsLayout.tsx

@@ -14,7 +14,7 @@ import { FlowModelRenderer, useFlowEngine } from '@nocobase/flow-engine';
 import { Layout, Menu, Result, theme } from 'antd';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Navigate, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { generatePath, Navigate, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useACLRoleContext } from '../acl';
 import { ADMIN_SETTINGS_PATH, type PluginSettingsPageType } from '../PluginSettingsManager';
 import { useApp } from '../hooks/useApp';
@@ -68,6 +68,9 @@ export const InternalAdminSettingsLayout = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const params = useParams();
+  const routeParams = Object.fromEntries(
+    Object.entries(params).filter((entry): entry is [string, string] => typeof entry[1] === 'string'),
+  );
   const { token } = theme.useToken();
   const { t } = useTranslation();
   const { snippets = [] } = useACLRoleContext();
@@ -174,7 +177,25 @@ export const InternalAdminSettingsLayout = () => {
     return <SettingsEmpty type="route" />;
   }
 
-  if (!currentVisibleSetting && currentSetting.isAllow === false) {
+  if (currentSetting.isAllow === false) {
+    const firstVisibleTabPath = currentVisibleTabs
+      .map((tab) => getDefaultSettingsPath([tab]))
+      .filter((path): path is string => typeof path === 'string')
+      .map((path) => {
+        try {
+          return generatePath(path, routeParams);
+        } catch {
+          return null;
+        }
+      })
+      .find((path): path is string => typeof path === 'string');
+    if (firstVisibleTabPath) {
+      return <Navigate replace to={firstVisibleTabPath} />;
+    }
+    if (!defaultSettingsPath) {
+      return <Navigate replace to="/admin" />;
+    }
+
     return <SettingsEmpty type="route" />;
   }