refactor:action panel for mobile to support mobile:addBlock (#5235)

* refactor: action panel for mobile to support mobile:addBlock

* fix: test

packages/core/client/src/application/schema-initializer/hooks/useSchemaInitializerRender.tsx

@@ -15,7 +15,7 @@ import { SchemaInitializerButton } from '../components/SchemaInitializerButton';
 import { SchemaInitializer } from '../SchemaInitializer';
 import { SchemaInitializerOptions } from '../types';
 import { withInitializer } from '../withInitializer';
-
+import { useOpenModeContext } from '../../../modules/popup/OpenModeProvider';
 const InitializerComponent: FC<SchemaInitializerOptions<any, any>> = React.memo((options) => {
   const Component: any = options.Component || SchemaInitializerButton;
 
@@ -38,13 +38,14 @@ export function useSchemaInitializerRender<P1 = ButtonProps, P2 = {}>(
   options?: Omit<SchemaInitializerOptions<P1, P2>, 'name'>,
 ) {
   const app = useApp();
+  const { isMobile } = useOpenModeContext() || {};
 
   // compatible with mobile
   // TODO: delete this code
   if (
     name === 'popup:common:addBlock' &&
     app.schemaInitializerManager.has('mobile:popup:common:addBlock') &&
-    window.location.pathname.startsWith('/m/')
+    isMobile
   ) {
     name = 'mobile:popup:common:addBlock';
   }

packages/core/client/src/modules/popup/OpenModeProvider.tsx

@@ -30,6 +30,11 @@ interface OpenModeProviderProps {
    * 隐藏 open mode 的配置选项
    */
   hideOpenMode?: boolean;
+  /**
+   * @default false
+   * 是否为Mobile路由下
+   */
+  isMobile?: boolean;
 }
 
 const defaultContext: OpenModeProviderProps = {
@@ -46,6 +51,7 @@ const OpenModeContext = React.createContext<{
   defaultOpenMode: OpenModeProviderProps['defaultOpenMode'];
   hideOpenMode: boolean;
   getComponentByOpenMode: (openMode: OpenMode) => any;
+  isMobile: boolean;
 }>(null);
 
 /**
@@ -66,7 +72,9 @@ export const OpenModeProvider: FC<OpenModeProviderProps> = (props) => {
     if (props.hideOpenMode !== undefined) {
       result.hideOpenMode = props.hideOpenMode;
     }
-
+    if (props.isMobile) {
+      result.isMobile = props.isMobile;
+    }
     return result;
   }, [props.defaultOpenMode, props.openModeToComponent, props.hideOpenMode]);
 
@@ -88,8 +96,9 @@ export const OpenModeProvider: FC<OpenModeProviderProps> = (props) => {
       defaultOpenMode: context.defaultOpenMode,
       hideOpenMode: context.hideOpenMode,
       getComponentByOpenMode,
+      isMobile: context.isMobile,
     };
-  }, [context.defaultOpenMode, context.hideOpenMode, getComponentByOpenMode]);
+  }, [context.defaultOpenMode, context.hideOpenMode, getComponentByOpenMode, context.isMobile]);
 
   return <OpenModeContext.Provider value={value}>{props.children}</OpenModeContext.Provider>;
 };

packages/plugins/@nocobase/plugin-block-workbench/src/client/WorkbenchPopupActionSchemaInitializerItem.tsx

@@ -11,8 +11,8 @@ import {
   ButtonEditor,
   SchemaSettingOpenModeSchemaItems,
   SchemaSettings,
-  useOpenModeContext,
   useSchemaInitializer,
+  useOpenModeContext,
 } from '@nocobase/client';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -61,7 +61,7 @@ export function WorkbenchPopupActionSchemaInitializerItem(props) {
   // 调用插入功能
   const { insert } = useSchemaInitializer();
   const { t } = useTranslation();
-  const { hideOpenMode } = useOpenModeContext();
+  const { isMobile } = useOpenModeContext();
 
   return (
     <ModalActionSchemaInitializerItem
@@ -128,7 +128,7 @@ export function WorkbenchPopupActionSchemaInitializerItem(props) {
                         grid: {
                           type: 'void',
                           'x-component': 'Grid',
-                          'x-initializer': 'page:addBlock',
+                          'x-initializer': isMobile ? 'mobile:addBlock' : 'page:addBlock',
                           properties: {},
                         },
                       },

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

@@ -89,6 +89,7 @@ export const Mobile = () => {
           <AntdAppProvider className={`mobile-container ${styles.nbMobile}`}>
             <OpenModeProvider
               defaultOpenMode="page"
+              isMobile={true}
               hideOpenMode
               openModeToComponent={{
                 page: MobileActionPage,