@nocobase/flow-engine 2.0.0-alpha.38 → 2.0.0-alpha.39

package/lib/components/MobilePopup.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { FC, ReactNode } from 'react';
+interface MobilePopupProps {
+    title?: string;
+    visible: boolean;
+    minHeight?: number | string;
+    onClose: () => void;
+    children: ReactNode;
+    className?: string;
+    footer?: ReactNode;
+}
+export declare const MobilePopup: FC<MobilePopupProps>;
+export {};

package/lib/components/MobilePopup.js

@@ -0,0 +1,102 @@
+/**
+ * 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 __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MobilePopup_exports = {};
+__export(MobilePopup_exports, {
+  MobilePopup: () => MobilePopup
+});
+module.exports = __toCommonJS(MobilePopup_exports);
+var import_antd = require("antd");
+var import_antd_mobile = require("antd-mobile");
+var import_react = __toESM(require("react"));
+var import_antd_mobile_icons = require("antd-mobile-icons");
+var import_MobilePopup = require("./MobilePopup.style");
+var import_react_i18next = require("react-i18next");
+const MobilePopup = /* @__PURE__ */ __name((props) => {
+  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)(() => {
+    return {
+      minHeight
+    };
+  }, [minHeight]);
+  const theme = (0, import_react.useMemo)(() => {
+    return {
+      token: {
+        paddingPageHorizontal: 8,
+        paddingPageVertical: 8,
+        marginBlock: 12,
+        borderRadiusBlock: 8,
+        fontSize: 14
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { theme }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd_mobile.Popup,
+    {
+      className: `${componentCls} ${hashId} ${className || ""}`,
+      visible,
+      onClose: closePopup,
+      onMaskClick: closePopup,
+      bodyClassName: "nb-mobile-action-drawer-body",
+      bodyStyle: {
+        padding: 0
+      },
+      maskStyle: style,
+      style,
+      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(import_antd_mobile_icons.CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "nb-mobile-action-drawer-close-icon",
+        onClick: closePopup,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": t("Close")
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd_mobile_icons.CloseOutline, null)
+    )),
+    children,
+    footer && /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-footer" }, footer)
+  ));
+}, "MobilePopup");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MobilePopup
+});

package/lib/components/MobilePopup.style.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 { useStyleRegister } from '@ant-design/cssinjs';
+type UseComponentStyleResult = {
+    wrapSSR: ReturnType<typeof useStyleRegister>;
+    hashId: string;
+    componentCls: string;
+    rootPrefixCls: string;
+};
+export declare const useMobileActionDrawerStyle: (props?: any) => UseComponentStyleResult;
+export {};

package/lib/components/MobilePopup.style.js

