From aecc4a97390c9aeb098f9e150dfbe95451bc0be5 Mon Sep 17 00:00:00 2001
From: Katherine <shunai.tang@hand-china.com>
Date: Wed, 12 Jun 2024 14:50:40 +0800
Subject: [PATCH] fix: block height calculation (#4629)

* fix: block height calculation

* fix: test
---
 .../antd/block-item/BlockItem.tsx             | 23 ++++++++++++++++---
 .../__tests__/collection-select.test.tsx      |  4 ++--
 .../src/schema-component/antd/page/style.ts   |  2 +-
 .../schema-component/hooks/useBlockSize.ts    |  5 ++++
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
index 5f88e50ecd69e..2b9a4c0724d78 100644
--- a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
+++ b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
@@ -9,6 +9,8 @@
 
 import { useFieldSchema } from '@formily/react';
 import cls from 'classnames';
+import { css } from '@emotion/css';
+import { theme } from 'antd';
 import React, { useMemo } from 'react';
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 import { CustomCreateStylesUtils, createStyles } from '../../../style';
@@ -18,6 +20,7 @@ import { useGetAriaLabelOfBlockItem } from './hooks/useGetAriaLabelOfBlockItem';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '../error-fallback';
 import { useSchemaToolbarRender } from '../../../application';
+import { useDesignable } from '../../';
 
 const useStyles = createStyles(({ css, token }: CustomCreateStylesUtils) => {
   return css`
@@ -81,15 +84,29 @@ export const BlockItem: React.FC<BlockItemProps> = withDynamicSchemaProps(
     // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
     const { className, children } = useProps(props);
     const { styles: blockItemCss } = useStyles();
-
     const fieldSchema = useFieldSchema();
     const { render } = useSchemaToolbarRender(fieldSchema);
     const { getAriaLabel } = useGetAriaLabelOfBlockItem(props.name);
-
+    const { token } = theme.useToken();
+    const { designable } = useDesignable();
     const label = useMemo(() => getAriaLabel(), [getAriaLabel]);
 
     return (
-      <SortableItem role="button" aria-label={label} className={cls('nb-block-item', className, blockItemCss)}>
+      <SortableItem
+        role="button"
+        aria-label={label}
+        className={cls(
+          'nb-block-item',
+          className,
+          blockItemCss,
+          css`
+            margin-bottom: ${designable ? token.marginLG : 0}px !important;
+            .ant-card {
+              margin-bottom: ${designable ? token.marginLG : 0}px !important;
+            }
+          `,
+        )}
+      >
         {render()}
         <ErrorBoundary FallbackComponent={ErrorFallback} onError={(err) => console.log(err)}>
           {children}
diff --git a/packages/core/client/src/schema-component/antd/collection-select/__tests__/collection-select.test.tsx b/packages/core/client/src/schema-component/antd/collection-select/__tests__/collection-select.test.tsx
index ace2b5b6d3d53..80924672d6281 100644
--- a/packages/core/client/src/schema-component/antd/collection-select/__tests__/collection-select.test.tsx
+++ b/packages/core/client/src/schema-component/antd/collection-select/__tests__/collection-select.test.tsx
@@ -50,7 +50,7 @@ describe('CollectionSelect', () => {
         >
           <div
             aria-label="block-item-demo title"
-            class="nb-sortable-designer nb-block-item nb-form-item acss-gw2dva"
+            class="nb-sortable-designer nb-block-item nb-form-item acss-gw2dva css-vua9sf"
             role="button"
           >
             <div
@@ -187,7 +187,7 @@ describe('CollectionSelect', () => {
         >
           <div
             aria-label="block-item-demo title"
-            class="nb-sortable-designer nb-block-item nb-form-item acss-gw2dva"
+            class="nb-sortable-designer nb-block-item nb-form-item acss-gw2dva css-vua9sf"
             role="button"
           >
             <div
diff --git a/packages/core/client/src/schema-component/antd/page/style.ts b/packages/core/client/src/schema-component/antd/page/style.ts
index d1f21fb5ebae4..aad46a1d9b5f5 100644
--- a/packages/core/client/src/schema-component/antd/page/style.ts
+++ b/packages/core/client/src/schema-component/antd/page/style.ts
@@ -120,7 +120,7 @@ export const useStyles = genStyleHook('nb-page', (token) => {
       },
 
       '.nb-page-wrapper': {
-        padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px 0px ${token.paddingPageHorizontal}px`,
+        padding: `${token.paddingPageVertical}px`,
         flex: 1,
       },
     },
diff --git a/packages/core/client/src/schema-component/hooks/useBlockSize.ts b/packages/core/client/src/schema-component/hooks/useBlockSize.ts
index 45c0caad38445..f8ef157b38806 100644
--- a/packages/core/client/src/schema-component/hooks/useBlockSize.ts
+++ b/packages/core/client/src/schema-component/hooks/useBlockSize.ts
@@ -34,6 +34,11 @@ const getPageHeaderHeight = (disablePageHeader, enablePageTabs, hidePageTitle, t
       }
       return token.controlHeight + token.marginXS + (token.paddingXXS + 2) * 2 + token.paddingContentHorizontalLG;
     } else {
+      if (enablePageTabs) {
+        return (
+          token.controlPaddingHorizontal + 3 * token.controlPaddingHorizontalSM + 22 + token.paddingContentHorizontalLG
+        );
+      }
       return token.paddingContentHorizontalLG + 12;
     }
   }