@nocobase/flow-engine 2.0.0-alpha.4 → 2.0.0-alpha.40

package/src/components/__tests__/flow-model-render-error-fallback.test.tsx

@@ -13,7 +13,6 @@ import { render, cleanup, waitFor } from '@testing-library/react';
 import { App, ConfigProvider } from 'antd';
 import { FlowEngine } from '../../flowEngine';
 import { FlowModel, ModelRenderMode } from '../../models/flowModel';
-import { DefaultSettingsIcon } from '../settings/wrappers/contextual/DefaultSettingsIcon';
 import { FlowEngineProvider } from '../../provider';
 import { FlowModelRenderer } from '../FlowModelRenderer';
 
@@ -81,6 +80,7 @@ vi.mock('antd', () => {
     Alert,
     Skeleton,
     Spin,
+    theme: { useToken: () => ({}) },
   } as any;
 });
 
@@ -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>,

package/src/components/index.ts

@@ -17,4 +17,5 @@ export * from './FormItem';
 export * from './settings';
 export * from './subModel';
 export * from './variables';
+export * from './MobilePopup';
 //

package/src/components/settings/independents/dropdown/FlowsDropdownButton.tsx

@@ -132,7 +132,7 @@ const FlowsDropdownButtonWithModel: React.FC<ModelProvidedProps> = observer(
                 // 如果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;
                   }

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

@@ -126,7 +126,19 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
         message.success(t('UID copied to clipboard'));
       } catch (error) {
         console.error(t('Copy failed'), ':', error);
-        message.error(t('Copy failed, please copy [{{uid}}] manually.', { uid }));
+        // 如果不是 HTTPS 协议，给出更具体的提示：HTTP 下剪贴板 API 不可用
+        const isHttps = typeof window !== 'undefined' && window.location?.protocol === 'https:';
+        if (!isHttps) {
+          message.error(
+            t(
+              'Copy failed under HTTP. Clipboard API is unavailable on non-HTTPS pages. Please copy [{{uid}}] manually.',
+              { uid },
+            ),
+          );
+          return;
+        } else {
+          message.error(t('Copy failed, please copy [{{uid}}] manually.', { uid }));
+        }
       }
     },
     [message, t],
