feat: adapt Apply action of approval block to mobile

packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ActionDrawer.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 { observer, useFieldSchema } from '@formily/react';
+import { Action, SchemaComponent, useActionContext } from '@nocobase/client';
+import { Popup } from 'antd-mobile';
+import React, { useCallback, useEffect, useState } from 'react';
+
+export const ActionDrawerUsedInMobile = observer((props) => {
+  const fieldSchema = useFieldSchema();
+  const { visible, setVisible } = useActionContext();
+  const [mobileContainer] = useState<HTMLElement>(() => document.querySelector('.mobile-container') as HTMLElement);
+
+  const closePopup = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  return (
+    <Popup
+      visible={visible}
+      onClose={closePopup}
+      onMaskClick={closePopup}
+      getContainer={() => mobileContainer}
+      bodyStyle={{
+        borderTopLeftRadius: '8px',
+        borderTopRightRadius: '8px',
+        minHeight: '40vh',
+        maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        padding: '12px',
+      }}
+      showCloseButton
+      closeOnSwipe
+    >
+      <SchemaComponent schema={fieldSchema} onlyRenderProperties />
+    </Popup>
+  );
+});
+
+ActionDrawerUsedInMobile.displayName = 'ActionDrawerUsedInMobile';
+
+const originalActionDrawer = Action.Drawer;
+
+/**
+ * adapt Action.Drawer to mobile
+ */
+export const useToAdaptActionDrawerToMobile = () => {
+  Action.Drawer = ActionDrawerUsedInMobile;
+
+  useEffect(() => {
+    return () => {
+      Action.Drawer = originalActionDrawer;
+    };
+  }, []);
+};

packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/FilterAction.tsx

@@ -9,7 +9,7 @@
 
 import { Filter, withDynamicSchemaProps } from '@nocobase/client';
 import { Popup } from 'antd-mobile';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 const OriginFilterAction = Filter.Action;
 
@@ -52,9 +52,19 @@ export const FilterAction = withDynamicSchemaProps((props) => {
   );
 });
 
+FilterAction.displayName = 'FilterAction';
+
+const originalFilterAction = Filter.Action;
+
 /**
- * 重置 FilterAction，使其样式更符合移动端
+ * adapt Filter.Action to mobile
  */
-export const usedToResetFilterActionForMobile = () => {
+export const useToAdaptFilterActionToMobile = () => {
   Filter.Action = FilterAction;
+
+  useEffect(() => {
+    return () => {
+      Filter.Action = originalFilterAction;
+    };
+  }, []);
 };

packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx

@@ -18,7 +18,8 @@ import {
 import React from 'react';
 import { isDesktop } from 'react-device-detect';
 
-import { usedToResetFilterActionForMobile } from '../adaptor-of-desktop/FilterAction';
+import { useToAdaptActionDrawerToMobile } from '../adaptor-of-desktop/ActionDrawer';
+import { useToAdaptFilterActionToMobile } from '../adaptor-of-desktop/FilterAction';
 import { ResetSchemaOptionsProvider } from '../adaptor-of-desktop/ResetSchemaOptionsProvider';
 import { PageBackgroundColor } from '../constants';
 import { DesktopMode } from '../desktop-mode/DesktopMode';
@@ -27,7 +28,8 @@ import { MobileActionPage } from '../pages/mobile-action-page/MobileActionPage';
 import { MobileAppProvider } from './MobileAppContext';
 
 export const Mobile = () => {
-  usedToResetFilterActionForMobile();
+  useToAdaptFilterActionToMobile();
+  useToAdaptActionDrawerToMobile();
 
   const mobilePlugin = usePlugin(PluginMobileClient);
   const MobileRouter = mobilePlugin.getRouterComponent();

packages/plugins/@nocobase/plugin-mobile/src/client/pages/mobile-action-page/MobileActionPage.tsx

@@ -85,12 +85,12 @@ export const MobileActionPage = ({ level, footerNodeName }) => {
   useMobileBlockInitializersInSubpage();
 
   const field = useField();
-  const filedSchema = useFieldSchema();
+  const fieldSchema = useFieldSchema();
   const ctx = useActionContext();
   const { styles } = useMobileActionPageStyle();
   const tabContext = useTabsContext();
   const containerDOM = useMemo(() => document.querySelector('.nb-mobile-subpages-slot'), []);
-  const footerSchema = filedSchema.reduceProperties((buf, s) => {
+  const footerSchema = fieldSchema.reduceProperties((buf, s) => {
     if (s['x-component'] === footerNodeName) {
       return s;
     }
@@ -111,13 +111,13 @@ export const MobileActionPage = ({ level, footerNodeName }) => {
   const actionPageNode = (
     <div className={styles.container} style={style}>
       <TabsContextProvider {...tabContext} tabBarExtraContent={<BackButtonUsedInSubPage />} tabBarGutter={48}>
-        <SchemaComponent components={components} schema={filedSchema} onlyRenderProperties />
+        <SchemaComponent components={components} schema={fieldSchema} onlyRenderProperties />
       </TabsContextProvider>
       {footerSchema && (
         <div className={styles.footer}>
           <RecursionField
             basePath={field.address}
-            schema={filedSchema}
+            schema={fieldSchema}
             onlyRenderProperties
             filterProperties={(s) => {
               return s['x-component'] === footerNodeName;