@nocobase/flow-engine 2.0.0-beta.9 → 2.0.0

package/src/components/FlowContextSelector.tsx

@@ -8,12 +8,13 @@
  */
 
 import React, { useCallback, useRef, useMemo, useState, useEffect } from 'react';
-import { Button, Cascader, Tooltip } from 'antd';
+import { Button, Cascader, Input, Tooltip, theme } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { cx, css } from '@emotion/css';
 import type { ContextSelectorItem, FlowContextSelectorProps } from './variables/types';
 import {
   buildContextSelectorItems,
+  filterLoadedContextSelectorItems,
   formatPathToValue,
   parseValueToPath,
   preloadContextSelectorPath,
@@ -34,6 +35,52 @@ const cascaderPopupAutoHeightClassName = css`
   }
 `;
 
+type SelectedPathInfo = {
+  text: string;
+  meta?: ContextSelectorItem['meta'];
+};
+
+const normalizePath = (path: unknown): string[] | undefined => {
+  if (!Array.isArray(path)) {
+    return undefined;
+  }
+
+  return path.map((segment) => String(segment));
+};
+
+const getSelectedPathInfo = (path: string[] | undefined, options: ContextSelectorItem[]): SelectedPathInfo => {
+  if (!Array.isArray(path) || path.length === 0) {
+    return { text: '', meta: undefined };
+  }
+
+  const labels: string[] = [];
+  let currentOptions = options;
+  let selectedMeta: ContextSelectorItem['meta'] | undefined;
+
+  for (const segment of path) {
+    const matchedOption = currentOptions.find((item) => String(item.value) === String(segment));
+    if (!matchedOption) {
+      break;
+    }
+
+    const label =
+      typeof matchedOption.meta?.title === 'string'
+        ? matchedOption.meta.title
+        : typeof matchedOption.label === 'string'
+          ? matchedOption.label
+          : String(matchedOption.value);
+
+    labels.push(label);
+    selectedMeta = matchedOption.meta;
+    currentOptions = Array.isArray(matchedOption.children) ? matchedOption.children : [];
+  }
+
+  return {
+    text: labels.join(' / '),
+    meta: selectedMeta,
+  };
+};
+
 const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   value,
   onChange,
@@ -47,13 +94,15 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   ignoreFieldNames,
   ...cascaderProps
 }) => {
+  const { token } = theme.useToken();
+
   // 记录最后点击的路径，用于双击检测
   const lastSelectedRef = useRef<{ path: string; time: number } | null>(null);
 
   const { resolvedMetaTree, loading } = useResolvedMetaTree(metaTree);
 
   // 获取引擎上下文中的翻译函数，若不可用则回退为原文
-  const flowCtx = useFlowContext<any>();
+  const flowCtx = useFlowContext();
 
   const translateOptions = useCallback(
     (items: ContextSelectorItem[] | undefined): ContextSelectorItem[] => {
@@ -63,7 +112,9 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
         const meta = o.meta;
         const disabled = meta ? !!(typeof meta.disabled === 'function' ? meta.disabled() : meta.disabled) : false;
         const disabledReason = meta
-          ? ((typeof meta.disabledReason === 'function' ? meta.disabledReason() : meta.disabledReason) as any)
+          ? typeof meta.disabledReason === 'function'
+            ? meta.disabledReason()
+            : meta.disabledReason
           : undefined;
 
         // 文本国际化：仅当 label 为字符串时进行翻译
@@ -98,7 +149,11 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
   // 用于强制重新渲染的状态
   const [updateFlag, setUpdateFlag] = useState(0);
+  const [searchText, setSearchText] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const inlineFocusByPointerRef = useRef(false);
   const triggerUpdate = useCallback(() => setUpdateFlag((prev) => prev + 1), []);
+  const isSearchEnabled = showSearch || children === null;
 
   // 构建选项
   // 注意：rc-cascader 内部对 options 做了基于引用的缓存（useEntities）。
@@ -106,13 +161,22 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   // 触发 rc-cascader 重新构建 pathKeyEntities，避免二级节点未被索引导致的报错。
   const options = useMemo(() => {
     if (!resolvedMetaTree) return [];
+    const refreshSeq = updateFlag;
     const base = buildContextSelectorItems(resolvedMetaTree);
-    return translateOptions(base).filter((item) => {
+    const filtered = translateOptions(base).filter((item) => {
       if (!ignoreFieldNames || ignoreFieldNames.length === 0) return true;
       return !ignoreFieldNames.includes(item.meta?.name || '');
     });
+    return refreshSeq >= 0 ? filtered : [];
   }, [resolvedMetaTree, updateFlag, translateOptions, ignoreFieldNames]);
 
+  const displayOptions = useMemo(() => {
+    if (!isSearchEnabled || !searchText.trim()) {
+      return options;
+    }
+    return filterLoadedContextSelectorItems(options, searchText);
+  }, [isSearchEnabled, options, searchText]);
+
   // 内部展开路径：在 onlyLeafSelectable=true 时，点击父节点不会触发 onChange，
   // 但会触发 loadData。我们在此记录路径以在懒加载后保持展开。
   const [tempSelectedPath, setTempSelectedPath] = useState<string[]>([]);
@@ -158,23 +222,36 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
         triggerUpdate();
       }
     },
-    [triggerUpdate],
+    [triggerUpdate, translateOptions],
   );
 
   const currentPath = useMemo(() => {
-    return customParseValueToPath(value);
+    return normalizePath(customParseValueToPath(value));
   }, [value, customParseValueToPath]);
 
   // 当 metaTree 为子层（如 getPropertyMetaTree('{{ ctx.collection }}') 返回的是 collection 的子节点）
   // 而 value path 仍包含根键（如 ['collection', 'field']）时，自动丢弃不存在的首段，确保级联能正确对齐。
   const effectivePath = useMemo(() => {
     if (!currentPath || currentPath.length === 0) return currentPath;
+
+    if (options.length === 0) {
+      return currentPath;
+    }
+
     const topValues = new Set(options.map((o) => String(o.value)));
     const needTrim = !topValues.has(String(currentPath[0]));
     const fixed = needTrim ? currentPath.slice(1) : currentPath;
     return fixed;
   }, [currentPath, options]);
 
+  const cascaderValue = useMemo(() => {
+    if (tempSelectedPath.length > 0) {
+      return tempSelectedPath;
+    }
+
+    return Array.isArray(effectivePath) ? effectivePath : undefined;
+  }, [effectivePath, tempSelectedPath]);
+
   // 预加载：当存在有效路径时，按路径逐级加载 children，保证默认展开和选中路径可用
   const pathToPreload = useMemo(() => {
     const finalPath = effectivePath && effectivePath.length > 0 ? effectivePath : tempSelectedPath;
@@ -251,21 +328,140 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
     return cx(cascaderPopupAutoHeightClassName, cascaderProps.popupClassName);
   }, [cascaderProps.popupClassName]);
 
+  const cascaderSearchInputClassName = useMemo(() => {
+    return css`
+      padding: 8px;
+      border-bottom: 1px solid ${token.colorSplit};
+    `;
+  }, [token.colorSplit]);
+
+  const {
+    onDropdownVisibleChange: cascaderOnDropdownVisibleChange,
+    dropdownRender: cascaderDropdownRender,
+    ...restCascaderProps
+  } = cascaderProps;
+
+  const selectedPathInfo = useMemo(() => getSelectedPathInfo(effectivePath, options), [effectivePath, options]);
+
+  const mergedOpen = open !== undefined ? open : children === null ? dropdownOpen : undefined;
+
+  const isDropdownVisible = !!mergedOpen;
+
+  const handleDropdownVisibleChange = useCallback(
+    (visible: boolean) => {
+      if (open === undefined) {
+        setDropdownOpen(visible);
+      }
+      if (!visible) {
+        setSearchText('');
+      }
+      cascaderOnDropdownVisibleChange?.(visible);
+    },
+    [cascaderOnDropdownVisibleChange, open],
+  );
+
+  const renderDropdown = useCallback(
+    (menu: React.ReactElement) => {
+      const cascaderMenuNode = cascaderDropdownRender ? cascaderDropdownRender(menu) : menu;
+      const cascaderMenu = React.isValidElement(cascaderMenuNode) ? cascaderMenuNode : <>{cascaderMenuNode}</>;
+      if (!isSearchEnabled || children === null) {
+        return cascaderMenu;
+      }
+
+      return (
+        <>
+          <div className={cascaderSearchInputClassName}>
+            <Input
+              allowClear
+              size="small"
+              value={searchText}
+              placeholder={flowCtx.t('Search')}
+              onChange={(e) => setSearchText(e.target.value)}
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+          {cascaderMenu}
+        </>
+      );
+    },
+    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText],
+  );
+
+  const inlinePlaceholder =
+    typeof restCascaderProps.placeholder === 'string' ? restCascaderProps.placeholder : flowCtx.t('Search');
+  const hasSelectedPath = Array.isArray(effectivePath) && effectivePath.length > 0;
+
+  const handleInlineInputFocus = useCallback(() => {
+    if (open === undefined && !inlineFocusByPointerRef.current) {
+      setDropdownOpen(true);
+    }
+  }, [open]);
+
+  const markInlineFocusByPointer = useCallback(() => {
+    inlineFocusByPointerRef.current = true;
+  }, []);
+
+  const resetInlineFocusByPointer = useCallback(() => {
+    inlineFocusByPointerRef.current = false;
+  }, []);
+
+  const handleInlineInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const nextValue = event.target.value;
+
+      // 下拉关闭态下点击清空：应清空真实已选值，而不是仅清空搜索词。
+      if (!isDropdownVisible && nextValue === '' && hasSelectedPath) {
+        setTempSelectedPath([]);
+        // 清空语义：传空 meta，确保上层（如 VariableInput）进入 clear 分支。
+        onChange?.('', undefined);
+        return;
+      }
+
+      if (open === undefined && !isDropdownVisible) {
+        setDropdownOpen(true);
+      }
+
+      setSearchText(nextValue);
+    },
+    [hasSelectedPath, isDropdownVisible, onChange, open],
+  );
+
+  const inlinePathText = Array.isArray(effectivePath) ? effectivePath.join(' / ') : '';
+  const inlineInputValue = isDropdownVisible ? searchText : selectedPathInfo.text || inlinePathText;
+
   return (
     <Cascader
-      {...cascaderProps}
-      options={options}
-      value={tempSelectedPath && tempSelectedPath.length > 0 ? tempSelectedPath : effectivePath}
+      {...restCascaderProps}
+      options={displayOptions}
+      value={cascaderValue}
       onChange={handleChange}
       loadData={handleLoadData}
       loading={loading}
       changeOnSelect={!onlyLeafSelectable}
       expandTrigger="click"
-      open={open}
-      showSearch={children === null}
+      open={mergedOpen}
+      showSearch={false}
       popupClassName={mergedPopupClassName}
+      dropdownRender={renderDropdown}
+      onDropdownVisibleChange={handleDropdownVisibleChange}
     >
-      {children === null ? null : children || defaultChildren}
+      {children === null ? (
+        <Input
+          allowClear
+          value={inlineInputValue}
+          placeholder={inlinePlaceholder}
+          onMouseDown={markInlineFocusByPointer}
+          onMouseUp={resetInlineFocusByPointer}
+          onMouseLeave={resetInlineFocusByPointer}
+          onFocus={handleInlineInputFocus}
+          onBlur={resetInlineFocusByPointer}
+          onChange={handleInlineInputChange}
+          onKeyDown={(e) => e.stopPropagation()}
+          disabled={restCascaderProps.disabled}
+        />
+      ) : (
+        children || defaultChildren
+      )}
     </Cascader>
   );
 };

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']> => {