@@ -255,7 +267,8 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
   const getModelConfigurableFlowsAndSteps = useCallback(
     async (targetModel: FlowModel, modelKey?: string): Promise<FlowInfo[]> => {
       try {
-        const flows = targetModel.getFlows();
+        // 仅使用静态流（类级全局注册的 flows），排除实例动态流
+        const flows = (targetModel.constructor as typeof FlowModel).globalFlowRegistry.getFlows();
 
         const flowsArray = Array.from(flows.values());
 
@@ -278,9 +291,9 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
                 let stepTitle = actionStep.title;
                 if (actionStep.use) {
                   try {
-                    const action = targetModel.flowEngine?.getAction?.(actionStep.use);
+                    const action = targetModel.getAction?.(actionStep.use);
                     hasActionUiSchema = action && action.uiSchema != null;
-                    stepTitle = stepTitle || action.title;
+                    stepTitle = stepTitle || action?.title;
                   } catch (error) {
                     console.warn(t('Failed to get action {{action}}', { action: actionStep.use }), ':', error);
                   }

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

@@ -162,7 +162,7 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
                 // 如果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;
                   }

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

@@ -80,8 +80,29 @@ 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;
 
@@ -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);
@@ -147,10 +169,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 +316,7 @@ interface ModelProvidedProps {
   /**
    * @default 'inside'
    */
-  toolbarPosition?: 'inside' | 'above';
+  toolbarPosition?: 'inside' | 'above' | 'below';
 }
 
 interface ModelByIdProps {
@@ -332,7 +351,7 @@ interface ModelByIdProps {
   /**
    * @default 'inside'
    */
-  toolbarPosition?: 'inside' | 'above';
+  toolbarPosition?: 'inside' | 'above' | 'below';
 }
 
 type FlowsFloatContextMenuProps = ModelProvidedProps | ModelByIdProps;
@@ -565,9 +584,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}
@@ -653,3 +676,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/StepSettingsDialog.tsx

@@ -14,7 +14,14 @@ 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,
+  buildSettingsViewInputArgs,
+} from '../../../../utils';
 
 const SchemaField = createSchemaField();
 
@@ -135,6 +142,12 @@ const openStepSettingsDialog = async ({
     width: dialogWidth,
     destroyOnClose: true,
     ...toJS(uiModeProps),
+    // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
+    inputArgs: buildSettingsViewInputArgs(
+      model as any,
+      { ...(toJS(uiModeProps)?.inputArgs || {}), __isSettingsPopup: true },
+      { navigationOverride: ctx?.view?.navigation },
+    ),
     onClose: () => {
       if (cleanup) {
         cleanup();

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

@@ -0,0 +1,425 @@
+/**
+ * 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, beforeEach, afterEach } from 'vitest';
+import { render, cleanup, waitFor } from '@testing-library/react';
+import { App, ConfigProvider } from 'antd';
+
+import { FlowEngine } from '../../../../../flowEngine';
+import { FlowModel } from '../../../../../models/flowModel';
+import { DefaultSettingsIcon } from '../DefaultSettingsIcon';
+
+// ---- Mock antd to capture Dropdown menu props ----
+const dropdownMenus: any[] = [];
+vi.mock('antd', async (importOriginal) => {
+  const Dropdown = (props: any) => {
+    (globalThis as any).__lastDropdownMenu = props.menu;
+    dropdownMenus.push(props.menu);
+    return React.createElement('span', { 'data-testid': 'dropdown' }, props.children);
+  };
+
+  const App = Object.assign(({ children }: any) => React.createElement(React.Fragment, null, children), {
+    useApp: () => ({ message: { success: () => {}, error: () => {}, info: () => {} } }),
+  });
+
+  const ConfigProvider = ({ children }: any) => React.createElement(React.Fragment, null, children);
+  const Modal = {
+    confirm: (opts: any) => {
+      if (opts && typeof opts.onOk === 'function') return opts.onOk();
+    },
+    error: vi.fn(),
+  };
+  const Typography = {
+    Paragraph: ({ children }: any) => React.createElement('p', null, children ?? 'Paragraph'),
+    Text: ({ children }: any) => React.createElement('span', null, children ?? 'Text'),
+  };
+  const Collapse = Object.assign((props: any) => React.createElement('div', null, props.children ?? 'Collapse'), {
+    Panel: (props: any) => React.createElement('div', null, props.children ?? 'Panel'),
+  });
+  const Space = ({ children }: any) => React.createElement('div', null, children);
+  const FormItem = (props: any) => React.createElement('div', null, props.children ?? 'FormItem');
+  const Form = Object.assign((props: any) => React.createElement('form', null, props.children ?? 'Form'), {
+    Item: FormItem,
+    useForm: () => [{ setFieldsValue: (_: any) => {} }],
+  });
+  const Input: any = (props: any) => React.createElement('input', props);
+  Input.TextArea = (props: any) => React.createElement('textarea', props);
+  const InputNumber = (props: any) => React.createElement('input', { ...props, type: 'number' });
+  const Select = (props: any) => React.createElement('select', props);
+  const Switch = (props: any) => React.createElement('input', { ...props, type: 'checkbox' });
+  const Alert = (props: any) => React.createElement('div', { role: 'alert' }, props.message ?? 'Alert');
+  const Button = (props: any) => React.createElement('button', props, props.children ?? 'Button');
+  const Result = (props: any) => React.createElement('div', null, props.children ?? 'Result');
+
+  // Keep other components from original mock/default
+  return {
+    Dropdown,
+    App,
+    ConfigProvider,
+    Modal,
+    Typography,
+    Collapse,
+    Space,
+    Form,
+    Input,
+    InputNumber,
+    Select,
+    Switch,
+    Alert,
+    Button,
+    Result,
+    theme: { useToken: () => ({}) },
+  };
+});
+
+describe('DefaultSettingsIcon - only static flows are shown', () => {
+  beforeEach(() => {
+    dropdownMenus.length = 0;
+    (globalThis as any).__lastDropdownMenu = undefined;
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('excludes instance (dynamic) flows from the settings menu', async () => {
+    class TestFlowModel extends FlowModel {}
+
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'model-static-only', flowEngine: engine });
+
+    // register one static flow with a visible step
+    TestFlowModel.registerFlow({
+      key: 'static1',
+      title: 'Static Flow',
+      steps: {
+        general: {
+          title: 'General',
+          uiSchema: {
+            field: { type: 'string', 'x-component': 'Input' },
+          },
+        },
+      },
+    });
+
+    // add a dynamic (instance) flow which should NOT appear in menu
+    model.flowRegistry.addFlow('dyn1', {
+      title: 'Dynamic Flow',
+      steps: {
+        general: {
+          title: 'General (Dyn)',
+          uiSchema: {
+            field: { type: 'string', 'x-component': 'Input' },
+          },
+        },
+      },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(
+          App as any,
+          null,
+          React.createElement(DefaultSettingsIcon as any, {
+            model,
+            // 关闭常用操作，避免干扰断言
+            showDeleteButton: false,
+            showCopyUidButton: false,
+          }),
+        ),
+      ),
+    );
+
+    // 等待菜单内出现静态流分组，确保异步加载完成
+    await waitFor(() => {
+      const menu = (globalThis as any).__lastDropdownMenu;
+      expect(menu).toBeTruthy();
+      const items = (menu?.items || []) as any[];
+      const groupLabels = items.filter((it) => it.type === 'group').map((it) => String(it.label));
+      expect(groupLabels).toContain('Static Flow');
+    });
+
+    const menu = (globalThis as any).__lastDropdownMenu;
+    const items = (menu?.items || []) as any[];
+
+    // groups for flows are labeled with flow.title; ensure static group exists, dynamic group不存在
+    const groupLabels = items.filter((it) => it.type === 'group').map((it) => String(it.label));
+    expect(groupLabels).toContain('Static Flow');
+    expect(groupLabels).not.toContain('Dynamic Flow');
+
+    // 静态流的 step 存在（key: `${flowKey}:${stepKey}`），动态流 step 不存在
+    expect(items.some((it) => String(it.key || '').startsWith('static1:'))).toBe(true);
+    expect(items.some((it) => String(it.key || '').startsWith('dyn1:'))).toBe(false);
+  });
+
+  it('filters out steps with hideInSettings and keeps visible ones', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-hide', flowEngine: engine });
+
+    TestFlowModel.registerFlow({
+      key: 'flowA',
+      title: 'Flow A',
+      steps: {
+        hidden: { title: 'Hidden', hideInSettings: true, uiSchema: { a: { type: 'string', 'x-component': 'Input' } } },
+        visible: { title: 'Visible', uiSchema: { b: { type: 'string', 'x-component': 'Input' } } },
+      },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    await waitFor(() => {
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      expect(items.some((it) => String(it.key || '') === 'flowA:visible')).toBe(true);
+      expect(items.some((it) => String(it.key || '') === 'flowA:hidden')).toBe(false);
+    });
+  });
+
+  it('includes step when uiSchema provided by action (step.use)', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-action', flowEngine: engine });
+
+    // Step has no uiSchema but uses an action that provides uiSchema
+    TestFlowModel.registerFlow({
+      key: 'flowB',
+      title: 'Flow B',
+      steps: {
+        useAction: { title: 'Use Action', use: 'act' },
+      },
+    });
+
+    // Stub getAction to provide uiSchema
+    (model as any).getAction = vi.fn().mockReturnValue({
+      name: 'act',
+      title: 'Action Title',
+      uiSchema: { x: { type: 'string', 'x-component': 'Input' } },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    await waitFor(() => {
+      const menu = (globalThis as any).__lastDropdownMenu;
+      const items = (menu?.items || []) as any[];
+      expect(items.some((it) => String(it.key || '') === 'flowB:useAction')).toBe(true);
+    });
+  });
+
+  it('clicking a step item opens flow settings with correct args', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-open', flowEngine: engine });
+    const openSpy = vi.spyOn(model, 'openFlowSettings').mockResolvedValue(undefined as any);
+
+    TestFlowModel.registerFlow({
+      key: 'flowC',
+      title: 'Flow C',
+      steps: {
+        general: { title: 'General', uiSchema: { f: { type: 'string', 'x-component': 'Input' } } },
+      },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
+    });
+    const menu = (globalThis as any).__lastDropdownMenu;
+    menu.onClick?.({ key: 'flowC:general' });
+    expect(openSpy).toHaveBeenCalledWith({ flowKey: 'flowC', stepKey: 'general' });
+  });
+
+  it('copy UID action writes model uid to clipboard', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-copy', flowEngine: engine });
+
+    TestFlowModel.registerFlow({
+      key: 'flowD',
+      title: 'Flow D',
+      steps: { s: { title: 'S', uiSchema: { f: { type: 'string', 'x-component': 'Input' } } } },
+    });
+
+    // mock clipboard
+    Object.defineProperty(window.navigator, 'clipboard', {
+      value: { writeText: vi.fn().mockResolvedValue(undefined) },
+      configurable: true,
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
+    });
+    const menu = (globalThis as any).__lastDropdownMenu;
+    menu.onClick?.({ key: 'copy-uid' });
+    expect((navigator as any).clipboard.writeText).toHaveBeenCalledWith('m-copy');
+  });
+
+  it('delete action calls model.destroy()', async () => {
+    class TestFlowModel extends FlowModel {}
+    const engine = new FlowEngine();
+    const model = new TestFlowModel({ uid: 'm-del', flowEngine: engine });
+    const destroySpy = vi.spyOn(model, 'destroy').mockResolvedValue(undefined as any);
+
+    TestFlowModel.registerFlow({
+      key: 'flowE',
+      title: 'Flow E',
+      steps: { s: { title: 'S', uiSchema: { f: { type: 'string', 'x-component': 'Input' } } } },
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(App as any, null, React.createElement(DefaultSettingsIcon as any, { model })),
+      ),
+    );
+
+    await waitFor(() => {
+      expect((globalThis as any).__lastDropdownMenu).toBeTruthy();
+    });
+    const menu = (globalThis as any).__lastDropdownMenu;
+    menu.onClick?.({ key: 'delete' });
+    expect(destroySpy).toHaveBeenCalled();
+  });
+
+  it('shows sub-model steps with modelKey when flattenSubMenus=false and menuLevels=2', async () => {
+    class Parent extends FlowModel {}
+    class Child extends FlowModel {}
+    const engine = new FlowEngine();
+    const parent = new Parent({ uid: 'parent-1', flowEngine: engine });
+    const child = new Child({ uid: 'child-1', flowEngine: engine });
+
+    // child static flow
+    Child.registerFlow({
+      key: 'childFlow',
+      title: 'Child Flow',
+      steps: { cstep: { title: 'C', uiSchema: { x: { type: 'string', 'x-component': 'Input' } } } },
+    });
+
+    parent.addSubModel('items', child);
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(
+          App as any,
+          null,
+          React.createElement(DefaultSettingsIcon as any, {
+            model: parent,
+            menuLevels: 2,
+            flattenSubMenus: false,
+          }),
+        ),
+      ),
+    );
+
+    await waitFor(() => {
+      const menu = (globalThis as any).__lastDropdownMenu;
+      expect(menu).toBeTruthy();
+      const items = (menu?.items || []) as any[];
+      const subMenu = items.find((it) => Array.isArray(it?.children));
+      expect(subMenu).toBeTruthy();
+      expect(subMenu!.children.some((it: any) => String(it.key).startsWith('items[0]:childFlow:cstep'))).toBe(true);
+    });
+  });
+
+  it('adds "Copy popup UID" for popupSettings flow (current model and sub-model)', async () => {
+    class Parent extends FlowModel {}
+    class Child extends FlowModel {}
+    const engine = new FlowEngine();
+    const parent = new Parent({ uid: 'parent-2', flowEngine: engine });
+    const child = new Child({ uid: 'child-2', flowEngine: engine });
+
+    // current model popupSettings
+    Parent.registerFlow({
+      key: 'popupSettings',
+      title: 'Popup',
+      steps: { stage: { title: 'Stage', uiSchema: { a: { type: 'string', 'x-component': 'Input' } } } },
+    });
+    // sub model popupSettings
+    Child.registerFlow({
+      key: 'popupSettings',
+      title: 'Popup Child',
+      steps: { stage: { title: 'Stage', uiSchema: { a: { type: 'string', 'x-component': 'Input' } } } },
+    });
+    parent.addSubModel('items', child);
+
+    // mock clipboard
+    Object.defineProperty(window.navigator, 'clipboard', {
+      value: { writeText: vi.fn().mockResolvedValue(undefined) },
+      configurable: true,
+    });
+
+    render(
+      React.createElement(
+        ConfigProvider as any,
+        null,
+        React.createElement(
+          App as any,
+          null,
+          React.createElement(DefaultSettingsIcon as any, {
+            model: parent,
+            menuLevels: 2,
+            flattenSubMenus: true,
+          }),
+        ),
+      ),
+    );
+
+    // 等待“Copy popup UID”对应的菜单项出现，避免异步时序导致的偶发失败
+    await waitFor(() => {
+      const m = (globalThis as any).__lastDropdownMenu;
+      const is = (m?.items || []) as any[];
+      const current = is.find((it) => String(it.key) === 'copy-pop-uid:popupSettings:stage');
+      const sub = is.find((it) => String(it.key).startsWith('copy-pop-uid:items[0]:popupSettings:stage'));
+      expect(current).toBeTruthy();
+      expect(sub).toBeTruthy();
+    });
+
+    // click and verify clipboard（直接使用最新的 menu）
+    const menu = (globalThis as any).__lastDropdownMenu;
+    menu.onClick?.({ key: 'copy-pop-uid:popupSettings:stage' });
+    expect((navigator as any).clipboard.writeText).toHaveBeenCalledWith('parent-2');
+
+    menu.onClick?.({ key: 'copy-pop-uid:items[0]:popupSettings:stage' });
+    expect((navigator as any).clipboard.writeText).toHaveBeenCalledWith('child-2');
+  });
+});