From 5828439050a1980ea132d82e042772c96c62a8b1 Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Sun, 28 Jul 2024 17:42:21 +0800
Subject: [PATCH] fix(GridCard): ensure single column display in mobile

---
 .../ResetSchemaOptionsProvider.tsx            | 25 +++++++++++++++++
 .../useGridCardBlockDecoratorProps.tsx        | 27 +++++++++++++++++++
 .../src/client/mobile/Mobile.tsx              |  5 +++-
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ResetSchemaOptionsProvider.tsx
 create mode 100644 packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/useGridCardBlockDecoratorProps.tsx

diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ResetSchemaOptionsProvider.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/ResetSchemaOptionsProvider.tsx
new file mode 100644
index 0000000000..1e02970ee5
--- /dev/null
+++ b/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>;
+};
diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/useGridCardBlockDecoratorProps.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/useGridCardBlockDecoratorProps.tsx
new file mode 100644
index 0000000000..d4ad5cec71
--- /dev/null
+++ b/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,
+    },
+  };
+};
diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx
index 52fa728876..f15d300098 100644
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx
+++ b/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>