@@ -0,0 +1,186 @@
+/**
+ * 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 MobilePopup_style_exports = {};
+__export(MobilePopup_style_exports, {
+  useMobileActionDrawerStyle: () => useMobileActionDrawerStyle
+});
+module.exports = __toCommonJS(MobilePopup_style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_shared = require("@formily/shared");
+var import_react = require("react");
+var import_antd = require("antd");
+const usePrefixCls = /* @__PURE__ */ __name((tag, props) => {
+  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext) || {};
+  if ("ConfigContext" in import_antd.ConfigProvider) {
+    return (getPrefixCls == null ? void 0 : getPrefixCls(tag, props == null ? void 0 : props.prefixCls)) || "";
+  } else {
+    const prefix = (props == null ? void 0 : props.prefixCls) ?? "ant-";
+    return `${prefix}${tag ?? ""}`;
+  }
+}, "usePrefixCls");
+const { ConfigContext } = import_antd.ConfigProvider;
+const useConfig = /* @__PURE__ */ __name(() => (0, import_react.useContext)(ConfigContext), "useConfig");
+const useToken = import_antd.theme.useToken;
+const genCommonStyle = /* @__PURE__ */ __name((token, componentPrefixCls) => {
+  const { fontFamily, fontSize } = token;
+  const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+  return {
+    [rootPrefixSelector]: {
+      fontFamily,
+      fontSize,
+      boxSizing: "border-box",
+      "&::before, &::after": {
+        boxSizing: "border-box"
+      },
+      [rootPrefixSelector]: {
+        boxSizing: "border-box",
+        "&::before, &::after": {
+          boxSizing: "border-box"
+        }
+      }
+    }
+  };
+}, "genCommonStyle");
+const genStyleHook = /* @__PURE__ */ __name((component, styleFn) => {
+  return (props) => {
+    const { theme: theme2, token, hashId } = useToken();
+    const { getPrefixCls, iconPrefixCls } = useConfig();
+    const prefixCls = usePrefixCls(component);
+    const rootPrefixCls = getPrefixCls();
+    const wrapSSR = (0, import_cssinjs.useStyleRegister)(
+      {
+        theme: theme2,
+        token,
+        hashId,
+        path: ["formily-antd", component, prefixCls, iconPrefixCls]
+      },
+      () => {
+        const componentCls = `.${prefixCls}`;
+        const mergedToken = (0, import_shared.merge)(token, {
+          componentCls,
+          prefixCls,
+          iconCls: `.${iconPrefixCls}`,
+          antCls: `.${rootPrefixCls}`
+        });
+        const styleInterpolation = styleFn(mergedToken, props, {
+          hashId,
+          prefixCls,
+          rootPrefixCls,
+          iconPrefixCls
+        });
+        return [genCommonStyle(token, prefixCls), styleInterpolation];
+      }
+    );
+    const memoizedWrapSSR = (0, import_react.useMemo)(() => {
+      return wrapSSR;
+    }, [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    return {
+      wrapSSR: memoizedWrapSSR,
+      hashId,
+      componentCls: prefixCls,
+      rootPrefixCls
+    };
+  };
+}, "genStyleHook");
+const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      ".nb-mobile-action-drawer-header": {
+        height: "var(--nb-mobile-page-header-height)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderBottom: `1px solid ${token.colorSplit}`,
+        position: "sticky",
+        top: 0,
+        backgroundColor: "white",
+        zIndex: 1e3,
+        // to match the button named 'Add block'
+        "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
+          margin: 12
+        }
+      },
+      ".nb-mobile-action-drawer-placeholder": {
+        display: "inline-block",
+        padding: 12,
+        visibility: "hidden"
+      },
+      ".nb-mobile-action-drawer-close-icon": {
+        display: "inline-block",
+        padding: 12,
+        cursor: "pointer"
+      },
+      ".nb-mobile-action-drawer-body": {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        maxHeight: "calc(100% - var(--nb-mobile-page-header-height))",
+        overflowY: "auto",
+        overflowX: "hidden",
+        backgroundColor: token.colorBgLayout,
+        // 不带 tab 页的半窗
+        "& > .nb-grid-container": {
+          padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`
+        },
+        // 带有 tab 页的半窗
+        ".ant-tabs-nav": {
+          marginBottom: "0px !important",
+          padding: `0 ${token.paddingPageHorizontal + token.borderRadiusBlock / 2}px`,
+          backgroundColor: token.colorBgContainer
+        },
+        // clear the margin-bottom of the last block
+        "& > .nb-grid-container > .nb-grid > .nb-grid-warp > .nb-grid-row:nth-last-child(2) .noco-card-item": {
+          marginBottom: 0,
+          "& > .ant-card": {
+            marginBottom: "0 !important"
+          }
+        }
+      },
+      ".nb-mobile-action-drawer-footer": {
+        padding: "8px var(--nb-mobile-page-tabs-content-padding)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        position: "sticky",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1e3,
+        borderTop: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.colorBgLayout,
+        ".ant-btn": {
+          marginLeft: 8
+        }
+      }
+    }
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMobileActionDrawerStyle
+});

package/lib/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './FormItem';
 export * from './settings';
 export * from './subModel';
 export * from './variables';
+export * from './MobilePopup';

package/lib/components/index.js

@@ -33,6 +33,7 @@ __reExport(components_exports, require("./FormItem"), module.exports);
 __reExport(components_exports, require("./settings"), module.exports);
 __reExport(components_exports, require("./subModel"), module.exports);
 __reExport(components_exports, require("./variables"), module.exports);
+__reExport(components_exports, require("./MobilePopup"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./common/FlowSettingsButton"),
@@ -44,5 +45,6 @@ __reExport(components_exports, require("./variables"), module.exports);
   ...require("./FormItem"),
   ...require("./settings"),
   ...require("./subModel"),
-  ...require("./variables")
+  ...require("./variables"),
+  ...require("./MobilePopup")
 });

package/lib/data-source/index.d.ts

@@ -91,6 +91,7 @@ export declare class Collection {
     dataSource: DataSource;
     constructor(options?: Record<string, any>);
     getFilterByTK(record: any): any;
+    get titleableFields(): CollectionField[];
     get hidden(): any;
     get flowEngine(): FlowEngine;
     get collectionManager(): CollectionManager;
@@ -149,6 +150,7 @@ export declare class CollectionField {
     get resourceName(): string;
     get collectionName(): any;
     get readonly(): any;
+    get titleable(): boolean;
     get fullpath(): string;
     get name(): any;
     get type(): any;

package/lib/data-source/index.js

@@ -346,6 +346,9 @@ const _Collection = class _Collection {
     }
     return import_lodash.default.pick(record, this.filterTargetKey);
   }
+  get titleableFields() {
+    return this.getFields().filter((field) => field.titleable);
+  }
   get hidden() {
     return this.options.hidden || false;
   }
@@ -580,6 +583,9 @@ const _CollectionField = class _CollectionField {
     var _a;
     return this.options.readonly || ((_a = this.options.uiSchema) == null ? void 0 : _a["x-read-pretty"]) || false;
   }
+  get titleable() {
+    return !!(this.options.titleable ?? this.options.titleUsable);
+  }
   get fullpath() {
     return this.collection.dataSource.key + "." + this.collection.name + "." + this.name;
   }

package/lib/utils/translation.d.ts

@@ -14,5 +14,8 @@ import type { FlowModel } from '../models';
  * @returns 翻译函数，自动使用 flow-engine 命名空间
  */
 export declare function getT(model: FlowModel): (key: string, options?: any) => string;
+export declare function tExpr(text: TFuncKey | TFuncKey[], options?: TOptions): string;
+/**
+ * @deprecated use tExpr from `@nocobase/flow-engine` instead
+ */
 export declare function escapeT(text: TFuncKey | TFuncKey[], options?: TOptions): string;
-export { escapeT as tExpr };

package/lib/utils/translation.js

@@ -29,7 +29,7 @@ var translation_exports = {};
 __export(translation_exports, {
   escapeT: () => escapeT,
   getT: () => getT,
-  tExpr: () => escapeT
+  tExpr: () => tExpr
 });
 module.exports = __toCommonJS(translation_exports);
 var import_constants = require("./constants");
@@ -43,12 +43,16 @@ function getT(model) {
   return (key) => key;
 }
 __name(getT, "getT");
-function escapeT(text, options) {
+function tExpr(text, options) {
   if (options) {
     return `{{t(${JSON.stringify(text)}, ${JSON.stringify(options)})}}`;
   }
   return `{{t(${JSON.stringify(text)})}}`;
 }
+__name(tExpr, "tExpr");
+function escapeT(text, options) {
+  return tExpr(text, options);
+}
 __name(escapeT, "escapeT");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/views/DrawerComponent.js

@@ -42,9 +42,10 @@ __export(DrawerComponent_exports, {
 module.exports = __toCommonJS(DrawerComponent_exports);
 var import_antd = require("antd");
 var React = __toESM(require("react"));
+var import_MobilePopup = require("../components/MobilePopup");
 const DrawerComponent = React.forwardRef((props, ref) => {
   var _a;
-  const { children, footer: initialFooter, title, extra, hidden, ...drawerProps } = props;
+  const { children, footer: initialFooter, title, extra, hidden, isMobile, ...drawerProps } = props;
   const [open, setOpen] = React.useState(true);
   const [footer, setFooter] = React.useState(() => initialFooter);
   const [header, setHeader] = React.useState({ title, extra, ...drawerProps.header });
@@ -75,6 +76,24 @@ const DrawerComponent = React.forwardRef((props, ref) => {
   const container = React.useMemo(() => {
     return document.querySelector("#nocobase-app-container");
   }, []);
+  if (isMobile) {
+    return /* @__PURE__ */ React.createElement(
+      import_MobilePopup.MobilePopup,
+      {
+        className: hidden ? "nb-hidden" : "",
+        visible: open,
+        ...drawerProps,
+        footer,
+        ...header,
+        onClose: () => {
+          var _a2;
+          setOpen(false);
+          (_a2 = drawerProps.afterClose) == null ? void 0 : _a2.call(drawerProps);
+        }
+      },
+      children
+    );
+  }
   return /* @__PURE__ */ React.createElement(
     import_antd.Drawer,
     {

package/lib/views/useDrawer.js

@@ -187,7 +187,8 @@ function useDrawer() {
               (_a3 = config.onClose) == null ? void 0 : _a3.call(config);
               resolvePromise == null ? void 0 : resolvePromise(config.result);
               scopedEngine.unlinkFromStack();
-            }
+            },
+            isMobile: ctx.isMobileLayout
           },
           content,
           props.children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.0.0-alpha.38",
+  "version": "2.0.0-alpha.39",
   "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.0.0-alpha.38",
-    "@nocobase/shared": "2.0.0-alpha.38",
+    "@nocobase/sdk": "2.0.0-alpha.39",
+    "@nocobase/shared": "2.0.0-alpha.39",
     "ahooks": "^3.7.2",
     "dayjs": "^1.11.9",
     "dompurify": "^3.0.2",
@@ -36,5 +36,5 @@
   ],
   "author": "NocoBase Team",
   "license": "AGPL-3.0",
-  "gitHead": "30b1723601099007f7641c6ffa4111c880cb44e4"
+  "gitHead": "f716c78b4389d45ebe8996bcabcca976b4410aa2"
 }

package/src/__tests__/flowSettings.open.test.tsx

@@ -82,6 +82,8 @@ vi.mock('antd', () => {
       Paragraph: ({ children }: any) => children ?? 'Paragraph',
       Text: ({ children }: any) => children ?? 'Text',
     },
+    ConfigProvider: ({ children }: any) => children ?? 'ConfigProvider',
+    theme: { useToken: () => ({}) },
   };
 });
 

package/src/__tests__/flowSettings.test.ts

@@ -95,6 +95,8 @@ vi.mock('antd', () => {
       Paragraph: vi.fn(({ children }: any) => children ?? 'Paragraph'),
       Text: vi.fn(({ children }: any) => children ?? 'Text'),
     },
+    ConfigProvider: ({ children }: any) => children ?? 'ConfigProvider',
+    theme: { useToken: () => ({}) },
   } as any;
 });
 

package/src/components/MobilePopup.style.ts

@@ -0,0 +1,220 @@
+/**
+ * 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 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 { ConfigProvider, theme } from 'antd';
+
+const usePrefixCls = (
+  tag?: string,
+  props?: {
+    prefixCls?: string;
+  },
+) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext) || {};
+  if ('ConfigContext' in ConfigProvider) {
+    return getPrefixCls?.(tag, props?.prefixCls) || '';
+  } else {
+    const prefix = props?.prefixCls ?? 'ant-';
+    return `${prefix}${tag ?? ''}`;
+  }
+};
+const { ConfigContext } = ConfigProvider;
+const useConfig = () => useContext(ConfigContext);
+const useToken = theme.useToken;
+
+type OverrideComponent = keyof ComponentTokenMap | string;
+
+interface StyleInfo {
+  hashId: string;
+  prefixCls: string;
+  rootPrefixCls: string;
+  iconPrefixCls: string;
+}
+
+type TokenWithCommonCls<T> = T & {
+  /** Wrap component class with `.` prefix */
+  componentCls: string;
+  /** Origin prefix which do not have `.` prefix */
+  prefixCls: string;
+  /** Wrap icon class with `.` prefix */
+  iconCls: string;
+  /** Wrap ant prefixCls class with `.` prefix */
+  antCls: string;
+};
+
+const genCommonStyle = (token: any, componentPrefixCls: string): CSSObject => {
+  const { fontFamily, fontSize } = token;
+
+  const rootPrefixSelector = `[class^="${componentPrefixCls}"], [class*=" ${componentPrefixCls}"]`;
+
+  return {
+    [rootPrefixSelector]: {
+      fontFamily,
+      fontSize,
+      boxSizing: 'border-box',
+
+      '&::before, &::after': {
+        boxSizing: 'border-box',
+      },
+
+      [rootPrefixSelector]: {
+        boxSizing: 'border-box',
+
+        '&::before, &::after': {
+          boxSizing: 'border-box',
+        },
+      },
+    },
+  };
+};
+type UseComponentStyleResult = {
+  wrapSSR: ReturnType<typeof useStyleRegister>;
+  hashId: string;
+  componentCls: string;
+  rootPrefixCls: string;
+};
+
+const genStyleHook = <ComponentName extends OverrideComponent>(
+  component: ComponentName,
+  styleFn: (token: TokenWithCommonCls<any>, props: any, info: StyleInfo) => CSSInterpolation,
+) => {
+  return (props?: any): UseComponentStyleResult => {
+    const { theme, token, hashId } = useToken();
+    const { getPrefixCls, iconPrefixCls } = useConfig();
+    const prefixCls = usePrefixCls(component);
+    const rootPrefixCls = getPrefixCls();
+
+    const wrapSSR = useStyleRegister(
+      {
+        theme: theme as any,
+        token,
+        hashId,
+        path: ['formily-antd', component, prefixCls, iconPrefixCls],
+      },
+      () => {
+        const componentCls = `.${prefixCls}`;
+        const mergedToken: TokenWithCommonCls<any> = merge(token, {
+          componentCls,
+          prefixCls,
+          iconCls: `.${iconPrefixCls}`,
+          antCls: `.${rootPrefixCls}`,
+        });
+
+        const styleInterpolation = styleFn(mergedToken, props, {
+          hashId,
+          prefixCls,
+          rootPrefixCls,
+          iconPrefixCls,
+        });
+        return [genCommonStyle(token, prefixCls), styleInterpolation];
+      },
+    );
+
+    // useStyleRegister 有 BUG，会导致重复渲染，所以这里做了一层缓存
+    // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
+    const memoizedWrapSSR = useMemo(() => {
+      return wrapSSR;
+    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+
+    return {
+      wrapSSR: memoizedWrapSSR,
+      hashId,
+      componentCls: prefixCls,
+      rootPrefixCls,
+    };
+  };
+};
+
+export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer', (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      '.nb-mobile-action-drawer-header': {
+        height: 'var(--nb-mobile-page-header-height)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottom: `1px solid ${token.colorSplit}`,
+        position: 'sticky',
+        top: 0,
+        backgroundColor: 'white',
+        zIndex: 1000,
+
+        // to match the button named 'Add block'
+        '& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn': {
+          margin: 12,
+        },
+      },
+
+      '.nb-mobile-action-drawer-placeholder': {
+        display: 'inline-block',
+        padding: 12,
+        visibility: 'hidden',
+      },
+
+      '.nb-mobile-action-drawer-close-icon': {
+        display: 'inline-block',
+        padding: 12,
+        cursor: 'pointer',
+      },
+
+      '.nb-mobile-action-drawer-body': {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        backgroundColor: token.colorBgLayout,
+
+        // 不带 tab 页的半窗
+        '& > .nb-grid-container': {
+          padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`,
+        },
+
+        // 带有 tab 页的半窗
+        '.ant-tabs-nav': {
+          marginBottom: '0px !important',
+          padding: `0 ${token.paddingPageHorizontal + token.borderRadiusBlock / 2}px`,
+          backgroundColor: token.colorBgContainer,
+        },
+
+        // clear the margin-bottom of the last block
+        '& > .nb-grid-container > .nb-grid > .nb-grid-warp > .nb-grid-row:nth-last-child(2) .noco-card-item': {
+          marginBottom: 0,
+
+          '& > .ant-card': {
+            marginBottom: '0 !important',
+          },
+        },
+      },
+
+      '.nb-mobile-action-drawer-footer': {
+        padding: '8px var(--nb-mobile-page-tabs-content-padding)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        position: 'sticky',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000,
+        borderTop: `1px solid ${token.colorSplit}`,
+        backgroundColor: token.colorBgLayout,
+
+        '.ant-btn': {
+          marginLeft: 8,
+        },
+      },
+    },
+  };
+});

