@nocobase/flow-engine 2.0.0-alpha.7 → 2.0.0-alpha.71

package/src/components/FlowModelRenderer.tsx

@@ -42,10 +42,8 @@
  * />
  */
 
-import { observer } from '@formily/reactive-react';
-import { Skeleton, Spin } from 'antd';
 import _ from 'lodash';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FlowModelProvider, useApplyAutoFlows } from '../hooks';
 import { getAutoFlowError, setAutoFlowError } from '../utils';
@@ -54,6 +52,7 @@ import { ToolbarItemConfig } from '../types';
 import { FlowErrorFallback } from './FlowErrorFallback';
 import { FlowsContextMenu } from './settings/wrappers/contextual/FlowsContextMenu';
 import { FlowsFloatContextMenu } from './settings/wrappers/contextual/FlowsFloatContextMenu';
+import { observer } from '../reactive';
 
 export interface FlowModelRendererProps {
   model?: FlowModel;
@@ -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 */
@@ -101,6 +97,8 @@ export interface FlowModelRendererProps {
 
   /** 额外的工具栏项目，仅应用于此实例 */
   extraToolbarItems?: ToolbarItemConfig[];
+
+  useCache?: boolean;
 }
 
 /**
@@ -118,7 +116,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
         /**
          * @default 'inside'
          */
-        toolbarPosition?: 'inside' | 'above';
+        toolbarPosition?: 'inside' | 'above' | 'below';
       };
   flowSettingsVariant: string;
   hideRemoveInSettings: boolean;
@@ -143,7 +141,10 @@ const FlowModelRendererWithAutoFlows: React.FC<{
   }) => {
     // hidden 占位由模型自身处理；无需在此注入
 
-    const { loading: pending, error: autoFlowsError } = useApplyAutoFlows(model, inputArgs, { throwOnError: false });
+    const { loading: pending, error: autoFlowsError } = useApplyAutoFlows(model, inputArgs, {
+      throwOnError: false,
+      useCache: model.context.useCache,
+    });
     // 将错误下沉到 model 实例上，供内容层读取（类型安全的 WeakMap 存储）
     setAutoFlowError(model, autoFlowsError || null);
 
@@ -168,57 +169,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 +186,7 @@ const FlowModelRendererCore: React.FC<{
         /**
          * @default 'inside'
          */
-        toolbarPosition?: 'inside' | 'above';
+        toolbarPosition?: 'inside' | 'above' | 'below';
       };
   flowSettingsVariant: string;
   hideRemoveInSettings: boolean;
@@ -264,7 +215,7 @@ const FlowModelRendererCore: React.FC<{
     const ContentOrError: React.FC = () => {
       const autoError = getAutoFlowError(model);
       if (autoError) {
-        // 把自动流的错误转化为内容区错误，由内层边界兜住
+        // 将 beforeRender 事件错误转化为内容区错误，由内层边界兜住
         throw autoError;
       }
       const rendered = model.render();
@@ -276,8 +227,17 @@ const FlowModelRendererCore: React.FC<{
     };
 
     // 如果不显示流程设置，直接返回模型内容（可能包装 ErrorBoundary）
+    // 当模型类或 use 变化时重挂载内容，规避组件内部状态残留
+    const rawUse = (model as any)?.use;
+    const resolvedName = (model as any)?.constructor?.name || model.uid;
+    const contentKey = typeof rawUse === 'string' ? `${rawUse}:${model.uid}` : `${resolvedName}:${model.uid}`;
+
     if (!showFlowSettings) {
-      return wrapWithErrorBoundary(<ContentOrError />);
+      return wrapWithErrorBoundary(
+        <div key={contentKey}>
+          <ContentOrError />
+        </div>,
+      );
     }
 
     // 根据 flowSettingsVariant 包装相应的设置组件
@@ -296,14 +256,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 +302,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 +327,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,36 +335,33 @@ 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,
     extraToolbarItems,
+    useCache,
   }) => {
+    useEffect(() => {
+      if (model?.context) {
+        model.context.defineProperty('useCache', {
+          value: typeof useCache === 'boolean' ? useCache : model.context.useCache,
+        });
+      }
+    }, [model?.context, useCache]);
+
     if (!model || typeof model.render !== 'function') {
       // 可以选择渲染 null 或者一个错误/提示信息
       console.warn('FlowModelRenderer: Invalid model or render method not found.', model);
       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,
+        },
+      },
+    },
+  };
+});

