@nocobase/flow-engine 2.0.0-alpha.4 → 2.0.0-alpha.41

package/src/acl/__tests__/Acl.test.tsx

@@ -69,4 +69,47 @@ describe('ACL', () => {
     });
     expect(notOk).toBe(false);
   });
+
+  it('reloads permissions when auth token changes', async () => {
+    const payload1 = {
+      data: {
+        allowAll: false,
+        actionAlias: { remove: 'destroy' },
+        resources: ['posts'],
+        actions: {},
+        strategy: { actions: [] },
+      },
+    };
+    const payload2 = {
+      data: {
+        allowAll: false,
+        actionAlias: { remove: 'erase' },
+        resources: ['posts'],
+        actions: {},
+        strategy: { actions: [] },
+      },
+    };
+
+    const engine = new FlowEngine();
+    const api: any = {
+      auth: { token: 't1' },
+      request: vi.fn().mockImplementation(async () => {
+        // 返回依据当前 token 的不同 ACL 数据
+        return api.auth.token === 't1' ? { data: payload1 } : { data: payload2 };
+      }),
+    };
+    engine.context.defineProperty('api', { value: api });
+
+    const acl = new ACL(engine);
+    await acl.load();
+    expect(acl.getActionAlias('remove')).toBe('destroy');
+
+    // 切换 token，应触发下次校验时的 ACL 重载
+    api.auth.token = 't2';
+    await acl.aclCheck({ dataSourceKey: 'main', resourceName: 'posts', actionName: 'remove' });
+    expect(acl.getActionAlias('remove')).toBe('erase');
+
+    // 确认 roles:check 请求至少调用两次（初次 + 重载）
+    expect(api.request).toHaveBeenCalledTimes(2);
+  });
 });

package/src/components/DynamicFlowsEditor.tsx

@@ -8,13 +8,12 @@
  */
 
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { uid } from '@nocobase/utils/client';
-import { Collapse, Space, Button, Tabs, Input, Modal, Form, Empty, Select } from 'antd';
-import type { FormInstance } from 'antd';
 import { observer } from '@formily/react';
+import type { FormInstance } from 'antd';
+import { Button, Collapse, Empty, Form, Input, Modal, Select, Space, Tabs } from 'antd';
 import React from 'react';
-import { FlowModel } from '../models';
 import { FlowDefinition } from '../FlowDefinition';
+import { FlowModel } from '../models';
 import { FlowDefinitionOptions } from '../types';
 
 const Panel = Collapse.Panel;

package/src/components/FieldModelRenderer.tsx

@@ -20,7 +20,6 @@ const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
   'flowSettingsVariant',
   'hideRemoveInSettings',
   'showTitle',
-  'skipApplyAutoFlows',
   'inputArgs',
   'showErrorFallback',
   'settingsMenuLevel',