package/src/components/MobilePopup.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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 { 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';
+
+interface MobilePopupProps {
+  title?: string;
+  visible: boolean;
+  minHeight?: number | string;
+  onClose: () => void;
+  children: ReactNode;
+  className?: string;
+  footer?: ReactNode;
+}
+
+export const MobilePopup: FC<MobilePopupProps> = (props) => {
+  const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
+  const { t } = useTranslation();
+  const { componentCls, hashId } = useMobileActionDrawerStyle();
+
+  const style = useMemo(() => {
+    return {
+      minHeight,
+    };
+  }, [minHeight]);
+
+  const theme = useMemo(() => {
+    return {
+      token: {
+        paddingPageHorizontal: 8,
+        paddingPageVertical: 8,
+        marginBlock: 12,
+        borderRadiusBlock: 8,
+        fontSize: 14,
+      },
+    };
+  }, []);
+
+  return (
+    <ConfigProvider theme={theme}>
+      <Popup
+        className={`${componentCls} ${hashId} ${className || ''}`}
+        visible={visible}
+        onClose={closePopup}
+        onMaskClick={closePopup}
+        bodyClassName="nb-mobile-action-drawer-body"
+        bodyStyle={{
+          padding: 0,
+        }}
+        maskStyle={style}
+        style={style}
+        destroyOnClose
+      >
+        <div className="nb-mobile-action-drawer-header">
+          {/* used to make the title center */}
+          <span className="nb-mobile-action-drawer-placeholder">
+            <CloseOutline />
+          </span>
+          <span>{title}</span>
+          <span
+            className="nb-mobile-action-drawer-close-icon"
+            onClick={closePopup}
+            role="button"
+            tabIndex={0}
+            aria-label={t('Close')}
+          >
+            <CloseOutline />
+          </span>
+        </div>
+        {children}
+        {footer && <div className="nb-mobile-action-drawer-footer">{footer}</div>}
+      </Popup>
+    </ConfigProvider>
+  );
+};

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

@@ -13,7 +13,6 @@ import { render, cleanup, waitFor } from '@testing-library/react';
 import { App, ConfigProvider } from 'antd';
 import { FlowEngine } from '../../flowEngine';
 import { FlowModel, ModelRenderMode } from '../../models/flowModel';
-import { DefaultSettingsIcon } from '../settings/wrappers/contextual/DefaultSettingsIcon';
 import { FlowEngineProvider } from '../../provider';
 import { FlowModelRenderer } from '../FlowModelRenderer';
 
@@ -81,6 +80,7 @@ vi.mock('antd', () => {
     Alert,
     Skeleton,
     Spin,
+    theme: { useToken: () => ({}) },
   } as any;
 });
 

