style(client): grid style improve (nocobase#4647)

* style: grid style improve * refactor: remove min height for block heght * fix: min height
AydenGen · Jun 13, 2024 · e8c2bff · e8c2bff
1 parent a6c16cf
commit e8c2bff
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 22 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
@@ -9,8 +9,6 @@
 
 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';
@@ -20,7 +18,6 @@ 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`
@@ -87,26 +84,10 @@ export const BlockItem: React.FC<BlockItemProps> = withDynamicSchemaProps(
     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,
-          css`
-            margin-bottom: ${designable ? token.marginLG : 0}px !important;
-            .ant-card {
-              margin-bottom: ${designable ? token.marginLG : 0}px !important;
-            }
-          `,
-        )}
-      >
+      <SortableItem role="button" aria-label={label} className={cls('nb-block-item', className, blockItemCss)}>
         {render()}
         <ErrorBoundary FallbackComponent={ErrorFallback} onError={(err) => console.log(err)}>
           {children}

diff --git a/packages/core/client/src/schema-component/antd/grid/Grid.tsx b/packages/core/client/src/schema-component/antd/grid/Grid.tsx
@@ -13,6 +13,8 @@ import { ISchema, RecursionField, Schema, observer, useField, useFieldSchema } f
 import { uid } from '@formily/shared';
 import cls from 'classnames';
 import _ from 'lodash';
+import { css } from '@emotion/css';
+import { theme } from 'antd';
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { SchemaComponent, useDesignable, useSchemaInitializerRender } from '../../../';
 import { useFormBlockContext, useFormBlockType } from '../../../block-provider/FormBlockProvider';
@@ -333,7 +335,8 @@ export const Grid: any = observer(
     const rows = useRowProperties();
     const { setPrintContent } = useFormBlockContext();
     const { styles } = useStyles();
-
+    const { token } = theme.useToken();
+    const { designable } = useDesignable();
     const distributedValue =
       distributed === undefined
         ? fieldSchema?.parent['x-component'] === 'Page' || fieldSchema?.parent['x-component'] === 'Tabs.TabPane'
@@ -356,7 +359,18 @@ export const Grid: any = observer(
     return (
       <FilterBlockProvider>
         <GridContext.Provider value={gridContextValue}>
-          <div className={`nb-grid ${styles.container}`} style={{ position: 'relative' }} ref={gridRef}>
+          <div
+            className={cls(
+              `nb-grid ${styles.container}`,
+              css`
+                & {
+                  margin-bottom: ${designable ? 0 : -token.marginLG}px;
+                }
+              `,
+            )}
+            style={{ position: 'relative' }}
+            ref={gridRef}
+          >
             <div className="nb-grid-warp">
               <DndWrapper dndContext={props.dndContext}>
                 {showDivider ? (