@nocobase/flow-engine 2.1.0-beta.1 → 2.1.0-beta.11

package/src/components/__tests__/gridDragPlanner.test.ts

@@ -15,6 +15,7 @@ import {
   getSlotKey,
   resolveDropIntent,
   Point,
+  buildLayoutSnapshot,
 } from '../dnd/gridDragPlanner';
 
 const rect = { top: 0, left: 0, width: 100, height: 100 };
@@ -29,6 +30,93 @@ const createLayout = (
   rowOrder,
 });
 
+const createDomRect = ({ top, left, width, height }: { top: number; left: number; width: number; height: number }) => {
+  return {
+    top,
+    left,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    x: left,
+    y: top,
+    toJSON: () => ({}),
+  } as DOMRect;
+};
+
+const mockRect = (
+  element: Element,
+  rect: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  },
+) => {
+  Object.defineProperty(element, 'getBoundingClientRect', {
+    configurable: true,
+    value: () => createDomRect(rect),
+  });
+};
+
+describe('buildLayoutSnapshot', () => {
+  it('should ignore nested grid columns/items even when rowId is duplicated', () => {
+    const container = document.createElement('div');
+    const row = document.createElement('div');
+    row.setAttribute('data-grid-row-id', 'row-1');
+    container.appendChild(row);
+
+    const column = document.createElement('div');
+    column.setAttribute('data-grid-column-row-id', 'row-1');
+    column.setAttribute('data-grid-column-index', '0');
+    row.appendChild(column);
+
+    const item = document.createElement('div');
+    item.setAttribute('data-grid-item-row-id', 'row-1');
+    item.setAttribute('data-grid-column-index', '0');
+    item.setAttribute('data-grid-item-index', '0');
+    column.appendChild(item);
+
+    // 在外层 item 内构建一个嵌套 grid，并复用相同 rowId/columnIndex
+    const nestedRow = document.createElement('div');
+    nestedRow.setAttribute('data-grid-row-id', 'row-1');
+    item.appendChild(nestedRow);
+
+    const nestedColumn = document.createElement('div');
+    nestedColumn.setAttribute('data-grid-column-row-id', 'row-1');
+    nestedColumn.setAttribute('data-grid-column-index', '0');
+    nestedRow.appendChild(nestedColumn);
+
+    const nestedItem = document.createElement('div');
+    nestedItem.setAttribute('data-grid-item-row-id', 'row-1');
+    nestedItem.setAttribute('data-grid-column-index', '0');
+    nestedItem.setAttribute('data-grid-item-index', '0');
+    nestedColumn.appendChild(nestedItem);
+
+    mockRect(container, { top: 0, left: 0, width: 600, height: 600 });
+    mockRect(row, { top: 10, left: 10, width: 320, height: 120 });
+    mockRect(column, { top: 10, left: 10, width: 320, height: 120 });
+    mockRect(item, { top: 20, left: 20, width: 300, height: 80 });
+
+    // 嵌套 grid 给一个明显偏离的位置，用于判断是否被错误命中
+    mockRect(nestedRow, { top: 360, left: 360, width: 200, height: 120 });
+    mockRect(nestedColumn, { top: 360, left: 360, width: 200, height: 120 });
+    mockRect(nestedItem, { top: 370, left: 370, width: 180, height: 90 });
+
+    const snapshot = buildLayoutSnapshot({ container });
+    const columnEdgeSlots = snapshot.slots.filter((slot) => slot.type === 'column-edge');
+    const columnSlots = snapshot.slots.filter((slot) => slot.type === 'column');
+
+    // 外层单行单列单项应只有 6 个 slot：上/下 row-gap + 左/右 column-edge + before/after column
+    expect(snapshot.slots).toHaveLength(6);
+    expect(columnEdgeSlots).toHaveLength(2);
+    expect(columnSlots).toHaveLength(2);
+
+    // 不应混入嵌套 grid（其 top >= 360）
+    expect(snapshot.slots.every((slot) => slot.rect.top < 300)).toBe(true);
+  });
+});
+
 describe('getSlotKey', () => {
   it('should generate unique key for column slot', () => {
     const slot: LayoutSlot = {

package/src/components/dnd/gridDragPlanner.ts

@@ -333,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);
@@ -363,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);

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

@@ -134,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),
@@ -152,7 +163,8 @@ const openStepSettingsDialog = async ({
     title: dialogTitle || t(title),
     width: dialogWidth,
     destroyOnClose: true,
-    ...toJS(uiModeProps),
+    ...restUiModeProps,
+    zIndex: mergedZIndex,
     // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
     inputArgs,
     onClose: () => {
@@ -165,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),
+            });
           });
         }, []);
 

package/src/components/subModel/AddSubModelButton.tsx

