@nocobase/flow-engine 2.2.0-beta.6 → 2.2.0-beta.8

package/lib/utils/openViewRouteState.js

@@ -0,0 +1,125 @@
+/**
+ * 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.
+ */
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var openViewRouteState_exports = {};
+__export(openViewRouteState_exports, {
+  RUNJS_OPEN_VIEW_ROUTE_STATE: () => RUNJS_OPEN_VIEW_ROUTE_STATE,
+  createOpenViewRouteState: () => createOpenViewRouteState,
+  decodeOpenViewRouteState: () => decodeOpenViewRouteState,
+  encodeOpenViewRouteState: () => encodeOpenViewRouteState,
+  isOpenViewRouteStateToken: () => isOpenViewRouteStateToken
+});
+module.exports = __toCommonJS(openViewRouteState_exports);
+const OPEN_VIEW_ROUTE_MODES = ["drawer", "dialog", "embed"];
+const OPEN_VIEW_ROUTE_SIZES = ["small", "medium", "large"];
+const OPEN_VIEW_ROUTE_STATE_TOKEN_ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const OPEN_VIEW_ROUTE_STATE_TOKEN_LENGTH = 8;
+const RUNJS_OPEN_VIEW_ROUTE_STATE = Symbol.for("nocobase.runjs.openViewRouteState");
+function isOpenViewRouteMode(value) {
+  return typeof value === "string" && OPEN_VIEW_ROUTE_MODES.includes(value);
+}
+__name(isOpenViewRouteMode, "isOpenViewRouteMode");
+function isOpenViewRouteSize(value) {
+  return typeof value === "string" && OPEN_VIEW_ROUTE_SIZES.includes(value);
+}
+__name(isOpenViewRouteSize, "isOpenViewRouteSize");
+function createOpenViewRouteState(input) {
+  const state = {};
+  if (isOpenViewRouteMode(input == null ? void 0 : input.mode)) {
+    state.mode = input.mode;
+  }
+  if (isOpenViewRouteSize(input == null ? void 0 : input.size)) {
+    state.size = input.size;
+  }
+  return state.mode || state.size ? state : void 0;
+}
+__name(createOpenViewRouteState, "createOpenViewRouteState");
+function hashString(value) {
+  let hash = 2166136261;
+  for (let i = 0; i < value.length; i++) {
+    hash ^= value.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+__name(hashString, "hashString");
+function stateToCode(state) {
+  const modeIndex = state.mode ? OPEN_VIEW_ROUTE_MODES.indexOf(state.mode) + 1 : 0;
+  const sizeIndex = state.size ? OPEN_VIEW_ROUTE_SIZES.indexOf(state.size) + 1 : 0;
+  const code = modeIndex * 4 + sizeIndex;
+  return code > 0 ? code : void 0;
+}
+__name(stateToCode, "stateToCode");
+function codeToState(code) {
+  const modeIndex = Math.floor(code / 4);
+  const sizeIndex = code % 4;
+  return createOpenViewRouteState({
+    mode: modeIndex ? OPEN_VIEW_ROUTE_MODES[modeIndex - 1] : void 0,
+    size: sizeIndex ? OPEN_VIEW_ROUTE_SIZES[sizeIndex - 1] : void 0
+  });
+}
+__name(codeToState, "codeToState");
+function tokenForCode(viewUid, code) {
+  let seed = hashString(`${viewUid}:${code}`);
+  let token = "";
+  for (let i = 0; i < OPEN_VIEW_ROUTE_STATE_TOKEN_LENGTH; i++) {
+    seed = Math.imul(seed ^ code + i * 17, 16777619) >>> 0;
+    token += OPEN_VIEW_ROUTE_STATE_TOKEN_ALPHABET[seed % OPEN_VIEW_ROUTE_STATE_TOKEN_ALPHABET.length];
+  }
+  return token;
+}
+__name(tokenForCode, "tokenForCode");
+function isOpenViewRouteStateToken(value) {
+  return typeof value === "string" && value.length === OPEN_VIEW_ROUTE_STATE_TOKEN_LENGTH && [...value].every((char) => OPEN_VIEW_ROUTE_STATE_TOKEN_ALPHABET.includes(char));
+}
+__name(isOpenViewRouteStateToken, "isOpenViewRouteStateToken");
+function encodeOpenViewRouteState(viewUid, input) {
+  const state = createOpenViewRouteState(input);
+  const code = state ? stateToCode(state) : void 0;
+  return code ? tokenForCode(viewUid, code) : void 0;
+}
+__name(encodeOpenViewRouteState, "encodeOpenViewRouteState");
+function decodeOpenViewRouteState(viewUid, token) {
+  if (!isOpenViewRouteStateToken(token)) {
+    return void 0;
+  }
+  for (let code = 1; code < 16; code++) {
+    if (tokenForCode(viewUid, code) === token) {
+      return codeToState(code);
+    }
+  }
+  return void 0;
+}
+__name(decodeOpenViewRouteState, "decodeOpenViewRouteState");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RUNJS_OPEN_VIEW_ROUTE_STATE,
+  createOpenViewRouteState,
+  decodeOpenViewRouteState,
+  encodeOpenViewRouteState,
+  isOpenViewRouteStateToken
+});