package/src/components/index.ts

@@ -17,4 +17,5 @@ export * from './FormItem';
 export * from './settings';
 export * from './subModel';
 export * from './variables';
+export * from './MobilePopup';
 //

package/src/components/settings/wrappers/contextual/__tests__/DefaultSettingsIcon.test.tsx

@@ -75,6 +75,7 @@ vi.mock('antd', async (importOriginal) => {
     Alert,
     Button,
     Result,
+    theme: { useToken: () => ({}) },
   };
 });
 

package/src/data-source/index.ts

@@ -370,6 +370,10 @@ export class Collection {
     return _.pick(record, this.filterTargetKey);
   }
 
+  get titleableFields() {
+    return this.getFields().filter((field) => field.titleable);
+  }
+
   get hidden() {
     return this.options.hidden || false;
   }
@@ -640,6 +644,10 @@ export class CollectionField {
     return this.options.readonly || this.options.uiSchema?.['x-read-pretty'] || false;
   }
 
+  get titleable() {
+    return !!(this.options.titleable ?? this.options.titleUsable);
+  }
+
   get fullpath() {
     return this.collection.dataSource.key + '.' + this.collection.name + '.' + this.name;
   }

package/src/utils/translation.ts

@@ -27,11 +27,16 @@ export function getT(model: FlowModel): (key: string, options?: any) => string {
   return (key: string) => key;
 }
 
