@nocobase/client-v2 2.3.0-beta.6 → 2.4.0-alpha.1

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -14,12 +14,11 @@ import { Button, Dropdown, theme, Tooltip, type ButtonProps, type MenuProps } fr
 import React, { useEffect, useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { useACLRoleContext } from '../../../acl';
-import type { BaseApplication } from '../../../BaseApplication';
 import type { PluginSettingsPageType } from '../../../PluginSettingsManager';
-import { shouldOpenAdminRouteInNewWindow } from '../../../RouterManager';
 import { useApp } from '../../../hooks/useApp';
+import { resolveStandaloneSettingsPath } from '../../../settings-app/runtimePaths';
 import {
   filterRenderableSettings,
   filterVisibleSettings,
@@ -66,109 +65,6 @@ const topbarActionTriggerClassName = css`
   height: 100%;
 `;
 
-type TopbarSettingsAppLike = Pick<
-  BaseApplication<any>,
-  'name' | 'router' | 'getPublicPath' | 'getHref' | 'layoutManager'
->;
-
-const normalizeTopbarPath = (pathname?: string) => {
-  const trimmed = pathname?.trim();
-  if (!trimmed || trimmed === '/') {
-    return '/';
-  }
-  return `/${trimmed.replace(/^\/+/, '')}`;
-};
-
-const normalizeTopbarBasePath = (pathname?: string) => {
-  const normalized = normalizeTopbarPath(pathname).replace(/\/+$/, '');
-  return normalized === '' || normalized === '/' ? '' : normalized;
-};
-
-const getTopbarRouterBasePath = (app: TopbarSettingsAppLike | undefined) => {
-  return app?.router?.getBasename?.() || app?.router?.basename || app?.getPublicPath?.() || '';
-};
-
-const stripTopbarRouterBasePath = (pathname: string, basename?: string) => {
-  const normalizedPath = normalizeTopbarPath(pathname);
-  const normalizedBase = normalizeTopbarBasePath(basename);
-
-  if (!normalizedBase) {
-    return normalizedPath;
-  }
-
-  if (normalizedPath === normalizedBase) {
-    return '/';
-  }
-
-  if (normalizedPath.startsWith(`${normalizedBase}/`)) {
-    return normalizeTopbarPath(normalizedPath.slice(normalizedBase.length));
-  }
-
-  return normalizedPath;
-};
-
-const getTopbarAppPath = (pathname: string) => {
-  const normalizedPath = normalizeTopbarPath(pathname);
-  const match = /^(.*?\/(?:apps|_app)\/[^/]+)(?=\/|$)/.exec(normalizedPath);
-  const appPath = match?.[1] || '';
-
-  return {
-    appPath,
-    routePath: appPath ? normalizeTopbarPath(normalizedPath.slice(appPath.length)) : normalizedPath,
-  };
-};
-
-const getTopbarContextAppPath = (app: TopbarSettingsAppLike | undefined, basename?: string) => {
-  const basenameAppPath = getTopbarAppPath(basename || '').appPath;
-  if (basenameAppPath) {
-    return basenameAppPath;
-  }
-
-  const publicPathAppPath = getTopbarAppPath(app?.getPublicPath?.() || '').appPath;
-  if (publicPathAppPath) {
-    return publicPathAppPath;
-  }
-
-  if (app?.name && app.name !== 'main' && app.getHref) {
-    return normalizeTopbarBasePath(app.getHref('/'));
-  }
-
-  return '';
-};
-
-const prependTopbarAppPath = (pathname: string, appPath: string) => {
-  const normalizedPath = normalizeTopbarPath(pathname);
-
-  if (!appPath || normalizedPath === appPath || normalizedPath.startsWith(`${appPath}/`)) {
-    return normalizedPath;
-  }
-
-  return `${appPath}${normalizedPath}`;
-};
-
-const isAdminRuntimePath = (pathname: string) => {
-  return pathname === '/admin' || pathname.startsWith('/admin/');
-};
-
-const getTopbarAdminRoutePath = (app: TopbarSettingsAppLike | undefined) => {
-  try {
-    return app?.layoutManager?.getLayout?.('admin')?.routePath;
-  } catch {
-    return undefined;
-  }
-};
-
-const buildTopbarDocumentHref = (targetPath: string, basename?: string) => {
-  const normalizedTarget = normalizeTopbarPath(targetPath);
-  const normalizedBase = normalizeTopbarBasePath(basename);
-
-  if (!normalizedBase || normalizedTarget === normalizedBase || normalizedTarget.startsWith(`${normalizedBase}/`)) {
-    return normalizedTarget;
-  }
-
-  return `${normalizedBase}${normalizedTarget}`;
-};
-
 function TopbarExternalSettingsLabel(props: { title: React.ReactNode; link: string }) {
   return (
     <div
@@ -185,39 +81,13 @@ function TopbarInternalSettingsLabel(props: { title: React.ReactNode; path?: str
   const app = useApp();
   const location = useLocation();
   const targetPath = props.path || '/admin/settings';
-  const basename = getTopbarRouterBasePath(app);
-  const currentPath = stripTopbarRouterBasePath(location.pathname, basename);
-  const currentLocationAppPath = getTopbarAppPath(currentPath);
-  const currentAppPath = currentLocationAppPath.appPath || getTopbarContextAppPath(app, basename);
-  const currentRoutePath = currentLocationAppPath.appPath ? currentLocationAppPath.routePath : currentPath;
-  const targetPathInCurrentApp = prependTopbarAppPath(stripTopbarRouterBasePath(targetPath, basename), currentAppPath);
-
-  if (currentAppPath) {
-    const href = buildTopbarDocumentHref(targetPathInCurrentApp, basename);
-    const shouldOpenInNewWindow = shouldOpenAdminRouteInNewWindow({
-      currentPathname: currentPath,
-      targetPathname: targetPathInCurrentApp,
-      basePath: basename,
-      adminRoutePath: getTopbarAdminRoutePath(app),
-    });
-
-    return (
-      <a
-        href={href}
-        target={shouldOpenInNewWindow ? '_blank' : undefined}
-        rel={shouldOpenInNewWindow ? 'noopener noreferrer' : undefined}
-      >
-        {props.title}
-      </a>
-    );
-  }
-
-  if (isAdminRuntimePath(currentRoutePath)) {
-    return <Link to={targetPathInCurrentApp}>{props.title}</Link>;
-  }
 
   return (
-    <a href={buildTopbarDocumentHref(targetPath, basename)} target="_blank" rel="noopener noreferrer">
+    <a
+      href={resolveStandaloneSettingsPath(app, targetPath, location.pathname)}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {props.title}
     </a>
   );
@@ -238,66 +108,68 @@ export function getTopbarPluginSettingsItems(options: {
 }): NonNullable<MenuProps['items']> {
   const { settings, canManagePlugins, t } = options;
   const topLevelSettings = filterVisibleSettings(filterRenderableSettings(settings));
-  const pluginManagerSetting = topLevelSettings.find((item) => item.name === PLUGIN_MANAGER_SETTING_NAME);
+  const primarySettings = sortTopLevelSettings(
+    topLevelSettings
+      .filter(
+        (item) =>
+          ((item.sort || 0) < 0 || item.name === PLUGIN_MANAGER_SETTING_NAME) &&
+          (item.name !== PLUGIN_MANAGER_SETTING_NAME || canManagePlugins),
+      )
+      .map((item) => ({
+        ...item,
+        children: undefined,
+      })),
+  );
   const settingsByKey = new Map<string, PluginSettingsPageType>();
   const normalSettings = sortTopLevelSettings(
     topLevelSettings
-      .filter((item) => item.name !== PLUGIN_MANAGER_SETTING_NAME)
+      .filter((item) => (item.sort || 0) >= 0 && item.name !== PLUGIN_MANAGER_SETTING_NAME)
       .map((item) => ({
         ...item,
         children: undefined,
       })),
   );
 
-  normalSettings.forEach((item) => {
+  [...primarySettings, ...normalSettings].forEach((item) => {
     settingsByKey.set(item.key, item);
   });
 
-  const orderedSettings = (getMenuItems(normalSettings) || []).map((item: any) => {
-    if (item?.type === 'divider') {
-      return item;
-    }
-
-    const matchedSetting = settingsByKey.get(String(item.key));
-    const targetPath = matchedSetting?.path;
-    const targetLink = matchedSetting?.link;
-    const targetTitle = matchedSetting?.title || item.title;
-
-    return {
-      key: item.key,
-      name: matchedSetting?.name,
-      path: matchedSetting?.path,
-      link: targetLink,
-      title: targetTitle,
-      icon: item.icon,
-      label: targetLink ? (
-        <TopbarExternalSettingsLabel title={targetTitle} link={targetLink} />
-      ) : (
-        <TopbarInternalSettingsLabel title={targetTitle} path={targetPath} />
-      ),
-    };
-  });
-
-  const items: NonNullable<MenuProps['items']> = [];
-
-  if (canManagePlugins && pluginManagerSetting) {
-    items.push({
-      key: pluginManagerSetting.key,
-      icon: pluginManagerSetting.icon || <ApiOutlined />,
-      label: (
-        <TopbarInternalSettingsLabel
-          title={pluginManagerSetting.title || t('Plugin manager')}
-          path={pluginManagerSetting.path}
-        />
-      ),
+  const buildMenuItems = (targetSettings: PluginSettingsPageType[]) =>
+    (getMenuItems(targetSettings) || []).map((item: any) => {
+      if (item?.type === 'divider') {
+        return item;
+      }
+
+      const matchedSetting = settingsByKey.get(String(item.key));
+      const targetPath = matchedSetting?.path;
+      const targetLink = matchedSetting?.link;
+      const isPluginManager = matchedSetting?.name === PLUGIN_MANAGER_SETTING_NAME;
+      const targetTitle = matchedSetting?.title || (isPluginManager ? t('Plugin manager') : item.title);
+
+      return {
+        key: item.key,
+        name: matchedSetting?.name,
+        path: matchedSetting?.path,
+        link: targetLink,
+        title: targetTitle,
+        icon: isPluginManager ? matchedSetting?.icon || <ApiOutlined /> : item.icon,
+        label: targetLink ? (
+          <TopbarExternalSettingsLabel title={targetTitle} link={targetLink} />
+        ) : (
+          <TopbarInternalSettingsLabel title={targetTitle} path={targetPath} />
+        ),
+      };
     });
-  }
 
-  if (canManagePlugins && orderedSettings.length) {
+  const primaryItems = buildMenuItems(primarySettings);
+  const normalItems = buildMenuItems(normalSettings);
+  const items: NonNullable<MenuProps['items']> = [...primaryItems];
+
+  if (primaryItems.length && normalItems.length) {
     items.push({ type: 'divider' });
   }
 
-  items.push(...orderedSettings);
+  items.push(...normalItems);
 
   return items;
 }

package/src/index.ts

@@ -29,7 +29,15 @@ export * from './PluginSettingsManager';
 export * from './layout-manager';
 export * from './hooks';
 export { default as languageCodes } from './locale/languageCodes';
-export * from './nocobase-buildin-plugin';
+export {
+  CurrentUserContext,
+  NocoBaseBuildInPlugin,
+  NocoBaseBuildInPluginV2,
+  resolveUnauthenticatedSignInRoute,
+  useCurrentRoles,
+  useCurrentUserContext,
+} from './nocobase-buildin-plugin';
+export type { CurrentRoleOption, CurrentUserState } from './nocobase-buildin-plugin';
 export { getRouteRuntimeVersion } from './utils/getRouteRuntimeVersion';
 export type { RouteRuntimeVersion } from './utils/getRouteRuntimeVersion';
 export * from './collection-field-interface/CollectionFieldInterface';
@@ -55,3 +63,5 @@ export type { NocoBaseDesktopRoute } from './flow-compat';
 export * from './utils/markdownSanitize';
 export * from './ui-operation';
 export { default as AntdAppProvider } from './theme/AntdAppProvider';
+export { isSettingsApp } from './settings-app/isSettingsApp';
+export { MINIMAL_THEME_UID, useSettingsThemeConfig } from './settings-app/useSettingsThemeConfig';

package/src/nocobase-buildin-plugin/currentUserAuthStatus.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 { useSyncExternalStore } from 'react';
+
+export type CurrentUserAuthStatus = 'unknown' | 'authenticated' | 'unauthenticated' | 'redirecting';
+
+type AuthStatusStore = {
+  getSnapshot: () => CurrentUserAuthStatus;
+  set: (status: CurrentUserAuthStatus) => void;
+  subscribe: (listener: () => void) => () => void;
+};
+
+const stores = new WeakMap<object, AuthStatusStore>();
+
+function createAuthStatusStore(): AuthStatusStore {
+  let status: CurrentUserAuthStatus = 'unknown';
+  const listeners = new Set<() => void>();
+
+  return {
+    getSnapshot: () => status,
+    set: (nextStatus) => {
+      if (status === nextStatus) {
+        return;
+      }
+      status = nextStatus;
+      listeners.forEach((listener) => listener());
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+function getAuthStatusStore(app: object) {
+  let store = stores.get(app);
+  if (!store) {
+    store = createAuthStatusStore();
+    stores.set(app, store);
+  }
+  return store;
+}
+
+export function setCurrentUserAuthStatus(app: object, status: CurrentUserAuthStatus) {
+  getAuthStatusStore(app).set(status);
+}
+
+export function useCurrentUserAuthStatus(app: object) {
+  const store = getAuthStatusStore(app);
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+}

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,32 @@ const DataSourceBootstrapProvider: FC = ({ children }) => {
   return <>{children}</>;
 };
 
+export function resolveUnauthenticatedSignInRoute(app: Application, pathname: string) {
+  const matchedRoutes = app.router.matchRoutes(pathname) || [];
+  for (let index = matchedRoutes.length - 1; index >= 0; index -= 1) {
+    const pathnameBase = matchedRoutes[index].pathnameBase.replace(/\/+$/g, '');
+    const candidate = `${pathnameBase}/signin`;
+    if (app.router.isSkippedAuthCheckRoute(candidate)) {
+      return candidate;
+    }
+  }
+  return '/signin';
+}
+
+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;
+  }
+  const signInPath = resolveUnauthenticatedSignInRoute(app, location.pathname);
+  navigate(`${signInPath}?redirect=${encodeURIComponent(redirectPath)}`, { replace: true });
+}
+
 const CurrentUserProvider: FC = ({ children }) => {
   const app = useApp<Application>();
   const location = useLocation();
@@ -234,9 +260,7 @@ 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;
         }
 
@@ -277,9 +301,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({
@@ -297,6 +319,10 @@ const CurrentUserProvider: FC = ({ children }) => {
     };
   }, [app, authCheckRouteState, navigate]);
 
+  useEffect(() => {
+    setCurrentUserAuthStatus(app, state.authStatus);
+  }, [app, state.authStatus]);
+
   if (state.error) {
     throw state.error;
   }
@@ -310,19 +336,6 @@ const CurrentUserProvider: FC = ({ children }) => {
 
 CurrentUserProvider.displayName = 'CurrentUserProvider';
 
-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" />;
-};
-
 /**
  * client-v2 使用的内建插件集合。
  *
@@ -346,56 +359,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,
@@ -403,7 +371,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: '*',
@@ -419,4 +387,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);
+  }
+}