package/lib/utils/parsePathnameToViewParams.d.ts

@@ -6,6 +6,7 @@
  * 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 { type OpenViewRouteState } from './openViewRouteState';
 export interface ViewParam {
     /** 视图唯一标识符，一般为某个 Model 实例的 uid */
     viewUid: string;
@@ -15,6 +16,8 @@ export interface ViewParam {
     filterByTk?: string | Record<string, string | number>;
     /** source Id */
     sourceId?: string;
+    /** RunJS ctx.openView runtime display overrides decoded from URL. */
+    openViewRouteState?: OpenViewRouteState;
 }
 export interface ParsePathnameToViewParamsOptions {
     rootPrefix?: string;

package/lib/utils/parsePathnameToViewParams.js

@@ -30,6 +30,7 @@ __export(parsePathnameToViewParams_exports, {
   parsePathnameToViewParams: () => parsePathnameToViewParams
 });
 module.exports = __toCommonJS(parsePathnameToViewParams_exports);
+var import_openViewRouteState = require("./openViewRouteState");
 const normalizePathname = /* @__PURE__ */ __name((pathname) => {
   if (!pathname || pathname === "/") {
     return "/";
@@ -77,7 +78,23 @@ const parsePathnameToViewParams = /* @__PURE__ */ __name((pathname, options = {}
       } else {
         break;
       }
-    } else if (currentView && i + 1 < segments.length) {
+    } else if (currentView) {
+      if (segment === "opts") {
+        if (i + 1 < segments.length) {
+          const routeState = (0, import_openViewRouteState.decodeOpenViewRouteState)(currentView.viewUid, segments[i + 1]);
+          if (routeState) {
+            currentView.openViewRouteState = routeState;
+          }
+          i += 2;
+        } else {
+          i++;
+        }
+        continue;
+      }
+      if (i + 1 >= segments.length) {
+        i++;
+        continue;
+      }
       const rawValue = segments[i + 1];
       let decoded = rawValue;
       try {

package/lib/views/ViewNavigation.js

@@ -32,6 +32,7 @@ __export(ViewNavigation_exports, {
 });
 module.exports = __toCommonJS(ViewNavigation_exports);
 var import_reactive = require("../reactive");
+var import_utils = require("../utils");
 function encodeFilterByTk(val) {
   if (val === void 0 || val === null) return "";
   if (val && typeof val === "object" && !Array.isArray(val)) {
@@ -63,6 +64,10 @@ function generatePathnameFromViewParams(viewParams, options = {}) {
       segments.push("view");
     }
     segments.push(viewParam.viewUid);
+    const openViewRouteStateToken = (0, import_utils.encodeOpenViewRouteState)(viewParam.viewUid, viewParam.openViewRouteState);
+    if (openViewRouteStateToken) {
+      segments.push("opts", openViewRouteStateToken);
+    }
     if (viewParam.tabUid) {
       segments.push("tab", viewParam.tabUid);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.2.0-beta.6",
+  "version": "2.2.0-beta.8",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.2.0-beta.6",
-    "@nocobase/shared": "2.2.0-beta.6",
+    "@nocobase/sdk": "2.2.0-beta.8",
+    "@nocobase/shared": "2.2.0-beta.8",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "dc9246516f8a3efd6056f22fe7b3bc947bd4575b"
+  "gitHead": "fa2502c1e9faf6d74b3f51b42dbc6546638d46af"
 }

package/src/__tests__/flowContext.test.ts

@@ -14,6 +14,8 @@ import { FlowEngine } from '../flowEngine';
 import { FlowModel } from '../models/flowModel';
 import { RunJSContextRegistry } from '../runjs-context/registry';
 import { setupRunJSContexts } from '../runjs-context/setup';
+import { createViewScopedEngine } from '../ViewScopedFlowEngine';
+import { DATA_SOURCE_DIRTY_EVENT } from '../views/viewEvents';
 
 describe('FlowContext properties and methods', () => {
   it('should return static property value', () => {
@@ -177,6 +179,49 @@ describe('FlowContext properties and methods', () => {
     });
   });
 
+  it('should expose current role as a top-level variable', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: 'admin' } } });
+
+    expect(ctx.role).toBe('admin');
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toBe('admin');
+
+    const roleNode = ctx.getPropertyMetaTree().find((node) => node.name === 'role');
+    expect(roleNode).toMatchObject({
+      name: 'role',
+      title: '{{t("Current role")}}',
+      paths: ['role'],
+    });
+  });
+
+  it('should expose actual role names for union role mode', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: '__union__' } } });
+    ctx.defineProperty('user', {
+      value: {
+        roles: [
+          { name: 'admin', title: 'Admin' },
+          { name: 'member', title: 'Member' },
+        ],
+      },
+    });
+
+    expect(ctx.role).toEqual(['admin', 'member']);
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toEqual(['admin', 'member']);
+  });
+
+  it('should expose an empty role list for union role mode without user roles', async () => {
+    const engine = new FlowEngine();
+    const ctx = engine.context;
+    ctx.defineProperty('api', { value: { auth: { role: '__union__' } } });
+    ctx.defineProperty('user', { value: {} });
+
+    expect(ctx.role).toEqual([]);
+    await expect(ctx.resolveJsonTemplate('{{ ctx.role }}')).resolves.toEqual([]);
+  });
+
   it('should throw sync error in get', () => {
     const ctx = new FlowContext();
     ctx.defineProperty('error', {
@@ -1386,6 +1431,92 @@ describe('FlowEngine context', () => {
     expect(engine.context.appName).toBe('NocoBase');
   });
 
+  it('ctx.api should return a dirty-aware wrapper for static api properties', async () => {
+    const engine = new FlowEngine();
+    const update = vi.fn(async () => ({ data: { data: { id: 1 } } }));
+    const api = {
+      auth: { locale: 'zh-CN' },
+      request: vi.fn(async () => ({ data: { ok: true } })),
+      resource: vi.fn(() => ({ update })),
+    };
+    engine.context.defineProperty('api', { value: api });
+
+    await engine.context.api.resource('posts').update({ filterByTk: 1, values: { title: 't' } });
+
+    expect(update).toHaveBeenCalledTimes(1);
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(engine.context.api).toBe(engine.context.api);
+  });
+
+  it('ctx.api should stay dirty-aware when resolved from a scoped context delegate', async () => {
+    const root = new FlowEngine();
+    const scoped = createViewScopedEngine(root);
+    const update = vi.fn(async () => ({ data: { data: { id: 1 } } }));
+    root.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request: vi.fn(async () => ({ data: { ok: true } })),
+        resource: vi.fn(() => ({ update })),
+      },
+    });
+
+    await scoped.context.api.resource('posts').update({ filterByTk: 1, values: { title: 't' } });
+
+    expect(update).toHaveBeenCalledTimes(1);
+    expect(root.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(scoped.context.engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+  });
+
+  it('ctx.request should use the dirty-aware api wrapper', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn(async () => ({ data: { ok: true } }));
+    engine.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request,
+        resource: vi.fn(),
+      },
+    });
+
+    await engine.context.request({
+      resource: 'posts',
+      action: 'update',
+      headers: { 'X-Data-Source': 'analytics' },
+      params: { filterByTk: 1 },
+    } as any);
+
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(engine.getDataSourceDirtyVersion('analytics', 'posts')).toBe(1);
+  });
+
+  it('ctx.request should use the caller context when resolved through a scoped delegate', async () => {
+    const root = new FlowEngine();
+    const scoped = createViewScopedEngine(root);
+    const callerCtx = new FlowContext();
+    const dirtyEvents: Array<{ dataSourceKey: string; resourceNames: string[] }> = [];
+    const request = vi.fn(async () => ({ data: { ok: true } }));
+    root.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request,
+        resource: vi.fn(),
+      },
+    });
+    callerCtx.addDelegate(scoped.context);
+    scoped.context.engine.emitter.on(DATA_SOURCE_DIRTY_EVENT, (event) => dirtyEvents.push(event));
+
+    await callerCtx.request({
+      resource: 'posts',
+      action: 'update',
+      params: { filterByTk: 1 },
+    } as any);
+
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(root.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(scoped.context.engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(dirtyEvents).toEqual([{ dataSourceKey: 'main', resourceNames: ['posts'] }]);
+  });
+
   it('ctx.sql should resolve template variables from caller context in delegate chain', async () => {
     const engine = new FlowEngine();
     const request = vi.fn(async () => ({ data: { data: [] } }));

package/src/__tests__/flowEngine.dataSourceDirty.test.ts

@@ -11,6 +11,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { FlowEngine } from '../flowEngine';
 import { MultiRecordResource } from '../resources/multiRecordResource';
 import { SingleRecordResource } from '../resources/singleRecordResource';
+import { DATA_SOURCE_DIRTY_EVENT } from '../views/viewEvents';
 
 describe('FlowEngine dataSource dirty registry', () => {
   it('tracks versions per dataSourceKey + resourceName', () => {
@@ -60,4 +61,54 @@ describe('FlowEngine dataSource dirty registry', () => {
     // plus root collection (safety)
     expect(markSpy).toHaveBeenCalledWith('main', 'users');
   });
+
+  it('marks dirty once for record write helpers when using the dirty-aware context api', async () => {
+    const engine = new FlowEngine();
+    const request = vi.fn(async () => ({ data: { data: { id: 1 }, meta: {} } }));
+    const dirtyEvents: Array<{ dataSourceKey: string; resourceNames: string[] }> = [];
+    engine.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request,
+        resource: vi.fn(),
+      },
+    });
+    engine.emitter.on(DATA_SOURCE_DIRTY_EVENT, (event) => dirtyEvents.push(event));
+
+    const multi = engine.createResource(MultiRecordResource);
+    multi.setDataSourceKey('main').setResourceName('posts');
+    await multi.create({ title: 't' } as any, { refresh: false });
+
+    expect(request).toHaveBeenCalledTimes(1);
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+    expect(dirtyEvents).toEqual([{ dataSourceKey: 'main', resourceNames: ['posts'] }]);
+
+    const single = engine.createResource(SingleRecordResource);
+    single.setDataSourceKey('main').setResourceName('posts').setFilterByTk(1);
+    await single.save({ title: 'u' } as any, { refresh: false });
+
+    expect(request).toHaveBeenCalledTimes(2);
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(2);
+    expect(dirtyEvents).toEqual([
+      { dataSourceKey: 'main', resourceNames: ['posts'] },
+      { dataSourceKey: 'main', resourceNames: ['posts'] },
+    ]);
+  });
+
+  it('still marks dirty for direct runAction writes', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('api', {
+      value: {
+        auth: { locale: 'zh-CN' },
+        request: vi.fn(async () => ({ data: { data: { id: 1 }, meta: {} } })),
+        resource: vi.fn(),
+      },
+    });
+
+    const multi = engine.createResource(MultiRecordResource);
+    multi.setDataSourceKey('main').setResourceName('posts');
+    await multi.runAction('create', { data: { title: 't' } });
+
+    expect(engine.getDataSourceDirtyVersion('main', 'posts')).toBe(1);
+  });
 });