@@ -542,6 +542,22 @@ const AddSubModelButtonCore = function AddSubModelButton({
     [model, subModelKey, subModelType],
   );
 
+  React.useEffect(() => {
+    const handleSubModelChanged = () => {
+      setRefreshTick((x) => x + 1);
+    };
+
+    model.emitter?.on('onSubModelAdded', handleSubModelChanged);
+    model.emitter?.on('onSubModelRemoved', handleSubModelChanged);
+    model.emitter?.on('onSubModelReplaced', handleSubModelChanged);
+
+    return () => {
+      model.emitter?.off('onSubModelAdded', handleSubModelChanged);
+      model.emitter?.off('onSubModelRemoved', handleSubModelChanged);
+      model.emitter?.off('onSubModelReplaced', handleSubModelChanged);
+    };
+  }, [model]);
+
   // 点击处理逻辑
   const onClick = async (info: any) => {
     const clickedItem = info.originalItem || info;

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -995,6 +995,56 @@ describe('AddSubModelButton - toggle interactions', () => {
     const subModels = ((parent.subModels as any).items as FlowModel[]) || [];
     expect(subModels).toHaveLength(1);
   });
+
+  it('updates toggle state after external sub model removal', async () => {
+    const engine = new FlowEngine();
+    engine.flowSettings.forceEnable();
+
+    class ToggleParent extends FlowModel {}
+    class ToggleChild extends FlowModel {}
+
+    engine.registerModels({ ToggleParent, ToggleChild });
+    const parent = engine.createModel<ToggleParent>({ use: 'ToggleParent', uid: 'toggle-parent-external-remove' });
+    const existing = engine.createModel<ToggleChild>({ use: 'ToggleChild', uid: 'toggle-child-external-remove' });
+    parent.addSubModel('items', existing);
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="items"
+              items={[
+                {
+                  key: 'toggle-child',
+                  label: 'Toggle Child',
+                  toggleable: true,
+                  useModel: 'ToggleChild',
+                  createModelOptions: { use: 'ToggleChild' },
+                },
+              ]}
+            >
+              Toggle Menu
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await act(async () => {
+      await userEvent.click(screen.getByText('Toggle Menu'));
+    });
+
+    await waitFor(() => expect(screen.getByText('Toggle Child')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true'));
+
+    await act(async () => {
+      await existing.destroy();
+    });
+
+    await waitFor(() => expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'false'));
+  });
 });
 
 // ========================

package/src/executor/FlowExecutor.ts

@@ -224,10 +224,12 @@ export class FlowExecutor {
           await this.emitModelEventIf(eventName, `flow:${flowKey}:step:${stepKey}:end`, {
             ...flowEventBasePayload,
             stepKey,
+            aborted: true,
           });
           await this.emitModelEventIf(eventName, `flow:${flowKey}:end`, {
             ...flowEventBasePayload,
             result: error,
+            aborted: true,
           });
           return Promise.resolve(error);
         }
@@ -316,9 +318,9 @@ export class FlowExecutor {
 
     // 记录本次 dispatchEvent 内注册的调度任务，用于在结束/错误后兜底清理未触发的任务
     const scheduledCancels: ScheduledCancel[] = [];
-
-    // 组装执行函数（返回值用于缓存；beforeRender 返回 results:any[]，其它返回 true）
-    const execute = async () => {
+    // 组装执行函数（返回值用于缓存，包含事件结果与是否被 exitAll 中止）
+    const execute = async (): Promise<{ result: any[]; abortedByExitAll: boolean }> => {
+      let abortedByExitAll = false;
       if (sequential) {
         // 顺序执行：动态流（实例级）优先，其次静态流；各自组内再按 sort 升序，最后保持原始顺序稳定
         const flowsWithIndex = flowsToRun.map((f, i) => ({ f, i }));
@@ -351,7 +353,7 @@ export class FlowExecutor {
             .map((f) => [f.key, f] as const),
         );
         const scheduled = new Set<string>();
-        const scheduleGroups = new Map<string, Array<{ flow: any; order: number }>>();
+        const scheduleGroups = new Map<string, Array<{ flow: any; order: number; shouldSkipOnAborted: boolean }>>();
         ordered.forEach((flow, indexInOrdered) => {
           const on = flow.on;
           const onObj = typeof on === 'object' ? (on as any) : undefined;
@@ -402,9 +404,11 @@ export class FlowExecutor {
           }
 
           if (!whenKey) return;
+          const shouldSkipOnAborted =
+            whenKey === `event:${eventName}:end` || phase === 'afterFlow' || phase === 'afterStep';
           scheduled.add(flow.key);
           const list = scheduleGroups.get(whenKey) || [];
-          list.push({ flow, order: indexInOrdered });
+          list.push({ flow, order: indexInOrdered, shouldSkipOnAborted });
           scheduleGroups.set(whenKey, list);
         });
 
@@ -417,6 +421,14 @@ export class FlowExecutor {
             return a.order - b.order;
           });
           for (const it of sorted) {
+            const when = it.shouldSkipOnAborted
+              ? Object.assign(
+                  (event: { type: string; aborted?: boolean }) => event.type === whenKey && event.aborted !== true,
+                  {
+                    __eventType: whenKey,
+                  },
+                )
+              : (whenKey as any);
             const cancel = model.scheduleModelOperation(
               model.uid,
               async (m) => {
@@ -426,7 +438,7 @@ export class FlowExecutor {
                 }
                 results.push(res);
               },
-              { when: whenKey as any },
+              { when },
             );
             scheduledCancels.push(cancel);
           }
@@ -441,12 +453,14 @@ export class FlowExecutor {
             const result = await this.runFlow(model, flow.key, inputArgs, runId, eventName);
             if (result instanceof FlowExitAllException) {
               logger.debug(`[FlowEngine.dispatchEvent] ${result.message}`);
+              abortedByExitAll = true;
               break; // 终止后续
             }
             results.push(result);
           } catch (error) {
             if (error instanceof FlowExitAllException) {
               logger.debug(`[FlowEngine.dispatchEvent] ${error.message}`);
+              abortedByExitAll = true;
               break; // 终止后续
             }
             logger.error(
@@ -456,7 +470,7 @@ export class FlowExecutor {
             throw error;
           }
         }
-        return results;
+        return { result: results, abortedByExitAll };
       }
 
       // 并行
@@ -475,7 +489,11 @@ export class FlowExecutor {
           }
         }),
       );
-      return results.filter((x) => x !== undefined);
+      const filteredResults = results.filter((x) => x !== undefined);
+      if (filteredResults.some((x) => x instanceof FlowExitAllException)) {
+        abortedByExitAll = true;
+      }
+      return { result: filteredResults, abortedByExitAll };
     };
 
     // 缓存键：按事件+scope 统一管理（beforeRender 也使用事件名 beforeRender）