-export function escapeT(text: TFuncKey | TFuncKey[], options?: TOptions) {
+export function tExpr(text: TFuncKey | TFuncKey[], options?: TOptions) {
   if (options) {
     return `{{t(${JSON.stringify(text)}, ${JSON.stringify(options)})}}`;
   }
   return `{{t(${JSON.stringify(text)})}}`;
 }
 
-export { escapeT as tExpr };
+/**
+ * @deprecated use tExpr from `@nocobase/flow-engine` instead
+ */
+export function escapeT(text: TFuncKey | TFuncKey[], options?: TOptions) {
+  return tExpr(text, options);
+}

package/src/views/DrawerComponent.tsx

@@ -10,9 +10,10 @@
 // components/drawer/useDrawer/DrawerComponent.tsx
 import { Drawer } from 'antd';
 import * as React from 'react';
+import { MobilePopup } from '../components/MobilePopup';
 
 const DrawerComponent = React.forwardRef((props: any, ref) => {
-  const { children, footer: initialFooter, title, extra, hidden, ...drawerProps } = props;
+  const { children, footer: initialFooter, title, extra, hidden, isMobile, ...drawerProps } = props;
   const [open, setOpen] = React.useState(true);
   const [footer, setFooter] = React.useState(() => initialFooter);
   const [header, setHeader] = React.useState({ title, extra, ...drawerProps.header });
@@ -46,6 +47,24 @@ const DrawerComponent = React.forwardRef((props: any, ref) => {
     return document.querySelector('#nocobase-app-container');
   }, []);
 
+  if (isMobile) {
+    return (
+      <MobilePopup
+        className={hidden ? 'nb-hidden' : ''}
+        visible={open}
+        {...drawerProps}
+        footer={footer}
+        {...header}
+        onClose={() => {
+          setOpen(false);
+          drawerProps.afterClose?.();
+        }}
+      >
+        {children}
+      </MobilePopup>
+    );
+  }
+
   return (
     <Drawer
       rootClassName={hidden ? 'nb-hidden' : ''}

package/src/views/useDrawer.tsx

@@ -187,6 +187,7 @@ export function useDrawer() {
               // 关闭时修正 previous/next 指针
               scopedEngine.unlinkFromStack();
             }}
+            isMobile={ctx.isMobileLayout}
           >
             {content}
             {props.children}