diff --git a/packages/core/flow-engine/src/components/FlowModelRenderer.tsx b/packages/core/flow-engine/src/components/FlowModelRenderer.tsx index 957ce1d82b..779407ca8f 100644 --- a/packages/core/flow-engine/src/components/FlowModelRenderer.tsx +++ b/packages/core/flow-engine/src/components/FlowModelRenderer.tsx @@ -75,6 +75,9 @@ interface FlowModelRendererProps { /** 是否在最外层包装 FlowErrorFallback 组件,默认 false */ showErrorFallback?: boolean; // 默认 false + + /** 设置菜单层级:1=仅当前模型(默认),2=包含子模型 */ + settingsMenuLevel?: number; } /** @@ -89,6 +92,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{ sharedContext?: Record; independentAutoFlowExecution?: boolean; showErrorFallback?: boolean; + settingsMenuLevel?: number; }> = observer( ({ model, @@ -99,6 +103,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{ sharedContext, independentAutoFlowExecution, showErrorFallback, + settingsMenuLevel, }) => { useApplyAutoFlows(model, extraContext, !independentAutoFlowExecution); @@ -110,6 +115,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{ flowSettingsVariant={flowSettingsVariant} hideRemoveInSettings={hideRemoveInSettings} showErrorFallback={showErrorFallback} + settingsMenuLevel={settingsMenuLevel} /> ); @@ -126,8 +132,17 @@ const FlowModelRendererWithoutAutoFlows: React.FC<{ hideRemoveInSettings: boolean; sharedContext?: Record; showErrorFallback?: boolean; + settingsMenuLevel?: number; }> = observer( - ({ model, showFlowSettings, flowSettingsVariant, hideRemoveInSettings, sharedContext, showErrorFallback }) => { + ({ + model, + showFlowSettings, + flowSettingsVariant, + hideRemoveInSettings, + sharedContext, + showErrorFallback, + settingsMenuLevel, + }) => { return ( ); @@ -151,68 +167,75 @@ const FlowModelRendererCore: React.FC<{ flowSettingsVariant: string; hideRemoveInSettings: boolean; showErrorFallback?: boolean; -}> = observer(({ model, showFlowSettings, flowSettingsVariant, hideRemoveInSettings, showErrorFallback }) => { - // 渲染模型内容 - const modelContent = model.render(); + settingsMenuLevel?: number; +}> = observer( + ({ model, showFlowSettings, flowSettingsVariant, hideRemoveInSettings, showErrorFallback, settingsMenuLevel }) => { + // 渲染模型内容 + const modelContent = model.render(); - // 包装 ErrorBoundary 的辅助函数 - const wrapWithErrorBoundary = (children: React.ReactNode) => { - if (showErrorFallback) { - return {children}; + // 包装 ErrorBoundary 的辅助函数 + const wrapWithErrorBoundary = (children: React.ReactNode) => { + if (showErrorFallback) { + return {children}; + } + return children; + }; + + // 如果不显示流程设置,直接返回模型内容(可能包装 ErrorBoundary) + if (!showFlowSettings) { + return wrapWithErrorBoundary(modelContent); } - return children; - }; - // 如果不显示流程设置,直接返回模型内容(可能包装 ErrorBoundary) - if (!showFlowSettings) { - return wrapWithErrorBoundary(modelContent); - } + // 根据 flowSettingsVariant 包装相应的设置组件 + switch (flowSettingsVariant) { + case 'dropdown': + return ( + + {wrapWithErrorBoundary(modelContent)} + + ); - // 根据 flowSettingsVariant 包装相应的设置组件 - switch (flowSettingsVariant) { - case 'dropdown': - return ( - - {wrapWithErrorBoundary(modelContent)} - - ); + case 'contextMenu': + return ( + + {wrapWithErrorBoundary(modelContent)} + + ); - case 'contextMenu': - return ( - - {wrapWithErrorBoundary(modelContent)} - - ); + case 'modal': + // TODO: 实现 modal 模式的流程设置 + console.warn('FlowModelRenderer: modal variant is not implemented yet'); + return wrapWithErrorBoundary(modelContent); - case 'modal': - // TODO: 实现 modal 模式的流程设置 - console.warn('FlowModelRenderer: modal variant is not implemented yet'); - return wrapWithErrorBoundary(modelContent); + case 'drawer': + // TODO: 实现 drawer 模式的流程设置 + console.warn('FlowModelRenderer: drawer variant is not implemented yet'); + return wrapWithErrorBoundary(modelContent); - case 'drawer': - // TODO: 实现 drawer 模式的流程设置 - console.warn('FlowModelRenderer: drawer variant is not implemented yet'); - return wrapWithErrorBoundary(modelContent); - - default: - console.warn(`FlowModelRenderer: Unknown flowSettingsVariant '${flowSettingsVariant}', falling back to dropdown`); - return ( - - {wrapWithErrorBoundary(modelContent)} - - ); - } -}); + default: + console.warn( + `FlowModelRenderer: Unknown flowSettingsVariant '${flowSettingsVariant}', falling back to dropdown`, + ); + return ( + + {wrapWithErrorBoundary(modelContent)} + + ); + } + }, +); /** * A React component responsible for rendering a FlowModel. @@ -228,6 +251,7 @@ const FlowModelRendererCore: React.FC<{ * @param {any} props.extraContext - Extra context to pass to useApplyAutoFlows when skipApplyAutoFlows is false. * @param {any} props.sharedContext - Shared context to pass to the model. * @param {boolean} props.independentAutoFlowExecution - Whether each component has independent auto flow execution. + * @param {number} props.settingsMenuLevel - Settings menu levels: 1=current model only (default), 2=include sub-models. * @returns {React.ReactNode | null} The rendered output of the model, or null if the model or its render method is invalid. */ export const FlowModelRenderer: React.FC = observer( @@ -242,6 +266,7 @@ export const FlowModelRenderer: React.FC = observer( sharedContext, independentAutoFlowExecution = false, showErrorFallback = false, + settingsMenuLevel, }) => { if (!model || typeof model.render !== 'function') { // 可以选择渲染 null 或者一个错误/提示信息 @@ -264,6 +289,7 @@ export const FlowModelRenderer: React.FC = observer( hideRemoveInSettings={hideRemoveInSettings} sharedContext={sharedContext} showErrorFallback={showErrorFallback} + settingsMenuLevel={settingsMenuLevel} /> ); @@ -279,6 +305,7 @@ export const FlowModelRenderer: React.FC = observer( sharedContext={sharedContext} independentAutoFlowExecution={independentAutoFlowExecution} showErrorFallback={showErrorFallback} + settingsMenuLevel={settingsMenuLevel} /> ); diff --git a/packages/core/flow-engine/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx b/packages/core/flow-engine/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx index f4410ec3c9..818c5b011e 100644 --- a/packages/core/flow-engine/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx +++ b/packages/core/flow-engine/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx @@ -40,6 +40,7 @@ const renderToolbarItems = ( showDeleteButton: boolean, showCopyUidButton: boolean, flowEngine: FlowEngine, + settingsMenuLevel?: number, ) => { const toolbarItems = flowEngine?.flowSettings?.getToolbarItems?.() || []; @@ -60,6 +61,7 @@ const renderToolbarItems = ( model={model} showDeleteButton={showDeleteButton} showCopyUidButton={showCopyUidButton} + menuLevels={settingsMenuLevel} /> ); } @@ -144,6 +146,10 @@ interface ModelProvidedProps { * @default true */ showBackground?: boolean; + /** + * Settings menu levels: 1=current model only (default), 2=include sub-models + */ + settingsMenuLevel?: number; } interface ModelByIdProps { @@ -163,6 +169,10 @@ interface ModelByIdProps { * @default true */ showBackground?: boolean; + /** + * Settings menu levels: 1=current model only (default), 2=include sub-models + */ + settingsMenuLevel?: number; } type FlowsFloatContextMenuProps = ModelProvidedProps | ModelByIdProps; @@ -193,6 +203,7 @@ const isModelByIdProps = (props: FlowsFloatContextMenuProps): props is ModelById * @param props.showCopyUidButton 是否显示复制UID按钮,默认为true * @param props.containerStyle 容器自定义样式 * @param props.className 容器自定义类名 + * @param props.settingsMenuLevel 设置菜单层级:1=仅当前模型(默认),2=包含子模型 */ const FlowsFloatContextMenu: React.FC = observer((props) => { const flowEngine = useFlowEngine(); @@ -219,6 +230,7 @@ const FlowsFloatContextMenuWithModel: React.FC = observer( className, showBackground = true, showBorder = true, + settingsMenuLevel, }: ModelProvidedProps) => { const [hideMenu, setHideMenu] = useState(false); const [hasButton, setHasButton] = useState(false); @@ -293,7 +305,7 @@ const FlowsFloatContextMenuWithModel: React.FC = observer(
- {renderToolbarItems(model, showDeleteButton, showCopyUidButton, flowEngine)} + {renderToolbarItems(model, showDeleteButton, showCopyUidButton, flowEngine, settingsMenuLevel)}
@@ -313,6 +325,7 @@ const FlowsFloatContextMenuWithModelById: React.FC = observer( showCopyUidButton = true, containerStyle, className, + settingsMenuLevel, }) => { const model = useFlowModelById(uid, modelClassName); @@ -328,6 +341,7 @@ const FlowsFloatContextMenuWithModelById: React.FC = observer( showCopyUidButton={showCopyUidButton} containerStyle={containerStyle} className={className} + settingsMenuLevel={settingsMenuLevel} > {children}