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

package/src/__tests__/objectVariable.test.ts

@@ -26,6 +26,7 @@ function setupEngineWithCollections() {
     fields: [
       { name: 'id', type: 'integer', interface: 'number' },
       { name: 'name', type: 'string', interface: 'text' },
+      { name: 'rawUserPayload', type: 'json', filterable: true },
     ],
   });
   ds.addCollection({
@@ -41,6 +42,8 @@ function setupEngineWithCollections() {
     filterTargetKey: 'id',
     fields: [
       { name: 'title', type: 'string', interface: 'text' },
+      { name: 'internalName', type: 'string', interface: 'text' },
+      { name: 'rawPostPayload', type: 'json', filterable: true },
       { name: 'author', type: 'belongsTo', target: 'users', interface: 'm2o' },
       { name: 'tags', type: 'belongsToMany', target: 'tags', interface: 'm2m' },
     ],
@@ -91,6 +94,27 @@ describe('objectVariable utilities', () => {
     });
   });
 
+  it('createAssociationAwareObjectMetaFactory should hide fields without interface from object variable meta', async () => {
+    const { collection } = setupEngineWithCollections();
+    const obj = { title: 'hello', internalName: 'internal', rawPostPayload: { secret: true }, author: 1 };
+    const metaFactory = createAssociationAwareObjectMetaFactory(
+      () => collection,
+      'Current object',
+      () => obj,
+    );
+
+    const meta = await metaFactory();
+    const props = await (meta?.properties as any)?.();
+    const authorFields = await props?.author?.properties?.();
+
+    expect(props).toHaveProperty('title');
+    expect(props).toHaveProperty('internalName');
+    expect(props).toHaveProperty('author');
+    expect(props).not.toHaveProperty('rawPostPayload');
+    expect(authorFields).toHaveProperty('name');
+    expect(authorFields).not.toHaveProperty('rawUserPayload');
+  });
+
   it('integrates with FlowContext.resolveJsonTemplate to call variables:resolve with flattened contextParams', async () => {
     const { engine, collection } = setupEngineWithCollections();
     const obj = { author: 1 };

package/src/__tests__/provider.test.tsx

@@ -9,9 +9,10 @@
 
 import React from 'react';
 import { describe, expect, it } from 'vitest';
-import { renderHook } from '@testing-library/react';
+import { render, renderHook } from '@testing-library/react';
+import { App, ConfigProvider, theme } from 'antd';
 import { FlowEngine } from '../flowEngine';
-import { FlowEngineProvider, useFlowEngine } from '../provider';
+import { FlowEngineGlobalsContextProvider, FlowEngineProvider, useFlowEngine } from '../provider';
 
 describe('FlowEngineProvider/useFlowEngine', () => {
   it('returns engine within provider', () => {
@@ -20,4 +21,25 @@ describe('FlowEngineProvider/useFlowEngine', () => {
     const { result } = renderHook(() => useFlowEngine(), { wrapper });
     expect(result.current).toBe(engine);
   });
+
+  it('registers isDarkTheme within globals provider before first child render', () => {
+    const engine = new FlowEngine();
+    const reads: boolean[] = [];
+    const Reader = () => {
+      reads.push(engine.context.isDarkTheme);
+      return null;
+    };
+    const wrapper = ({ children }: any) => (
+      <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
+        <App>
+          <FlowEngineProvider engine={engine}>
+            <FlowEngineGlobalsContextProvider>{children}</FlowEngineGlobalsContextProvider>
+          </FlowEngineProvider>
+        </App>
+      </ConfigProvider>
+    );
+    render(<Reader />, { wrapper });
+    expect(reads[0]).toBe(true);
+    expect(engine.context.isDarkTheme).toBe(true);
+  });
 });

package/src/__tests__/renderHiddenInConfig.test.tsx

@@ -14,7 +14,7 @@ import { FlowEngine } from '../flowEngine';
 import { FlowModel, ModelRenderMode } from '../models/flowModel';
 
 describe('FlowModel.renderHiddenInConfig', () => {
-  it('renders via renderHiddenInConfig when hidden and config enabled (React element mode, mounted)', () => {
+  it('renders via renderHiddenInConfig when hidden and config enabled (React element mode, mounted)', async () => {
     class ElemModel extends FlowModel {
       render() {
         return <div data-testid="content">Content</div>;
@@ -28,14 +28,14 @@ describe('FlowModel.renderHiddenInConfig', () => {
     const model = new ElemModel({ uid: 'elem-1', flowEngine: engine });
 
     // runtime hidden => mounted result should be empty (no content/hidden)
-    engine.flowSettings.disable();
+    await engine.flowSettings.disable();
     model.setHidden(true);
     const { container, unmount, rerender } = render(model.render() as React.ReactElement);
     expect(screen.queryByTestId('content')).toBeNull();
     expect(screen.queryByTestId('hidden')).toBeNull();
 
     // config enabled + hidden => should show renderHiddenInConfig result
-    engine.flowSettings.enable();
+    await engine.flowSettings.enable();
     rerender(model.render() as React.ReactElement);
     expect(screen.getByTestId('hidden').textContent).toBe('HiddenViaAPI');
 
@@ -46,7 +46,7 @@ describe('FlowModel.renderHiddenInConfig', () => {
     unmount();
     cleanup();
   });
-  it('returns a render function when hidden and config enabled (RenderFunction mode)', () => {
+  it('returns a render function when hidden and config enabled (RenderFunction mode)', async () => {
     class FuncModel extends FlowModel {
       static override renderMode = ModelRenderMode.RenderFunction;
       render() {
@@ -63,13 +63,13 @@ describe('FlowModel.renderHiddenInConfig', () => {
     const model = engine.createModel({ use: 'FuncModel' }) as FuncModel;
 
     // runtime hidden => null
-    engine.flowSettings.disable();
+    await engine.flowSettings.disable();
     model.setHidden(true);
     const runtimeHidden = model.render();
     expect(runtimeHidden).toBeNull();
 
     // config enabled + hidden => renderHiddenInConfig (function)
-    engine.flowSettings.enable();
+    await engine.flowSettings.enable();
     const cfgHidden = model.render();
     expect(typeof cfgHidden).toBe('function');
     const cellNode = (cfgHidden as any)();

package/src/__tests__/runjsContext.test.ts

@@ -29,11 +29,16 @@ describe('flowRunJSContext registry and doc', () => {
       expect(RunJSContextRegistry['resolve']('v1' as any, '*')).toBeTruthy();
     });
 
+    it('should register v2 mapping', () => {
+      expect(RunJSContextRegistry['resolve']('v2' as any, '*')).toBeTruthy();
+    });
+
     it('should register all context types', () => {
       const contextTypes = [
         'JSBlockModel',
         'JSFieldModel',
         'JSItemModel',
+        'JSItemActionModel',
         'JSColumnModel',
         'FormJSFieldItemModel',
         'JSRecordActionModel',
@@ -44,12 +49,22 @@ describe('flowRunJSContext registry and doc', () => {
         const ctor = RunJSContextRegistry['resolve']('v1' as any, modelClass);
         expect(ctor).toBeTruthy();
       });
+
+      contextTypes.forEach((modelClass) => {
+        const ctor = RunJSContextRegistry['resolve']('v2' as any, modelClass);
+        expect(ctor).toBeTruthy();
+      });
     });
 
     it('should expose scene metadata for contexts', () => {
       expect(getRunJSScenesForModel('JSBlockModel', 'v1')).toEqual(['block']);
       expect(getRunJSScenesForModel('JSFieldModel', 'v1')).toEqual(['detail']);
+      expect(getRunJSScenesForModel('JSItemActionModel', 'v1')).toEqual(['table']);
+      expect(getRunJSScenesForModel('JSBlockModel', 'v2')).toEqual(['block']);
+      expect(getRunJSScenesForModel('JSFieldModel', 'v2')).toEqual(['detail']);
+      expect(getRunJSScenesForModel('JSItemActionModel', 'v2')).toEqual(['table']);
       expect(getRunJSScenesForModel('UnknownModel', 'v1')).toEqual([]);
+      expect(getRunJSScenesForModel('UnknownModel', 'v2')).toEqual([]);
     });
 
     it('should only execute once (idempotent)', async () => {
@@ -175,6 +190,7 @@ describe('flowRunJSContext registry and doc', () => {
       const ctx = new FlowContext();
       ctx.defineProperty('model', { value: { constructor: { name: 'JSColumnModel' } } });
       expect(getRunJSScenesForContext(ctx as any, { version: 'v1' })).toEqual(['table']);
+      expect(getRunJSScenesForContext(ctx as any, { version: 'v2' })).toEqual(['table']);
     });
 
     it('JSBlockModel context should have element property in doc', () => {

package/src/__tests__/runjsContextRuntime.test.ts

@@ -186,6 +186,7 @@ describe('RunJS Context Runtime Behavior', () => {
         'JSBlockModel',
         'JSFieldModel',
         'JSItemModel',
+        'JSItemActionModel',
         'JSColumnModel',
         'FormJSFieldItemModel',
         'JSRecordActionModel',
@@ -237,6 +238,7 @@ describe('RunJS Context Runtime Behavior', () => {
         'JSBlockModel',
         'JSFieldModel',
         'JSItemModel',
+        'JSItemActionModel',
         'JSColumnModel',
         'FormJSFieldItemModel',
         'JSRecordActionModel',

package/src/__tests__/runjsPreprocessDefault.test.ts

@@ -36,6 +36,29 @@ describe('ctx.runjs preprocessTemplates default', () => {
     expect(r.value).toBe('{{ctx.user.id}}');
   });
 
+  it('disables template preprocess by default for version v2', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context as any;
+    ctx.defineProperty('user', { value: { id: 123 } });
+
+    const r = await ctx.runjs('return "{{ctx.user.id}}";', undefined, { version: 'v2' });
+    expect(r.success).toBe(true);
+    expect(r.value).toBe('{{ctx.user.id}}');
+  });
+
+  it('keeps explicit preprocessTemplates override higher priority than version', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context as any;
+    ctx.defineProperty('user', { value: { id: 123 } });
+
+    const r = await ctx.runjs('return "{{ctx.user.id}}";', undefined, {
+      version: 'v2',
+      preprocessTemplates: true,
+    });
+    expect(r.success).toBe(true);
+    expect(r.value).toBe('123');
+  });
+
   it('does not double-preprocess already prepared code', async () => {
     const engine = new FlowEngine();
     const ctx = engine.context as any;

package/src/__tests__/runjsSnippets.test.ts

@@ -112,6 +112,27 @@ describe('RunJS Snippets', () => {
       expect(multiScene?.scenes).toEqual(expect.arrayContaining(['detail', 'table']));
       expect(multiScene?.groups).toEqual(expect.arrayContaining(['scene/detail', 'scene/table']));
     });
+
+    it('should expose new style snippets for matching contexts', async () => {
+      const tableSnippets = await listSnippetsForContext('JSColumnRunJSContext', 'v1', 'zh-CN');
+      const fieldSnippets = await listSnippetsForContext('FormJSFieldItemRunJSContext', 'v1', 'zh-CN');
+      const detailEventSnippets = await listSnippetsForContext('DetailsItemModel', 'v1', 'zh-CN');
+      const tableEventSnippets = await listSnippetsForContext('TableColumnModel', 'v1', 'zh-CN');
+
+      const tableStyle = tableSnippets.find((s) => s.ref === 'scene/table/set-cell-style');
+      expect(tableStyle?.name).toBe('表格字段样式设置');
+      expect(tableStyle?.body).toContain('ctx.model.props.onCell');
+      expect(tableStyle?.scenes).toEqual(['tableFieldEvent']);
+
+      const fieldStyle = fieldSnippets.find((s) => s.ref === 'scene/detail/set-field-style');
+      expect(fieldStyle?.name).toBe('设置表单项/详情项样式');
+      expect(fieldStyle?.body).toContain('ctx.model.props.style');
+      expect(fieldStyle?.scenes).toEqual(expect.arrayContaining(['detailFieldEvent', 'formFieldEvent']));
+      expect(fieldStyle?.groups).toEqual(expect.arrayContaining(['scene/detail', 'scene/form']));
+
+      expect(detailEventSnippets.some((s) => s.ref === 'scene/detail/set-field-style')).toBe(true);
+      expect(tableEventSnippets.some((s) => s.ref === 'scene/table/set-cell-style')).toBe(true);
+    });
   });
 
   describe('New snippets', () => {

package/src/__tests__/viewScopedFlowEngine.test.ts

@@ -256,11 +256,11 @@ describe('ViewScopedFlowEngine', () => {
 
     // Both children should return null from hydration because parent has flowSettingsEnabled
     // This is the bug fix: previously only children with their own flowSettingsEnabled would return null
-    const result1 = (scoped as any).hydrateModelFromPreviousEngines({
+    const result1 = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-with-settings',
       subKey: 'popup',
     });
-    const result2 = (scoped as any).hydrateModelFromPreviousEngines({
+    const result2 = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-with-settings',
       subKey: 'items',
     });
@@ -298,7 +298,7 @@ describe('ViewScopedFlowEngine', () => {
     const scoped = createViewScopedEngine(root);
 
     // Call the private method hydrateModelFromPreviousEngines directly
-    const result = (scoped as any).hydrateModelFromPreviousEngines({
+    const result = await (scoped as any).hydrateModelFromPreviousEngines({
       parentId: 'parent-normal',
       subKey: 'content',
     });

package/src/components/FieldModelRenderer.tsx

@@ -7,7 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowModelRenderer, FlowModelRendererProps } from '@nocobase/flow-engine';
+import type { FlowModelRendererProps } from './FlowModelRenderer';
+import { FlowModelRenderer } from './FlowModelRenderer';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef } from 'react';
 

package/src/components/FlowModelRenderer.tsx

@@ -69,7 +69,9 @@ export interface FlowModelRendererProps {
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
-        /** 自定义工具栏样式 */
+        /** 是否显示事件流入口，默认 true */
+        showDynamicFlowsEditor?: boolean;
+        /** 自定义工具栏样式，`top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'
@@ -112,6 +114,8 @@ const FlowModelRendererWithAutoFlows: React.FC<{
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
+        showDynamicFlowsEditor?: boolean;
+        /** `top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'
@@ -126,6 +130,7 @@ const FlowModelRendererWithAutoFlows: React.FC<{
   settingsMenuLevel?: number;
   extraToolbarItems?: ToolbarItemConfig[];
   fallback?: React.ReactNode;
+  useCache?: boolean;
 }> = observer(
   ({
     model,
@@ -138,12 +143,12 @@ const FlowModelRendererWithAutoFlows: React.FC<{
     settingsMenuLevel,
     extraToolbarItems,
     fallback,
+    useCache,
   }) => {
     // hidden 占位由模型自身处理；无需在此注入
-
     const { loading: pending, error: autoFlowsError } = useApplyAutoFlows(model, inputArgs, {
       throwOnError: false,
-      useCache: model.context.useCache,
+      useCache,
     });
     // 将错误下沉到 model 实例上，供内容层读取（类型安全的 WeakMap 存储）
     setAutoFlowError(model, autoFlowsError || null);
@@ -182,6 +187,8 @@ const FlowModelRendererCore: React.FC<{
         showBackground?: boolean;
         showBorder?: boolean;
         showDragHandle?: boolean;
+        showDynamicFlowsEditor?: boolean;
+        /** `top/left/right/bottom` 会作为 portal overlay 的 inset 使用 */
         style?: React.CSSProperties;
         /**
          * @default 'inside'
@@ -251,6 +258,7 @@ const FlowModelRendererCore: React.FC<{
             showBackground={_.isObject(showFlowSettings) ? showFlowSettings.showBackground : undefined}
             showBorder={_.isObject(showFlowSettings) ? showFlowSettings.showBorder : undefined}
             showDragHandle={_.isObject(showFlowSettings) ? showFlowSettings.showDragHandle : undefined}
+            showDynamicFlowsEditor={_.isObject(showFlowSettings) ? showFlowSettings.showDynamicFlowsEditor : undefined}
             settingsMenuLevel={settingsMenuLevel}
             extraToolbarItems={extraToolbarItems}
             toolbarStyle={_.isObject(showFlowSettings) ? showFlowSettings.style : undefined}
@@ -297,6 +305,7 @@ const FlowModelRendererCore: React.FC<{
             showBackground={_.isObject(showFlowSettings) ? showFlowSettings.showBackground : undefined}
             showBorder={_.isObject(showFlowSettings) ? showFlowSettings.showBorder : undefined}
             showDragHandle={_.isObject(showFlowSettings) ? showFlowSettings.showDragHandle : undefined}
+            showDynamicFlowsEditor={_.isObject(showFlowSettings) ? showFlowSettings.showDynamicFlowsEditor : undefined}
             settingsMenuLevel={settingsMenuLevel}
             extraToolbarItems={extraToolbarItems}
             toolbarStyle={_.isObject(showFlowSettings) ? showFlowSettings.style : undefined}
@@ -346,13 +355,15 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
     extraToolbarItems,
     useCache,
   }) => {
+    const resolvedUseCache = typeof useCache === 'boolean' ? useCache : model?.context?.useCache;
+
     useEffect(() => {
-      if (model?.context) {
+      if (model?.context && typeof resolvedUseCache !== 'undefined') {
         model.context.defineProperty('useCache', {
-          value: typeof useCache === 'boolean' ? useCache : model.context.useCache,
+          value: resolvedUseCache,
         });
       }
-    }, [model?.context, useCache]);
+    }, [model?.context, resolvedUseCache]);
 
     if (!model || typeof model.render !== 'function') {
       // 可以选择渲染 null 或者一个错误/提示信息
@@ -373,6 +384,7 @@ export const FlowModelRenderer: React.FC<FlowModelRendererProps> = observer(
         settingsMenuLevel={settingsMenuLevel}
         extraToolbarItems={extraToolbarItems}
         fallback={fallback}
+        useCache={resolvedUseCache}
       />
     );
 

package/src/components/FormItem.tsx

@@ -19,6 +19,9 @@ interface ExtendedFormItemProps extends FormItemProps {
   showLabel?: boolean;
 }
 
+export const verticalFormItemLabelStyle = { paddingBottom: 0 };
+export const formItemStyle = { marginBottom: 12 };
+
 const formItemPropKeys: (keyof ExtendedFormItemProps)[] = [
   'colon',
   'dependencies',
@@ -73,6 +76,8 @@ export const FormItem = ({
         });
   const { label, labelWrap, colon = true, layout } = rest;
   const effectiveLabelWrap = !layout || layout === 'vertical' ? true : labelWrap;
+  const labelColStyle =
+    layout === 'vertical' ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
   const renderLabel = () => {
     if (!showLabel) return null;
     if (effectiveLabelWrap) {
@@ -118,7 +123,8 @@ export const FormItem = ({
   return (
     <Form.Item
       {...rest}
-      labelCol={{ style: { width: labelWidth } }}
+      style={{ ...formItemStyle, ...rest.style }}
+      labelCol={{ style: labelColStyle }}
       layout={layout}
       label={renderLabel()}
       colon={false}

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__/FlowModelRenderer.test.tsx

@@ -38,9 +38,8 @@ describe('FlowModelRenderer', () => {
   test('should pass useCache to useApplyAutoFlows and set it on context', async () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={true} />);
 
-    // Check if dispatchEvent was called with useCache: true
-    // useApplyAutoFlows calls dispatchEvent('beforeRender', inputArgs, { useCache })
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -58,6 +57,7 @@ describe('FlowModelRenderer', () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} useCache={false} />);
 
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -74,6 +74,7 @@ describe('FlowModelRenderer', () => {
     const { unmount } = renderWithProvider(<FlowModelRenderer model={model} />);
 
     await waitFor(() => {
+      expect(model.dispatchEvent).toHaveBeenCalledTimes(1);
       expect(model.dispatchEvent).toHaveBeenCalledWith(
         'beforeRender',
         undefined,
@@ -86,4 +87,66 @@ describe('FlowModelRenderer', () => {
 
     unmount();
   });
+
+  test('should clear stale beforeRender state after unmount when reusing the same model', async () => {
+    const statefulEngine = new FlowEngine();
+    const onMountSpy = vi.fn();
+    const onUnmountSpy = vi.fn();
+
+    class StatefulModel extends FlowModel {
+      render(): any {
+        return <div>Stateful Content</div>;
+      }
+
+      protected onMount(): void {
+        onMountSpy();
+      }
+
+      protected onUnmount(): void {
+        onUnmountSpy();
+      }
+    }
+
+    const statefulModel = new StatefulModel({
+      uid: 'stateful-model',
+      flowEngine: statefulEngine,
+    });
+    const executorSpy = vi.spyOn((statefulEngine as any).executor, 'dispatchEvent').mockResolvedValue([]);
+
+    const firstRender = renderWithProvider(<FlowModelRenderer model={statefulModel} />);
+    await waitFor(() => {
+      expect(executorSpy).toHaveBeenCalledTimes(1);
+    });
+    await waitFor(() => {
+      expect(onMountSpy).toHaveBeenCalledTimes(1);
+    });
+
+    firstRender.unmount();
+    await waitFor(() => {
+      expect(onUnmountSpy).toHaveBeenCalledTimes(1);
+    });
+
+    executorSpy.mockClear();
+    statefulModel.setStepParams('anyFlow', 'anyStep', { x: 1 });
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    expect(executorSpy.mock.calls.length).toBe(0);
+
+    const secondRender = renderWithProvider(<FlowModelRenderer model={statefulModel} />);
+    await waitFor(() => {
+      expect(executorSpy).toHaveBeenCalledTimes(1);
+    });
+    await waitFor(() => {
+      expect(onMountSpy).toHaveBeenCalledTimes(2);
+    });
+    const [target, eventName, inputArgs, options] = executorSpy.mock.calls[0];
+    expect(target).toBe(statefulModel);
+    expect(eventName).toBe('beforeRender');
+    expect(inputArgs).toBeUndefined();
+    expect(options).toMatchObject({ useCache: true });
+
+    secondRender.unmount();
+    await waitFor(() => {
+      expect(onUnmountSpy).toHaveBeenCalledTimes(2);
+    });
+  });
 });

package/src/components/__tests__/FormItem.test.tsx

@@ -0,0 +1,25 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
+
+describe('FormItem', () => {
+  it('keeps vertical label-to-value spacing consistent with v1', () => {
+    expect(verticalFormItemLabelStyle).toEqual({
+      paddingBottom: 0,
+    });
+  });
+
+  it('keeps spacing between form items consistent with v1', () => {
+    expect(formItemStyle).toEqual({
+      marginBottom: 12,
+    });
+  });
+});

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

@@ -0,0 +1,44 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { resolveOverlayAnchorTransform } from '../dnd';
+
+describe('resolveOverlayAnchorTransform', () => {
+  it('should keep the original transform when anchor point is missing', () => {
+    const transform = { x: 24, y: 36, scaleX: 1, scaleY: 1 };
+
+    expect(
+      resolveOverlayAnchorTransform({
+        activeId: 'menu-item-1',
+        active: { id: 'menu-item-1' },
+        transform,
+        activeNodeRect: { top: 80, left: 120 },
+        dragAnchorPoint: null,
+      }),
+    ).toEqual(transform);
+  });
+
+  it('should align the overlay origin to the pointer position when dragging from toolbar handle', () => {
+    expect(
+      resolveOverlayAnchorTransform({
+        activeId: 'menu-item-1',
+        active: { id: 'menu-item-1' },
+        transform: { x: 20, y: 30, scaleX: 1, scaleY: 1 },
+        activeNodeRect: { top: 200, left: 100 },
+        dragAnchorPoint: { x: 180, y: 260 },
+      }),
+    ).toEqual({
+      x: 100,
+      y: 90,
+      scaleX: 1,
+      scaleY: 1,
+    });
+  });
+});