fix(GridCard): ensure single column display in mobile

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

@@ -0,0 +1,25 @@
+/**
+ * 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 { SchemaComponentOptions, useSchemaOptionsContext } from '@nocobase/client';
+import React, { FC, useMemo } from 'react';
+import { useGridCardBlockDecoratorProps } from './useGridCardBlockDecoratorProps';
+
+/* 使用移动端专属的 scope 覆盖桌面端的 scope，用于在移动端适配桌面端区块 */
+export const ResetSchemaOptionsProvider: FC = (props) => {
+  const { scope: desktopScopes } = useSchemaOptionsContext();
+  const scopes = useMemo(
+    () => ({
+      useGridCardBlockDecoratorProps: (props) =>
+        useGridCardBlockDecoratorProps(props, desktopScopes?.useGridCardBlockDecoratorProps),
+    }),
+    [desktopScopes?.useGridCardBlockDecoratorProps],
+  );
+  return <SchemaComponentOptions scope={scopes}>{props.children}</SchemaComponentOptions>;
+};

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

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+/**
+ * 用于设置 Grid Card 区块的 props，使其样式适配移动端；
+ * @param oldUseGridCardBlockDecoratorProps
+ */
+export const useGridCardBlockDecoratorProps = (props, useGridCardBlockDecoratorPropsOfDesktop: any) => {
+  const oldProps = useGridCardBlockDecoratorPropsOfDesktop(props);
+
+  return {
+    ...oldProps,
+    // 在移动端中，无论是什么屏幕尺寸，都只显示一列
+    columnCount: {
+      lg: 1,
+      md: 1,
+      xs: 1,
+      xxl: 1,
+    },
+  };
+};

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

@@ -19,6 +19,7 @@ import React from 'react';
 import { isDesktop } from 'react-device-detect';
 
 import { usedToResetFilterActionForMobile } from '../adaptor-of-desktop/FilterAction';
+import { ResetSchemaOptionsProvider } from '../adaptor-of-desktop/ResetSchemaOptionsProvider';
 import { PageBackgroundColor } from '../constants';
 import { DesktopMode } from '../desktop-mode/DesktopMode';
 import { PluginMobileClient } from '../index';
@@ -78,7 +79,9 @@ export const Mobile = () => {
           >
             <BlockTemplateProvider componentNamePrefix="mobile-">
               <MobileAppProvider>
-                <MobileRouter />
+                <ResetSchemaOptionsProvider>
+                  <MobileRouter />
+                </ResetSchemaOptionsProvider>
               </MobileAppProvider>
             </BlockTemplateProvider>
           </OpenModeProvider>