fix: mobile style bug (#4934)

packages/core/client/src/global-theme/type.ts

@@ -47,6 +47,10 @@ export interface CustomToken extends AliasToken {
   marginBlock: number;
   /** 区块的圆角 */
   borderRadiusBlock: number;
+  /** 区块的 boxShadow */
+  boxShadowBlock: string;
+  /** 区块的下边框 */
+  borderBottomBlock: string;
 }
 
 export interface ThemeConfig extends _ThemeConfig {

packages/core/client/src/schema-component/antd/card-item/style.ts

@@ -15,6 +15,10 @@ const useStyles = genStyleHook('nb-card-item', (token) => {
   return {
     [componentCls]: {
       marginBottom: token.marginBlock,
+      '> .ant-card': {
+        boxShadow: token.boxShadowBlock,
+        borderBottom: token.borderBottomBlock,
+      },
     },
   };
 });

packages/plugins/@nocobase/plugin-mobile-client/package.json

@@ -5,8 +5,8 @@
   "homepage": "https://docs.nocobase.com/handbook/mobile-client",
   "homepage.zh-CN": "https://docs-cn.nocobase.com/handbook/mobile-client",
   "license": "AGPL-3.0",
-  "displayName": "Mobile client",
+  "displayName": "Mobile client(Deprecated)",
-  "displayName.zh-CN": "移动端",
+  "displayName.zh-CN": "移动端（已废弃）",
   "description": "Provides the ability to configure mobile pages.",
   "description.zh-CN": "提供移动端页面配置的能力。",
   "devDependencies": {

packages/plugins/@nocobase/plugin-mobile/package.json

@@ -5,8 +5,8 @@
   "homepage": "https://docs.nocobase.com/handbook/mobile",
   "homepage.zh-CN": "https://docs-cn.nocobase.com/handbook/mobile",
   "license": "AGPL-3.0",
-  "displayName": "Mobile",
+  "displayName": "Mobile(Developing)",
-  "displayName.zh-CN": "移动端",
+  "displayName.zh-CN": "移动端（开发中）",
   "description": "Provides the ability to configure mobile pages.",
   "description.zh-CN": "提供移动端页面配置的能力。",
   "peerDependencies": {

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

@@ -47,7 +47,16 @@ export const Mobile = () => {
   return (
     <DesktopComponent>
       {/* 目前移动端由于和客户端的主题对不上，所以先使用 `GlobalThemeProvider` 和 `AntdAppProvider` 进行重置为默认主题  */}
-      <GlobalThemeProvider>
+      <GlobalThemeProvider
+        theme={{
+          token: {
+            marginBlock: 18,
+            borderRadiusBlock: 0,
+            boxShadowBlock: 'none',
+            borderBottomBlock: '1px solid var(--adm-color-border)',
+          },
+        }}
+      >
         <AntdAppProvider>
           <OpenModeProvider
             defaultOpenMode="page"

packages/plugins/@nocobase/plugin-mobile/src/client/pages/dynamic-page/content/styles.ts

@@ -13,14 +13,5 @@ export const useStyles = createStyles(() => ({
   mobilePageContent: {
     maxWidth: '100%',
     overflowX: 'hidden',
-    '.ant-card': {
-      marginBottom: '18px !important',
-      borderRadius: '0 !important',
-      boxShadow: 'none',
-      borderBottom: '1px solid var(--adm-color-border)',
-    },
-    '.ant-nb-card-item': {
-      marginBottom: '18px !important',
-    },
   },
 }));

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

@@ -15,18 +15,12 @@ import {
   useActionContext,
   useTabsContext,
 } from '@nocobase/client';
-import { ConfigProvider } from 'antd';
 import React, { useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { useMobileActionPageStyle } from './MobileActionPage.style';
 import { MobileTabsForMobileActionPage } from './MobileTabsForMobileActionPage';
 
 const components = { Tabs: MobileTabsForMobileActionPage };
-const theme: any = {
-  token: {
-    marginBlock: 18,
-  },
-};
 
 /**
  * 在移动端通过 Action 按钮打开的页面
@@ -53,9 +47,7 @@ export const MobileActionPage = ({ level }) => {
   const actionPageNode = (
     <div className={styles.container} style={style}>
       <TabsContextProvider {...tabContext} tabBarExtraContent={<BackButtonUsedInSubPage />} tabBarGutter={48}>
-        <ConfigProvider theme={theme}>
+        <SchemaComponent components={components} schema={filedSchema} onlyRenderProperties />
-          <SchemaComponent components={components} schema={filedSchema} onlyRenderProperties />
-        </ConfigProvider>
       </TabsContextProvider>
     </div>
   );

packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/meta/category.ts

@@ -262,7 +262,7 @@ const category: TokenTree<keyof AliasToken | string> = [
         nameEn: 'Shadow',
         desc: '',
         descEn: '',
-        mapToken: ['boxShadow', 'boxShadowSecondary'],
+        mapToken: ['boxShadow', 'boxShadowSecondary', 'boxShadowBlock'],
       },
     ],
   },

packages/plugins/@nocobase/plugin-theme-editor/src/client/antd-token-previewer/token-panel-pro/token-meta.json

@@ -1759,5 +1759,21 @@
     "descEn": "Used to set the radius of the block",
     "type": "number",
     "source": "map"
+  },
+  "boxShadowBlock": {
+    "name": "区块的阴影",
+    "nameEn": "Shadow of block",
+    "desc": "用于设置区块的阴影",
+    "descEn": "Used to set the shadow of the block",
+    "type": "string",
+    "source": "map"
+  },
+  "borderBottomBlock": {
+    "name": "区块的底边框",
+    "nameEn": "Bottom border of block",
+    "desc": "用于设置区块的底边框",
+    "descEn": "Used to set the bottom border of the block",
+    "type": "string",
+    "source": "map"
   }
 }