@nocobase/client-v2 2.1.0-beta.34 → 2.1.0-beta.36

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

@@ -7,11 +7,12 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createCollectionContextMeta } from '@nocobase/flow-engine';
-import React, { createContext, type FC, useEffect, useRef, useState } from 'react';
-import { Navigate, Outlet, useLocation } from 'react-router-dom';
+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 { useACLRoleContext } from '../acl';
 import type { Application } from '../Application';
-import { getCurrentV2RedirectPath, getDefaultV2AdminRedirectPath, redirectToV2Signin } from '../authRedirect';
+import { getCurrentV2RedirectPath, getDefaultV2AdminRedirectPath } from '../authRedirect';
 import { AppNotFound } from '../components';
 import { PluginFlowEngine } from '../flow';
 import { AdminLayoutMenuItemModel, AdminLayoutModel } from '../flow/admin-shell/admin-layout';
@@ -20,13 +21,18 @@ import { Plugin } from '../Plugin';
 import { AdminSettingsLayoutModel } from '../settings-center';
 import { LocalePlugin } from './plugins/LocalePlugin';
 
-type CurrentUserState = {
+export type CurrentUserState = {
   data?: {
     data?: any;
   };
   loading: boolean;
 };
 
+export type CurrentRoleOption = {
+  name: string;
+  title: string;
+};
+
 const AUTH_ROUTE_PREFIXES = ['/signin', '/signup', '/forgot-password', '/reset-password'];
 
 function removeBasename(pathname: string, basename?: string) {
@@ -50,9 +56,42 @@ function isAdminRuntimeRoute(pathname: string, basename?: string) {
   return normalizedPathname === '/admin' || normalizedPathname.startsWith('/admin/');
 }
 
-const CurrentUserContext = createContext<CurrentUserState | null>(null);
+export const CurrentUserContext = createContext<CurrentUserState | null>(null);
 CurrentUserContext.displayName = 'CurrentUserContext';
 
+export function useCurrentUserContext() {
+  return useContext(CurrentUserContext);
+}
+
+/**
+ * 返回当前用户在 v2 应用上下文中可选的角色列表，等价于 v1 `useCurrentRoles`：
+ * 从 FlowEngine 全局上下文 `engine.context.user.roles` 派生（CurrentUserProvider 在
+ * `/auth:check` 成功后通过 `defineProperty('user', { value })` 写入），按需追加匿名角色，
+ * 并去掉合并角色 `__union__`。v2 中角色 title 可能含有 `{{t('...')}}` 模板，因此用
+ * flowEngine.context.t 解析。
+ *
+ * 不读 React `CurrentUserContext`：FlowEngine 的 dialog/drawer/popover 内容通过 `ctx.viewer`
+ * 渲染到独立的 ElementsHolder，部分场景会脱离原 Provider 树；FlowEngine 全局上下文是同一份
+ * 数据但不受 React 树位置影响。
+ */
+export function useCurrentRoles(): CurrentRoleOption[] {
+  const { allowAnonymous } = useACLRoleContext();
+  const engine = useFlowEngine();
+  const rolesRaw = engine?.context?.user?.roles as Array<{ name: string; title?: string }> | undefined;
+
+  return useMemo(() => {
+    const compile = (value: string | undefined): string =>
+      value == null ? '' : engine?.context?.t ? engine.context.t(value) : value;
+    const roles: CurrentRoleOption[] = (rolesRaw || [])
+      .filter((role) => role?.name !== '__union__')
+      .map((role) => ({ name: role.name, title: compile(role.title) }));
+    if (allowAnonymous) {
+      roles.push({ name: 'anonymous', title: 'Anonymous' });
+    }
+    return roles;
+  }, [allowAnonymous, engine, rolesRaw]);
+}
+
 const DataSourceBootstrapProvider: FC = ({ children }) => {
   const app = useApp();
   const location = useLocation();
@@ -115,6 +154,7 @@ const DataSourceBootstrapProvider: FC = ({ children }) => {
 const CurrentUserProvider: FC = ({ children }) => {
   const app = useApp();
   const location = useLocation();
+  const navigate = useNavigate();
   const [state, setState] = useState<CurrentUserState>({ loading: true });
   const pathnameRef = useRef(location.pathname);
   pathnameRef.current = location.pathname;
@@ -143,8 +183,23 @@ const CurrentUserProvider: FC = ({ children }) => {
         });
 
         const user = res?.data?.data;
+        // 服务端通过 `{ code: 302, redirect }` 通知客户端先去某个中间页(例如 2FA 验证页)。
+        // 这类响应没有 user.id,但也不能视为未登录——否则会和处理 302 的全局响应拦截器
+        // (例如 plugin-two-factor-authentication 注册的那一个)竞态,而 `window.location.replace`
+        // 会覆盖更早发出的 `window.location.href`,把用户错误地弹回登录页。让响应拦截器接管跳转。
+        if (user?.code === 302) {
+          if (mounted) {
+            setState({ loading: false });
+          }
+          return;
+        }
         if (user?.id == null) {
-          redirectToV2Signin(app, getCurrentV2RedirectPath(app, locationRef.current), { replace: true });
+          // 用 react-router navigate (虚拟跳转)而不是 location.replace, 这样如果有其他响应拦截器
+          // 已经发起了 window.location.href 整页跳转(例如 2FA 插件接收到服务端 302 重定向),
+          // 真实跳转可以胜出 navigate, 不会被这里的 signin 重定向覆盖。
+          navigate(`/signin?redirect=${encodeURIComponent(getCurrentV2RedirectPath(app, locationRef.current))}`, {
+            replace: true,
+          });
           return;
         }
 
@@ -169,7 +224,9 @@ const CurrentUserProvider: FC = ({ children }) => {
       } catch (error: any) {
         const isAuthError = error?.response?.status === 401 || error?.status === 401;
         if (isAuthError) {
-          redirectToV2Signin(app, getCurrentV2RedirectPath(app, locationRef.current), { replace: true });
+          navigate(`/signin?redirect=${encodeURIComponent(getCurrentV2RedirectPath(app, locationRef.current))}`, {
+            replace: true,
+          });
           return;
         }
         if (mounted) {
@@ -184,7 +241,7 @@ const CurrentUserProvider: FC = ({ children }) => {
     return () => {
       mounted = false;
     };
-  }, [app]);
+  }, [app, navigate]);
 
   if (state.loading) {
     return app.renderComponent('AppSpin');
@@ -196,15 +253,12 @@ const CurrentUserProvider: FC = ({ children }) => {
 const RootRedirect: FC = () => {
   const app = useApp();
   const hasToken = !!app?.apiClient?.auth?.token;
-
-  useEffect(() => {
-    if (!hasToken) {
-      redirectToV2Signin(app, getDefaultV2AdminRedirectPath(app), { replace: true });
-    }
-  }, [app, hasToken]);
+  const targetPath = getDefaultV2AdminRedirectPath(app);
 
   if (!hasToken) {
-    return app.renderComponent('AppSpin');
+    // 用 react-router <Navigate /> 而非 location.replace, 避免覆盖同时段其它响应拦截器
+    // 触发的 window.location.href (例如 2FA 接收到服务端 302 时设置的整页跳转)。
+    return <Navigate replace to={`/signin?redirect=${encodeURIComponent(targetPath)}`} />;
   }
 
   return <Navigate replace to="/admin" />;

package/src/utils/appVersionHTML.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+const htmlEscapeMap: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+  "'": '&#39;',
+};
+
+export function escapeHTML(value: string) {
+  return value.replace(/[&<>"']/g, (matched) => htmlEscapeMap[matched]);
+}
+
+export function getAppVersionHTML(version: unknown) {
+  if (version === null || typeof version === 'undefined' || version === '') {
+    return '';
+  }
+
+  return `<span class="nb-app-version">v${escapeHTML(String(version))}</span>`;
+}

package/src/utils/globalDeps.ts

@@ -37,53 +37,69 @@ import * as dndKitCore from '@dnd-kit/core';
 import * as dndKitSortable from '@dnd-kit/sortable';
 import type { RequireJS } from './requirejs';
 
+declare global {
+  interface Window {
+    __nocobase_app_dev__?: boolean;
+    __nocobase_app_dev_deps__?: Record<string, unknown>;
+    __nocobase_app_dev_plugins__?: Record<string, unknown>;
+  }
+}
+
+function defineGlobalDep(requirejs: RequireJS, name: string, value: unknown) {
+  requirejs.define(name, () => value);
+  if (window.__nocobase_app_dev__) {
+    window.__nocobase_app_dev_deps__ = window.__nocobase_app_dev_deps__ || {};
+    window.__nocobase_app_dev_deps__[name] = value;
+  }
+}
+
 /**
  * @internal
  */
 export function defineGlobalDeps(requirejs: RequireJS) {
   // react
-  requirejs.define('react', () => React);
-  requirejs.define('react-dom', () => ReactDOM);
-  requirejs.define('react/jsx-runtime', () => jsxRuntime);
+  defineGlobalDep(requirejs, 'react', React);
+  defineGlobalDep(requirejs, 'react-dom', ReactDOM);
+  defineGlobalDep(requirejs, 'react/jsx-runtime', jsxRuntime);
 
   // react-router
-  requirejs.define('react-router', () => ReactRouter);
-  requirejs.define('react-router-dom', () => ReactRouterDom);
+  defineGlobalDep(requirejs, 'react-router', ReactRouter);
+  defineGlobalDep(requirejs, 'react-router-dom', ReactRouterDom);
 
   // antd
-  requirejs.define('antd', () => antd);
-  requirejs.define('@ant-design/icons', () => antdIcons);
-  requirejs.define('@ant-design/cssinjs', () => antdCssinjs);
-  requirejs.define('antd-style', () => antdStyle);
+  defineGlobalDep(requirejs, 'antd', antd);
+  defineGlobalDep(requirejs, '@ant-design/icons', antdIcons);
+  defineGlobalDep(requirejs, '@ant-design/cssinjs', antdCssinjs);
+  defineGlobalDep(requirejs, 'antd-style', antdStyle);
 
   // i18next
-  requirejs.define('i18next', () => i18next);
-  requirejs.define('react-i18next', () => reactI18next);
+  defineGlobalDep(requirejs, 'i18next', i18next);
+  defineGlobalDep(requirejs, 'react-i18next', reactI18next);
 
   // formily
-  requirejs.define('@formily/antd-v5', () => formilyAntdV5);
-  requirejs.define('@formily/core', () => formilyCore);
-  requirejs.define('@formily/react', () => formilyReact);
-  requirejs.define('@formily/reactive', () => formilyReactive);
-  requirejs.define('@formily/shared', () => formilyShared);
+  defineGlobalDep(requirejs, '@formily/antd-v5', formilyAntdV5);
+  defineGlobalDep(requirejs, '@formily/core', formilyCore);
+  defineGlobalDep(requirejs, '@formily/react', formilyReact);
+  defineGlobalDep(requirejs, '@formily/reactive', formilyReactive);
+  defineGlobalDep(requirejs, '@formily/shared', formilyShared);
 
   // nocobase
-  requirejs.define('@nocobase/utils', () => nocobaseClientUtils);
-  requirejs.define('@nocobase/utils/client', () => nocobaseClientUtils);
-  requirejs.define('@nocobase/client-v2', () => nocobaseClientV2);
-  requirejs.define('@nocobase/client-v2/client-v2', () => nocobaseClientV2);
-  requirejs.define('@nocobase/flow-engine', () => nocobaseFlowEngine);
-  requirejs.define('@nocobase/evaluators', () => nocobaseEvaluators);
-  requirejs.define('@nocobase/evaluators/client', () => nocobaseEvaluators);
+  defineGlobalDep(requirejs, '@nocobase/utils', nocobaseClientUtils);
+  defineGlobalDep(requirejs, '@nocobase/utils/client', nocobaseClientUtils);
+  defineGlobalDep(requirejs, '@nocobase/client-v2', nocobaseClientV2);
+  defineGlobalDep(requirejs, '@nocobase/client-v2/client-v2', nocobaseClientV2);
+  defineGlobalDep(requirejs, '@nocobase/flow-engine', nocobaseFlowEngine);
+  defineGlobalDep(requirejs, '@nocobase/evaluators', nocobaseEvaluators);
+  defineGlobalDep(requirejs, '@nocobase/evaluators/client', nocobaseEvaluators);
 
-  requirejs.define('@dnd-kit/core', () => dndKitCore);
-  requirejs.define('@dnd-kit/sortable', () => dndKitSortable);
+  defineGlobalDep(requirejs, '@dnd-kit/core', dndKitCore);
+  defineGlobalDep(requirejs, '@dnd-kit/sortable', dndKitSortable);
 
   // utils
-  requirejs.define('ahooks', () => ahooks);
-  requirejs.define('axios', () => axios);
-  requirejs.define('dayjs', () => dayjs);
-  requirejs.define('lodash', () => lodash);
-  requirejs.define('@emotion/css', () => emotionCss);
-  requirejs.define('file-saver', () => FileSaver);
+  defineGlobalDep(requirejs, 'ahooks', ahooks);
+  defineGlobalDep(requirejs, 'axios', axios);
+  defineGlobalDep(requirejs, 'dayjs', dayjs);
+  defineGlobalDep(requirejs, 'lodash', lodash);
+  defineGlobalDep(requirejs, '@emotion/css', emotionCss);
+  defineGlobalDep(requirejs, 'file-saver', FileSaver);
 }

package/src/utils/index.tsx

@@ -10,6 +10,8 @@
 import React, { ComponentType, FC } from 'react';
 import { BlankComponent } from '../components';
 
+export * from './appVersionHTML';
+
 export function normalizeContainer(container: Element | ShadowRoot | string): Element | null {
   if (!container) {
     console.warn(`Failed to mount app: mount target should not be null or undefined.`);

package/src/utils/remotePlugins.ts

@@ -12,16 +12,38 @@ import type { PluginClass } from '../PluginManager';
 import type { PluginData } from '../PluginManager';
 import type { RequireJS } from './requirejs';
 
+type RemotePluginModule = PluginClass | ({ default?: PluginClass } & Record<string, unknown>);
+
 function getClientV2ModuleId(packageName: string) {
   return `${packageName}/client-v2`;
 }
 
+function getPluginClass(pluginModule: RemotePluginModule): PluginClass {
+  const defaultPlugin = 'default' in pluginModule ? pluginModule.default : undefined;
+  return defaultPlugin || (pluginModule as PluginClass);
+}
+
+function defineAppDevPluginModule(moduleId: string, pluginModule: RemotePluginModule) {
+  window.__nocobase_app_dev_plugins__ = window.__nocobase_app_dev_plugins__ || {};
+  window.__nocobase_app_dev_plugins__[moduleId] = pluginModule;
+}
+
 /**
  * @internal
  */
-export function defineDevPlugins(plugins: Record<string, PluginClass>) {
-  Object.entries(plugins).forEach(([packageName, plugin]) => {
-    window.define(getClientV2ModuleId(packageName), () => plugin);
+export function defineDevPlugins(plugins: Record<string, RemotePluginModule>) {
+  Object.entries(plugins).forEach(([packageName, pluginModule]) => {
+    const moduleId = getClientV2ModuleId(packageName);
+    window.define(moduleId, () => pluginModule);
+    defineAppDevPluginModule(moduleId, pluginModule);
+  });
+}
+
+function defineDevPluginModules(plugins: Record<string, RemotePluginModule>) {
+  Object.entries(plugins).forEach(([packageName, pluginModule]) => {
+    const moduleId = getClientV2ModuleId(packageName);
+    window.define(moduleId, () => pluginModule);
+    defineAppDevPluginModule(moduleId, pluginModule);
   });
 }
 
@@ -43,6 +65,12 @@ export function configRequirejs(requirejs: any, pluginData: PluginData[]) {
  */
 export function processRemotePlugins(pluginData: PluginData[], resolve: (plugins: [string, PluginClass][]) => void) {
   return (...pluginModules: (PluginClass & { default?: PluginClass })[]) => {
+    pluginModules.forEach((item, index) => {
+      if (item) {
+        defineAppDevPluginModule(getClientV2ModuleId(pluginData[index].packageName), item);
+      }
+    });
+
     const res: [string, PluginClass][] = pluginModules
       .map<[string, PluginClass]>((item, index) => [pluginData[index].name, item?.default || item])
       .filter((item) => item[1]);
@@ -75,6 +103,77 @@ export function getRemotePlugins(requirejs: any, pluginData: PluginData[] = []):
   });
 }
 
+async function getEsmDevPlugins(pluginData: PluginData[] = []): Promise<Array<[string, PluginClass]>> {
+  const plugins: Array<[string, PluginClass]> = [];
+  for (const plugin of sortPluginsByAppDevDependencies(pluginData)) {
+    const pluginModule: RemotePluginModule = await import(/* webpackIgnore: true */ plugin.url);
+    const pluginClass = getPluginClass(pluginModule);
+    if (pluginClass) {
+      plugins.push([plugin.name, pluginClass]);
+      defineDevPluginModules({ [plugin.packageName]: pluginModule });
+    }
+  }
+  return plugins;
+}
+
+function sortPluginsByAppDevDependencies(pluginData: PluginData[] = []) {
+  const pluginMap = new Map(pluginData.map((plugin) => [plugin.packageName, plugin]));
+  const sorted: PluginData[] = [];
+  const visiting = new Set<string>();
+  const visited = new Set<string>();
+
+  const visit = (plugin: PluginData) => {
+    if (visited.has(plugin.packageName)) {
+      return;
+    }
+    if (visiting.has(plugin.packageName)) {
+      return;
+    }
+    visiting.add(plugin.packageName);
+    for (const dep of plugin.appDevDependencies || []) {
+      const depPlugin = pluginMap.get(dep);
+      if (depPlugin) {
+        visit(depPlugin);
+      }
+    }
+    visiting.delete(plugin.packageName);
+    visited.add(plugin.packageName);
+    sorted.push(plugin);
+  };
+
+  pluginData.forEach(visit);
+  return sorted;
+}
+
+async function getMixedRemotePluginsInOrder(
+  requirejs: RequireJS,
+  pluginData: PluginData[] = [],
+): Promise<Array<[string, PluginClass]>> {
+  const plugins: Array<[string, PluginClass]> = [];
+  let requirejsPlugins: PluginData[] = [];
+  const flushRequirejsPlugins = async () => {
+    if (requirejsPlugins.length === 0) {
+      return;
+    }
+    const remotePluginList = await getRemotePlugins(requirejs, requirejsPlugins);
+    plugins.push(...remotePluginList);
+    requirejsPlugins = [];
+  };
+
+  for (const plugin of sortPluginsByAppDevDependencies(pluginData)) {
+    if (plugin.devMode === 'esm') {
+      await flushRequirejsPlugins();
+      const esmPluginList = await getEsmDevPlugins([plugin]);
+      plugins.push(...esmPluginList);
+      continue;
+    }
+    requirejsPlugins.push(plugin);
+  }
+
+  await flushRequirejsPlugins();
+  return plugins;
+}
+
 interface GetPluginsOption {
   requirejs: RequireJS;
   pluginData: PluginData[];
@@ -91,27 +190,34 @@ export async function getPlugins(options: GetPluginsOption): Promise<Array<[stri
   const res: Array<[string, PluginClass]> = [];
 
   const resolveDevPlugins: Record<string, PluginClass> = {};
+  const resolveDevPluginModules: Record<string, RemotePluginModule> = {};
   if (devDynamicImport) {
     for await (const plugin of pluginData) {
-      const pluginModule = await devDynamicImport(plugin.packageName);
+      const pluginModule: RemotePluginModule | null = await devDynamicImport(plugin.packageName);
       if (pluginModule) {
-        res.push([plugin.name, pluginModule.default]);
-        resolveDevPlugins[plugin.packageName] = pluginModule.default;
+        const pluginClass = getPluginClass(pluginModule);
+        res.push([plugin.name, pluginClass]);
+        resolveDevPlugins[plugin.packageName] = pluginClass;
+        resolveDevPluginModules[plugin.packageName] = pluginModule;
       }
     }
-    defineDevPlugins(resolveDevPlugins);
+    defineDevPlugins(resolveDevPluginModules);
   }
 
   const remotePlugins = pluginData.filter((item) => !resolveDevPlugins[item.packageName]);
+  const esmDevPlugins = remotePlugins.filter((item) => item.devMode === 'esm');
+  const requirejsPlugins = remotePlugins.filter((item) => item.devMode !== 'esm');
 
-  if (remotePlugins.length === 0) {
-    return res;
-  }
-
-  if (res.length === 0) {
-    const remotePluginList = await getRemotePlugins(requirejs, remotePlugins);
+  if (esmDevPlugins.length === 0) {
+    if (requirejsPlugins.length === 0) {
+      return res;
+    }
+    const remotePluginList = await getRemotePlugins(requirejs, requirejsPlugins);
     res.push(...remotePluginList);
+    return res;
   }
 
+  const mixedPluginList = await getMixedRemotePluginsInOrder(requirejs, remotePlugins);
+  res.push(...mixedPluginList);
   return res;
 }