@nocobase/flow-engine 2.0.0-alpha.3 → 2.0.0-alpha.30

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';
@@ -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 */
@@ -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 事件
 
 /**
  * 核心渲染逻辑组件
@@ -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/__tests__/flow-model-render-error-fallback.test.tsx

@@ -124,7 +124,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
-            <FlowModelRenderer model={model} showFlowSettings showErrorFallback skipApplyAutoFlows />
+            <FlowModelRenderer model={model} showFlowSettings showErrorFallback />
           </FlowEngineProvider>
         </App>
       </ConfigProvider>,
@@ -141,7 +141,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
         return (
           <div>
             {items.map((m: FlowModel) => (
-              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback skipApplyAutoFlows />
+              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback />
             ))}
           </div>
         );
@@ -167,7 +167,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
-            <FlowModelRenderer model={parent} skipApplyAutoFlows />
+            <FlowModelRenderer model={parent} />
           </FlowEngineProvider>
         </App>
       </ConfigProvider>,
@@ -186,7 +186,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
         return (
           <div>
             {cells.map((m: FlowModel) => (
-              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback skipApplyAutoFlows />
+              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback />
             ))}
           </div>
         );
@@ -212,7 +212,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
-            <FlowModelRenderer model={parent} skipApplyAutoFlows />
+            <FlowModelRenderer model={parent} />
           </FlowEngineProvider>
         </App>
       </ConfigProvider>,