package/src/components/MobilePopup.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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 { ConfigProvider } from 'antd';
+import { Popup } from 'antd-mobile';
+import React, { FC, ReactNode, useMemo } from 'react';
+import { CloseOutline } from 'antd-mobile-icons';
+import { useMobileActionDrawerStyle } from './MobilePopup.style';
+import { useTranslation } from 'react-i18next';
+
+interface MobilePopupProps {
+  title?: string;
+  visible: boolean;
+  minHeight?: number | string;
+  onClose: () => void;
+  children: ReactNode;
+  className?: string;
+  footer?: ReactNode;
+}
+
+export const MobilePopup: FC<MobilePopupProps> = (props) => {
+  const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
+  const { t } = useTranslation();
+  const { componentCls, hashId } = useMobileActionDrawerStyle();
+
+  const style = useMemo(() => {
+    return {
+      minHeight,
+    };
+  }, [minHeight]);
+
+  const theme = useMemo(() => {
+    return {
+      token: {
+        paddingPageHorizontal: 8,
+        paddingPageVertical: 8,
+        marginBlock: 12,
+        borderRadiusBlock: 8,
+        fontSize: 14,
+      },
+    };
+  }, []);
+
+  return (
+    <ConfigProvider theme={theme}>
+      <Popup
+        className={`${componentCls} ${hashId} ${className || ''}`}
+        visible={visible}
+        onClose={closePopup}
+        onMaskClick={closePopup}
+        bodyClassName="nb-mobile-action-drawer-body"
+        bodyStyle={{
+          padding: 0,
+        }}
+        maskStyle={style}
+        style={style}
+        destroyOnClose
+      >
+        <div className="nb-mobile-action-drawer-header">
+          {/* used to make the title center */}
+          <span className="nb-mobile-action-drawer-placeholder">
+            <CloseOutline />
+          </span>
+          <span>{title}</span>
+          <span
+            className="nb-mobile-action-drawer-close-icon"
+            onClick={closePopup}
+            role="button"
+            tabIndex={0}
+            aria-label={t('Close')}
+          >
+            <CloseOutline />
+          </span>
+        </div>
+        {children}
+        {footer && <div className="nb-mobile-action-drawer-footer">{footer}</div>}
+      </Popup>
+    </ConfigProvider>
+  );
+};

package/src/components/__tests__/FlowModelRenderer.test.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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 { render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { vi } from 'vitest';
+import { FlowEngine } from '../../flowEngine';
+import { FlowModel } from '../../models/flowModel';
+import { FlowEngineProvider } from '../../provider';
+import { FlowModelRenderer } from '../FlowModelRenderer';
+
+describe('FlowModelRenderer', () => {
+  let flowEngine: FlowEngine;
+  let model: FlowModel;
+
+  beforeEach(() => {
+    flowEngine = new FlowEngine();
+    model = new FlowModel({
+      uid: 'test-model',
+      flowEngine,
+    });
+    // Mock dispatchEvent to track calls
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    // Mock render to return something
+    model.render = vi.fn().mockReturnValue(<div>Model Content</div>);
+  });
+
+  const renderWithProvider = (ui: React.ReactNode) => {
+    return render(<FlowEngineProvider engine={flowEngine}>{ui}</FlowEngineProvider>);
+  };
+
+  test('should pass useCache to useApplyAutoFlows and set it on context', async () => {
+    const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={true} />);
+
+    // Check if dispatchEvent was called with useCache: true
+    // useApplyAutoFlows calls dispatchEvent('beforeRender', inputArgs, { useCache })
+    await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledWith(
+        'beforeRender',
+        undefined,
+        expect.objectContaining({ useCache: true }),
+      );
+    });
+
+    // Check if useCache is set on context
+    expect(model.context.useCache).toBe(true);
+
+    unmount();
+  });
+
+  test('should pass useCache=false to useApplyAutoFlows and set it on context', async () => {
+    const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={false} />);
+
+    await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledWith(
+        'beforeRender',
+        undefined,
+        expect.objectContaining({ useCache: false }),
+      );
+    });
+
+    expect(model.context.useCache).toBe(false);
+
+    unmount();
+  });
+
+  test('should not pass useCache if not provided', async () => {
+    const { unmount } = renderWithProvider(<FlowModelRenderer model={model} />);
+
+    await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledWith(
+        'beforeRender',
+        undefined,
+        expect.objectContaining({ useCache: undefined }),
+      );
+    });
+
+    // context.useCache should be undefined (or default)
+    expect(model.context.useCache).toBeUndefined();
+
+    unmount();
+  });
+});