package/src/__tests__/runjsRuntimeFeatures.test.ts

@@ -8,9 +8,9 @@
  */
 
 import { describe, it, expect, beforeAll, vi } from 'vitest';
-import { FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { FlowContext, FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { RUNJS_OPEN_VIEW_ROUTE_STATE } from '../utils/openViewRouteState';
 import { FlowEngine } from '../flowEngine';
-import { FlowContext } from '../flowContext';
 import { setupRunJSContexts } from '../runjs-context/setup';
 import { createJSRunnerWithVersion } from '..';
 import { RunJSContextRegistry } from '../runjs-context/registry';
@@ -267,6 +267,19 @@ describe('RunJS Runtime Features', () => {
       expect(runCtx.libs.dayjs).toBeDefined();
       expect(runCtx.libs.antdIcons).toBeDefined();
     });
+
+    it('should mark ctx.openView calls with route state only when RunJS passes display overrides', async () => {
+      const parentCtx = new FlowContext();
+      const openView = vi.fn(async () => undefined);
+      parentCtx.defineMethod('openView', openView);
+
+      const runCtx = new FlowRunJSContext(parentCtx);
+      await (runCtx as any).openView('popup', { mode: 'dialog', size: 'large' });
+      await (runCtx as any).openView('popup', { filterByTk: 1 });
+
+      expect(openView.mock.calls[0][1][RUNJS_OPEN_VIEW_ROUTE_STATE]).toEqual({ mode: 'dialog', size: 'large' });
+      expect(Object.prototype.hasOwnProperty.call(openView.mock.calls[1][1], RUNJS_OPEN_VIEW_ROUTE_STATE)).toBe(false);
+    });
   });
 
   describe('Actual code execution', () => {

package/src/components/MobilePopup.style.ts

@@ -11,7 +11,7 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { merge } from '@formily/shared';
 import type { ComponentTokenMap } from 'antd/es/theme/interface';
-import { useMemo, useContext } from 'react';
+import { useContext, useRef } from 'react';
 import { ConfigProvider, theme } from 'antd';
 
 const usePrefixCls = (
@@ -83,6 +83,10 @@ type UseComponentStyleResult = {
   componentCls: string;
   rootPrefixCls: string;
 };
+type WrapSSRCache = {
+  deps: unknown[];
+  wrapSSR: ReturnType<typeof useStyleRegister>;
+};
 
 const genStyleHook = <ComponentName extends OverrideComponent>(
   component: ComponentName,
@@ -122,9 +126,18 @@ const genStyleHook = <ComponentName extends OverrideComponent>(
 
     // useStyleRegister 有 BUG，会导致重复渲染，所以这里做了一层缓存
     // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
-    const memoizedWrapSSR = useMemo(() => {
-      return wrapSSR;
-    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    const wrapSSRDeps = [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props];
+    const wrapSSRCacheRef = useRef<WrapSSRCache>();
+    const currentCache = wrapSSRCacheRef.current;
+    let memoizedWrapSSR: ReturnType<typeof useStyleRegister> = currentCache?.wrapSSR || wrapSSR;
+
+    if (!currentCache || wrapSSRDeps.some((dep, index) => dep !== currentCache.deps[index])) {
+      wrapSSRCacheRef.current = {
+        deps: wrapSSRDeps,
+        wrapSSR,
+      };
+      memoizedWrapSSR = wrapSSR;
+    }
 
     return {
       wrapSSR: memoizedWrapSSR,
@@ -140,7 +153,7 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
   return {
     [componentCls]: {
       '.nb-mobile-action-drawer-header': {
-        height: 'var(--nb-mobile-page-header-height)',
+        height: 'var(--nb-mobile-page-header-height, 46px)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -171,7 +184,10 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-body': {
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
-        maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+        maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+        '@supports (height: 100dvh)': {
+          maxHeight: 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))',
+        },
         overflowY: 'auto',
         overflowX: 'hidden',
         backgroundColor: token.colorBgLayout,

package/src/components/__tests__/MobilePopup.style.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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, { CSSProperties, ReactNode } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import { vi } from 'vitest';
+import { MobilePopup } from '../MobilePopup';
+import { useMobileActionDrawerStyle } from '../MobilePopup.style';
+
+vi.mock('antd-mobile', () => ({
+  Popup: ({
+    bodyClassName,
+    bodyStyle,
+    children,
+    className,
+    visible,
+  }: {
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    children?: ReactNode;
+    className?: string;
+    visible?: boolean;
+  }) =>
+    visible ? (
+      <div className={className} data-testid="popup-root">
+        <div className={`adm-popup-body ${bodyClassName || ''}`} data-testid="popup-body" style={bodyStyle}>
+          {children}
+        </div>
+      </div>
+    ) : null,
+}));
+
+vi.mock('antd-mobile-icons', () => ({
+  CloseOutline: () => <span data-testid="close-outline" />,
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+function StyleProbe() {
+  const { componentCls, hashId } = useMobileActionDrawerStyle();
+
+  return (
+    <div className={`${componentCls} ${hashId}`}>
+      <div className="nb-mobile-action-drawer-header" data-testid="drawer-header" />
+      <div className="nb-mobile-action-drawer-body" data-testid="drawer-body" />
+    </div>
+  );
+}
+
+function getInjectedStyles() {
+  return Array.from(document.querySelectorAll('style'))
+    .map((style) => style.textContent || '')
+    .join('\n')
+    .replace(/\s+/g, '');
+}
+
+describe('MobilePopup styles', () => {
+  it('mounts the action drawer class on the real popup body', async () => {
+    render(
+      <MobilePopup visible title="Edit" onClose={vi.fn()}>
+        <div style={{ height: 1200 }}>Long content</div>
+      </MobilePopup>,
+    );
+
+    const popupBody = await screen.findByTestId('popup-body');
+
+    expect(screen.getByTestId('popup-root')).toHaveClass('ant-nb-mobile-action-drawer');
+    expect(popupBody).toHaveClass('adm-popup-body');
+    expect(popupBody).toHaveClass('nb-mobile-action-drawer-body');
+    expect(popupBody).toHaveStyle({ padding: '0px' });
+  });
+
+  it('limits the mobile action drawer body by viewport height', async () => {
+    render(
+      <ConfigProvider>
+        <StyleProbe />
+      </ConfigProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getInjectedStyles()).toContain('.nb-mobile-action-drawer-body');
+    });
+
+    const styles = getInjectedStyles();
+
+    expect(styles).toContain('height:var(--nb-mobile-page-header-height,46px)');
+    expect(styles).toContain('max-height:calc(100vh-var(--nb-mobile-page-header-height,46px))');
+    expect(styles).toContain('max-height:calc(100dvh-var(--nb-mobile-page-header-height,46px))');
+    expect(styles).toContain('overflow-y:auto');
+    expect(styles).not.toContain('max-height:calc(100%-var(--nb-mobile-page-header-height))');
+  });
+});

package/src/components/dnd/index.tsx

@@ -35,6 +35,10 @@ type ToolbarDragAnchorDetail = {
   point: ToolbarDragAnchorPoint | null;
 };
 
+const getToolbarModelUidFromNode = (node: HTMLElement | null): string | null => {
+  return node?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]')?.getAttribute('data-model-uid') || null;
+};
+
 export const resolveOverlayAnchorTransform = ({
   activeId,
   active,
@@ -62,7 +66,7 @@ export const resolveOverlayAnchorTransform = ({
 const resolveDraggableHostNode = (activatorNode: HTMLElement | null) => {
   const ownerDocument = activatorNode?.ownerDocument;
   const floatToolbarContainer = activatorNode?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]');
-  const toolbarModelUid = floatToolbarContainer?.getAttribute('data-model-uid');
+  const toolbarModelUid = getToolbarModelUidFromNode(activatorNode);
 
   if (!ownerDocument || !toolbarModelUid) {
     return activatorNode;
@@ -95,6 +99,7 @@ export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> =
   const dragHandlerRef = useRef<HTMLSpanElement | null>(null);
   const draggableNodeRef = useRef<HTMLElement | null>(null);
   const pointerPressCleanupRef = useRef<(() => void) | null>(null);
+  const toolbarDragModelUidRef = useRef<string | null>(null);
   const isDraggingRef = useRef(isDragging);
   const isPointerPressActiveRef = useRef(false);
   const isToolbarDragActiveRef = useRef(false);
@@ -126,9 +131,13 @@ export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> =
         return;
       }
 
+      const toolbarModelUid =
+        getToolbarModelUidFromNode(dragHandlerRef.current) || toolbarDragModelUidRef.current || model.uid;
+      toolbarDragModelUidRef.current = active ? toolbarModelUid : null;
+
       ownerDocument.dispatchEvent(
         new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
-          detail: { active, modelUid: model.uid },
+          detail: { active, modelUid: toolbarModelUid },
         }),
       );
     },