@@ -32,20 +31,34 @@ export function FieldModelRenderer(props: any) {
   const composingRef = useRef(false);
 
   const handleChange = (e: any) => {
-    const val = e?.target?.value || e;
+    let val;
+    if (e && e.target && typeof e.target.value !== 'undefined') {
+      val = e.target.value;
+    } else if (
+      typeof e === 'string' ||
+      typeof e === 'number' ||
+      typeof e === 'boolean' ||
+      (typeof e === 'object' && !(e instanceof Event))
+    ) {
+      val = e;
+    } else {
+      val = null;
+    }
+
     model.setProps({ value: val });
     if (!composingRef.current) {
-      props.onChange(e);
+      props.onChange?.(val);
     }
   };
-
   const handleCompositionStart = () => {
     composingRef.current = true;
   };
 
-  const handleCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>) => {
+  const handleCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
     composingRef.current = false;
-    props.onChange(e);
+    if (flag) {
+      props.onChange(e);
+    }
   };
 
   const modelProps = {
@@ -55,7 +68,7 @@ export function FieldModelRenderer(props: any) {
     onCompositionEnd: handleCompositionEnd,
   };
   useEffect(() => {
-    model.setProps(modelProps);
+    model && model.setProps(modelProps);
   }, [modelProps]);
 
   return <FlowModelRenderer model={model} {...rest} />;

package/src/components/FieldSkeleton.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 from 'react';
+import { useFlowEngine } from '../provider';
+
+export const FieldSkeleton: React.FC = () => {
+  const flowEngine = useFlowEngine();
+  const token = flowEngine.context.themeToken;
+  return (
+    <span
+      style={{
+        display: 'inline-block',
+        width: '100%',
+        height: 16,
+        backgroundColor: token.colorFillSecondary,
+        borderRadius: token.borderRadiusSM,
+      }}
+    />
+  );
+};

package/src/components/FlowContextSelector.tsx

@@ -35,6 +35,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   formatPathToValue: customFormatPathToValue,
   open,
   onlyLeafSelectable = false,
+  ignoreFieldNames,
   ...cascaderProps
 }) => {
   // 记录最后点击的路径，用于双击检测
@@ -97,8 +98,11 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   const options = useMemo(() => {
     if (!resolvedMetaTree) return [];
     const base = buildContextSelectorItems(resolvedMetaTree);
-    return translateOptions(base);
-  }, [resolvedMetaTree, updateFlag, translateOptions]);
+    return translateOptions(base).filter((item) => {
+      if (!ignoreFieldNames || ignoreFieldNames.length === 0) return true;
+      return !ignoreFieldNames.includes(item.meta?.name || '');
+    });
+  }, [resolvedMetaTree, updateFlag, translateOptions, ignoreFieldNames]);
 
   // 内部展开路径：在 onlyLeafSelectable=true 时，点击父节点不会触发 onChange，
   // 但会触发 loadData。我们在此记录路径以在懒加载后保持展开。

package/src/components/FlowModelRenderer.tsx

@@ -43,7 +43,6 @@
  */
 
 import { observer } from '@formily/reactive-react';
-import { Skeleton, Spin } from 'antd';
 import _ from 'lodash';
 import React from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -75,7 +74,7 @@ export interface FlowModelRendererProps {
         /**
          * @default 'inside'
          */
-        toolbarPosition?: 'inside' | 'above';
+        toolbarPosition?: 'inside' | 'above' | 'below';
       }; // 默认 false
 
   /** 流程设置的交互风格 */
@@ -87,10 +86,7 @@ export interface FlowModelRendererProps {
   /** 是否在边框左上角显示模型title，默认 false */
   showTitle?: boolean; // 默认 false
 
-  /** 是否跳过自动应用流程，默认 false */
-  skipApplyAutoFlows?: boolean; // 默认 false
-
-  /** 当 skipApplyAutoFlows !== false 时，传递给 useApplyAutoFlows 的额外上下文 */
+  /** 传递给 beforeRender 事件的运行时参数 */
   inputArgs?: Record<string, any>;
 
   /** 是否在最外层包装 FlowErrorFallback 组件，默认 false */
@@ -118,7 +114,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
         /**
          * @default 'inside'
          */
-        toolbarPosition?: 'inside' | 'above';
+        toolbarPosition?: 'inside' | 'above' | 'below';
       };
   flowSettingsVariant: string;
   hideRemoveInSettings: boolean;
@@ -168,57 +164,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
   },
 );
 
-/**
- * 内部组件：不带 useApplyAutoFlows 的渲染器
- */
-const FlowModelRendererWithoutAutoFlows: React.FC<{
-  model: FlowModel;
-  showFlowSettings:
-    | boolean
-    | {
-        showBackground?: boolean;
-        showBorder?: boolean;
-        showDragHandle?: boolean;
-        style?: React.CSSProperties;
-        /**
-         * @default 'inside'
-         */
-        toolbarPosition?: 'inside' | 'above';
-      };
-  flowSettingsVariant: string;
-  hideRemoveInSettings: boolean;
-  showTitle: boolean;
-  showErrorFallback?: boolean;
-  settingsMenuLevel?: number;
-  extraToolbarItems?: ToolbarItemConfig[];
-}> = observer(
-  ({
-    model,
-    showFlowSettings,
-    flowSettingsVariant,
-    hideRemoveInSettings,
-    showTitle,
-    showErrorFallback,
-    settingsMenuLevel,
-    extraToolbarItems,
-  }) => {
-    setAutoFlowError(model, null);
-    return (
-      <FlowModelProvider model={model}>
-        <FlowModelRendererCore
-          model={model}
-          showFlowSettings={showFlowSettings}
-          flowSettingsVariant={flowSettingsVariant}
-          hideRemoveInSettings={hideRemoveInSettings}
-          showTitle={showTitle}
-          showErrorFallback={showErrorFallback}
-          settingsMenuLevel={settingsMenuLevel}
-          extraToolbarItems={extraToolbarItems}
-        />
-      </FlowModelProvider>
-    );
-  },
-);
+// 移除不带 beforeRender 执行的渲染器，统一触发 beforeRender 事件
 
 /**
  * 核心渲染逻辑组件
@@ -235,7 +181,7 @@ const FlowModelRendererCore: React.FC<{
         /**
          * @default 'inside'
          */
