refactor: pc block & action compatible with mobile devices (#4935)

* style: import modal style improve

* style: grid card style improve

* style: action bar style improve

* style: action bar style improve

* style: action bar style improve

* fix: improt modal

* fix: modal style

* fix: bug

* fix: bug

* fix: modal style

* refactor: pagination style

* refactor: table configure fields  style

* refactor: grid card style

* style: table block  margin

* style: table block  margin

* fix: bug

packages/core/client/src/schema-component/antd/action/ActionBar.tsx

@@ -104,6 +104,7 @@ export const ActionBar = withDynamicSchemaProps(
                 alignItems: 'center',
                 overflowX: 'auto',
                 flexShrink: 0,
+                gap: '8px',
                 ...style,
               }
         }
@@ -118,10 +119,11 @@ export const ActionBar = withDynamicSchemaProps(
             width: '100%',
             overflow: 'hidden',
             flexWrap: 'wrap',
+            gap: '8px',
           }}
         >
           <DndContext>
-            <Space {...spaceProps}>
+            <Space {...spaceProps} style={{ flexWrap: 'wrap' }}>
               {fieldSchema.mapProperties((schema, key) => {
                 if (schema['x-align'] !== 'left') {
                   return null;

packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts

@@ -21,7 +21,7 @@ const useStyles = genStyleHook('nb-grid-card', (token) => {
         },
         '.ant-list-pagination': { padding: token.marginLG, background: token.colorBgContainer },
       },
-      '.ant-formily-item-feedback-layout-loose': { marginBottom: token.marginSM },
+      '.ant-formily-item-feedback-layout-loose': { marginBottom: 0 },
     },
   };
 });

packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx

@@ -22,7 +22,7 @@ const itemCss = css`
   height: 100%;
   flex-direction: column;
   justify-content: space-between;
-  gap: 8px;
+  gap: 0px;
 `;
 
 const gridCardCss = css`
@@ -30,6 +30,10 @@ const gridCardCss = css`
   > .ant-card-body {
     padding: 24px 24px 0px;
     height: 100%;
+    button {
+      margin-bottom: 0px !important;
+      margin-top: 5px;
+    }
   }
   .nb-action-bar {
     padding: 5px 0;

packages/core/client/src/schema-component/antd/table-v2/Table.tsx

@@ -10,7 +10,7 @@
 import { DeleteOutlined, MenuOutlined } from '@ant-design/icons';
 import { TinyColor } from '@ctrl/tinycolor';
 import { SortableContext, SortableContextProps, useSortable } from '@dnd-kit/sortable';
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { ArrayField } from '@formily/core';
 import { spliceArrayState } from '@formily/core/esm/shared/internals';
 import { RecursionField, Schema, observer, useField, useFieldSchema } from '@formily/react';
@@ -166,7 +166,7 @@ const useTableColumns = (props: { showDel?: boolean; isSubTable?: boolean }) =>
         title: render(),
         dataIndex: 'TABLE_COLUMN_INITIALIZER',
         key: 'TABLE_COLUMN_INITIALIZER',
-        render: designable ? () => <div style={{ minWidth: 180 }} /> : null,
+        render: designable ? () => <div style={{ width: '100%' }} /> : null,
         fixed: designable ? 'right' : 'none',
       },
     ];
