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

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

@@ -9,21 +9,23 @@
 
 import { createCollectionContextMeta, useFlowEngine } from '@nocobase/flow-engine';
 import React, { createContext, type FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useACLRoleContext } from '../acl';
 import type { Application } from '../Application';
-import { getCurrentV2RedirectPath, getDefaultV2AdminRedirectPath } from '../authRedirect';
+import { getCurrentV2RedirectPath, redirectToV2Signin } from '../authRedirect';
 import { AppNotFound } from '../components';
 import { PluginFlowEngine } from '../flow';
 import {
-  ADMIN_LAYOUT_MODEL_UID,
   AdminLayoutMenuItemModel,
   AdminLayoutModel,
   AppSwitcherActionPanelModel,
 } from '../flow/admin-shell/admin-layout';
 import { useApp } from '../hooks/useApp';
 import { Plugin } from '../Plugin';
+import type { PluginClass } from '../PluginManager';
 import { AdminSettingsLayoutModel } from '../settings-center';
+import { SettingsDocumentRedirect } from '../settings-app/SettingsDocumentRedirect';
+import { type CurrentUserAuthStatus, setCurrentUserAuthStatus } from './currentUserAuthStatus';
 import { LocalePlugin } from './plugins/LocalePlugin';
 
 export type CurrentUserState = {
@@ -33,8 +35,6 @@ export type CurrentUserState = {
   loading: boolean;
 };
 
-type CurrentUserAuthStatus = 'unknown' | 'authenticated' | 'unauthenticated' | 'redirecting';
-
 type CurrentUserInternalState = CurrentUserState & {
   authStatus: CurrentUserAuthStatus;
   error?: Error | null;
@@ -181,6 +181,19 @@ const DataSourceBootstrapProvider: FC = ({ children }) => {
   return <>{children}</>;
 };
 
+function redirectUnauthenticatedRoute(
+  app: Application,
+  location: { pathname: string; search?: string; hash?: string },
+  navigate: ReturnType<typeof useNavigate>,
+) {
+  const redirectPath = getCurrentV2RedirectPath(app, location);
+  if (app.pluginSettingsManager.getRouteName('') === 'settings.') {
+    redirectToV2Signin(app, redirectPath);
+    return;
+  }
+  navigate(`/signin?redirect=${encodeURIComponent(redirectPath)}`, { replace: true });
+}
+
 const CurrentUserProvider: FC = ({ children }) => {
   const app = useApp<Application>();
   const location = useLocation();
@@ -234,9 +247,17 @@ const CurrentUserProvider: FC = ({ children }) => {
         if (user?.id == null) {
           // 用 react-router navigate (虚拟跳转)而不是 location.replace, 这样如果有其他响应拦截器已经发起了 window.location.href 整页跳转(例如 2FA 插件接收到服务端 302 重定向), 真实跳转可以胜出 navigate, 不会被这里的 signin 重定向覆盖。
           setState({ loading: true, authStatus: 'unauthenticated', error: null });
-          navigate(`/signin?redirect=${encodeURIComponent(getCurrentV2RedirectPath(app, locationRef.current))}`, {
-            replace: true,
-          });
+          redirectUnauthenticatedRoute(app, locationRef.current, navigate);
+          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;
         }
 
@@ -267,9 +288,7 @@ const CurrentUserProvider: FC = ({ children }) => {
         const isAuthError = errorLike?.response?.status === 401 || errorLike?.status === 401;
         if (isAuthError) {
           setState({ loading: true, authStatus: 'unauthenticated', error: null });
-          navigate(`/signin?redirect=${encodeURIComponent(getCurrentV2RedirectPath(app, locationRef.current))}`, {
-            replace: true,
-          });
+          redirectUnauthenticatedRoute(app, locationRef.current, navigate);
           return;
         }
         setState({
@@ -287,6 +306,10 @@ const CurrentUserProvider: FC = ({ children }) => {
     };
   }, [app, authCheckRouteState, navigate]);
 
+  useEffect(() => {
+    setCurrentUserAuthStatus(app, state.authStatus);
+  }, [app, state.authStatus]);
+
   if (state.error) {
     throw state.error;
   }
@@ -298,18 +321,7 @@ const CurrentUserProvider: FC = ({ children }) => {
   return <CurrentUserContext.Provider value={contextValue}>{children}</CurrentUserContext.Provider>;
 };
 
-const RootRedirect: FC = () => {
-  const app = useApp<Application>();
-  const hasToken = !!app?.apiClient?.auth?.token;
-  const targetPath = getDefaultV2AdminRedirectPath(app);
-
-  if (!hasToken) {
-    // 用 react-router <Navigate /> 而非 location.replace, 避免覆盖同时段其它响应拦截器触发的 window.location.href (例如 2FA 接收到服务端 302 时设置的整页跳转)。
-    return <Navigate replace to={`/signin?redirect=${encodeURIComponent(targetPath)}`} />;
-  }
-
-  return <Navigate replace to="/admin" />;
-};
+CurrentUserProvider.displayName = 'CurrentUserProvider';
 
 /**
  * client-v2 使用的内建插件集合。
@@ -334,56 +346,11 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
       AppSwitcherActionPanelModel,
       AdminSettingsLayoutModel,
     });
-    this.app.layoutManager.registerLayout({
-      routeName: 'admin',
-      routePath: '/admin',
-      uid: ADMIN_LAYOUT_MODEL_UID,
-      layoutModelClass: 'AdminLayoutModel',
-    });
 
-    this.app.pluginSettingsManager.addMenuItem({
-      key: 'plugin-manager',
-      title: this.app.i18n.t('Plugin manager'),
-      icon: 'ApiOutlined',
-      aclSnippet: 'pm',
-      sort: -200,
-    });
-    this.app.pluginSettingsManager.addPageTabItem({
-      menuKey: 'plugin-manager',
-      key: 'index',
-      title: this.app.i18n.t('Plugin manager'),
-      componentLoader: () => import('../settings-center/plugin-manager'),
-      aclSnippet: 'pm',
-      sort: -200,
-    });
-    this.app.pluginSettingsManager.addMenuItem({
-      key: 'system-settings',
-      title: this.app.i18n.t('System settings'),
-      icon: 'SettingOutlined',
-      aclSnippet: 'pm.system-settings.system-settings',
-    });
-    this.app.pluginSettingsManager.addPageTabItem({
-      menuKey: 'system-settings',
-      key: 'index',
-      title: this.app.i18n.t('System settings'),
-      componentLoader: () => import('../settings-center/SystemSettingsPage'),
-      aclSnippet: 'pm.system-settings.system-settings',
-    });
-    // Parent menu for security-related plugin settings (password policy, locked users, etc.). Registered here in the buildin plugin so any pro plugin can attach page tabs to `menuKey: 'security'` without each one re-registering the same parent.
-    this.app.pluginSettingsManager.addMenuItem({
-      key: 'security',
-      title: this.app.i18n.t('Security'),
-      icon: 'SafetyOutlined',
-      aclSnippet: 'pm.security',
-    });
+    registerDefaultSettings(this.app);
   }
 
   addRoutes() {
-    this.router.add('root', {
-      path: '/',
-      element: <RootRedirect />,
-    });
-
     this.router.add('not-found', {
       path: '*',
       Component: AppNotFound,
@@ -391,7 +358,7 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
 
     this.router.add('admin.settings', {
       path: '/admin/settings',
-      componentLoader: () => import('../settings-center/AdminSettingsLayout'),
+      Component: SettingsDocumentRedirect,
     });
     this.router.add('admin.settings.route-empty', {
       path: '*',
@@ -407,4 +374,77 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
   }
 }
 
+function registerDefaultSettings(app: Application) {
+  app.pluginSettingsManager.addMenuItem({
+    key: 'plugin-manager',
+    title: app.i18n.t('Plugin manager'),
+    icon: 'ApiOutlined',
+    aclSnippet: 'pm',
+    sort: -200,
+  });
+  app.pluginSettingsManager.addPageTabItem({
+    menuKey: 'plugin-manager',
+    key: 'index',
+    title: app.i18n.t('Plugin manager'),
+    componentLoader: () => import('../settings-center/plugin-manager'),
+    aclSnippet: 'pm',
+    sort: -200,
+  });
+  app.pluginSettingsManager.addMenuItem({
+    key: 'system-settings',
+    title: app.i18n.t('System settings'),
+    icon: 'SettingOutlined',
+    aclSnippet: 'pm.system-settings.system-settings',
+  });
+  app.pluginSettingsManager.addPageTabItem({
+    menuKey: 'system-settings',
+    key: 'index',
+    title: app.i18n.t('System settings'),
+    componentLoader: () => import('../settings-center/SystemSettingsPage'),
+    aclSnippet: 'pm.system-settings.system-settings',
+  });
+  // Parent menu for security-related plugin settings (password policy, locked users, etc.). Registered here in the buildin plugin so any pro plugin can attach page tabs to `menuKey: 'security'` without each one re-registering the same parent.
+  app.pluginSettingsManager.addMenuItem({
+    key: 'security',
+    title: app.i18n.t('Security'),
+    icon: 'SafetyOutlined',
+    aclSnippet: 'pm.security',
+  });
+}
+
+/**
+ * Internal built-in runtime for the standalone Client V2 settings entry.
+ * It intentionally shares the existing plugin lane and runtime providers but
+ * does not register the Admin Layout.
+ */
+export class SettingsBuildInPlugin extends Plugin<any, Application> {
+  async afterAdd() {
+    await this.app.pm.add(PluginFlowEngine);
+    await this.app.pm.add(LocalePlugin as unknown as PluginClass, { name: 'builtin-locale' });
+  }
+
+  async load() {
+    this.app.use(CurrentUserProvider);
+    this.app.use(DataSourceBootstrapProvider);
+    this.app.flowEngine.registerModels({ AdminSettingsLayoutModel });
+
+    this.router.add('settings', {
+      path: '/settings',
+      authCheck: true,
+      componentLoader: () => import('../settings-center/AdminSettingsLayout'),
+    });
+    this.router.add('settingsDetails', {
+      path: '/settings',
+      authCheck: true,
+      Component: Outlet,
+    });
+    this.router.add('settings.route-empty', {
+      path: '*',
+      Component: Outlet,
+    });
+
+    registerDefaultSettings(this.app);
+  }
+}
+
 export { NocoBaseBuildInPlugin as NocoBaseBuildInPluginV2 };

package/src/settings-app/SettingsApplication.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { Application, type ApplicationOptions } from '../index';
+import { SettingsPluginSettingsManager } from './SettingsPluginSettingsManager';
+import { SettingsRouterManager } from './SettingsRouterManager';
+import { SettingsShell } from './SettingsShell';
+
+export class SettingsApplication extends Application {
+  /** 设置中心的标记，插件通过 `isSettingsApp(app)` 读它，避免反向依赖这个类。 */
+  readonly isSettingsApp = true;
+
+  protected addCustomProviders() {
+    super.addCustomProviders();
+    this.use(SettingsShell);
+  }
+
+  protected createRouterManager(options: ApplicationOptions): SettingsRouterManager<this> {
+    return new SettingsRouterManager<this>(options.router, this);
+  }
+
+  protected createPluginSettingsManager(_options: ApplicationOptions): SettingsPluginSettingsManager<this> {
+    return new SettingsPluginSettingsManager<this>(this);
+  }
+}

package/src/settings-app/SettingsBrand.tsx

@@ -0,0 +1,108 @@
+/**
+ * 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 from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSystemSettings } from '../flow/system-settings';
+import { getSettingsHeaderColors } from './settingsTheme';
+
+const brandClassName = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+  flex-shrink: 0;
+  min-width: 0;
+`;
+
+const logoImageClassName = css`
+  height: 24px;
+  width: auto;
+  max-width: 140px;
+  object-fit: contain;
+  display: block;
+`;
+
+const titleClassName = css`
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const suffixClassName = css`
+  line-height: 1;
+  white-space: nowrap;
+  font-weight: 400;
+`;
+
+/**
+ * 设置中心顶栏品牌区。
+ *
+ * 沿用系统设置里的站点 logo / 标题，并在其后补一个弱化的「设置中心」副标题，
+ * 用于区分设置中心和业务端。
+ */
+export const SettingsBrand = observer(() => {
+  const { token } = antdTheme.useToken();
+  const headerColors = getSettingsHeaderColors(token);
+  const result = useSystemSettings();
+  const { t } = useTranslation();
+  const { t: tCollections } = useTranslation('lm-collections');
+  const title = tCollections(result?.data?.data?.title || 'NocoBase');
+  const logoUrl = result?.data?.data?.logo?.url;
+
+  if (result?.loading) {
+    return <div className={brandClassName} />;
+  }
+
+  return (
+    <div className={brandClassName}>
+      {logoUrl ? (
+        // 站点 logo 通常是为深色顶栏画的浅色图；设置中心顶栏是灰白的，
+        // 统一压成单色，避免浅色 logo 直接消失在白底上。
+        <img
+          alt={title}
+          className={logoImageClassName}
+          src={logoUrl}
+          style={{ filter: headerColors.dark ? 'brightness(0) invert(1)' : 'brightness(0)' }}
+        />
+      ) : (
+        <span className={titleClassName} style={{ color: headerColors.text, fontSize: token.fontSizeHeading4 }}>
+          {title}
+        </span>
+      )}
+      <span
+        aria-hidden
+        style={{
+          alignSelf: 'center',
+          background: headerColors.text,
+          height: 16,
+          opacity: 0.3,
+          width: 1,
+        }}
+      />
+      <span
+        className={suffixClassName}
+        style={{
+          color: headerColors.text,
+          fontSize: token.fontSize,
+          opacity: 0.75,
+        }}
+      >
+        {t('Settings center')}
+      </span>
+    </div>
+  );
+});
+
+SettingsBrand.displayName = 'SettingsBrand';

package/src/settings-app/SettingsBuildInPlugin.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export { SettingsBuildInPlugin } from '../nocobase-buildin-plugin';

package/src/settings-app/SettingsDocumentRedirect.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useApp } from '../hooks/useApp';
+import { resolveStandaloneSettingsPath } from './runtimePaths';
+
+export function SettingsDocumentRedirect() {
+  const app = useApp();
+  const location = useLocation();
+  const sourcePath = `${location.pathname}${location.search}${location.hash}`;
+  const targetPath = resolveStandaloneSettingsPath(app, sourcePath, location.pathname);
+
+  useEffect(() => {
+    window.location.replace(targetPath);
+  }, [targetPath]);
+
+  return app.renderComponent('AppSpin');
+}

package/src/settings-app/SettingsGroupNav.tsx

@@ -0,0 +1,124 @@
+/**
+ * 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 { observer } from '@nocobase/flow-engine';
+import { ConfigProvider, Menu, theme as antdTheme } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useApp } from '../hooks/useApp';
+import { useSettingsGroups } from '../settings-center/useSettingsGroups';
+import { buildSettingsHeaderMenuTheme } from './settingsTheme';
+
+const navStyle: React.CSSProperties = {
+  background: 'transparent',
+  borderBottom: 'none',
+  flex: 'auto',
+  minWidth: 0,
+  lineHeight: '46px',
+};
+
+/**
+ * 设置中心顶栏的一级导航。
+ *
+ * 应用、插件管理各自只有一个页面，直接当一级入口；其余全部收在「系统设置」下，
+ * 鼠标移上去展开下拉，也可以点进去从左栏走。
+ */
+export const SettingsGroupNav: React.FC = observer(() => {
+  const { t } = useTranslation();
+  const app = useApp();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { token } = antdTheme.useToken();
+  const { groups, activeGroupKey, currentTopLevelSetting, getGroupEntryPath } = useSettingsGroups();
+  const headerMenuTheme = useMemo(() => buildSettingsHeaderMenuTheme(token), [token]);
+  // 登录 / 找回密码等免鉴权页面共用同一个 shell，这些页面上不该出现设置导航。
+  const isAuthRoute = app.router.isSkippedAuthCheckRoute(location.pathname);
+
+  const handleClick = useCallback(
+    ({ key }: { key: string }) => {
+      const [groupKey, settingName] = key.split('::');
+      const targetPath = settingName
+        ? groups.find((group) => group.key === groupKey)?.settings.find((item) => item.name === settingName)?.path
+        : getGroupEntryPath(groupKey);
+
+      if (targetPath && targetPath !== location.pathname) {
+        navigate(targetPath);
+      }
+    },
+    [getGroupEntryPath, groups, location.pathname, navigate],
+  );
+
+  // 单入口分组直接当一级项，标题取配置项自己的名字（顺带继承插件的翻译）；
+  // 系统设置这种大分组挂上子项，鼠标移上去展开。
+  const items = useMemo(
+    () =>
+      groups.map((group) => {
+        if (group.settings.length <= 1) {
+          return {
+            key: group.key,
+            label: group.settings[0]?.label ?? t(group.title),
+            icon: group.settings[0]?.icon,
+          };
+        }
+
+        // 已经站在这个分组里时不再弹下拉：左栏已经把同一份内容铺开了，再浮一层纯属打扰。
+        if (group.key === activeGroupKey) {
+          return { key: group.key, label: t(group.title) };
+        }
+
+        return {
+          key: group.key,
+          label: t(group.title),
+          children: group.settings
+            .filter((setting) => !setting.hidden)
+            .map((setting) => ({
+              key: `${group.key}::${setting.name}`,
+              label: setting.label ?? setting.title,
+              icon: setting.icon,
+            })),
+          // 点标题本身也要能进去，而不是只能从下拉里挑。
+          onTitleClick: handleClick,
+        };
+      }),
+    [activeGroupKey, groups, handleClick, t],
+  );
+
+  // 子菜单标题只有在它的某个子项被选中时才会高亮，所以两个 key 都要给。
+  const selectedKeys = useMemo(() => {
+    if (!activeGroupKey) {
+      return [];
+    }
+    return currentTopLevelSetting?.name
+      ? [activeGroupKey, `${activeGroupKey}::${currentTopLevelSetting.name}`]
+      : [activeGroupKey];
+  }, [activeGroupKey, currentTopLevelSetting?.name]);
+
+  if (isAuthRoute || items.length <= 1) {
+    return <div style={{ flex: 'auto' }} />;
+  }
+
+  return (
+    <ConfigProvider theme={headerMenuTheme}>
+      <Menu
+        mode="horizontal"
+        disabledOverflow={false}
+        selectedKeys={selectedKeys}
+        items={items}
+        style={navStyle}
+        triggerSubMenuAction="hover"
+        onClick={handleClick}
+      />
+    </ConfigProvider>
+  );
+});
+
+SettingsGroupNav.displayName = 'SettingsGroupNav';
+
+export default SettingsGroupNav;

package/src/settings-app/SettingsPluginSettingsManager.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 type { BaseApplication } from '../BaseApplication';
+import { PluginSettingsManager } from '../PluginSettingsManager';
+import { resolveSettingsAppScopeWithinPublicPath } from './settingsDocumentPath';
+
+const SETTINGS_ROUTE_PREFIX = 'settings.';
+const MAIN_SETTINGS_PATH_PREFIX = '/settings/';
+
+export class SettingsPluginSettingsManager<
+  TApp extends BaseApplication<any> = BaseApplication<any>,
+> extends PluginSettingsManager<TApp> {
+  getRouteName(name: string) {
+    return `${SETTINGS_ROUTE_PREFIX}${name}`;
+  }
+
+  getRoutePath(name: string) {
+    const appScope = resolveSettingsAppScopeWithinPublicPath(this.app.getPublicPath(), this.app.router.getBasename?.());
+    const pathPrefix = appScope ? '/' : MAIN_SETTINGS_PATH_PREFIX;
+    const separatorIndex = name.indexOf('.');
+    const menuName = separatorIndex < 0 ? name : name.slice(0, separatorIndex);
+    const pageName = separatorIndex < 0 ? undefined : name.slice(separatorIndex + 1);
+    const menuPath = `${pathPrefix}${menuName}`;
+
+    if (!pageName || pageName === 'index') {
+      return menuPath;
+    }
+
+    return `${menuPath}/${pageName}`;
+  }
+}

package/src/settings-app/SettingsRouterManager.ts

@@ -0,0 +1,92 @@
+/**
+ * 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 type { BaseApplication } from '../BaseApplication';
+import { RouterManager, type RouteType } from '../RouterManager';
+import { resolveSettingsAppScopeWithinPublicPath } from './settingsDocumentPath';
+
+function isSettingsOwnedRoute(name: string) {
+  return (
+    name === 'not-found' ||
+    name === 'settings' ||
+    name.startsWith('settings.') ||
+    name === 'settingsDetails' ||
+    name.startsWith('settingsDetails.') ||
+    name === 'auth' ||
+    name.startsWith('auth.') ||
+    name === '2fa' ||
+    name.startsWith('2fa.')
+  );
+}
+
+function isSettingsAuthenticationRoute(name: string) {
+  return name === 'auth' || name.startsWith('auth.') || name === '2fa' || name.startsWith('2fa.');
+}
+
+export class SettingsRouterManager<
+  TApp extends BaseApplication<any> = BaseApplication<any>,
+> extends RouterManager<TApp> {
+  private rebaseScopedSettingsRoute(route: RouteType) {
+    const appScope = resolveSettingsAppScopeWithinPublicPath(this.app.getPublicPath(), this.getBasename());
+    if (!route.path?.startsWith('/') || !appScope) {
+      return route;
+    }
+    if (route.path === '/settings') {
+      return {
+        ...route,
+        path: '/',
+      };
+    }
+    if (!route.path.startsWith('/settings/')) {
+      return route;
+    }
+    return {
+      ...route,
+      path: route.path.slice('/settings'.length),
+    };
+  }
+
+  private rebaseAuthenticationRoute(route: RouteType) {
+    if (!route.path?.startsWith('/')) {
+      return route;
+    }
+
+    const settingsRoot = this.app.pluginSettingsManager.getRoutePath('').replace(/\/+$/, '');
+    if (!settingsRoot) {
+      return route;
+    }
+    if (route.path === settingsRoot || route.path.startsWith(`${settingsRoot}/`)) {
+      return route;
+    }
+
+    return {
+      ...route,
+      path: `${settingsRoot}/${route.path.replace(/^\/+/, '')}`,
+    };
+  }
+
+  add(name: string, route: RouteType) {
+    if (!isSettingsOwnedRoute(name)) {
+      return;
+    }
+
+    const scopedRoute = this.rebaseScopedSettingsRoute(route);
+    const ownedRoute = isSettingsAuthenticationRoute(name) ? this.rebaseAuthenticationRoute(scopedRoute) : scopedRoute;
+
+    super.add(
+      name,
+      name === 'settingsDetails' || name.startsWith('settingsDetails.')
+        ? {
+            ...ownedRoute,
+            authCheck: true,
+          }
+        : ownedRoute,
+    );
+  }
+}