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

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/__tests__/gridDragPlanner.test.ts

@@ -19,9 +19,14 @@ import {
 
 const rect = { top: 0, left: 0, width: 100, height: 100 };
 
-const createLayout = (rows: Record<string, string[][]>, sizes: Record<string, number[]>): GridLayoutData => ({
+const createLayout = (
+  rows: Record<string, string[][]>,
+  sizes: Record<string, number[]>,
+  rowOrder?: string[],
+): GridLayoutData => ({
   rows,
   sizes,
+  rowOrder,
 });
 
 describe('getSlotKey', () => {
@@ -275,6 +280,7 @@ describe('simulateLayoutForSlot', () => {
         rowA: [24],
         rowB: [24],
       },
+      ['rowA', 'rowB'],
     );
 
     const slot: LayoutSlot = {
@@ -315,6 +321,33 @@ describe('simulateLayoutForSlot', () => {
     expect(result.sizes['row-new']).toEqual([24]);
   });
 
+  it('removes empty source row when moving item into empty container slot', () => {
+    const layout = createLayout(
+      {
+        rowA: [['block-x']],
+      },
+      {
+        rowA: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'empty-row',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'block-x',
+      layout,
+      generateRowId: () => 'row-new',
+    });
+
+    expect(result.rows['row-new']).toEqual([['block-x']]);
+    expect(result.rows.rowA).toBeUndefined();
+    expect(result.sizes.rowA).toBeUndefined();
+  });
+
   it('handles column slot with after position', () => {
     const layout = createLayout(
       {
@@ -373,6 +406,7 @@ describe('simulateLayoutForSlot', () => {
         rowA: [24],
         rowB: [24],
       },
+      ['rowA', 'rowB'],
     );
 
     const slot: LayoutSlot = {
@@ -392,6 +426,112 @@ describe('simulateLayoutForSlot', () => {
     expect(Object.keys(result.rows)).toEqual(['rowA', 'row-inserted', 'rowB']);
   });
 
+  it('inserts row into rowOrder when dropping below target row', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a']],
+        rowB: [['b']],
+      },
+      {
+        rowA: [24],
+        rowB: [24],
+      },
+      ['rowA', 'rowB'],
+    );
+
+    const slot: LayoutSlot = {
+      type: 'row-gap',
+      targetRowId: 'rowA',
+      position: 'below',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'c',
+      layout,
+      generateRowId: () => 'row-new',
+    });
+
+    expect(result.rowOrder).toEqual(['rowA', 'row-new', 'rowB']);
+  });
+
+  it('maintains rowOrder and inserts new row before target when provided', () => {
+    const layout = createLayout(
+      {
+        rowA: [['a']],
+        rowB: [['b']],
+      },
+      {
+        rowA: [24],
+        rowB: [24],
+      },
+      ['rowA', 'rowB'],
+    );
+
+    const slot: LayoutSlot = {
+      type: 'row-gap',
+      targetRowId: 'rowB',
+      position: 'above',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({
+      slot,
+      sourceUid: 'c',
+      layout,
+      generateRowId: () => 'row-new',
+    });
+
+    expect(result.rowOrder).toEqual(['rowA', 'row-new', 'rowB']);
+    expect(result.rows).toEqual({
+      rowA: [['a']],
+      'row-new': [['c']],
+      rowB: [['b']],
+    });
+    expect(result.sizes).toEqual({
+      rowA: [24],
+      'row-new': [24],
+      rowB: [24],
+    });
+  });
+
+  it('derives rowOrder from rows when missing and removes empty rows from order', () => {
+    const layout = createLayout(
+      {
+        row1: [['a']],
+        row2: [['b']],
+        row3: [['c']],
+      },
+      {
+        row1: [24],
+        row2: [24],
+        row3: [24],
+      },
+    );
+
+    const slot: LayoutSlot = {
+      type: 'column',
+      rowId: 'row1',
+      columnIndex: 0,
+      insertIndex: 0,
+      position: 'before',
+      rect,
+    };
+
+    const result = simulateLayoutForSlot({ slot, sourceUid: 'b', layout });
+
+    expect(result.rowOrder).toEqual(['row1', 'row3']);
+    expect(result.rows).toEqual({
+      row1: [['b', 'a']],
+      row3: [['c']],
+    });
+    expect(result.sizes).toEqual({
+      row1: [24],
+      row3: [24],
+    });
+  });
+
   it('handles empty-column slot by replacing empty column', () => {
     const layout = createLayout(
       {

package/src/components/common/withFlowDesignMode.tsx

@@ -8,14 +8,14 @@
  */
 
 import React from 'react';
-import { observer } from '@formily/reactive-react';
-import { useFlowEngine } from '../../provider';
+import { useFlowContext } from '../../FlowContextProvider';
+import { observer } from '../..';
 
 /**
  * 高阶组件：仅在设计模式启用时渲染子组件
  *
  * @param WrappedComponent 要包装的组件
- * @returns 包装后的组件，只在 flowSettings.enabled 为 true 时渲染
+ * @returns 包装后的组件，只在 flowSettingsEnabled 为 true 时渲染
  *
  * @example
  * ```tsx
@@ -29,10 +29,10 @@ import { useFlowEngine } from '../../provider';
  */
 export function withFlowDesignMode<P extends Record<string, any>>(WrappedComponent: React.ComponentType<P>) {
   const WithFlowDesignModeComponent = observer((props: P) => {
-    const flowEngine = useFlowEngine();
+    const ctx = useFlowContext();
 
     // 如果设计模式未启用，直接返回 null，避免执行子组件的计算
-    if (!flowEngine.flowSettings.enabled) {
+    if (!ctx.flowSettingsEnabled) {
       return null;
     }
 

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;
 }
@@ -465,10 +509,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 +638,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 +686,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 +705,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/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

@@ -8,11 +8,13 @@
  */
 
 import { DownOutlined, SettingOutlined } from '@ant-design/icons';
-import { observer } from '@formily/react';
 import { Alert, Button, Dropdown, Space } from 'antd';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useFlowModelById } from '../../../../hooks';
 import { FlowModel } from '../../../../models';
+import { shouldHideStepInSettings } from '../../../../utils';
+import { ActionDefinition } from '../../../../types';
+import { observer } from '../../../../reactive';
 
 // 支持两种使用方式的接口定义
 interface ModelProvidedProps {
@@ -108,31 +110,31 @@ const FlowsDropdownButtonWithModel: React.FC<ModelProvidedProps> = observer(
     }
 
     // 获取可配置的flows和steps
-    const getConfigurableFlowsAndSteps = useCallback(() => {
+    const getConfigurableFlowsAndSteps = useCallback(async () => {
       try {
         // const ModelClass = model.constructor as typeof FlowModel;
         const flows = model.getFlows();
 
         const flowsArray = Array.from(flows.values());
 
-        return flowsArray
-          .map((flow) => {
-            const configurableSteps = Object.entries(flow.steps)
-              .map(([stepKey, stepDefinition]) => {
-                const actionStep = stepDefinition;
+        const result = await Promise.all(
+          flowsArray.map(async (flow) => {
+            const configurableSteps = await Promise.all(
+              Object.entries(flow.steps).map(async ([stepKey, stepDefinition]) => {
+                const actionStep: any = stepDefinition;
 
-                // 如果步骤设置了 hideInSettings: true，则跳过此步骤
-                if (actionStep.hideInSettings) {
+                // 支持静态与动态 hideInSettings
+                if (await shouldHideStepInSettings(model, flow, actionStep)) {
                   return null;
                 }
 
                 // 从step获取uiSchema（如果存在）
-                const stepUiSchema = actionStep.uiSchema || {};
+                const stepUiSchema: ActionDefinition['uiSchema'] = actionStep.uiSchema || {};
 
                 // 如果step使用了action，也获取action的uiSchema
                 let actionUiSchema = {};
                 if (actionStep.use) {
-                  const action = model.flowEngine?.getAction?.(actionStep.use);
+                  const action = model.getAction?.(actionStep.use);
                   if (action && action.uiSchema) {
                     actionUiSchema = action.uiSchema;
                   }
@@ -161,19 +163,34 @@ const FlowsDropdownButtonWithModel: React.FC<ModelProvidedProps> = observer(
                   uiSchema: mergedUiSchema,
                   title: actionStep.title || stepKey,
                 };
-              })
-              .filter(Boolean);
+              }),
+            ).then((steps) => steps.filter(Boolean));
 
             return configurableSteps.length > 0 ? { flow, steps: configurableSteps } : null;
-          })
-          .filter(Boolean);
+          }),
+        );
+
+        return result.filter(Boolean);
       } catch (error) {
         console.warn('[FlowsDropdownButton] 获取可配置flows失败:', error);
         return [];
       }
     }, [model]);
 
-    const configurableFlowsAndSteps = getConfigurableFlowsAndSteps();
+    const [configurableFlowsAndSteps, setConfigurableFlowsAndSteps] = useState<any[]>([]);
+
+    useEffect(() => {
+      let mounted = true;
+      (async () => {
+        const flows = await getConfigurableFlowsAndSteps();
+        if (mounted) {
+          setConfigurableFlowsAndSteps(flows as any[]);
+        }
+      })();
+      return () => {
+        mounted = false;
+      };
+    }, [getConfigurableFlowsAndSteps]);
 
     // 构建菜单项
     const buildMenuItems = () => {

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

@@ -0,0 +1,110 @@
+/**
+ * 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 { Select } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { useFlowEngineContext } from '../../../../provider';
+
+export interface SelectWithTitleProps {
+  title?: any;
+  getDefaultValue?: any;
+  options?: any;
+  fieldNames?: any;
+  itemKey?: string;
+  onChange?: (...args: any[]) => void;
+  dropdownRender?: any;
+}
+
+export function SelectWithTitle({
+  title,
+  getDefaultValue,
+  onChange,
+  options,
+  fieldNames,
+  itemKey,
+  ...others
+}: SelectWithTitleProps) {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState<any>('');
+  const ctx = useFlowEngineContext();
+  useEffect(() => {
+    let cancelled = false;
+
+    const run = async () => {
+      if (!getDefaultValue) return;
+
+      try {
+        const val = await getDefaultValue();
+        if (cancelled || !val) return;
+
+        const entries = Object.entries(val);
+        if (!entries.length) return;
+
+        const [key, result] = entries[0];
+        setValue(result);
+      } catch (e) {
+        console.error(e);
+      }
+    };
+
+    run();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [getDefaultValue]);
+
+  const timerRef = useRef<any>(null);
+
+  const handleChange = (val: any) => {
+    setValue(val);
+    onChange?.({ [itemKey]: val });
+  };
+  return (
+    <div
+      style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}
+      onClick={(e) => {
+        e.stopPropagation();
+        setOpen((v) => !v);
+      }}
+      onMouseLeave={() => {
+        timerRef.current = setTimeout(() => {
+          setOpen(false);
+        }, 200);
+      }}
+    >
+      <span
+        style={{
+          whiteSpace: 'nowrap', // 不换行
+          flexShrink: 0, // 不被挤压
+        }}
+      >
+        {title}
+      </span>
+      <Select
+        {...others}
+        open={open}
+        popupMatchSelectWidth={false}
+        bordered={false}
+        value={value}
+        onChange={handleChange}
+        popupClassName={`select-popup-${title.replaceAll(' ', '-')}`}
+        fieldNames={fieldNames}
+        options={options}
+        labelRender={(props) => ctx.t(props.label)}
+        optionRender={(o) => ctx.t(o.label)}
+        style={{ textAlign: 'right', minWidth: 100 }}
+        onMouseEnter={() => {
+          clearTimeout(timerRef.current);
+        }}
+        dropdownRender={(menu) => (others.dropdownRender ? others.dropdownRender(menu, setOpen, handleChange) : menu)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+/**
+ * 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 { Switch } from 'antd';
+import React, { FC, useEffect, useState } from 'react';
+import { useFlowEngineContext } from '../../../../provider';
+import { observer } from '../../../../reactive';
+
+const ml32 = { marginLeft: 32 };
+
+export const SwitchWithTitle: FC = observer(
+  ({ title, onChange, getDefaultValue, disabled, itemKey, ...others }: any) => {
+    const [checked, setChecked] = useState<boolean>(false);
+    const ctx = useFlowEngineContext();
+
+    useEffect(() => {
+      let cancelled = false;
+
+      const run = async () => {
+        if (!getDefaultValue) return;
+
+        try {
+          const val = await getDefaultValue();
+          if (cancelled || !val) return;
+
+          const entries = Object.entries(val);
+          if (!entries.length) return;
+
+          const [key, value] = entries[0];
+          setChecked(!!value);
+        } catch (e) {
+          console.error(e);
+        }
+      };
+
+      run();
+
+      return () => {
+        cancelled = true;
+      };
+    }, [getDefaultValue]);
+
+    const handleChange = (val: boolean) => {
+      setChecked(val);
+      onChange?.({ [itemKey]: val });
+    };
+
+    // 点击整个容器时触发
+    const handleWrapperClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (disabled) return;
+      handleChange(!checked);
+    };
+    return (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'space-between',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        }}
+        onClick={handleWrapperClick}
+      >
+        {title}
+        <Switch
+          size="small"
+          {...others}
+          checkedChildren={others.checkedChildren ? ctx.t(others.checkedChildren) : undefined}
+          unCheckedChildren={others.unCheckedChildren ? ctx.t(others.unCheckedChildren) : undefined}
+          checked={checked}
+          style={ml32}
+          disabled={disabled}
+        />
+      </div>
+    );
+  },
+);