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 {props.children}; +}; 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 = () => { > - + + +