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
2024-11-15 08:26:21 +00:00 · 2024-08-02 13:49:40 +08:00 · 2024-08-02 13:49:40 +08:00 · c74b234dde
commit c74b234dde
parent 0f4dd0b3ae
7 changed files with 129 additions and 51 deletions
--- a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx
+++ b/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;
--- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts
+++ b/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 },
    },
  };
 });
--- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx
+++ b/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;
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
+++ b/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`
-          height: 100%;
-          overflow: hidden;
-          .ant-table-wrapper {
+        className={cx(
+          css`
            height: 100%;
-            .ant-spin-nested-loading {
+            overflow: hidden;
+            .ant-table-wrapper {
              height: 100%;
-              .ant-spin-container {
+              .ant-spin-nested-loading {
                height: 100%;
-                display: flex;
-                flex-direction: column;
-                .ant-table-body {
-                  min-height: ${tableHeight}px;
+                .ant-spin-container {
+                  height: 100%;
+                  display: flex;
+                  flex-direction: column;
+                  .ant-table-body {
+                    min-height: ${tableHeight}px;
+                  }
                }
              }
            }
-          }
-          .ant-table {
-            overflow-x: auto;
-            overflow-y: hidden;
-          }
-        `}
+            .ant-table {
+              overflow-x: auto;
+              overflow-y: hidden;
+            }
+          `,
+          'nb-table-container',
+        )}
      >
        <SortableWrapper>
          <MemoizedAntdTable
--- a/packages/plugins/@nocobase/plugin-action-import/src/client/ImportActionInitializer.tsx
+++ b/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: {
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx
+++ b/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
-        theme={{
-          token: {
-            marginBlock: 18,
-            borderRadiusBlock: 0,
-            boxShadowTertiary: 'none',
-          },
-        }}
-      >
-        <AntdAppProvider>
-          <OpenModeProvider
-            defaultOpenMode="page"
-            hideOpenMode
-            openModeToComponent={{
-              page: MobileActionPage,
-              drawer: MobileActionPage,
-              modal: Action.Modal,
-            }}
-          >
-            <MobileAppProvider>
-              <MobileRouter />
-            </MobileAppProvider>
-          </OpenModeProvider>
-        </AntdAppProvider>
-      </GlobalThemeProvider>
+      <div className={styles.nbMobile}>
+        <GlobalThemeProvider
+          theme={{
+            token: {
+              marginBlock: 18,
+              borderRadiusBlock: 0,
+              boxShadowTertiary: 'none',
+            },
+          }}
+        >
+          <AntdAppProvider>
+            <OpenModeProvider
+              defaultOpenMode="page"
+              hideOpenMode
+              openModeToComponent={{
+                page: MobileActionPage,
+                drawer: MobileActionPage,
+                modal: Action.Modal,
+              }}
+            >
+              <MobileAppProvider>
+                <MobileRouter />
+              </MobileAppProvider>
+            </OpenModeProvider>
+          </AntdAppProvider>
+        </GlobalThemeProvider>
+      </div>
    </DesktopComponent>
  );
 };
--- a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/styles.ts
+++ b/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;
+      }
+    `,
+  };
+});