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
This commit is contained in:
katherinehhh 2023-06-14 20:14:57 +08:00 committed by GitHub
parent 8b9c0fa979
commit c4816c6963
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 10 deletions

View File

@ -26,7 +26,7 @@ export const InternalNester = () => {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ant-card-body { .ant-card-body {
padding: 15px 20px; padding: 15px 20px 5px;
} }
.ant-divider-horizontal { .ant-divider-horizontal {
margin: 10px 0; margin: 10px 0;

View File

@ -4,6 +4,7 @@ import { FieldContext, FormContext, RecursionField, observer, useField, useField
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { ConfigProvider, Spin } from 'antd'; import { ConfigProvider, Spin } from 'antd';
import React, { useEffect, useMemo } from 'react'; import React, { useEffect, useMemo } from 'react';
import { css } from '@emotion/css';
import { useActionContext } from '..'; import { useActionContext } from '..';
import { useAttach, useComponent } from '../..'; import { useAttach, useComponent } from '../..';
import { useProps } from '../../hooks/useProps'; import { useProps } from '../../hooks/useProps';
@ -177,7 +178,13 @@ export const Form: React.FC<FormProps> & {
const formDisabled = disabled || field.disabled; const formDisabled = disabled || field.disabled;
return ( return (
<ConfigProvider componentDisabled={formDisabled}> <ConfigProvider componentDisabled={formDisabled}>
<form> <form
className={css`
.ant-formily-item-feedback-layout-loose {
margin-bottom: 12px;
}
`}
>
<Spin spinning={field.loading || false}> <Spin spinning={field.loading || false}>
{form ? ( {form ? (
<WithForm form={form} {...others} disabled={formDisabled} /> <WithForm form={form} {...others} disabled={formDisabled} />

View File

@ -44,6 +44,9 @@ const InternalGridCardBlockProvider = (props) => {
background: #fff; background: #fff;
} }
} }
.ant-formily-item-feedback-layout-loose {
margin-bottom: 12px;
}
`} `}
> >
{props.children} {props.children}

View File

@ -13,9 +13,9 @@ import { ArrayField } from '@formily/core';
import { defaultColumnCount, pageSizeOptions } from './options'; import { defaultColumnCount, pageSizeOptions } from './options';
const rowGutter = { const rowGutter = {
md: 16, md: 12,
sm: 8, sm: 5,
xs: 8, xs: 5,
}; };
const designerCss = css` const designerCss = css`

View File

@ -23,8 +23,8 @@
.theme-compact { .theme-compact {
--nb-spacing: 12px; --nb-spacing: 12px;
--nb-designer-offset: -6px; --nb-designer-offset: -6px;
.ant-formily-item { .ant-formily-item-feedback-layout-loose {
margin-bottom: 12px; margin-bottom: 8px !important;
} }
.ant-card { .ant-card {
margin-bottom: 12px !important; margin-bottom: 12px !important;

View File

@ -1,5 +1,6 @@
import { createForm } from '@formily/core'; import { createForm } from '@formily/core';
import { FormContext, useField } from '@formily/react'; import { FormContext, useField } from '@formily/react';
import { css, cx } from '@emotion/css';
import React, { createContext, useContext, useEffect, useMemo } from 'react'; import React, { createContext, useContext, useEffect, useMemo } from 'react';
import { FormLayout } from '@formily/antd'; import { FormLayout } from '@formily/antd';
import { BlockProvider, useBlockRequestContext } from '../../../block-provider'; import { BlockProvider, useBlockRequestContext } from '../../../block-provider';
@ -30,7 +31,22 @@ const InternalListBlockProvider = (props) => {
}} }}
> >
<FormContext.Provider value={form}> <FormContext.Provider value={form}>
<FormLayout layout={'vertical'}>{props.children}</FormLayout> <FormLayout layout={'vertical'}>
<div
className={cx(
css`
.ant-description-input {
line-height: 34px;
}
.ant-formily-item-feedback-layout-loose {
margin-bottom: 12px;
}
`,
)}
>
{props.children}
</div>
</FormLayout>
</FormContext.Provider> </FormContext.Provider>
</ListBlockContext.Provider> </ListBlockContext.Provider>
); );

View File

@ -8,8 +8,8 @@ const itemCss = css`
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
gap: 8px; // gap: 8px;
padding: 12px 0; padding: 5px 0;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
`; `;