@nocobase/flow-engine 2.2.0-alpha.5 → 2.2.0-alpha.7

package/lib/components/FlowContextSelector.js

@@ -243,8 +243,8 @@ const FlowContextSelectorComponent = /* @__PURE__ */ __name(({
   }, [options, pathToPreload, triggerUpdate]);
   const defaultChildren = (0, import_react.useMemo)(() => {
     const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: hasSelected ? "primary" : "default", style: defaultButtonStyle }, "x");
-  }, [active, currentPath]);
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: hasSelected ? "primary" : "default", style: defaultButtonStyle, disabled: cascaderProps.disabled }, "x");
+  }, [active, cascaderProps.disabled, currentPath]);
   const handleChange = (0, import_react.useCallback)(
     (selectedValues, selectedOptions) => {
       const lastOption = selectedOptions == null ? void 0 : selectedOptions[selectedOptions.length - 1];

package/lib/components/FormItem.js

@@ -77,14 +77,18 @@ const formItemPropKeys = [
   "required",
   "showLabel"
 ];
+const modelInternalPropKeys = ["globalSort"];
 const FormItem = /* @__PURE__ */ __name(({
   children,
   showLabel = true,
   labelWidth,
   ...rest
 }) => {
+  const forwardedRest = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !modelInternalPropKeys.includes(key))
+  );
   const childProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key))
