@nocobase/flow-engine 2.1.0-alpha.1 → 2.1.0-alpha.10

package/src/components/dnd/gridDragPlanner.ts

@@ -46,6 +46,7 @@ export interface Point {
 export interface GridLayoutData {
   rows: Record<string, string[][]>;
   sizes: Record<string, number[]>;
+  rowOrder?: string[];
 }
 
 export interface ColumnSlot {
@@ -142,6 +143,49 @@ export interface LayoutSnapshot {
   containerRect: Rect;
 }
 
+const deriveRowOrder = (rows: Record<string, string[][]>, provided?: string[]) => {
+  const order: string[] = [];
+  const used = new Set<string>();
+
+  (provided || Object.keys(rows)).forEach((rowId) => {
+    if (rows[rowId] && !used.has(rowId)) {
+      order.push(rowId);
+      used.add(rowId);
+    }
+  });
+
+  Object.keys(rows).forEach((rowId) => {
+    if (!used.has(rowId)) {
+      order.push(rowId);
+      used.add(rowId);
+    }
+  });
+
+  return order;
+};
+
+const normalizeRowsWithOrder = (rows: Record<string, string[][]>, order: string[]) => {
+  const next: Record<string, string[][]> = {};
+  order.forEach((rowId) => {
+    if (rows[rowId]) {
+      next[rowId] = rows[rowId];
+    }
+  });
+  Object.keys(rows).forEach((rowId) => {
+    if (!next[rowId]) {
+      next[rowId] = rows[rowId];
+    }
+  });
+  return next;
+};
+
+const ensureRowOrder = (layout: GridLayoutData) => {
+  const order = deriveRowOrder(layout.rows, layout.rowOrder);
+  layout.rowOrder = order;
+  layout.rows = normalizeRowsWithOrder(layout.rows, order);
+  return order;
+};
+
 export interface BuildLayoutSnapshotOptions {
   container: HTMLElement | null;
 }
@@ -289,7 +333,10 @@ export const buildLayoutSnapshot = ({ container }: BuildLayoutSnapshotOptions):
 
     const columnElements = Array.from(
       container.querySelectorAll(`[data-grid-column-row-id="${rowId}"][data-grid-column-index]`),
-    ) as HTMLElement[];
+    ).filter((el) => {
+      // 只保留当前 row 下的直接列，避免嵌套 Grid 中相同 rowId 的列混入
+      return (el as HTMLElement).closest('[data-grid-row-id]') === rowElement;
+    }) as HTMLElement[];
 
     const sortedColumns = columnElements.sort((a, b) => {
       const indexA = Number(a.dataset.gridColumnIndex || 0);
@@ -319,7 +366,10 @@ export const buildLayoutSnapshot = ({ container }: BuildLayoutSnapshotOptions):
 
       const itemElements = Array.from(
         columnElement.querySelectorAll(`[data-grid-item-row-id="${rowId}"][data-grid-column-index="${columnIndex}"]`),
-      ) as HTMLElement[];
+      ).filter((el) => {
+        // 只保留当前 column 下的直接 item，避免命中更深层嵌套 column 的 item
+        return (el as HTMLElement).closest('[data-grid-column-row-id][data-grid-column-index]') === columnElement;
+      }) as HTMLElement[];
 
       const sortedItems = itemElements.sort((a, b) => {
         const indexA = Number(a.dataset.gridItemIndex || 0);
@@ -465,10 +515,12 @@ const removeItemFromLayout = (layout: GridLayoutData, uidValue: string) => {
   if (columns.length === 0) {
     delete layout.rows[rowId];
     delete layout.sizes[rowId];
+    ensureRowOrder(layout);
     return;
   }
 
   normalizeRowSizes(rowId, layout);
+  ensureRowOrder(layout);
 };
 
 const toIntSizes = (weights: number[], count: number): number[] => {
@@ -592,8 +644,10 @@ export const simulateLayoutForSlot = ({
   const cloned: GridLayoutData = {
     rows: _.cloneDeep(layout.rows),
     sizes: _.cloneDeep(layout.sizes),
+    rowOrder: layout.rowOrder ? [...layout.rowOrder] : undefined,
   };
 
+  ensureRowOrder(cloned);
   removeItemFromLayout(cloned, sourceUid);
 
   const createRowId = generateRowId ?? uid;
@@ -638,8 +692,16 @@ export const simulateLayoutForSlot = ({
     case 'row-gap': {
       const newRowId = createRowId();
       const rowPosition: 'before' | 'after' = slot.position === 'above' ? 'before' : 'after';
+      const currentOrder = deriveRowOrder(cloned.rows, cloned.rowOrder);
       cloned.rows = insertRow(cloned.rows, slot.targetRowId, newRowId, rowPosition, [[sourceUid]]);
       cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      const targetIndex = currentOrder.indexOf(slot.targetRowId);
+      const insertIndex =
+        targetIndex === -1 ? currentOrder.length : rowPosition === 'before' ? targetIndex : targetIndex + 1;
+      const nextOrder = [...currentOrder];
+      nextOrder.splice(insertIndex, 0, newRowId);
+      cloned.rowOrder = nextOrder;
+      cloned.rows = normalizeRowsWithOrder(cloned.rows, nextOrder);
       break;
     }
     case 'empty-row': {
@@ -649,11 +711,15 @@ export const simulateLayoutForSlot = ({
         [newRowId]: [[sourceUid]],
       };
       cloned.sizes[newRowId] = [DEFAULT_GRID_COLUMNS];
+      const currentOrder = deriveRowOrder(cloned.rows, cloned.rowOrder);
+      cloned.rowOrder = [...currentOrder.filter((id) => id !== newRowId), newRowId];
+      cloned.rows = normalizeRowsWithOrder(cloned.rows, cloned.rowOrder);
       break;
     }
     default:
       break;
   }
 
+  ensureRowOrder(cloned);
   return cloned;
 };

package/src/components/settings/wrappers/component/SwitchWithTitle.tsx

@@ -52,7 +52,8 @@ export const SwitchWithTitle: FC = observer(
     };
 
     // 点击整个容器时触发
-    const handleWrapperClick = () => {
+    const handleWrapperClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
       if (disabled) return;
       handleChange(!checked);
     };

package/src/components/settings/wrappers/component/__tests__/InlineControls.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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 { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@nocobase/test/client';
+import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+
+import { SwitchWithTitle } from '../SwitchWithTitle';
+import { SelectWithTitle } from '../SelectWithTitle';
+
+vi.mock('antd', async (importOriginal) => {
+  const actual = (await importOriginal()) as any;
+  return {
+    ...actual,
+    Select: ({
+      popupMatchSelectWidth,
+      bordered,
+      popupClassName,
+      fieldNames,
+      labelRender,
+      optionRender,
+      dropdownRender,
+      options,
+      ...props
+    }: any) => React.createElement('select', props),
+    Switch: ({ checkedChildren, unCheckedChildren, size, ...props }: any) =>
+      React.createElement('input', { ...props, type: 'checkbox', readOnly: true }),
+  };
+});
+
+describe('Inline controls - stopPropagation', () => {
+  it('SwitchWithTitle click does not bubble to parent', async () => {
+    const engine = new FlowEngine();
+    const parentClick = vi.fn();
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <div onClick={parentClick}>
+          <SwitchWithTitle title="Enabled" itemKey="enabled" onChange={onChange} />
+        </div>
+      </FlowEngineProvider>,
+    );
+
+    fireEvent.click(screen.getByText('Enabled'));
+
+    expect(parentClick).not.toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ enabled: true });
+  });
+
+  it('SelectWithTitle click does not bubble to parent', async () => {
+    const engine = new FlowEngine();
+    const parentClick = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <div onClick={parentClick}>
+          <SelectWithTitle title="Mode" itemKey="mode" options={[{ label: 'A', value: 'a' }]} />
+        </div>
+      </FlowEngineProvider>,
+    );
+
+    fireEvent.click(screen.getByText('Mode'));
+
+    expect(parentClick).not.toHaveBeenCalled();
+  });
+});

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

@@ -7,9 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ExclamationCircleOutlined, MenuOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import type { DropdownProps, MenuProps } from 'antd';
-import { App, Dropdown, Modal } from 'antd';
+import { App, Dropdown, Modal, Tooltip, theme } from 'antd';
 import React, { startTransition, useCallback, useEffect, useMemo, useState, FC } from 'react';
 import { FlowModel } from '../../../../models';
 import type { FlowModelExtraMenuItem } from '../../../../models';
@@ -17,6 +17,7 @@ import type { StepDefinition, StepUIMode } from '../../../../types';
 import {
   getT,
   resolveStepUiSchema,
+  resolveStepDisabledInSettings,
   shouldHideStepInSettings,
   resolveDefaultParams,
   resolveUiMode,
@@ -33,6 +34,8 @@ interface StepInfo {
   title: string;
   modelKey?: string;
   uiMode?: StepUIMode;
+  disabled?: boolean;
+  disabledReason?: string;
 }
 
 interface FlowInfo {
@@ -150,12 +153,29 @@ const componentMap = {
 const MenuLabelItem = ({ title, uiMode, itemProps }) => {
   const type = uiMode?.type || uiMode;
   const Component = type ? componentMap[type] : null;
+  const disabled = !!itemProps?.disabled;
+  const disabledReason = itemProps?.disabledReason;
+  const disabledIconColor = itemProps?.disabledIconColor;
 
-  if (!Component) {
-    return <>{title}</>;
+  const content = (() => {
+    if (!Component) {
+      return <>{title}</>;
+    }
+    return <Component title={title} {...itemProps} />;
+  })();
+
+  if (!disabled) {
+    return content;
   }
 
-  return <Component title={title} {...itemProps} />;
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+      {content}
+      <Tooltip title={disabledReason} placement="right" destroyTooltipOnHide>
+        <QuestionCircleOutlined style={{ color: disabledIconColor }} />
+      </Tooltip>
+    </span>
+  );
 };
 
 /**
@@ -180,10 +200,17 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
 }) => {
   const { message } = App.useApp();
   const t = useMemo(() => getT(model), [model]);
+  const { token } = theme.useToken();
+  const disabledIconColor = token?.colorTextTertiary || token?.colorTextDescription || token?.colorTextSecondary;
   const [visible, setVisible] = useState(false);
   // 当模型发生子模型替换/增删等变化时，强制刷新菜单数据
   const [refreshTick, setRefreshTick] = useState(0);
   const [extraMenuItems, setExtraMenuItems] = useState<FlowModelExtraMenuItem[]>([]);
+  const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = useState<FlowInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const closeDropdown = useCallback(() => {
+    setVisible(false);
+  }, []);
   const handleOpenChange: DropdownProps['onOpenChange'] = useCallback((nextOpen: boolean, info) => {
     if (info.source === 'trigger' || nextOpen) {
       // 当鼠标快速滑过时，终止菜单的渲染，防止卡顿
@@ -234,7 +261,7 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
     return () => {
       mounted = false;
     };
-  }, [model, menuLevels, t, refreshTick, visible, message]);
+  }, [model, menuLevels, t, refreshTick, visible]);
 
   // 统一的复制 UID 方法
   const copyUidToClipboard = useCallback(
@@ -292,6 +319,7 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
   );
 
   const handleDelete = useCallback(() => {
+    closeDropdown();
     Modal.confirm({
       title: t('Confirm delete'),
       icon: <ExclamationCircleOutlined />,
@@ -312,7 +340,7 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
         }
       },
     });
-  }, [model]);
+  }, [closeDropdown, model, t]);
 
   const handleStepConfiguration = useCallback(
     (key: string) => {
@@ -345,6 +373,7 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
       }
 
       try {
+        closeDropdown();
         targetModel.openFlowSettings({
           flowKey,
           stepKey,
@@ -353,7 +382,32 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
         console.log(t('Configuration popup cancelled or error'), ':', error);
       }
     },
-    [model],
+    [closeDropdown, model, t],
+  );
+
+  const isStepMenuItemDisabled = useCallback(
+    (key: string) => {
+      const cleanKey = key.includes('-') && /^(.+)-\d+$/.test(key) ? key.replace(/-\d+$/, '') : key;
+      const keys = cleanKey.split(':');
+      let modelKey: string | undefined;
+      let flowKey: string | undefined;
+      let stepKey: string | undefined;
+
+      if (keys.length === 3) {
+        [modelKey, flowKey, stepKey] = keys;
+      } else if (keys.length === 2) {
+        [flowKey, stepKey] = keys;
+      } else {
+        return false;
+      }
+
+      return configurableFlowsAndSteps.some(({ flow, steps, modelKey: flowModelKey }: FlowInfo) => {
+        const sameModel = (flowModelKey || undefined) === modelKey;
+        if (!sameModel || flow.key !== flowKey) return false;
+        return steps.some((stepInfo: StepInfo) => stepInfo.stepKey === stepKey && !!stepInfo.disabled);
+      });
+    },
+    [configurableFlowsAndSteps],
   );
 
   const handleMenuClick = useCallback(
@@ -363,18 +417,25 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
       const cleanKey = key.includes('-') && /^(.+)-\d+$/.test(key) ? key.replace(/-\d+$/, '') : key;
 
       if (cleanKey.startsWith('copy-pop-uid:')) {
+        closeDropdown();
         handleCopyPopupUid(cleanKey);
         return;
       }
 
       const extra = extraMenuItems.find((it) => it?.key === originalKey || it?.key === cleanKey);
       if (extra?.onClick) {
+        closeDropdown();
         extra.onClick();
         return;
       }
 
+      if (isStepMenuItemDisabled(cleanKey)) {
+        return;
+      }
+
       switch (cleanKey) {
         case 'copy-uid':
+          closeDropdown();
           handleCopyUid();
           break;
         case 'delete':
@@ -385,7 +446,15 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
           break;
       }
     },
-    [handleCopyUid, handleDelete, handleStepConfiguration, handleCopyPopupUid, extraMenuItems],
+    [
+      closeDropdown,
+      handleCopyUid,
+      handleDelete,
+      handleStepConfiguration,
+      handleCopyPopupUid,
+      extraMenuItems,
+      isStepMenuItemDisabled,
+    ],
   );
 
   // 获取单个模型的可配置flows和steps
@@ -409,6 +478,7 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
                 if (await shouldHideStepInSettings(targetModel, flow, actionStep)) {
                   return null;
                 }
+                const disabledState = await resolveStepDisabledInSettings(targetModel, flow, actionStep as any);
                 let uiMode: any = await resolveUiMode(actionStep.uiMode, (targetModel as any).context);
                 // 检查是否有uiSchema（静态或动态）
                 const hasStepUiSchema = actionStep.uiSchema != null;
@@ -458,6 +528,8 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
                   title: t(stepTitle) || stepKey,
                   modelKey, // 添加模型标识
                   uiMode,
+                  disabled: disabledState.disabled,
+                  disabledReason: disabledState.reason,
                 };
               }),
             ).then((steps) => steps.filter(Boolean));
@@ -494,9 +566,6 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
     return result;
   }, [model, menuLevels, getModelConfigurableFlowsAndSteps]);
 
-  const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = useState<FlowInfo[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
   useEffect(() => {
     const triggerRebuild = () => {
       setRefreshTick((v) => v + 1);
@@ -603,10 +672,14 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
               },
               ...((uiMode as any)?.props || {}),
               itemKey: (uiMode as any)?.key,
+              disabled: !!stepInfo.disabled,
+              disabledReason: stepInfo.disabledReason,
+              disabledIconColor,
             };
             items.push({
               key: uniqueKey,
-              label: <MenuLabelItem title={t(stepInfo.title)} uiMode={uiMode} itemProps={itemProps} />,
+              label: <MenuLabelItem title={stepInfo.title} uiMode={uiMode} itemProps={itemProps} />,
+              disabled: !!stepInfo.disabled,
             });
           });
           if (flow.options.divider === 'bottom') {
@@ -648,7 +721,17 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
 
                 items.push({
                   key: uniqueKey,
-                  label: t(stepInfo.title),
+                  label: stepInfo.disabled ? (
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                      {stepInfo.title}
+                      <Tooltip title={stepInfo.disabledReason} placement="right" destroyTooltipOnHide>
+                        <QuestionCircleOutlined style={{ color: disabledIconColor }} />
+                      </Tooltip>
+                    </span>
+                  ) : (
+                    stepInfo.title
+                  ),
+                  disabled: !!stepInfo.disabled,
                 });
               });
             });
@@ -663,7 +746,17 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
 
                 subMenuChildren.push({
                   key: uniqueKey,
-                  label: t(stepInfo.title),
+                  label: stepInfo.disabled ? (
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                      {stepInfo.title}
+                      <Tooltip title={stepInfo.disabledReason} placement="right" destroyTooltipOnHide>
+                        <QuestionCircleOutlined style={{ color: disabledIconColor }} />
+                      </Tooltip>
+                    </span>
+                  ) : (
+                    stepInfo.title
+                  ),
+                  disabled: !!stepInfo.disabled,
                 });
               });
             });
@@ -679,7 +772,7 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
     }
 
     return items;
-  }, [configurableFlowsAndSteps, flattenSubMenus, t]);
+  }, [configurableFlowsAndSteps, disabledIconColor, flattenSubMenus, t]);
 
   // 向菜单项添加额外按钮
   const finalMenuItems = useMemo((): NonNullable<MenuProps['items']> => {

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

@@ -7,14 +7,19 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DeleteOutlined, ExclamationCircleOutlined, SettingOutlined } from '@ant-design/icons';
+import { DeleteOutlined, ExclamationCircleOutlined, QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Alert, Dropdown, Modal } from 'antd';
+import { Alert, Dropdown, Modal, Tooltip, theme } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import { FlowRuntimeContext } from '../../../../flowContext';
 import { useFlowModelById } from '../../../../hooks';
 import { FlowModel } from '../../../../models';
-import { getT, setupRuntimeContextSteps, shouldHideStepInSettings } from '../../../../utils';
+import {
+  getT,
+  resolveStepDisabledInSettings,
+  setupRuntimeContextSteps,
+  shouldHideStepInSettings,
+} from '../../../../utils';
 import { openStepSettingsDialog } from './StepSettingsDialog';
 import { ActionDefinition } from '../../../../types';
 import { observer } from '../../../../reactive';
@@ -74,6 +79,21 @@ const FlowsContextMenu: React.FC<FlowsContextMenuProps> = (props) => {
 const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
   ({ model, children, enabled = true, position = 'right', showDeleteButton = true }) => {
     const t = getT(model);
+    const { token } = theme.useToken();
+    const disabledIconColor = token?.colorTextTertiary || token?.colorTextDescription || token?.colorTextSecondary;
+    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = useState<any[]>([]);
+    const isStepMenuItemDisabled = useCallback(
+      (key: string) => {
+        const [flowKey, stepKey] = key.split(':');
+        if (!flowKey || !stepKey) return false;
+        return configurableFlowsAndSteps.some(({ flow, steps }) => {
+          if (flow.key !== flowKey) return false;
+          return steps.some((stepInfo) => stepInfo.stepKey === stepKey && !!stepInfo.disabled);
+        });
+      },
+      [configurableFlowsAndSteps],
+    );
+
     const handleMenuClick = useCallback(
       ({ key }: { key: string }) => {
         if (key === 'delete') {
@@ -99,6 +119,9 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
             },
           });
         } else {
+          if (isStepMenuItemDisabled(key)) {
+            return;
+          }
           // 处理step配置，key格式为 "flowKey:stepKey"
           const [flowKey, stepKey] = key.split(':');
           try {
@@ -127,7 +150,7 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
           }
         }
       },
-      [model],
+      [isStepMenuItemDisabled, model],
     );
 
     if (!model) {
@@ -156,6 +179,7 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
                 if (await shouldHideStepInSettings(model as FlowModel, flow, actionStep)) {
                   return null;
                 }
+                const disabledState = await resolveStepDisabledInSettings(model as FlowModel, flow, actionStep);
 
                 // 从step获取uiSchema（如果存在）
                 const stepUiSchema: ActionDefinition['uiSchema'] = actionStep.uiSchema || {};
@@ -191,6 +215,8 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
                   step: actionStep,
                   uiSchema: mergedUiSchema,
                   title: actionStep.title || stepKey,
+                  disabled: disabledState.disabled,
+                  disabledReason: disabledState.reason,
                 };
               }),
             ).then((steps) => steps.filter(Boolean));
@@ -206,8 +232,6 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
       }
     }, [model]);
 
-    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = useState<any[]>([]);
-
     useEffect(() => {
       let mounted = true;
       (async () => {
@@ -243,7 +267,17 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
           menuItems.push({
             key: `${flow.key}:${stepInfo.stepKey}`,
             icon: <SettingOutlined />,
-            label: stepInfo.title,
+            label: stepInfo.disabled ? (
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                {stepInfo.title}
+                <Tooltip title={stepInfo.disabledReason} placement="right" destroyTooltipOnHide>
+                  <QuestionCircleOutlined style={{ color: disabledIconColor }} />
+                </Tooltip>
+              </span>
+            ) : (
+              stepInfo.title
+            ),
+            disabled: !!stepInfo.disabled,
           });
         });
       });

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

@@ -14,7 +14,15 @@ 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 {
+  compileUiSchema,
+  FlowExitException,
+  getT,
+  resolveDefaultParams,
+  resolveStepUiSchema,
+  FlowCancelSaveException,
+} from '../../../../utils';
+import { FlowExitAllException } from '../../../../utils/exceptions';
 import { observer } from '../../../../reactive';
 
 const SchemaField = createSchemaField();
@@ -126,6 +134,17 @@ const openStepSettingsDialog = async ({
   };
 
   const openView = model.context.viewer[mode].bind(model.context.viewer);
+  const resolvedUiModeProps = toJS(uiModeProps) || {};
+  const { zIndex: uiModeZIndex, ...restUiModeProps } = resolvedUiModeProps;
+  const resolveDialogZIndex = (rawZIndex?: number) => {
+    const nextZIndex =
+      typeof model.context.viewer?.getNextZIndex === 'function'
+        ? model.context.viewer.getNextZIndex()
+        : (model.context.themeToken?.zIndexPopupBase || 1000) + 1;
+    const inputZIndex = Number(rawZIndex) || 0;
+    return Math.max(nextZIndex, inputZIndex);
+  };
+  const mergedZIndex = resolveDialogZIndex(uiModeZIndex);
 
   const form = createForm({
     initialValues: compileUiSchema(scopes, initialValues),
@@ -144,7 +163,8 @@ const openStepSettingsDialog = async ({
     title: dialogTitle || t(title),
     width: dialogWidth,
     destroyOnClose: true,
-    ...toJS(uiModeProps),
+    ...restUiModeProps,
+    zIndex: mergedZIndex,
     // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
     inputArgs,
     onClose: () => {
@@ -157,7 +177,11 @@ const openStepSettingsDialog = async ({
         useEffect(() => {
           return autorun(() => {
             const dynamicProps = toJS(uiModeProps);
-            currentDialog.update(dynamicProps);
+            const { zIndex, ...restDynamicProps } = dynamicProps || {};
+            currentDialog.update({
+              ...restDynamicProps,
+              zIndex: resolveDialogZIndex(zIndex),
+            });
           });
         }, []);
 
@@ -203,7 +227,10 @@ const openStepSettingsDialog = async ({
                           await afterParamsSave(flowRuntimeContext, currentValues, previousParams);
                         }
                       } catch (error) {
-                        if (error instanceof FlowExitException) {
+                        if (error instanceof FlowCancelSaveException) {
+                          return;
+                        }
+                        if (error instanceof FlowExitException || error instanceof FlowExitAllException) {
                           currentDialog.close();
                           return;
                         }