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

package/src/flow/utils/dataScopeFormValueClear.ts

@@ -0,0 +1,278 @@
+/**
+ * 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 { FlowContext, FlowModel } from '@nocobase/flow-engine';
+import _ from 'lodash';
+import { namePathToPathKey, pathKeyToNamePath } from '../models/blocks/form/value-runtime/path';
+import { collectStaticDepsFromTemplateValue, type DepCollector } from '../models/blocks/form/value-runtime/deps';
+
+type NamePath = Array<string | number>;
+
+type DataScopeClearDeps = {
+  wildcard: boolean;
+  valuePaths: NamePath[];
+};
+
+type DataScopeClearBinding = {
+  signature: string;
+  dispose: () => void;
+};
+
+const FORM_VALUES_CHANGE_EVENT = 'formValuesChange';
+const DATA_SCOPE_CLEAR_BINDINGS_KEY = '__formValueDrivenDataScopeClearBindings';
+
+function dedupeNamePaths(paths: NamePath[]) {
+  const byKey = new Map<string, NamePath>();
+  for (const path of paths) {
+    if (!path?.length) continue;
+    byKey.set(namePathToPathKey(path), path);
+  }
+  return Array.from(byKey.values());
+}
+
+function isNamePathPrefix(prefix: NamePath, path: NamePath) {
+  if (prefix.length > path.length) return false;
+  return prefix.every((seg, index) => seg === path[index]);
+}
+
+function minimizeValueNamePaths(paths: NamePath[]) {
+  const deduped = dedupeNamePaths(paths);
+  return deduped.filter((path, index) => {
+    return !deduped.some((other, otherIndex) => otherIndex !== index && isNamePathPrefix(path, other));
+  });
+}
+
+function collectDataScopeClearDeps(params: any): DataScopeClearDeps {
+  const collector: DepCollector = { deps: new Set(), wildcard: false };
+  collectStaticDepsFromTemplateValue(params, collector);
+
+  const valuePaths: NamePath[] = [];
+  let wildcard = collector.wildcard;
+
+  for (const depKey of collector.deps) {
+    if (depKey === 'fv:*') {
+      wildcard = true;
+      continue;
+    }
+    if (!depKey.startsWith('fv:')) {
+      continue;
+    }
+    const inner = depKey.slice('fv:'.length);
+    if (!inner) {
+      wildcard = true;
+      continue;
+    }
+    valuePaths.push(pathKeyToNamePath(inner));
+  }
+
+  return {
+    wildcard,
+    valuePaths: minimizeValueNamePaths(valuePaths),
+  };
+}
+
+function hasDeps(deps: DataScopeClearDeps) {
+  return deps.wildcard || deps.valuePaths.length > 0;
+}
+
+function hasModelValue(model: any) {
+  const current = model?.props?.value;
+  if (current == null) return false;
+  if (Array.isArray(current)) return current.length > 0;
+  return true;
+}
+
+function getChangedPathsFromPayload(payload: any): NamePath[] {
+  const rawChangedPaths = Array.isArray(payload?.changedPaths) ? payload.changedPaths : [];
+  const out: NamePath[] = [];
+
+  for (const path of rawChangedPaths) {
+    if (Array.isArray(path)) {
+      const segs = path.filter((seg) => typeof seg === 'string' || typeof seg === 'number') as NamePath;
+      if (segs.length) out.push(segs);
+      continue;
+    }
+    if (typeof path === 'string' && path) {
+      out.push(pathKeyToNamePath(path));
+    }
+  }
+
+  if (out.length) {
+    return out;
+  }
+
+  const changedValues = payload?.changedValues;
+  if (changedValues && typeof changedValues === 'object' && !Array.isArray(changedValues)) {
+    for (const key of Object.keys(changedValues)) {
+      const namePath = pathKeyToNamePath(key);
+      if (namePath.length) out.push(namePath);
+    }
+  }
+
+  return out;
+}
+
+function depsMatchPayload(deps: DataScopeClearDeps, payload: any) {
+  if (!hasDeps(deps)) return false;
+  if (deps.wildcard) return true;
+
+  const changedPaths = getChangedPathsFromPayload(payload);
+  if (!changedPaths.length) return true;
+
+  for (const changedPath of changedPaths) {
+    for (const depPath of deps.valuePaths) {
+      if (isNamePathPrefix(depPath, changedPath) || isNamePathPrefix(changedPath, depPath)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+function getDepsSignature(deps: DataScopeClearDeps, formBlock: any) {
+  const toKeys = (paths: NamePath[]) => paths.map((path) => namePathToPathKey(path)).sort();
+  return JSON.stringify({
+    formBlockUid: formBlock?.uid,
+    wildcard: deps.wildcard,
+    valuePaths: toKeys(deps.valuePaths),
+  });
+}
+
+function getBindings(model: any): Map<string, DataScopeClearBinding> {
+  return (model[DATA_SCOPE_CLEAR_BINDINGS_KEY] ||= new Map<string, DataScopeClearBinding>());
+}
+
+function isFormBlock(model: any) {
+  if (!model || typeof model !== 'object') return false;
+  if (!model.emitter || typeof model.emitter.on !== 'function' || typeof model.emitter.off !== 'function') return false;
+  return !!model.formValueRuntime || !!model.context?.form || typeof model.context?.setFormValues === 'function';
+}
+
+function findFormBlock(ctx: FlowContext): any | null {
+  const candidates: any[] = [];
+  const push = (model: any) => {
+    if (model && !candidates.includes(model)) candidates.push(model);
+  };
+
+  push((ctx.model as any)?.context?.blockModel);
+  push(ctx.model);
+
+  let cursor: any = (ctx.model as any)?.parent;
+  while (cursor) {
+    push(cursor);
+    cursor = cursor?.parent;
+  }
+
+  return candidates.find(isFormBlock) || null;
+}
+
+function clearModelValue(model: any) {
+  if (!hasModelValue(model)) return;
+  const next = Array.isArray(model?.props?.value) ? [] : null;
+  if (typeof model.change === 'function') {
+    model.change(next);
+    return;
+  }
+  if (typeof model?.props?.onChange === 'function') {
+    model.props.onChange(next);
+  }
+}
+
+function shouldBind(model: any) {
+  return !!model && typeof model === 'object' && typeof model?.props?.onChange === 'function';
+}
+
+function disposeBinding(model: any, key: string) {
+  const bindings = getBindings(model);
+  const existing = bindings.get(key);
+  if (existing) {
+    existing.dispose();
+  }
+}
+
+/**
+ * When a field's dataScope filter references other form values (e.g. `{{ ctx.formValues.school.id }}`),
+ * clear current field value after the dependency changes, so users don't keep an invalid stale selection.
+ */
+export function ensureFormValueDrivenDataScopeClear(ctx: FlowContext, params: any) {
+  const model: any = ctx.model;
+  const flowKey = (ctx as any)?.flowKey;
+  if (!shouldBind(model) || !flowKey) return;
+
+  const stepKey = 'dataScope';
+  const bindingKey = `${flowKey}:${stepKey}`;
+  const deps = collectDataScopeClearDeps(params);
+  if (!hasDeps(deps)) {
+    disposeBinding(model, bindingKey);
+    return;
+  }
+
+  const formBlock = findFormBlock(ctx);
+  if (!formBlock) {
+    disposeBinding(model, bindingKey);
+    return;
+  }
+
+  const signature = getDepsSignature(deps, formBlock);
+  const bindings = getBindings(model);
+  const existing = bindings.get(bindingKey);
+  if (existing?.signature === signature) {
+    return;
+  }
+  if (existing) {
+    existing.dispose();
+  }
+
+  const engineEmitter = model?.flowEngine?.emitter || (ctx as any)?.engine?.emitter || model?.context?.engine?.emitter;
+
+  const binding: DataScopeClearBinding = {
+    signature,
+    dispose: () => {},
+  };
+
+  const dispose = () => {
+    formBlock.emitter?.off?.(FORM_VALUES_CHANGE_EVENT, listener);
+    engineEmitter?.off?.('model:unmounted', cleanupOnUnmount);
+    engineEmitter?.off?.('model:destroyed', cleanupOnDestroyed);
+    if (bindings.get(bindingKey) === binding) {
+      bindings.delete(bindingKey);
+    }
+  };
+
+  const listener = (payload: any) => {
+    if (model.disposed || formBlock.disposed) {
+      dispose();
+      return;
+    }
+
+    if (!hasModelValue(model) || !depsMatchPayload(deps, payload)) {
+      return;
+    }
+
+    clearModelValue(model);
+  };
+
+  const cleanupOnUnmount = ({ model: unmountedModel }: { model: FlowModel }) => {
+    if (unmountedModel === formBlock || (unmountedModel === model && model.disposed)) {
+      dispose();
+    }
+  };
+
+  const cleanupOnDestroyed = ({ model: destroyedModel }: { model: FlowModel }) => {
+    if (destroyedModel === model || destroyedModel === formBlock) {
+      dispose();
+    }
+  };
+
+  binding.dispose = dispose;
+  bindings.set(bindingKey, binding);
+  formBlock.emitter.on(FORM_VALUES_CHANGE_EVENT, listener);
+  engineEmitter?.on?.('model:unmounted', cleanupOnUnmount);
+  engineEmitter?.on?.('model:destroyed', cleanupOnDestroyed);
+}

package/src/hooks/index.ts

@@ -8,5 +8,7 @@
  */
 
 export * from './useApp';
+export * from './useCurrentAppInfo';
 export * from './usePlugin';
 export * from './useRouter';
+export { escapeHTML, getAppVersionHTML } from '../utils/appVersionHTML';

package/src/hooks/useCurrentAppInfo.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 { useFlowEngineContext } from '@nocobase/flow-engine';
+import { useEffect, useState } from 'react';
+
+export function useCurrentAppInfo<TAppInfo extends Record<string, any> = Record<string, any>>() {
+  const ctx = useFlowEngineContext();
+  const [data, setData] = useState<TAppInfo>();
+
+  useEffect(() => {
+    let active = true;
+
+    Promise.resolve(ctx.appInfo)
+      .then((info) => {
+        if (active) {
+          setData((info || {}) as TAppInfo);
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, [ctx]);
+
+  return data;
+}

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

@@ -92,8 +92,8 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   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
   defineGlobalDep(requirejs, 'ahooks', ahooks);

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

@@ -31,9 +31,11 @@ function defineAppDevPluginModule(moduleId: string, pluginModule: RemotePluginMo
 /**
  * @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);
   });
 }
 
@@ -188,15 +190,18 @@ 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]);