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

package/src/components/settings/wrappers/contextual/FlowsContextMenu.tsx

@@ -8,15 +8,16 @@
  */
 
 import { DeleteOutlined, ExclamationCircleOutlined, SettingOutlined } from '@ant-design/icons';
-import { observer } from '@formily/react';
 import type { MenuProps } from 'antd';
 import { Alert, Dropdown, Modal } from 'antd';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FlowRuntimeContext } from '../../../../flowContext';
 import { useFlowModelById } from '../../../../hooks';
 import { FlowModel } from '../../../../models';
-import { getT, setupRuntimeContextSteps } from '../../../../utils';
+import { getT, setupRuntimeContextSteps, shouldHideStepInSettings } from '../../../../utils';
 import { openStepSettingsDialog } from './StepSettingsDialog';
+import { ActionDefinition } from '../../../../types';
+import { observer } from '../../../../reactive';
 
 // 右键菜单组件接口
 interface ModelProvidedProps {
@@ -139,30 +140,30 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
     }
 
     // 获取可配置的flows和steps
-    const getConfigurableFlowsAndSteps = useCallback(() => {
+    const getConfigurableFlowsAndSteps = useCallback(async () => {
       try {
         const flows = (model as FlowModel).getFlows();
 
         const flowsArray = Array.from(flows.values());
 
-        return flowsArray
-          .map((flow) => {
-            const configurableSteps = Object.entries(flow.steps)
-              .map(([stepKey, stepDefinition]) => {
-                const actionStep = stepDefinition;
+        const result = await Promise.all(
+          flowsArray.map(async (flow) => {
+            const configurableSteps = await Promise.all(
+              Object.entries(flow.steps).map(async ([stepKey, stepDefinition]) => {
+                const actionStep: any = stepDefinition;
 
-                // 如果步骤设置了 hideInSettings: true，则跳过此步骤
-                if (actionStep.hideInSettings) {
+                // 支持静态与动态 hideInSettings
+                if (await shouldHideStepInSettings(model as FlowModel, flow, actionStep)) {
                   return null;
                 }
 
                 // 从step获取uiSchema（如果存在）
-                const stepUiSchema = actionStep.uiSchema || {};
+                const stepUiSchema: ActionDefinition['uiSchema'] = actionStep.uiSchema || {};
 
                 // 如果step使用了action，也获取action的uiSchema
                 let actionUiSchema = {};
                 if (actionStep.use) {
-                  const action = model.flowEngine?.getAction?.(actionStep.use);
+                  const action = model.getAction?.(actionStep.use);
                   if (action && action.uiSchema) {
                     actionUiSchema = action.uiSchema;
                   }
@@ -191,19 +192,34 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
                   uiSchema: mergedUiSchema,
                   title: actionStep.title || stepKey,
                 };
-              })
-              .filter(Boolean);
+              }),
+            ).then((steps) => steps.filter(Boolean));
 
             return configurableSteps.length > 0 ? { flow, steps: configurableSteps } : null;
-          })
-          .filter(Boolean);
+          }),
+        );
+
+        return result.filter(Boolean);
       } catch (error) {
         console.warn('[FlowsContextMenu] 获取可配置flows失败:', error);
         return [];
       }
     }, [model]);
 
-    const configurableFlowsAndSteps = getConfigurableFlowsAndSteps();
+    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = useState<any[]>([]);
+
+    useEffect(() => {
+      let mounted = true;
+      (async () => {
+        const flows = await getConfigurableFlowsAndSteps();
+        if (mounted) {
+          setConfigurableFlowsAndSteps(flows as any[]);
+        }
+      })();
+      return () => {
+        mounted = false;
+      };
+    }, [getConfigurableFlowsAndSteps]);
 
     // 如果没有可配置的flows且不显示删除按钮，直接返回children
     if (configurableFlowsAndSteps.length === 0 && !showDeleteButton) {

package/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx

@@ -9,7 +9,6 @@
 
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { Alert, Space } from 'antd';
-import { observer } from '@formily/react';
 import { css } from '@emotion/css';
 import { FlowModel } from '../../../../models';
 import { ToolbarItemConfig } from '../../../../types';
@@ -17,6 +16,8 @@ import { useFlowModelById } from '../../../../hooks';
 import { useFlowEngine } from '../../../../provider';
 import { FlowEngine } from '../../../../flowEngine';
 import { getT } from '../../../../utils';
+import { useFlowContext } from '../../../..';
+import { observer } from '../../../../reactive';
 
 // 检测DOM中直接子元素是否包含button元素的辅助函数
 const detectButtonInDOM = (container: HTMLElement): boolean => {
@@ -80,10 +81,30 @@ const renderToolbarItems = (
     });
 };
 
+// Width in pixels per toolbar item (icon width + spacing)
+const TOOLBAR_ITEM_WIDTH = 19;
+
+const toolbarPositionToCSS = {
+  inside: `
+    top: 2px;
+  `,
+  above: `
+    top: 0px;
+    transform: translateY(-100%);
+    padding-bottom: 0px;
+    margin-bottom: -2px;
+  `,
+  below: `
+    top: 0px;
+    transform: translateY(100%);
+    padding-top: 2px;
+    margin-top: -2px;
+  `,
+};
+
 // 使用与 NocoBase 一致的悬浮工具栏样式
-const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition }) => css`
+const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition = 'inside', toolbarCount }) => css`
   position: relative;
-  display: inline;
 
   /* 当检测到button时使用inline-block */
   &.has-button-child {
@@ -117,6 +138,7 @@ const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition
     border: ${showBorder ? '2px solid var(--colorBorderSettingsHover)' : ''};
     border-radius: ${ctx.themeToken.borderRadiusLG}px;
     pointer-events: none;
+    min-width: ${TOOLBAR_ITEM_WIDTH * toolbarCount}px;
 
     &.nb-in-template {
       background: var(--colorTemplateBgSettingsHover);
@@ -133,13 +155,16 @@ const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition
       border-radius: 2px;
       top: 2px;
       left: 2px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
 
       .title-tag {
         padding: 0 3px;
         border-radius: 2px;
         background: var(--colorSettings);
         color: #fff;
-        display: block;
+        display: inline-flex;
       }
     }
 
@@ -147,10 +172,7 @@ const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition
       display: none; // 防止遮挡其它 icons
       position: absolute;
       right: 2px;
-      top: ${toolbarPosition === 'above' ? '0px' : '2px'};
-      ${toolbarPosition === 'above' ? 'transform: translateY(-100%);' : ''}
-      ${toolbarPosition === 'above' ? 'padding-bottom: 2px;' : ''}
-      ${toolbarPosition === 'above' ? 'margin-bottom: -2px;' : ''}
+      ${toolbarPositionToCSS[toolbarPosition] || ''}
       line-height: 16px;
       pointer-events: all;
 
@@ -297,7 +319,7 @@ interface ModelProvidedProps {
   /**
    * @default 'inside'
    */
-  toolbarPosition?: 'inside' | 'above';
+  toolbarPosition?: 'inside' | 'above' | 'below';
 }
 
 interface ModelByIdProps {
@@ -332,7 +354,7 @@ interface ModelByIdProps {
   /**
    * @default 'inside'
    */
-  toolbarPosition?: 'inside' | 'above';
+  toolbarPosition?: 'inside' | 'above' | 'below';
 }
 
 type FlowsFloatContextMenuProps = ModelProvidedProps | ModelByIdProps;
@@ -368,9 +390,9 @@ const isModelByIdProps = (props: FlowsFloatContextMenuProps): props is ModelById
  * @param props.extraToolbarItems 额外的工具栏项目，仅应用于此实例
  */
 const FlowsFloatContextMenu: React.FC<FlowsFloatContextMenuProps> = observer((props) => {
-  const flowEngine = useFlowEngine();
+  const ctx = useFlowContext();
   // Only render if flowSettings is enabled
-  if (!flowEngine.flowSettings?.enabled) {
+  if (!ctx.flowSettingsEnabled) {
     return <>{props.children}</>;
   }
   if (isModelByIdProps(props)) {
@@ -565,9 +587,13 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
     return (
       <div
         ref={containerRef}
-        className={`${floatContainerStyles({ showBackground, showBorder, ctx: model.context, toolbarPosition })} ${
-          hideMenu ? 'hide-parent-menu' : ''
-        } ${hasButton ? 'has-button-child' : ''} ${className || ''}`}
+        className={`${floatContainerStyles({
+          showBackground,
+          showBorder,
+          ctx: model.context,
+          toolbarPosition,
+          toolbarCount: getToolbarCount(flowEngine, extraToolbarItems),
+        })} ${hideMenu ? 'hide-parent-menu' : ''} ${hasButton ? 'has-button-child' : ''} ${className || ''}`}
         style={containerStyle}
         data-has-float-menu="true"
         onMouseMove={handleChildHover}
@@ -576,12 +602,18 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
 
         {/* 悬浮工具栏 - 使用与 NocoBase 一致的结构 */}
         <div ref={toolbarContainerRef} className="nb-toolbar-container" style={toolbarContainerStyle}>
-          {showTitle && model.title && (
+          {showTitle && (model.title || model.extraTitle) && (
             <div className="nb-toolbar-container-title">
-              <span className="title-tag">{model.title}</span>
+              {model.title && <span className="title-tag">{model.title}</span>}
+              {model.extraTitle && <span className="title-tag">{model.extraTitle}</span>}
             </div>
           )}
-          <div className="nb-toolbar-container-icons">
+          <div
+            className="nb-toolbar-container-icons"
+            onClick={(e) => e.stopPropagation()}
+            onMouseDown={(e) => e.stopPropagation()}
+            onMouseMove={(e) => e.stopPropagation()}
+          >
             <Space size={3} align="center">
               {renderToolbarItems(
                 model,
@@ -653,3 +685,9 @@ const FlowsFloatContextMenuWithModelById: React.FC<ModelByIdProps> = observer(
 );
 
 export { FlowsFloatContextMenu };
+
+function getToolbarCount(flowEngine, extraToolbarItems) {
+  const toolbarItems = flowEngine?.flowSettings?.getToolbarItems?.() || [];
+  const allToolbarItems = [...toolbarItems, ...(extraToolbarItems || [])];
+  return allToolbarItems.length;
+}

package/src/components/settings/wrappers/contextual/StepSettings.tsx

@@ -49,9 +49,8 @@ const openStepSettings = async ({ model, flowKey, stepKey, width = 600, title }:
 
   // 解析 uiMode，支持函数式
   const resolvedUiMode = await resolveUiMode(step.uiMode, ctx);
-
   // 提取模式和属性
-  let settingMode: 'dialog' | 'drawer' | 'embed';
+  let settingMode: 'dialog' | 'drawer' | 'embed' | 'select' | 'switch';
   let uiModeProps: Record<string, any> = {};
   let cleanup: () => void;
 

package/src/components/settings/wrappers/contextual/StepSettingsDialog.tsx

@@ -8,13 +8,14 @@
  */
 
 import { createForm } from '@formily/core';
-import { createSchemaField, FormProvider, ISchema, observer } from '@formily/react';
+import { createSchemaField, FormProvider, ISchema } from '@formily/react';
 import { autorun, toJS } from '@formily/reactive';
 import { Button, Space } from 'antd';
 import React, { useEffect } from 'react';
 import { FlowSettingsContextProvider, useFlowSettingsContext } from '../../../../hooks/useFlowSettingsContext';
 import { StepSettingsDialogProps } from '../../../../types';
 import { compileUiSchema, FlowExitException, getT, resolveDefaultParams, resolveStepUiSchema } from '../../../../utils';
+import { observer } from '../../../../reactive';
 
 const SchemaField = createSchemaField();
 
@@ -130,11 +131,22 @@ const openStepSettingsDialog = async ({
     initialValues: compileUiSchema(scopes, initialValues),
   });
 
+  const viewInputArgs = model.context.view?.inputArgs || {};
+  const navigation = ctx?.view?.navigation ?? model.context.view?.navigation;
+  const inputArgs = {
+    ...viewInputArgs,
+    ...(navigation ? { navigation } : {}),
+    ...(toJS(uiModeProps)?.inputArgs || {}),
+    __isSettingsPopup: true,
+  };
+
   openView({
     title: dialogTitle || t(title),
     width: dialogWidth,
     destroyOnClose: true,
     ...toJS(uiModeProps),
+    // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
+    inputArgs,
     onClose: () => {
       if (cleanup) {
         cleanup();