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

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/MobilePopup.tsx

@@ -8,11 +8,13 @@
  */
 
 import { ConfigProvider } from 'antd';
-import { Popup } from 'antd-mobile';
 import React, { FC, ReactNode, useMemo } from 'react';
-import { CloseOutline } from 'antd-mobile-icons';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
+import { lazy } from '../lazy-helper';
+
+const { Popup } = lazy(() => import('antd-mobile'), 'Popup');
+const { CloseOutline } = lazy(() => import('antd-mobile-icons'), 'CloseOutline');
 
 interface MobilePopupProps {
   title?: string;

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

@@ -114,7 +114,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ BrokenModel });
     const model = engine.createModel({ use: 'BrokenModel', uid: 'broken-top-2' }) as BrokenModel;
     // satisfy FlowsFloatContextMenu styles
@@ -154,7 +154,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ParentModel, BrokenChild });
     const parent = engine.createModel({ use: 'ParentModel', uid: 'parent-3' }) as ParentModel;
     const child = engine.createModel({ use: 'BrokenChild', uid: 'child-3' }) as BrokenChild;
@@ -200,7 +200,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
     }
 
     const engine = new FlowEngine();
-    engine.flowSettings.forceEnable();
+    await engine.flowSettings.forceEnable();
     engine.registerModels({ ParentModel, RenderFnChild });
     const parent = engine.createModel({ use: 'ParentModel', uid: 'parent-4' }) as ParentModel;
     const child = engine.createModel({ use: 'RenderFnChild', uid: 'cell-4' }) as RenderFnChild;

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

@@ -15,13 +15,106 @@ import {
   getSlotKey,
   resolveDropIntent,
   Point,
+  buildLayoutSnapshot,
 } from '../dnd/gridDragPlanner';
 
 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,
+});
+
+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', () => {
@@ -275,6 +368,7 @@ describe('simulateLayoutForSlot', () => {
         rowA: [24],
         rowB: [24],
       },
+      ['rowA', 'rowB'],
     );
 
     const slot: LayoutSlot = {
@@ -315,6 +409,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 +494,7 @@ describe('simulateLayoutForSlot', () => {
         rowA: [24],
         rowB: [24],
       },
+      ['rowA', 'rowB'],
     );
 
     const slot: LayoutSlot = {
@@ -392,6 +514,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(
       {