@@ -489,7 +507,7 @@ export class FlowExecutor {
       : null;
 
     try {
-      const result = await this.withApplyFlowCache(cacheKey, execute);
+      const { result, abortedByExitAll } = await this.withApplyFlowCache(cacheKey, execute);
       // 事件结束钩子
       try {
         await model.onDispatchEventEnd?.(eventName, options, inputArgs, result);
@@ -499,7 +517,14 @@ export class FlowExecutor {
       await this.emitModelEventIf(eventName, 'end', {
         ...eventBasePayload,
         result,
+        ...(abortedByExitAll ? { aborted: true } : {}),
       });
+      if (result && typeof result === 'object') {
+        Object.defineProperty(result, '__abortedByExitAll', {
+          value: abortedByExitAll,
+          configurable: true,
+        });
+      }
       return result;
     } catch (error) {
       // 进入错误钩子并记录

package/src/executor/__tests__/flowExecutor.test.ts

@@ -232,6 +232,37 @@ describe('FlowExecutor', () => {
     expect(calls.sort()).toEqual(['a', 'b']);
   });
 
+  it('dispatchEvent sequential exposes abortedByExitAll metadata on result array', async () => {
+    const flows = {
+      stopClose: {
+        on: { eventName: 'close' },
+        steps: {
+          only: {
+            handler: vi.fn().mockImplementation((ctx) => {
+              ctx.exit();
+            }),
+          },
+        },
+      },
+      afterClose: {
+        on: { eventName: 'close', phase: 'afterAllFlows' },
+        steps: {
+          only: {
+            handler: vi.fn(),
+          },
+        },
+      },
+    } satisfies Record<string, Omit<FlowDefinitionOptions, 'key'>>;
+
+    const model = createModelWithFlows('m-close-meta', flows);
+
+    const result = await engine.executor.dispatchEvent(model, 'close', {}, { sequential: true });
+
+    expect(Array.isArray(result)).toBe(true);
+    expect((result as any).__abortedByExitAll).toBe(true);
+    expect(flows.afterClose.steps.only.handler).not.toHaveBeenCalled();
+  });
+
   it('dispatchEvent sequential respects sort order and stops on errors', async () => {
     const calls: string[] = [];
     const mkFlow = (key: string, sort: number, opts?: { throw?: boolean }) => ({
@@ -288,6 +319,32 @@ describe('FlowExecutor', () => {
     expect(handler).toHaveBeenCalledTimes(2); // 每个 flow 各 1 次，共 2 次
   });
 
+  it("dispatchEvent('beforeRender') keeps aborted flag on end event when cache hits", async () => {
+    const handler = vi.fn().mockImplementation((ctx) => {
+      ctx.exitAll();
+    });
+    const flows = {
+      abortFlow: { steps: { s: { handler } } },
+    } satisfies Record<string, Omit<FlowDefinitionOptions, 'key'>>;
+    const model = createModelWithFlows('m-br-cache-aborted', flows);
+
+    const endEvents: any[] = [];
+    const onEnd = (payload: any) => {
+      endEvents.push(payload);
+    };
+    engine.emitter.on('model:event:beforeRender:end', onEnd);
+
+    await engine.executor.dispatchEvent(model, 'beforeRender', undefined, { sequential: true, useCache: true });
+    await engine.executor.dispatchEvent(model, 'beforeRender', undefined, { sequential: true, useCache: true });
+
+    engine.emitter.off('model:event:beforeRender:end', onEnd);
+
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(endEvents).toHaveLength(2);
+    expect(endEvents[0]?.aborted).toBe(true);
+    expect(endEvents[1]?.aborted).toBe(true);
+  });
+
   it('dispatchEvent supports sequential execution order and exitAll break', async () => {
     const calls: string[] = [];
     const mkFlow = (key: string, sort: number, opts?: { exitAll?: boolean }) => ({

package/src/flowContext.ts

@@ -27,7 +27,7 @@ import { ContextPathProxy } from './ContextPathProxy';
 import { DataSource, DataSourceManager } from './data-source';
 import { FlowEngine } from './flowEngine';
 import { FlowI18n } from './flowI18n';
-import { JSRunner, JSRunnerOptions } from './JSRunner';
+import { JSRunner, JSRunnerOptions, shouldPreprocessRunJSTemplates } from './JSRunner';
 import type { FlowModel } from './models/flowModel';
 import type { ForkFlowModel } from './models/forkFlowModel';
 import { FlowResource, FlowSQLRepository } from './resources';
@@ -3035,8 +3035,10 @@ class BaseFlowEngineContext extends FlowContext {
           ...(runnerOptions || {}),
           globals: mergedGlobals,
         });
-        // Enable by default; use `preprocessTemplates: false` to explicitly disable.
-        const shouldPreprocessTemplates = preprocessTemplates !== false;
+        const shouldPreprocessTemplates = shouldPreprocessRunJSTemplates({
+          version: runnerOptions?.version,
+          preprocessTemplates,
+        });
         const jsCode = await prepareRunJsCode(String(code ?? ''), { preprocessTemplates: shouldPreprocessTemplates });
         return runner.run(jsCode);
       },

package/src/flowEngine.ts

@@ -117,6 +117,13 @@ export class FlowEngine {
   private _previousEngine?: FlowEngine;
   private _nextEngine?: FlowEngine;
 
+  /**
+   * 视图销毁回调。由 useDrawer / useDialog 在创建弹窗视图时注册，
+   * 供外部（如 afterSuccess）通过引擎栈遍历来关闭多层弹窗。
+   * embed 视图（usePage）不注册此回调，因此 destroyView() 会自然跳过。
+   */
+  private _destroyView?: () => void;
+
   private _resources = new Map<string, typeof FlowResource>();
 
   /**
@@ -282,6 +289,28 @@ export class FlowEngine {
     }
   }
 
+  /**
+   * 注册视图销毁回调（由 useDrawer / useDialog 调用）。
+   */
+  public setDestroyView(fn: () => void): void {
+    this._destroyView = fn;
+  }
+
+  /**
+   * 关闭当前引擎关联的弹窗视图。
+   * 路由触发的弹窗会先 navigation.back() 清理 URL，再 destroy() 移除元素；
+   * 非路由弹窗直接 destroy()。
+   * embed 视图不注册回调，调用时返回 false 自动跳过。
+   * @returns 是否成功执行
+   */
+  public destroyView(): boolean {
+    if (this._destroyView) {
+      this._destroyView();
+      return true;
+    }
+    return false;
+  }
+
   // （已移除）getModelGlobal/forEachModelGlobal/getAllModelsGlobal：不再维护冗余全局遍历 API
 
   /**
@@ -959,6 +988,7 @@ export class FlowEngine {
   async loadOrCreateModel<T extends FlowModel = FlowModel>(
     options,
     extra?: {
+      skipSave?: boolean;
       delegateToParent?: boolean;
       delegate?: FlowContext;
     },
@@ -984,7 +1014,9 @@ export class FlowEngine {
       model = this.createModel<T>(data as any, extra);
     } else {
       model = this.createModel<T>(options, extra);
-      await model.save();
+      if (!extra?.skipSave) {
+        await model.save();
+      }
     }
     if (model.parent) {
       const subModel = model.parent.findSubModel(model.subKey, (m) => {