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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.2.0-alpha.1",
+  "version": "2.2.0-alpha.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.2.0-alpha.1",
-    "@nocobase/flow-engine": "2.2.0-alpha.1",
-    "@nocobase/sdk": "2.2.0-alpha.1",
-    "@nocobase/shared": "2.2.0-alpha.1",
-    "@nocobase/utils": "2.2.0-alpha.1",
+    "@nocobase/evaluators": "2.2.0-alpha.3",
+    "@nocobase/flow-engine": "2.2.0-alpha.3",
+    "@nocobase/sdk": "2.2.0-alpha.3",
+    "@nocobase/shared": "2.2.0-alpha.3",
+    "@nocobase/utils": "2.2.0-alpha.3",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -46,5 +46,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "303663aba6c6eefa27e6a6435b4c0352074ec40f"
+  "gitHead": "e3ec19361fd7981af9fe2a7f24ad335025cbefcd"
 }

package/src/PluginSettingsManager.ts

@@ -97,6 +97,7 @@ interface InternalPageItemRecord extends PluginSettingsPageItemOptions {
 export class PluginSettingsManager<TApp extends BaseApplication<any> = BaseApplication<any>> {
   protected menus: Record<string, InternalMenuItemRecord> = {};
   protected pages: Record<string, InternalPageItemRecord> = {};
+  protected pluginSettingsLinks: Record<string, string> = {};
   protected aclSnippets: string[] = [];
   public app: TApp;
 
@@ -294,6 +295,58 @@ export class PluginSettingsManager<TApp extends BaseApplication<any> = BaseAppli
     return !!(this.menus[name] || this.pages[name]);
   }
 
+  /**
+   * 绑定插件管理列表中的 plugin name 到实际 settings 入口。
+   *
+   * 插件管理列表使用 applicationPlugins.name 判断是否显示 Settings 入口，
+   * 但部分插件会把设置页挂到共享菜单或历史路径下。
+   *
+   * @param pluginName 插件管理列表中的插件名
+   * @param settingsName menu 或 page 名称
+   * @returns {void}
+   */
+  setPluginSettingsLink(pluginName: string, settingsName: string) {
+    if (!pluginName) {
+      throw new Error('Plugin settings link pluginName is required');
+    }
+
+    if (!settingsName) {
+      throw new Error('Plugin settings link settingsName is required');
+    }
+
+    this.pluginSettingsLinks[pluginName] = settingsName;
+  }
+
+  /**
+   * 获取插件管理列表中的 plugin name 对应的 settings 名称。
+   *
+   * @param pluginName 插件管理列表中的插件名
+   * @returns {string} settings 名称
+   */
+  getPluginSettingsName(pluginName: string) {
+    return this.pluginSettingsLinks[pluginName] || pluginName;
+  }
+
+  /**
+   * 判断插件管理列表中的插件是否有可跳转的 settings 入口。
+   *
+   * @param pluginName 插件管理列表中的插件名
+   * @returns {boolean} 是否已注册 settings 入口
+   */
+  hasPluginSettings(pluginName: string) {
+    return this.has(this.getPluginSettingsName(pluginName));
+  }
+
+  /**
+   * 获取插件管理列表中的插件对应的 settings 路径。
+   *
+   * @param pluginName 插件管理列表中的插件名
+   * @returns {string} settings 绝对路径
+   */
+  getPluginSettingsRoutePath(pluginName: string) {
+    return this.getRoutePath(this.getPluginSettingsName(pluginName));
+  }
+
   /**
    * 获取单个 menu 或 page 的只读快照。
    *

package/src/RouteRepository.ts

@@ -9,15 +9,24 @@
 
 import { APIClient } from '@nocobase/sdk';
 import type { NocoBaseDesktopRoute } from './flow-compat';
+import { ADMIN_LAYOUT_MODEL_UID } from './flow/admin-shell/admin-layout/constants';
 
 type RouteSubscriber = () => void;
 type RouteCreateValues = Partial<NocoBaseDesktopRoute>;
 type RouteUpdateValues = Partial<NocoBaseDesktopRoute>;
+type RouteLayoutLike = {
+  uid?: unknown;
+};
 
 type RouteMutationOptions = {
   refreshAfterMutation?: boolean;
 };
 
+type AccessibleRouteCache = {
+  accessibleLoaded: boolean;
+  routes: NocoBaseDesktopRoute[];
+};
+
 type MoveRouteOptions = {
   sourceId: string | number;
   targetId?: string | number;
@@ -30,21 +39,47 @@ type MoveRouteOptions = {
 
 export class RouteRepository {
   routes: NocoBaseDesktopRoute[] = [];
-  protected subscribers = new Set<RouteSubscriber>();
-  protected accessibleLoaded = false;
-  protected accessibleLoadingPromise: Promise<NocoBaseDesktopRoute[]> | null = null;
+  protected subscribers = new Map<RouteSubscriber, string>();
+  protected accessibleLoadingPromises = new Map<string, Promise<NocoBaseDesktopRoute[]>>();
+  private layoutActivations: Array<{ token: symbol; uid: string }> = [];
+  private routeCaches = new Map<string, AccessibleRouteCache>();
+  private refreshRequestIds = new Map<string, number>();
+  private notifiedLayoutUid: string | undefined;
 
   constructor(protected ctx: { api?: APIClient }) {}
 
+  activateLayout(layout?: RouteLayoutLike) {
+    const uid = this.normalizeLayoutUid(layout?.uid);
+    const token = Symbol('route-layout');
+
+    this.layoutActivations.push({
+      token,
+      uid,
+    });
+    this.syncRoutesProperty();
+
+    return () => {
+      const index = this.layoutActivations.findIndex((item) => item.token === token);
+      if (index >= 0) {
+        this.layoutActivations.splice(index, 1);
+      }
+      this.syncRoutesProperty();
+    };
+  }
+
   /**
    * 同步当前可访问桌面路由，并通知订阅方刷新。
    *
    * @param routes 最新的桌面路由树
    */
-  setRoutes(routes: NocoBaseDesktopRoute[]) {
-    this.routes = routes;
-    this.accessibleLoaded = true;
-    this.emitChange();
+  setRoutes(routes: NocoBaseDesktopRoute[], layoutUid = this.getCurrentLayoutUid()) {
+    const cache = this.getRouteCache(layoutUid);
+    cache.routes = routes;
+    cache.accessibleLoaded = true;
+    if (layoutUid === this.getCurrentLayoutUid()) {
+      this.routes = routes;
+    }
+    this.emitChange(layoutUid);
   }
 
   /**
@@ -53,7 +88,9 @@ export class RouteRepository {
    * @returns 当前缓存的路由数组
    */
   listAccessible() {
-    return this.routes;
+    const routes = this.getRouteCache(this.getReadableLayoutUid()).routes;
+    this.routes = routes;
+    return routes;
   }
 
   /**
@@ -62,7 +99,7 @@ export class RouteRepository {
    * @returns {boolean} 是否已初始化完成
    */
   isAccessibleLoaded() {
-    return this.accessibleLoaded;
+    return this.getRouteCache().accessibleLoaded;
   }
 
   /**
@@ -71,12 +108,20 @@ export class RouteRepository {
    * @returns 最新的路由数组
    */
   async refreshAccessible() {
+    const layoutUid = this.getCurrentLayoutUid();
+    return this.refreshAccessibleByLayout(layoutUid);
+  }
+
+  private async refreshAccessibleByLayout(layoutUid: string) {
+    const requestId = this.nextRefreshRequestId(layoutUid);
     const response = await this.getAPIClient().request({
       url: '/desktopRoutes:listAccessible',
-      params: { tree: true, sort: 'sort' },
+      params: { tree: true, sort: 'sort', layout: layoutUid },
     });
     const routes = response?.data?.data || [];
-    this.setRoutes(routes);
+    if (requestId === this.getRefreshRequestId(layoutUid)) {
+      this.setRoutes(routes, layoutUid);
+    }
     return routes;
   }
 
@@ -86,19 +131,26 @@ export class RouteRepository {
    * @returns 当前可访问的路由数组
    */
   async ensureAccessibleLoaded() {
-    if (this.accessibleLoaded) {
-      return this.routes;
+    const layoutUid = this.getCurrentLayoutUid();
+    const cache = this.getRouteCache(layoutUid);
+    if (cache.accessibleLoaded) {
+      this.routes = cache.routes;
+      return cache.routes;
     }
 
-    if (this.accessibleLoadingPromise) {
-      return this.accessibleLoadingPromise;
+    const existingLoadingPromise = this.accessibleLoadingPromises.get(layoutUid);
+    if (existingLoadingPromise) {
+      return existingLoadingPromise;
     }
 
-    this.accessibleLoadingPromise = this.refreshAccessible().finally(() => {
-      this.accessibleLoadingPromise = null;
+    const loadingPromise = this.refreshAccessibleByLayout(layoutUid).finally(() => {
+      if (this.accessibleLoadingPromises.get(layoutUid) === loadingPromise) {
+        this.accessibleLoadingPromises.delete(layoutUid);
+      }
     });
+    this.accessibleLoadingPromises.set(layoutUid, loadingPromise);
 
-    return this.accessibleLoadingPromise;
+    return loadingPromise;
   }
 
   /**
@@ -108,7 +160,7 @@ export class RouteRepository {
    * @returns 取消订阅函数
    */
   subscribe(subscriber: RouteSubscriber) {
-    this.subscribers.add(subscriber);
+    this.subscribers.set(subscriber, this.getCurrentLayoutUid());
     return () => {
       this.subscribers.delete(subscriber);
     };
@@ -132,7 +184,10 @@ export class RouteRepository {
    */
   async createRoute(values: RouteCreateValues, options: RouteMutationOptions = {}) {
     const { refreshAfterMutation = true } = options;
-    const res = await this.getResource('desktopRoutes').create({ values });
+    const res = await this.getResource('desktopRoutes').create({
+      values,
+      layout: this.getCurrentLayoutUid(),
+    });
     if (refreshAfterMutation) {
       await this.refreshAccessible();
     }
@@ -210,7 +265,7 @@ export class RouteRepository {
    * @returns 匹配到的路由节点
    */
   getRouteBySchemaUid(schemaUid: string): NocoBaseDesktopRoute | undefined {
-    return this.findRoute(this.routes, schemaUid);
+    return this.findRoute(this.listAccessible(), schemaUid);
   }
 
   protected getAPIClient(): APIClient {
@@ -224,12 +279,59 @@ export class RouteRepository {
     return this.getAPIClient().resource(collectionName);
   }
 
-  protected emitChange() {
-    this.subscribers.forEach((subscriber) => {
-      subscriber();
+  protected emitChange(layoutUid = this.getCurrentLayoutUid()) {
+    this.subscribers.forEach((subscriberLayoutUid, subscriber) => {
+      if (subscriberLayoutUid !== layoutUid) {
+        return;
+      }
+      const previousNotifiedLayoutUid = this.notifiedLayoutUid;
+      this.notifiedLayoutUid = layoutUid;
+      try {
+        subscriber();
+      } finally {
+        this.notifiedLayoutUid = previousNotifiedLayoutUid;
+      }
     });
   }
 
+  private getCurrentLayoutUid() {
+    return this.layoutActivations[this.layoutActivations.length - 1]?.uid || ADMIN_LAYOUT_MODEL_UID;
+  }
+
+  private normalizeLayoutUid(uid: unknown) {
+    return typeof uid === 'string' && uid.trim() ? uid : ADMIN_LAYOUT_MODEL_UID;
+  }
+
+  private getReadableLayoutUid() {
+    return this.notifiedLayoutUid || this.getCurrentLayoutUid();
+  }
+
+  private getRouteCache(layoutUid = this.getCurrentLayoutUid()) {
+    let cache = this.routeCaches.get(layoutUid);
+    if (!cache) {
+      cache = {
+        accessibleLoaded: false,
+        routes: [],
+      };
+      this.routeCaches.set(layoutUid, cache);
+    }
+    return cache;
+  }
+
+  private syncRoutesProperty() {
+    this.routes = this.getRouteCache().routes;
+  }
+
+  private nextRefreshRequestId(layoutUid: string) {
+    const requestId = this.getRefreshRequestId(layoutUid) + 1;
+    this.refreshRequestIds.set(layoutUid, requestId);
+    return requestId;
+  }
+
+  private getRefreshRequestId(layoutUid: string) {
+    return this.refreshRequestIds.get(layoutUid) || 0;
+  }
+
   private findRoute(routes: NocoBaseDesktopRoute[], schemaUid: string): NocoBaseDesktopRoute | undefined {
     for (const route of routes) {
       if (route.schemaUid === schemaUid) {

package/src/__tests__/PluginSettingsManager.test.ts

@@ -78,6 +78,19 @@ describe('PluginSettingsManager v2', () => {
     expect(app.router.get('admin.settings.demo.advanced')).toMatchObject({ path: 'advanced' });
   });
 
+  it('should resolve plugin settings links for plugin manager entries', () => {
+    const app = createMockClient();
+
+    app.pluginSettingsManager.addMenuItem({ key: 'shared', title: 'Shared' });
+    app.pluginSettingsManager.addPageTabItem({ menuKey: 'shared', key: 'target', title: 'Target' });
+    app.pluginSettingsManager.setPluginSettingsLink('demo-plugin', 'shared.target');
+
+    expect(app.pluginSettingsManager.has('demo-plugin')).toBe(false);
+    expect(app.pluginSettingsManager.hasPluginSettings('demo-plugin')).toBe(true);
+    expect(app.pluginSettingsManager.getPluginSettingsName('demo-plugin')).toBe('shared.target');
+    expect(app.pluginSettingsManager.getPluginSettingsRoutePath('demo-plugin')).toBe('/admin/settings/shared/target');
+  });
+
   it('should render string icon on both menu and page tab via renderIcon', () => {
     // Previously `renderPage` spread the raw `icon` string straight to the antd
     // Menu item, which displayed "LockOutlinedTitle" as text. Both `renderMenuItem`

package/src/__tests__/RouteRepository.test.ts

@@ -0,0 +1,216 @@
+/**
+ * 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 type { NocoBaseDesktopRoute } from '../flow-compat';
+import { RouteRepository } from '../RouteRepository';
+
+function createRouteRepository() {
+  const request = vi.fn().mockResolvedValue({
+    data: {
+      data: [],
+    },
+  });
+  const create = vi.fn().mockResolvedValue({
+    data: {
+      data: {},
+    },
+  });
+  const resource = vi.fn(() => ({
+    create,
+  }));
+  const repository = new RouteRepository({
+    api: {
+      request,
+      resource,
+    },
+  } as never);
+
+  return {
+    create,
+    repository,
+    request,
+    resource,
+  };
+}
+
+function route(schemaUid: string): NocoBaseDesktopRoute {
+  return { schemaUid } as NocoBaseDesktopRoute;
+}
+
+describe('RouteRepository', () => {
+  it('should pass the default admin layout when loading accessible routes', async () => {
+    const { repository, request } = createRouteRepository();
+
+    await repository.refreshAccessible();
+
+    expect(request).toHaveBeenCalledWith({
+      url: '/desktopRoutes:listAccessible',
+      params: {
+        tree: true,
+        sort: 'sort',
+        layout: 'admin-layout-model',
+      },
+    });
+  });
+
+  it('should pass the active client-v2 layout when loading accessible routes', async () => {
+    const { repository, request } = createRouteRepository();
+    const deactivateLayout = repository.activateLayout({
+      uid: 'custom-desktop-layout-model',
+    });
+
+    await repository.refreshAccessible();
+    deactivateLayout();
+
+    expect(request).toHaveBeenCalledWith({
+      url: '/desktopRoutes:listAccessible',
+      params: {
+        tree: true,
+        sort: 'sort',
+        layout: 'custom-desktop-layout-model',
+      },
+    });
+  });
+
+  it('should reload accessible routes when the active client-v2 layout changes', async () => {
+    const { repository, request } = createRouteRepository();
+    const deactivateFirstLayout = repository.activateLayout({
+      uid: 'first-layout-model',
+    });
+    await repository.ensureAccessibleLoaded();
+    deactivateFirstLayout();
+
+    const deactivateSecondLayout = repository.activateLayout({
+      uid: 'second-layout-model',
+    });
+    await repository.ensureAccessibleLoaded();
+    deactivateSecondLayout();
+
+    expect(request).toHaveBeenNthCalledWith(1, {
+      url: '/desktopRoutes:listAccessible',
+      params: {
+        tree: true,
+        sort: 'sort',
+        layout: 'first-layout-model',
+      },
+    });
+    expect(request).toHaveBeenNthCalledWith(2, {
+      url: '/desktopRoutes:listAccessible',
+      params: {
+        tree: true,
+        sort: 'sort',
+        layout: 'second-layout-model',
+      },
+    });
+  });
+
+  it('should report accessible routes as unloaded when the active layout changes', () => {
+    const { repository } = createRouteRepository();
+
+    repository.setRoutes([], 'first-layout-model');
+    const deactivateLayout = repository.activateLayout({
+      uid: 'second-layout-model',
+    });
+
+    expect(repository.isAccessibleLoaded()).toBe(false);
+    deactivateLayout();
+  });
+
+  it('should keep accessible route caches isolated by active layout', () => {
+    const { repository } = createRouteRepository();
+
+    repository.setRoutes([route('admin-page')], 'admin-layout-model');
+    const deactivateLayout = repository.activateLayout({
+      uid: 'custom-desktop-layout-model',
+    });
+    repository.setRoutes([route('custom-page')], 'custom-desktop-layout-model');
+
+    expect(repository.listAccessible().map((route) => route.schemaUid)).toEqual(['custom-page']);
+    expect(repository.getRouteBySchemaUid('admin-page')).toBeUndefined();
+    deactivateLayout();
+
+    expect(repository.listAccessible().map((route) => route.schemaUid)).toEqual(['admin-page']);
+    expect(repository.getRouteBySchemaUid('custom-page')).toBeUndefined();
+  });
+
+  it('should notify only subscribers for the changed layout cache', () => {
+    const { repository } = createRouteRepository();
+    const adminEvents: string[][] = [];
+    const customEvents: string[][] = [];
+
+    const unsubscribeAdmin = repository.subscribe(() => {
+      adminEvents.push(repository.listAccessible().map((route) => route.schemaUid || ''));
+    });
+    const deactivateLayout = repository.activateLayout({
+      uid: 'custom-desktop-layout-model',
+    });
+    const unsubscribeCustom = repository.subscribe(() => {
+      customEvents.push(repository.listAccessible().map((route) => route.schemaUid || ''));
+    });
+
+    repository.setRoutes([route('custom-page')], 'custom-desktop-layout-model');
+
+    expect(adminEvents).toEqual([]);
+    expect(customEvents).toEqual([['custom-page']]);
+
+    deactivateLayout();
+    repository.setRoutes([route('admin-page')], 'admin-layout-model');
+
+    expect(adminEvents).toEqual([['admin-page']]);
+    expect(customEvents).toEqual([['custom-page']]);
+
+    unsubscribeAdmin();
+    unsubscribeCustom();
+  });
+
+  it('should pass the default admin layout when creating a route', async () => {
+    const { repository, create } = createRouteRepository();
+
+    await repository.createRoute(
+      {
+        title: 'Admin page',
+      },
+      {
+        refreshAfterMutation: false,
+      },
+    );
+
+    expect(create).toHaveBeenCalledWith({
+      values: {
+        title: 'Admin page',
+      },
+      layout: 'admin-layout-model',
+    });
+  });
+
+  it('should pass the active client-v2 layout when creating a route', async () => {
+    const { repository, create } = createRouteRepository();
+    const deactivateLayout = repository.activateLayout({
+      uid: 'custom-desktop-layout-model',
+    });
+
+    await repository.createRoute(
+      {
+        title: 'Custom page',
+      },
+      {
+        refreshAfterMutation: false,
+      },
+    );
+    deactivateLayout();
+
+    expect(create).toHaveBeenCalledWith({
+      values: {
+        title: 'Custom page',
+      },
+      layout: 'custom-desktop-layout-model',
+    });
+  });
+});

package/src/__tests__/browserChecker.test.ts

@@ -15,6 +15,8 @@ import { fileURLToPath } from 'node:url';
 type BrowserCheckerCase = {
   pathname: string;
   publicPath: string;
+  modernClientPrefix?: string;
+  appClientEntryMode?: string;
   expectedRedirect?: string;
 };
 
@@ -40,6 +42,8 @@ function executeBrowserChecker(scriptPath: string, input: BrowserCheckerCase) {
     showLog: false,
     window: {
       __nocobase_public_path__: input.publicPath,
+      __nocobase_modern_client_prefix__: input.modernClientPrefix,
+      __nocobase_app_client_entry_mode__: input.appClientEntryMode,
       location: {
         origin: 'http://c.local.nocobase.com',
         pathname: input.pathname,
@@ -109,4 +113,61 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
 
     expect(replace).not.toHaveBeenCalled();
   });
+
+  if (scriptPath.includes('/app/client/public/')) {
+    it('redirects app root to modern entry for modern-default', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/',
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-default',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/v/');
+    });
+
+    it('does not redirect legacy deep links for modern-default', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/admin',
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-default',
+      });
+
+      expect(replace).not.toHaveBeenCalled();
+    });
+
+    it('rewrites legacy document paths for modern-only', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/admin/settings/workflow',
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-only',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/v/admin/settings/workflow');
+    });
+
+    it('redirects sub-path site root directly to final modern target', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/nocobase/',
+        publicPath: '/nocobase/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-default',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/nocobase/v/');
+    });
+
+    it('rewrites sub-app legacy deep links for modern-only without collapsing the sub-app segment', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/nocobase/apps/a_31itq60q4kg/admin/',
+        publicPath: '/nocobase/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-only',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/nocobase/v/apps/a_31itq60q4kg/admin');
+    });
+  }
 });

package/src/__tests__/exports.test.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { IconPicker } from '..';
+
+describe('@nocobase/client-v2 exports', () => {
+  it('should export IconPicker from the root entry', () => {
+    expect(IconPicker).toBeDefined();
+  });
+});