From e46118997437dbfc95c33bf7a7ae616ed03248eb Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Sun, 7 Jul 2024 08:34:12 +0800
Subject: [PATCH] fix: adjust the margin of the Add block button in the grid
 layout (#4820)

* fix: improve grid style

* fix: style
---
 .../src/schema-component/antd/grid/Grid.style.ts   |  8 ++++++++
 .../client/src/schema-component/antd/grid/Grid.tsx |  8 ++------
 .../client/src/schema-component/antd/page/Page.tsx | 14 +++++++++++++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/grid/Grid.style.ts b/packages/core/client/src/schema-component/antd/grid/Grid.style.ts
index d844729c69..1b2984dadc 100644
--- a/packages/core/client/src/schema-component/antd/grid/Grid.style.ts
+++ b/packages/core/client/src/schema-component/antd/grid/Grid.style.ts
@@ -14,6 +14,7 @@ const useStyles = createStyles(({ token, css, cx }: any) => {
   const important = token.marginBlock === token.marginLG ? ' !important' : '';
 
   return {
+    wrapper: css``,
     container: css`
       .ColDivider {
         flex-shrink: 0;
@@ -54,6 +55,13 @@ const useStyles = createStyles(({ token, css, cx }: any) => {
       .showDivider {
         margin: 0 calc(-1 * ${token.marginBlock}px) ${important};
       }
+
+      .nb-grid-warp > button:last-child {
+        margin-bottom: ${token.marginBlock}px;
+      }
+      .nb-grid-warp .nb-grid-warp > button:last-child {
+        margin-bottom: ${token.margin}px;
+      }
     `,
   };
 });
diff --git a/packages/core/client/src/schema-component/antd/grid/Grid.tsx b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
index 19472c2728..45f091d0ea 100644
--- a/packages/core/client/src/schema-component/antd/grid/Grid.tsx
+++ b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
@@ -358,7 +358,7 @@ export const Grid: any = observer(
     return (
       <FilterBlockProvider>
         <GridContext.Provider value={gridContextValue}>
-          <div className={cls('nb-grid-container')}>
+          <div className={cls('nb-grid-container', styles.wrapper)}>
             <div className={cls(`nb-grid ${styles.container}`)} style={{ position: 'relative' }} ref={gridRef}>
               <div className="nb-grid-warp">
                 <DndWrapper dndContext={props.dndContext}>
@@ -400,11 +400,7 @@ export const Grid: any = observer(
                     );
                   })}
                 </DndWrapper>
-                {render({
-                  style: {
-                    marginBottom: token.marginLG,
-                  },
-                })}
+                {render()}
               </div>
             </div>
           </div>
diff --git a/packages/core/client/src/schema-component/antd/page/Page.tsx b/packages/core/client/src/schema-component/antd/page/Page.tsx
index 52f60ae406..1b88704026 100644
--- a/packages/core/client/src/schema-component/antd/page/Page.tsx
+++ b/packages/core/client/src/schema-component/antd/page/Page.tsx
@@ -9,6 +9,7 @@
 
 import { PlusOutlined } from '@ant-design/icons';
 import { PageHeader as AntdPageHeader } from '@ant-design/pro-layout';
+import { css } from '@emotion/css';
 import { FormLayout } from '@formily/antd-v5';
 import { Schema, SchemaOptionsContext, useFieldSchema } from '@formily/react';
 import { Button, Tabs } from 'antd';
@@ -252,7 +253,18 @@ function PageContent(
     })
   ) : (
     <FixedBlock height={`calc(${height}px + 46px + ${token.paddingPageVertical}px * 2)`}>
-      <div className={`pageWithFixedBlockCss nb-page-content`}>
+      <div
+        className={classNames(
+          `pageWithFixedBlockCss nb-page-content`,
+          css`
+            > .nb-grid-container:not(:last-child) {
+              > .nb-grid > .nb-grid-warp > button:last-child {
+                display: none;
+              }
+            }
+          `,
+        )}
+      >
         <SchemaComponent schema={fieldSchema} distributed />
       </div>
     </FixedBlock>