-        toolbarPosition?: 'inside' | 'above';
+        toolbarPosition?: 'inside' | 'above' | 'below';
       };
   flowSettingsVariant: string;
   hideRemoveInSettings: boolean;
@@ -264,7 +210,7 @@ const FlowModelRendererCore: React.FC<{
     const ContentOrError: React.FC = () => {
       const autoError = getAutoFlowError(model);
       if (autoError) {
-        // 把自动流的错误转化为内容区错误，由内层边界兜住
+        // 将 beforeRender 事件错误转化为内容区错误，由内层边界兜住
         throw autoError;
       }
       const rendered = model.render();
@@ -276,8 +222,15 @@ const FlowModelRendererCore: React.FC<{
     };
 
     // 如果不显示流程设置，直接返回模型内容（可能包装 ErrorBoundary）
+    // 当模型类发生变化（如 replaceModel），强制重挂载内容，规避部分子组件 hooks deps 形态不一致导致的报错
+    const contentKey = (model as any)?.use || (model as any)?.constructor?.name || model.uid;
+
     if (!showFlowSettings) {
-      return wrapWithErrorBoundary(<ContentOrError />);
+      return wrapWithErrorBoundary(
+        <div key={contentKey}>
+          <ContentOrError />
+        </div>,
+      );
     }
 
     // 根据 flowSettingsVariant 包装相应的设置组件
@@ -296,14 +249,22 @@ const FlowModelRendererCore: React.FC<{
             toolbarStyle={_.isObject(showFlowSettings) ? showFlowSettings.style : undefined}
             toolbarPosition={_.isObject(showFlowSettings) ? showFlowSettings.toolbarPosition : undefined}
           >
-            {wrapWithErrorBoundary(<ContentOrError />)}
+            {wrapWithErrorBoundary(
+              <div key={contentKey}>
+                <ContentOrError />
+              </div>,
+            )}
           </FlowsFloatContextMenu>
         );
 
       case 'contextMenu':
         return (
           <FlowsContextMenu model={model} showDeleteButton={!hideRemoveInSettings}>
-            {wrapWithErrorBoundary(<ContentOrError />)}
+            {wrapWithErrorBoundary(
+              <div key={contentKey}>
+                <ContentOrError />
+              </div>,
+            )}
           </FlowsContextMenu>
         );
 
@@ -334,7 +295,11 @@ const FlowModelRendererCore: React.FC<{
             toolbarStyle={_.isObject(showFlowSettings) ? showFlowSettings.style : undefined}
             toolbarPosition={_.isObject(showFlowSettings) ? showFlowSettings.toolbarPosition : undefined}
           >
-            {wrapWithErrorBoundary(<ContentOrError />)}
+            {wrapWithErrorBoundary(
+              <div key={contentKey}>
+                <ContentOrError />
+              </div>,
+            )}
           </FlowsFloatContextMenu>
         );
     }
@@ -355,8 +320,7 @@ const FlowModelRendererCore: React.FC<{
  * @param {string} props.flowSettingsVariant - The interaction style for flow settings.
  * @param {boolean} props.hideRemoveInSettings - Whether to hide remove button in settings.
  * @param {boolean} props.showTitle - Whether to show model title in the top-left corner of the border.
- * @param {boolean} props.skipApplyAutoFlows - Whether to skip applying auto flows.
- * @param {any} props.inputArgs - Runtime arguments to pass to useApplyAutoFlows when skipApplyAutoFlows is false.
+ * @param {any} props.inputArgs - Runtime arguments to pass to beforeRender event flows.
  * @param {number} props.settingsMenuLevel - Settings menu levels: 1=current model only (default), 2=include sub-models.
  * @param {ToolbarItemConfig[]} props.extraToolbarItems - Extra toolbar items to add to this renderer instance.
  * @returns {React.ReactNode | null} The rendered output of the model, or null if the model or its render method is invalid.
@@ -364,12 +328,11 @@ const FlowModelRendererCore: React.FC<{
 export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
   ({
     model,
-    fallback = <Skeleton.Button size="small" />,
+    fallback = null,
     showFlowSettings = false,
     flowSettingsVariant = 'dropdown',
     hideRemoveInSettings = false,
     showTitle = false,
-    skipApplyAutoFlows = false,
     inputArgs,
     showErrorFallback = true,
     settingsMenuLevel,
@@ -381,19 +344,8 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
       return null;
     }
 
-    // 构建渲染内容
-    const content = skipApplyAutoFlows ? (
-      <FlowModelRendererWithoutAutoFlows
-        model={model}
-        showFlowSettings={showFlowSettings}
-        flowSettingsVariant={flowSettingsVariant}
-        hideRemoveInSettings={hideRemoveInSettings}
-        showTitle={showTitle}
-        showErrorFallback={showErrorFallback}
-        settingsMenuLevel={settingsMenuLevel}
-        extraToolbarItems={extraToolbarItems}
-      />
-    ) : (
+    // 构建渲染内容：统一在渲染前触发 beforeRender 事件（带缓存）
+    const content = (
       <FlowModelRendererWithAutoFlows
         model={model}
         showFlowSettings={showFlowSettings}

package/src/components/FormItem.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { Tooltip, Form } from 'antd';
-import type { FormItemProps } from 'antd';
+import type { FormItemProps, TooltipProps } from 'antd';
 
 type ChildExtraProps = Record<string, any>;
 
@@ -123,6 +123,13 @@ export const FormItem = ({
       label={renderLabel()}
       colon={false}
       extra={rest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{rest.extra}</span>}
+      tooltip={
+        rest.tooltip &&
+        ({
+          title: rest.tooltip,
+          overlayInnerStyle: { whiteSpace: 'pre-line' },
+        } as TooltipProps)
+      }
     >
       {processedChildren}
     </Form.Item>

package/src/components/MobilePopup.style.ts

@@ -0,0 +1,220 @@
+/**
+ * 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 { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { merge } from '@formily/shared';
+import type { ComponentTokenMap } from 'antd/es/theme/interface';
+import { useMemo, useContext } from 'react';
+import { ConfigProvider, theme } from 'antd';
+
+const usePrefixCls = (
+  tag?: string,
+  props?: {
+    prefixCls?: string;
+  },
+) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext) || {};
+  if ('ConfigContext' in ConfigProvider) {
+    return getPrefixCls?.(tag, props?.prefixCls) || '';
+  } else {
+    const prefix = props?.prefixCls ?? 'ant-';
+    return `${prefix}${tag ?? ''}`;
+  }
+};
+const { ConfigContext } = ConfigProvider;
+const useConfig = () => useContext(ConfigContext);
+const useToken = theme.useToken;
+
+type OverrideComponent = keyof ComponentTokenMap | string;
+
+interface StyleInfo {
+  hashId: string;
+  prefixCls: string;
+  rootPrefixCls: string;
+  iconPrefixCls: string;
+}
+
+type TokenWithCommonCls<T> = T & {
+  /** Wrap component class with `.` prefix */
+  componentCls: string;
+  /** Origin prefix which do not have `.` prefix */
+  prefixCls: string;
+  /** Wrap icon class with `.` prefix */
+  iconCls: string;
+  /** Wrap ant prefixCls class with `.` prefix */
+  antCls: string;
+};
+
+const genCommonStyle = (token: any, componentPrefixCls: string): CSSObject => {
+  const { fontFamily, fontSize } = token;
+
+  const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+
+  return {
+    [rootPrefixSelector]: {
+      fontFamily,
+      fontSize,
+      boxSizing: 'border-box',
+
+      '&::before, &::after': {
+        boxSizing: 'border-box',
+      },
+
+      [rootPrefixSelector]: {
+        boxSizing: 'border-box',
+
+        '&::before, &::after': {
+          boxSizing: 'border-box',
+        },
+      },
+    },
+  };
+};
+type UseComponentStyleResult = {
+  wrapSSR: ReturnType<typeof useStyleRegister>;
+  hashId: string;
+  componentCls: string;
+  rootPrefixCls: string;
+};
+
+const genStyleHook = <ComponentName extends OverrideComponent>(
+  component: ComponentName,
+  styleFn: (token: TokenWithCommonCls<any>, props: any, info: StyleInfo) => CSSInterpolation,
+) => {
+  return (props?: any): UseComponentStyleResult => {
+    const { theme, token, hashId } = useToken();
+    const { getPrefixCls, iconPrefixCls } = useConfig();
+    const prefixCls = usePrefixCls(component);
+    const rootPrefixCls = getPrefixCls();
+
+    const wrapSSR = useStyleRegister(
+      {
+        theme: theme as any,
+        token,
+        hashId,
+        path: ['formily-antd', component, prefixCls, iconPrefixCls],
+      },
+      () => {
+        const componentCls = `.${prefixCls}`;
+        const mergedToken: TokenWithCommonCls<any> = merge(token, {
+          componentCls,
+          prefixCls,
+          iconCls: `.${iconPrefixCls}`,
+          antCls: `.${rootPrefixCls}`,
+        });
+
+        const styleInterpolation = styleFn(mergedToken, props, {
+          hashId,
+          prefixCls,
+          rootPrefixCls,
+          iconPrefixCls,
+        });
+        return [genCommonStyle(token, prefixCls), styleInterpolation];
+      },
+    );
+
+    // useStyleRegister 有 BUG，会导致重复渲染，所以这里做了一层缓存
+    // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
+    const memoizedWrapSSR = useMemo(() => {
+      return wrapSSR;
+    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+
+    return {
+      wrapSSR: memoizedWrapSSR,
+      hashId,
+      componentCls: prefixCls,
+      rootPrefixCls,
+    };
+  };
+};
+
+export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer', (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      '.nb-mobile-action-drawer-header': {
+        height: 'var(--nb-mobile-page-header-height)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottom: `1px solid ${token.colorSplit}`,
+        position: 'sticky',
+        top: 0,
+        backgroundColor: 'white',
+        zIndex: 1000,
+
+        // to match the button named 'Add block'
+        '& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn': {
+          margin: 12,
+        },
+      },
+
+      '.nb-mobile-action-drawer-placeholder': {
+        display: 'inline-block',
+        padding: 12,
+        visibility: 'hidden',
+      },
+
+      '.nb-mobile-action-drawer-close-icon': {
+        display: 'inline-block',
+        padding: 12,
+        cursor: 'pointer',
+      },
+
+      '.nb-mobile-action-drawer-body': {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        backgroundColor: token.colorBgLayout,
+
+        // 不带 tab 页的半窗
+        '& > .nb-grid-container': {
+          padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`,
+        },
+
+        // 带有 tab 页的半窗
+        '.ant-tabs-nav': {
+          marginBottom: '0px !important',
+          padding: `0 ${token.paddingPageHorizontal + token.borderRadiusBlock / 2}px`,
+          backgroundColor: token.colorBgContainer,
+        },
+
+        // clear the margin-bottom of the last block
+        '& > .nb-grid-container > .nb-grid > .nb-grid-warp > .nb-grid-row:nth-last-child(2) .noco-card-item': {
+          marginBottom: 0,
+
+          '& > .ant-card': {
+            marginBottom: '0 !important',
+          },
+        },
+      },
+
+      '.nb-mobile-action-drawer-footer': {
+        padding: '8px var(--nb-mobile-page-tabs-content-padding)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        position: 'sticky',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+        borderTop: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.colorBgLayout,
+
+        '.ant-btn': {
+          marginLeft: 8,
+        },
+      },
+    },
+  };
+});