From c4816c6963682ad49bf561dee416198bcbfe9656 Mon Sep 17 00:00:00 2001 From: katherinehhh Date: Wed, 14 Jun 2023 20:14:57 +0800 Subject: [PATCH] refactor: List block and GridCard block style improve (#1988) * refactor: list block and gridCard style improve * style: style improve * style: gridCard style improve * style: list style improve * style: style improve * style: style improve * style: style improve * style: style improve --- .../antd/association-field/InternalNester.tsx | 2 +- .../src/schema-component/antd/form-v2/Form.tsx | 9 ++++++++- .../antd/grid-card/GridCard.Decorator.tsx | 3 +++ .../antd/grid-card/GridCard.tsx | 6 +++--- .../src/schema-component/antd/index.less | 4 ++-- .../antd/list/List.Decorator.tsx | 18 +++++++++++++++++- .../schema-component/antd/list/List.Item.tsx | 4 ++-- 7 files changed, 36 insertions(+), 10 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx index 00cca8174..9b6563562 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx @@ -26,7 +26,7 @@ export const InternalNester = () => { margin-bottom: 10px; } .ant-card-body { - padding: 15px 20px; + padding: 15px 20px 5px; } .ant-divider-horizontal { margin: 10px 0; diff --git a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx index 0a3023d7f..1d5dc201d 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx @@ -4,6 +4,7 @@ import { FieldContext, FormContext, RecursionField, observer, useField, useField import { uid } from '@formily/shared'; import { ConfigProvider, Spin } from 'antd'; import React, { useEffect, useMemo } from 'react'; +import { css } from '@emotion/css'; import { useActionContext } from '..'; import { useAttach, useComponent } from '../..'; import { useProps } from '../../hooks/useProps'; @@ -177,7 +178,13 @@ export const Form: React.FC & { const formDisabled = disabled || field.disabled; return ( -
+ {form ? ( diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx index 213cd6fe0..6a442c0c6 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx +++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx @@ -44,6 +44,9 @@ const InternalGridCardBlockProvider = (props) => { background: #fff; } } + .ant-formily-item-feedback-layout-loose { + margin-bottom: 12px; + } `} > {props.children} diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx index e871184ad..fdcd72bbb 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx +++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx @@ -13,9 +13,9 @@ import { ArrayField } from '@formily/core'; import { defaultColumnCount, pageSizeOptions } from './options'; const rowGutter = { - md: 16, - sm: 8, - xs: 8, + md: 12, + sm: 5, + xs: 5, }; const designerCss = css` diff --git a/packages/core/client/src/schema-component/antd/index.less b/packages/core/client/src/schema-component/antd/index.less index 9983da977..65a8f4cf4 100644 --- a/packages/core/client/src/schema-component/antd/index.less +++ b/packages/core/client/src/schema-component/antd/index.less @@ -23,8 +23,8 @@ .theme-compact { --nb-spacing: 12px; --nb-designer-offset: -6px; - .ant-formily-item { - margin-bottom: 12px; + .ant-formily-item-feedback-layout-loose { + margin-bottom: 8px !important; } .ant-card { margin-bottom: 12px !important; 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 c3f7c4ab8..8230f9d05 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,5 +1,6 @@ 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'; @@ -30,7 +31,22 @@ const InternalListBlockProvider = (props) => { }} > - {props.children} + +
+ {props.children} +
+
); 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 c206b3a05..c684e2f5d 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 @@ -8,8 +8,8 @@ const itemCss = css` display: flex; width: 100%; flex-direction: column; - gap: 8px; - padding: 12px 0; + // gap: 8px; + padding: 5px 0; border-bottom: 1px solid #f0f0f0; `;