@@ -715,28 +715,31 @@ export const Table: any = withDynamicSchemaProps(
     }, [expandedKeys, onExpandValue]);
     return (
       <div
-        className={css`
+        className={cx(
-          height: 100%;
+          css`
-          overflow: hidden;
-          .ant-table-wrapper {
             height: 100%;
-            .ant-spin-nested-loading {
+            overflow: hidden;
+            .ant-table-wrapper {
               height: 100%;
-              .ant-spin-container {
+              .ant-spin-nested-loading {
                 height: 100%;
-                display: flex;
+                .ant-spin-container {
-                flex-direction: column;
+                  height: 100%;
-                .ant-table-body {
+                  display: flex;
-                  min-height: ${tableHeight}px;
+                  flex-direction: column;
+                  .ant-table-body {
+                    min-height: ${tableHeight}px;
+                  }
                 }
               }
             }
-          }
+            .ant-table {
-          .ant-table {
+              overflow-x: auto;
-            overflow-x: auto;
+              overflow-y: hidden;
-            overflow-y: hidden;
+            }
-          }
+          `,
-        `}
+          'nb-table-container',
+        )}
       >
         <SortableWrapper>
           <MemoizedAntdTable

packages/plugins/@nocobase/plugin-action-import/src/client/ImportActionInitializer.tsx

@@ -74,10 +74,13 @@ export const ImportActionInitializer = () => {
       modal: {
         type: 'void',
         title: `{{ t("Import Data", {ns: "${NAMESPACE}" }) }}`,
-        'x-component': 'Action.Container',
+        'x-component': 'Action.Modal',
         'x-decorator': 'Form',
         'x-component-props': {
-          width: '50%',
+          width: '100%',
+          style: {
+            maxWidth: '750px',
+          },
           className: css`
             .ant-formily-item-label {
               height: var(--controlHeightLG);
@@ -133,7 +136,7 @@ export const ImportActionInitializer = () => {
             },
           },
           footer: {
-            'x-component': 'Action.Container.Footer',
+            'x-component': 'Action.Modal.Footer',
             'x-component-props': {},
             properties: {
               actions: {

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

@@ -16,11 +16,12 @@ import { DesktopMode } from '../desktop-mode/DesktopMode';
 import { PluginMobileClient } from '../index';
 import { MobileActionPage } from '../pages/mobile-action-page/MobileActionPage';
 import { MobileAppProvider } from './MobileAppContext';
+import { useStyles } from './styles';
 
 export const Mobile = () => {
   const mobilePlugin = usePlugin(PluginMobileClient);
   const MobileRouter = mobilePlugin.getRouterComponent();
-
+  const { styles } = useStyles();
   // 设置的移动端 meta
   React.useEffect(() => {
     if (!isDesktop) {
@@ -43,35 +44,36 @@ export const Mobile = () => {
   }, []);
 
   const DesktopComponent = mobilePlugin.desktopMode === false ? React.Fragment : DesktopMode;
-
   return (
     <DesktopComponent>
       {/* 目前移动端由于和客户端的主题对不上，所以先使用 `GlobalThemeProvider` 和 `AntdAppProvider` 进行重置为默认主题  */}
-      <GlobalThemeProvider
+      <div className={styles.nbMobile}>
-        theme={{
+        <GlobalThemeProvider
-          token: {
+          theme={{
-            marginBlock: 18,
+            token: {
-            borderRadiusBlock: 0,
+              marginBlock: 18,
-            boxShadowTertiary: 'none',
+              borderRadiusBlock: 0,
-          },
+              boxShadowTertiary: 'none',
-        }}
+            },
-      >
+          }}
-        <AntdAppProvider>
+        >
-          <OpenModeProvider
+          <AntdAppProvider>
-            defaultOpenMode="page"
+            <OpenModeProvider
-            hideOpenMode
+              defaultOpenMode="page"
-            openModeToComponent={{
+              hideOpenMode
-              page: MobileActionPage,
+              openModeToComponent={{
-              drawer: MobileActionPage,
+                page: MobileActionPage,
-              modal: Action.Modal,
+                drawer: MobileActionPage,
-            }}
+                modal: Action.Modal,
-          >
+              }}
-            <MobileAppProvider>
+            >
-              <MobileRouter />
+              <MobileAppProvider>
-            </MobileAppProvider>
+                <MobileRouter />
-          </OpenModeProvider>
+              </MobileAppProvider>
-        </AntdAppProvider>
+            </OpenModeProvider>
-      </GlobalThemeProvider>
+          </AntdAppProvider>
+        </GlobalThemeProvider>
+      </div>
     </DesktopComponent>
   );
 };

packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 { createStyles } from '@nocobase/client';
+
+export const useStyles = createStyles(({ token, css }) => {
+  return {
+    nbMobile: css`
+      display: initial;
+      .ant-table-thead button[aria-label*='schema-initializer-TableV2-table:configureColumns'] > span:last-child {
+        display: none !important;
+      }
+      .ant-table-thead button[aria-label*='schema-initializer-TableV2-table:configureColumns'] > .ant-btn-icon {
+        margin: 0px;
+      }
+      .ant-pagination .ant-pagination-total-text {
+        display: none;
+      }
+      .ant-pagination .ant-pagination-options {
+        display: none;
+      }
+      .ant-pagination .ant-pagination-item {
+        display: none;
+      }
+      .ant-card-body .nb-action-bar .ant-btn {
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        span {
+          display: contents;
+        }
+      }
+      .ant-card-body .nb-action-bar .ant-btn-icon {
+        margin-inline-end: 0px !important;
+      }
+      .ant-card-body .ant-table-cell-fix-right:last-child {
+        // display: table-cell;
+        // width: auto;
+      }
+      .ant-card-body .nb-table-container {
+        margin-right: -20px;
+        margin-left: -10px;
+      }
+      .nb-action-bar button[aria-label*='schema-initializer-ActionBar-table:configureActions'] > span:last-child {
+        display: none !important;
+      }
+      .nb-action-bar button[aria-label*='schema-initializer-ActionBar-table:configureActions'] > .ant-btn-icon {
+        margin: 0px;
+      }
+      .nb-card-list .ant-row > div {
+        width: 100% !important;
+        max-width: 100% !important;
+      }
+    `,
+  };
+});