+    Object.entries(forwardedRest).filter(([key]) => !formItemPropKeys.includes(key))
   );
   const processedChildren = typeof children === "function" ? children : import_react.default.Children.map(children, (child) => {
     if (import_react.default.isValidElement(child)) {
@@ -92,7 +96,7 @@ const FormItem = /* @__PURE__ */ __name(({
     }
     return child;
   });
-  const { label, labelWrap, colon = true, layout } = rest;
+  const { label, labelWrap, colon = true, layout } = forwardedRest;
   const effectiveLabelWrap = !layout || layout === "vertical" ? true : labelWrap;
   const labelColStyle = layout === "vertical" ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
   const renderLabel = /* @__PURE__ */ __name(() => {
@@ -136,15 +140,15 @@ const FormItem = /* @__PURE__ */ __name(({
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.Form.Item,
     {
-      ...rest,
-      style: { ...formItemStyle, ...rest.style },
+      ...forwardedRest,
+      style: { ...formItemStyle, ...forwardedRest.style },
       labelCol: { style: labelColStyle },
       layout,
       label: renderLabel(),
       colon: false,
-      extra: rest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, rest.extra),
-      tooltip: rest.tooltip && {
-        title: rest.tooltip,
+      extra: forwardedRest.extra && /* @__PURE__ */ import_react.default.createElement("span", { style: { whiteSpace: "pre-wrap" } }, forwardedRest.extra),
+      tooltip: forwardedRest.tooltip && {
+        title: forwardedRest.tooltip,
         overlayInnerStyle: { whiteSpace: "pre-line" }
       }
     },

package/lib/components/MobilePopup.js

@@ -48,14 +48,34 @@ var import_lazy_helper = require("../lazy-helper");
 const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
 const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
+  var _a;
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
   const { componentCls, hashId } = (0, import_MobilePopup.useMobileActionDrawerStyle)();
-  const style = (0, import_react.useMemo)(() => {
+  const bodyStyles = (_a = props.styles) == null ? void 0 : _a.body;
+  const popupStyle = (0, import_react.useMemo)(() => {
     return {
-      minHeight
+      minHeight: (bodyStyles == null ? void 0 : bodyStyles.minHeight) ?? minHeight,
+      height: bodyStyles == null ? void 0 : bodyStyles.height,
+      maxHeight: bodyStyles == null ? void 0 : bodyStyles.maxHeight
     };
-  }, [minHeight]);
+  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, minHeight]);
+  const bodyStyle = (0, import_react.useMemo)(() => {
+    return {
+      padding: 0,
+      ...bodyStyles
+    };
+  }, [bodyStyles]);
+  const handleCloseKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup]
+  );
   const theme = (0, import_react.useMemo)(() => {
     return {
       token: {
@@ -75,21 +95,19 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
       onClose: closePopup,
       onMaskClick: closePopup,
       bodyClassName: "nb-mobile-action-drawer-body",
-      bodyStyle: {
-        padding: 0
-      },
-      maskStyle: style,
-      style,
+      bodyStyle,
+      style: popupStyle,
       destroyOnClose: true
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-title" }, title), /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: "nb-mobile-action-drawer-close-icon",
         onClick: closePopup,
         role: "button",
         tabIndex: 0,
-        "aria-label": t("Close")
+        "aria-label": t("Close"),
+        onKeyDown: handleCloseKeyDown
       },
       /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)
     )),

package/lib/components/MobilePopup.style.js

@@ -127,7 +127,7 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
         borderBottom: `1px solid ${token.colorSplit}`,
         position: "sticky",
         top: 0,
-        backgroundColor: "white",
+        backgroundColor: token.colorBgContainer,
         zIndex: 1e3,
         // to match the button named 'Add block'
         "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
@@ -137,11 +137,21 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
       ".nb-mobile-action-drawer-placeholder": {
         display: "inline-block",
         padding: 12,
+        flex: "0 0 auto",
         visibility: "hidden"
       },
+      ".nb-mobile-action-drawer-title": {
+        flex: "1 1 auto",
+        minWidth: 0,
+        overflow: "hidden",
+        textAlign: "center",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
       ".nb-mobile-action-drawer-close-icon": {
         display: "inline-block",
         padding: 12,
+        flex: "0 0 auto",
         cursor: "pointer"
       },
       ".nb-mobile-action-drawer-body": {

package/lib/components/variables/VariableInput.js

@@ -326,6 +326,7 @@ const VariableInputComponent = /* @__PURE__ */ __name(({
       metaTree: resolvedMetaTree,
       value: innerValue,
       active: (0, import_utils.isVariableValue)(innerValue),
+      disabled,
       onChange: handleVariableSelect,
       parseValueToPath: resolvePathFromValue,
       formatPathToValue: resolveValueFromPath,

package/lib/flowEngine.js

@@ -1141,6 +1141,9 @@ const _FlowEngine = class _FlowEngine {
     if (!this.ensureModelRepository()) return;
     const refresh = !!(options == null ? void 0 : options.refresh);
     const bypassLoadedPageCache = this._loadedPageCache.shouldBypass(options, () => this.context.flowSettingsEnabled);
+    if (this.context.flowSettingsEnabled) {
+      this._loadedPageCache.markDirtyForOptions(options);
+    }
     if (!refresh && !bypassLoadedPageCache) {
       const model2 = this.findModelByParentId(options.parentId, options.subKey);
       if (model2) {
@@ -1201,6 +1204,9 @@ const _FlowEngine = class _FlowEngine {
     if (!this.ensureModelRepository()) return;
     const { uid, parentId, subKey } = options;
     const bypassLoadedPageCache = this._loadedPageCache.shouldBypass(options, () => this.context.flowSettingsEnabled);
+    if (this.context.flowSettingsEnabled) {
+      this._loadedPageCache.markDirtyForOptions(options);
+    }
     if (uid && !bypassLoadedPageCache && this._modelInstances.has(uid)) {
       return this._modelInstances.get(uid);
     }

package/lib/utils/loadedPageCache.d.ts

@@ -17,6 +17,7 @@ type DirtyKeyOptions = {
 export declare const createLoadedPageCache: () => {
     getDirtyKeyForModel(model?: FlowModel | null, options?: DirtyKeyOptions): string | undefined;
     markDirty(key?: string): void;
+    markDirtyForOptions(options?: LoadedPageOptions): void;
     shouldBypass(options?: LoadedPageOptions, isFlowSettingsEnabled?: () => boolean): boolean;
     clear(options?: LoadedPageOptions): void;
     mountModelToParent: <T extends FlowModel<import("..").DefaultStructure> = FlowModel<import("..").DefaultStructure>>(model: T, forceReplace?: boolean) => T;

package/lib/utils/loadedPageCache.js

@@ -113,6 +113,12 @@ const createLoadedPageCache = /* @__PURE__ */ __name(() => {
         dirtyKeys.add(key);
       }
     },
+    markDirtyForOptions(options) {
+      const key = getLoadedPageKey(options);
+      if (key) {
+        dirtyKeys.add(key);
+      }
+    },
     shouldBypass(options, isFlowSettingsEnabled) {
       const key = getLoadedPageKey(options);
       if (!key || !dirtyKeys.has(key)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.2.0-alpha.5",
+  "version": "2.2.0-alpha.7",
   "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-alpha.5",
-    "@nocobase/shared": "2.2.0-alpha.5",
+    "@nocobase/sdk": "2.2.0-alpha.7",
+    "@nocobase/shared": "2.2.0-alpha.7",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "814ff497dd1233ca7218c9f7f2a016c2ead6516d"
+  "gitHead": "34ba02960fca9ab0b6881d3db7040a8a64067bba"
 }

package/src/__tests__/viewScopedFlowEngine.test.ts

@@ -340,9 +340,9 @@ describe('ViewScopedFlowEngine', () => {
     const repository = new DirtyPageRepository();
     root.setModelRepository(repository);
 
-    class ParentModel extends FlowModel {}
-    class PageModel extends FlowModel {}
     class BlockModel extends FlowModel {}
+    class PageModel extends FlowModel<{ parent?: FlowModel; subModels: { items: BlockModel[] } }> {}
+    class ParentModel extends FlowModel<{ parent?: FlowModel; subModels: { page?: PageModel } }> {}
     root.registerModels({ ParentModel, PageModel, BlockModel });
 
     const parent = root.createModel<ParentModel>({ use: 'ParentModel', uid: 'popup-action' });
@@ -357,7 +357,10 @@ describe('ViewScopedFlowEngine', () => {
         items: [{ use: 'BlockModel', uid: 'stale-block' }],
       },
     });
-    const staleBlock = stalePage.findSubModel('items' as any, (item) => item.uid === 'stale-block') as FlowModel;
+    const staleBlock = stalePage.findSubModel('items', (item) => item.uid === 'stale-block');
+    if (!staleBlock) {
+      throw new Error('Expected stale block to be loaded');
+    }
     parent.setSubModel('page', stalePage);
     oldScoped.unlinkFromStack();
 
@@ -372,7 +375,7 @@ describe('ViewScopedFlowEngine', () => {
       },
     };
 
-    root.flowSettings.enable();
+    await root.flowSettings.enable();
     await staleBlock.saveStepParams();
     root.flowSettings.disable();
     repository.findOneCalls = 0;
@@ -388,8 +391,8 @@ describe('ViewScopedFlowEngine', () => {
 
     expect(repository.findOneCalls).toBe(1);
     expect(loaded).not.toBe(stalePage);
-    expect((parent.subModels as any).page).toBe(loaded);
-    expect(loaded?.mapSubModels('items' as any, (item) => item.uid)).toEqual(['fresh-block']);
+    expect(parent.subModels.page).toBe(loaded);
+    expect(loaded?.mapSubModels('items', (item) => item.uid)).toEqual(['fresh-block']);
 
     repository.findOneCalls = 0;
     const nextRuntimeScoped = createViewScopedEngine(root);
@@ -405,6 +408,69 @@ describe('ViewScopedFlowEngine', () => {
     expect(loadedAgain?.uid).toBe('popup-page');
   });
 
+  it('reloads a page after it was loaded in flow settings mode', async () => {
+    const root = new FlowEngine();
+    const repository = new DirtyPageRepository();
+    root.setModelRepository(repository);
+
+    class ParentModel extends FlowModel {}
+    class PageModel extends FlowModel {}
+    class BlockModel extends FlowModel {}
+    root.registerModels({ ParentModel, PageModel, BlockModel });
+
+    const parent = root.createModel<ParentModel>({ use: 'ParentModel', uid: 'settings-popup-action' });
+    repository.data = {
+      use: 'PageModel',
+      uid: 'settings-popup-page',
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      subModels: {
+        items: [{ use: 'BlockModel', uid: 'stale-settings-block' }],
+      },
+    };
+
+    await root.flowSettings.enable();
+    const designScoped = createViewScopedEngine(root);
+    const designLoaded = await designScoped.loadOrCreateModel<PageModel>({
+      async: true,
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      use: 'PageModel',
+    });
+    expect(repository.findOneCalls).toBe(1);
+    expect(designLoaded?.mapSubModels('items', (item) => item.uid)).toEqual(['stale-settings-block']);
+    designScoped.unlinkFromStack();
+
+    repository.data = {
+      use: 'PageModel',
+      uid: 'settings-popup-page',
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      subModels: {
+        items: [{ use: 'BlockModel', uid: 'fresh-settings-block' }],
+      },
+    };
+    root.flowSettings.disable();
+    repository.findOneCalls = 0;
+
+    const runtimeScoped = createViewScopedEngine(root);
+    const runtimeLoaded = await runtimeScoped.loadOrCreateModel<PageModel>({
+      async: true,
+      parentId: parent.uid,
+      subKey: 'page',
+      subType: 'object',
+      use: 'PageModel',
+    });
+
+    expect(repository.findOneCalls).toBe(1);
+    expect(runtimeLoaded).not.toBe(designLoaded);
+    expect(parent.subModels.page).toBe(runtimeLoaded);
+    expect(runtimeLoaded?.mapSubModels('items', (item) => item.uid)).toEqual(['fresh-settings-block']);
+  });
+
   it('does not bypass loaded page cache after a non-config save', async () => {
     const root = new FlowEngine();
     const repository = new DirtyPageRepository();

package/src/components/FlowContextSelector.tsx

@@ -292,11 +292,11 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   const defaultChildren = useMemo(() => {
     const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
     return (
-      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle}>
+      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle} disabled={cascaderProps.disabled}>
         x
       </Button>
     );
-  }, [active, currentPath]);
+  }, [active, cascaderProps.disabled, currentPath]);
 
   // 处理选择变化事件
   const handleChange = useCallback(

package/src/components/FormItem.tsx

@@ -54,15 +54,20 @@ const formItemPropKeys: (keyof ExtendedFormItemProps)[] = [
   'showLabel',
 ];
 
+const modelInternalPropKeys = ['globalSort'];
+
 export const FormItem = ({
   children,
   showLabel = true,
   labelWidth,
   ...rest
 }: ExtendedFormItemProps & ChildExtraProps) => {
+  const forwardedRest = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !modelInternalPropKeys.includes(key)),
+  ) as ExtendedFormItemProps & ChildExtraProps;
   // 过滤掉 Form.Item 专用 props，只保留要传给子组件的
   const childProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
+    Object.entries(forwardedRest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
   );
 
   const processedChildren =
@@ -74,7 +79,7 @@ export const FormItem = ({
           }
           return child;
         });
-  const { label, labelWrap, colon = true, layout } = rest;
+  const { label, labelWrap, colon = true, layout } = forwardedRest;
   const effectiveLabelWrap = !layout || layout === 'vertical' ? true : labelWrap;
   const labelColStyle =
     layout === 'vertical' ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
@@ -122,17 +127,17 @@ export const FormItem = ({
   };
   return (
     <Form.Item
-      {...rest}
-      style={{ ...formItemStyle, ...rest.style }}
+      {...forwardedRest}
+      style={{ ...formItemStyle, ...forwardedRest.style }}
       labelCol={{ style: labelColStyle }}
       layout={layout}
       label={renderLabel()}
       colon={false}
-      extra={rest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{rest.extra}</span>}
+      extra={forwardedRest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{forwardedRest.extra}</span>}
       tooltip={
-        rest.tooltip &&
+        forwardedRest.tooltip &&
         ({
-          title: rest.tooltip,
+          title: forwardedRest.tooltip,
           overlayInnerStyle: { whiteSpace: 'pre-line' },
         } as TooltipProps)
       }

package/src/components/MobilePopup.style.ts

@@ -160,7 +160,7 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
         borderBottom: `1px solid ${token.colorSplit}`,
         position: 'sticky',
         top: 0,
-        backgroundColor: 'white',
+        backgroundColor: token.colorBgContainer,
         zIndex: 1000,
 
         // to match the button named 'Add block'
@@ -172,12 +172,23 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-placeholder': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         visibility: 'hidden',
       },
 
+      '.nb-mobile-action-drawer-title': {
+        flex: '1 1 auto',
+        minWidth: 0,
+        overflow: 'hidden',
+        textAlign: 'center',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+
       '.nb-mobile-action-drawer-close-icon': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         cursor: 'pointer',
       },
 

package/src/components/MobilePopup.tsx

@@ -8,7 +8,7 @@
  */
 
 import { ConfigProvider } from 'antd';
-import React, { FC, ReactNode, useMemo } from 'react';
+import React, { FC, ReactNode, useCallback, useMemo } from 'react';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
 import { lazy } from '../lazy-helper';
@@ -31,11 +31,33 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
-  const style = useMemo(() => {
+  const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const popupStyle = useMemo(() => {
     return {
-      minHeight,
+      minHeight: bodyStyles?.minHeight ?? minHeight,
+      height: bodyStyles?.height,
+      maxHeight: bodyStyles?.maxHeight,
     };
-  }, [minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, minHeight]);
+
+  const bodyStyle = useMemo(() => {
+    return {
+      padding: 0,
+      ...bodyStyles,
+    };
+  }, [bodyStyles]);
+
+  const handleCloseKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup],
+  );
 
   const theme = useMemo(() => {
     return {
@@ -57,11 +79,8 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
         onClose={closePopup}
         onMaskClick={closePopup}
         bodyClassName="nb-mobile-action-drawer-body"
-        bodyStyle={{
-          padding: 0,
-        }}
-        maskStyle={style}
-        style={style}
+        bodyStyle={bodyStyle}
+        style={popupStyle}
         destroyOnClose
       >
         <div className="nb-mobile-action-drawer-header">
@@ -69,13 +88,14 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
           <span className="nb-mobile-action-drawer-placeholder">
             <CloseOutline />
           </span>
-          <span>{title}</span>
+          <span className="nb-mobile-action-drawer-title">{title}</span>
           <span
             className="nb-mobile-action-drawer-close-icon"
             onClick={closePopup}
             role="button"
             tabIndex={0}
             aria-label={t('Close')}
+            onKeyDown={handleCloseKeyDown}
           >
             <CloseOutline />
           </span>

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

@@ -7,8 +7,10 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { describe, expect, it } from 'vitest';
-import { formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { FormItem, formItemStyle, verticalFormItemLabelStyle } from '../FormItem';
 
 describe('FormItem', () => {
   it('keeps vertical label-to-value spacing consistent with v1', () => {
@@ -22,4 +24,17 @@ describe('FormItem', () => {
       marginBottom: 12,
     });
   });
+
+  it('does not forward model-internal globalSort props to field children', () => {
+    const Field = vi.fn(() => <input aria-label="field" />);
+
+    render(
+      <FormItem globalSort={['title']} placeholder="Title">
+        <Field />
+      </FormItem>,
+    );
+
+    expect(Field).toHaveBeenCalledWith(expect.not.objectContaining({ globalSort: expect.anything() }), {});
+    expect(Field).toHaveBeenCalledWith(expect.objectContaining({ placeholder: 'Title' }), {});
+  });
 });

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

@@ -0,0 +1,109 @@
+/**
+ * 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 from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MobilePopup } from '../MobilePopup';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock('../MobilePopup.style', () => ({
+  useMobileActionDrawerStyle: () => ({
+    componentCls: 'nb-mobile-action-drawer',
+    hashId: 'hash',
+  }),
+}));
+
+vi.mock('../../lazy-helper', () => ({
+  lazy: (_loader: unknown, name: string) => {
+    if (name === 'Popup') {
+      const Popup = ({
+        children,
+        bodyStyle,
+        maskStyle,
+        style,
+      }: {
+        children: React.ReactNode;
+        bodyStyle?: React.CSSProperties;
+        maskStyle?: React.CSSProperties;
+        style?: React.CSSProperties;
+      }) => (
+        <div data-testid="mobile-popup" style={style}>
+          <div data-testid="mobile-popup-mask" style={maskStyle} />
+          <div data-testid="mobile-popup-body" style={bodyStyle}>
+            {children}
+          </div>
+        </div>
+      );
+
+      return { Popup };
+    }
+
+    return {
+      CloseOutline: () => <span data-testid="close-outline" />,
+    };
+  },
+}));
+
+describe('MobilePopup', () => {
+  const MobilePopupWithDrawerStyles = MobilePopup as React.ComponentType<
+    React.ComponentProps<typeof MobilePopup> & { styles?: { body?: React.CSSProperties } }
+  >;
+
+  it('applies drawer body styles as max bounds without forcing fixed half-window height', () => {
+    render(
+      <MobilePopupWithDrawerStyles visible title="Title" styles={{ body: { maxHeight: '50vh' } }} onClose={vi.fn()}>
+        body
+      </MobilePopupWithDrawerStyles>,
+    );
+
+    expect(screen.getByTestId('mobile-popup')).toHaveStyle({
+      maxHeight: '50vh',
+    });
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight: '50vh',
+    });
+    expect(screen.getByTestId('mobile-popup-mask')).not.toHaveStyle({
+      maxHeight: '50vh',
+    });
+  });
+
+  it('closes from the header close icon with Enter or Space', () => {
+    const onClose = vi.fn();
+    render(
+      <MobilePopup visible title="Title" onClose={onClose}>
+        body
+      </MobilePopup>,
+    );
+
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+    fireEvent.keyDown(closeButton, { key: 'Enter' });
+    fireEvent.keyDown(closeButton, { key: ' ' });
+
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps long header titles in a constrained title element separate from the close button', () => {
+    const longTitle = 'A very long table column title that should not push the close button outside the drawer';
+
+    render(
+      <MobilePopup visible title={longTitle} onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    expect(screen.getByText(longTitle)).toHaveClass('nb-mobile-action-drawer-title');
+    expect(screen.getByRole('button', { name: 'Close' })).toHaveClass('nb-mobile-action-drawer-close-icon');
+  });
+});

package/src/components/variables/VariableInput.tsx

@@ -357,6 +357,7 @@ const VariableInputComponent: React.FC<VariableInputProps> = ({
         metaTree={resolvedMetaTree}
         value={innerValue}
         active={isVariableValue(innerValue)}
+        disabled={disabled}
         onChange={handleVariableSelect}
         parseValueToPath={resolvePathFromValue}
         formatPathToValue={resolveValueFromPath}

package/src/components/variables/__tests__/VariableInput.test.tsx

@@ -113,6 +113,18 @@ describe('VariableInput', () => {
     expect(selectorButton).toBeInTheDocument();
   });
 
+  it('disables the FlowContextSelector button when disabled', async () => {
+    const flowContext = createTestFlowContext();
+    render(
+      <TestFlowContextWrapper context={flowContext}>
+        <VariableInput value="test" metaTree={() => flowContext.getPropertyMetaTree()} disabled />
+      </TestFlowContextWrapper>,
+    );
+
+    const selectorButton = await screen.findByRole('button');
+    expect(selectorButton).toBeDisabled();
+  });
+
   it('should not highlight the selector button for synthetic constant/null paths', async () => {
     const flowContext = createTestFlowContext();
 

package/src/flowEngine.ts

@@ -1343,6 +1343,9 @@ export class FlowEngine {
     if (!this.ensureModelRepository()) return;
     const refresh = !!options?.refresh;
     const bypassLoadedPageCache = this._loadedPageCache.shouldBypass(options, () => this.context.flowSettingsEnabled);
+    if (this.context.flowSettingsEnabled) {
+      this._loadedPageCache.markDirtyForOptions(options);
+    }
     if (!refresh && !bypassLoadedPageCache) {
       const model = this.findModelByParentId(options.parentId, options.subKey);
       if (model) {
@@ -1412,6 +1415,9 @@ export class FlowEngine {
     if (!this.ensureModelRepository()) return;
     const { uid, parentId, subKey } = options;
     const bypassLoadedPageCache = this._loadedPageCache.shouldBypass(options, () => this.context.flowSettingsEnabled);
+    if (this.context.flowSettingsEnabled) {
+      this._loadedPageCache.markDirtyForOptions(options);
+    }
     if (uid && !bypassLoadedPageCache && this._modelInstances.has(uid)) {
       return this._modelInstances.get(uid) as T;
     }

package/src/utils/loadedPageCache.ts

@@ -123,6 +123,13 @@ export const createLoadedPageCache = () => {
       }
     },
 
+    markDirtyForOptions(options?: LoadedPageOptions): void {
+      const key = getLoadedPageKey(options);
+      if (key) {
+        dirtyKeys.add(key);
+      }
+    },
+
     shouldBypass(options?: LoadedPageOptions, isFlowSettingsEnabled?: () => boolean): boolean {
       const key = getLoadedPageKey(options);
       if (!key || !dirtyKeys.has(key)) {