From 9241198da90822ad1f06feeb4cba03397c5a2974 Mon Sep 17 00:00:00 2001
From: katherinehhh <shunai.tang@hand-china.com>
Date: Mon, 26 Jun 2023 11:21:46 +0800
Subject: [PATCH] style:list and gridCard block style improve (#2087)

* style: list block style improve

* style: gridCard block style improve
---
 .../antd/grid-card/GridCard.Item.tsx              | 14 +++++++++-----
 .../schema-component/antd/list/List.Decorator.tsx |  6 +++---
 .../src/schema-component/antd/list/List.Item.tsx  |  6 +++---
 .../src/schema-component/antd/list/List.tsx       | 15 +++++++++------
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git 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
index 3d91e983b8..e3646e2a65 100644
--- 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
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Card } from 'antd';
 import { css } from '@emotion/css';
-import { useField } from '@formily/react';
 import { ObjectField } from '@formily/core';
+import { useField } from '@formily/react';
+import { Card } from 'antd';
+import React from 'react';
 import { RecordSimpleProvider } from '../../../record-provider';
 
 const itemCss = css`
@@ -19,10 +19,14 @@ export const GridCardItem = (props) => {
   return (
     <Card
       className={css`
-        &,
-        & .ant-card-body {
+        height: 100%;
+        > .ant-card-body {
+          padding: 24px 24px 0px;
           height: 100%;
         }
+        .nb-action-bar button {
+          margin-bottom: 10px;
+        }
       `}
     >
       <div className={itemCss}>
diff --git a/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx b/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
index 8230f9d05c..968c734e58 100644
--- a/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
+++ b/packages/core/client/src/schema-component/antd/list/List.Decorator.tsx
@@ -1,8 +1,8 @@
+import { css, cx } from '@emotion/css';
+import { FormLayout } from '@formily/antd';
 import { createForm } from '@formily/core';
 import { FormContext, useField } from '@formily/react';
-import { css, cx } from '@emotion/css';
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
-import { FormLayout } from '@formily/antd';
 import { BlockProvider, useBlockRequestContext } from '../../../block-provider';
 
 export const ListBlockContext = createContext<any>({});
@@ -39,7 +39,7 @@ const InternalListBlockProvider = (props) => {
                   line-height: 34px;
                 }
                 .ant-formily-item-feedback-layout-loose {
-                  margin-bottom: 12px;
+                  display: inline;
                 }
               `,
             )}
diff --git a/packages/core/client/src/schema-component/antd/list/List.Item.tsx b/packages/core/client/src/schema-component/antd/list/List.Item.tsx
index c684e2f5dc..9220c650a8 100644
--- a/packages/core/client/src/schema-component/antd/list/List.Item.tsx
+++ b/packages/core/client/src/schema-component/antd/list/List.Item.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
 import { css } from '@emotion/css';
-import { useField } from '@formily/react';
 import { ObjectField } from '@formily/core';
+import { useField } from '@formily/react';
+import React from 'react';
 import { RecordSimpleProvider } from '../../../record-provider';
 
 const itemCss = css`
@@ -9,7 +9,7 @@ const itemCss = css`
   width: 100%;
   flex-direction: column;
   // gap: 8px;
-  padding: 5px 0;
+  padding: 4px 5px 0;
   border-bottom: 1px solid #f0f0f0;
 `;
 
diff --git a/packages/core/client/src/schema-component/antd/list/List.tsx b/packages/core/client/src/schema-component/antd/list/List.tsx
index bc4757c25e..3d905ad9da 100644
--- a/packages/core/client/src/schema-component/antd/list/List.tsx
+++ b/packages/core/client/src/schema-component/antd/list/List.tsx
@@ -1,19 +1,22 @@
-import { ListDesigner } from './List.Designer';
-import { ListBlockProvider, useListBlockContext, useListItemProps } from './List.Decorator';
-import React, { useCallback, useEffect, useState } from 'react';
-import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
 import { css, cx } from '@emotion/css';
+import { ArrayField } from '@formily/core';
+import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
 import { List as AntdList, PaginationProps } from 'antd';
-import { useListActionBarProps } from './hooks';
+import React, { useCallback, useState } from 'react';
 import { SortableItem } from '../../common';
 import { SchemaComponentOptions } from '../../core';
 import { useDesigner } from '../../hooks';
+import { useListActionBarProps } from './hooks';
+import { ListBlockProvider, useListBlockContext, useListItemProps } from './List.Decorator';
+import { ListDesigner } from './List.Designer';
 import { ListItem } from './List.Item';
-import { ArrayField } from '@formily/core';
 
 const designerCss = css`
   width: 100%;
   margin-bottom: var(--nb-spacing);
+  .nb-action-bar {
+    margin-top: 10px;
+  }
   &:hover {
     > .general-schema-designer {
       display: block;