diff --git a/packages/core/client/src/modules/blocks/data-blocks/list/__tests__/createListBlockSchema.test.ts b/packages/core/client/src/modules/blocks/data-blocks/list/__tests__/createListBlockSchema.test.ts index 11527ca1cf..3578f5d0ab 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/list/__tests__/createListBlockSchema.test.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/list/__tests__/createListBlockSchema.test.ts @@ -54,6 +54,9 @@ describe('createListBlockSchema', () => { "x-component": "ActionBar", "x-component-props": { "layout": "one-column", + "style": { + "marginTop": "var(--nb-spacing)", + }, }, "x-initializer": "list:configureItemActions", "x-use-component-props": "useListActionBarProps", diff --git a/packages/core/client/src/modules/blocks/data-blocks/list/createListBlockUISchema.ts b/packages/core/client/src/modules/blocks/data-blocks/list/createListBlockUISchema.ts index bd82488da7..c8287d0ba5 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/list/createListBlockUISchema.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/list/createListBlockUISchema.ts @@ -74,6 +74,9 @@ export const createListBlockUISchema = (options: { 'x-use-component-props': 'useListActionBarProps', 'x-component-props': { layout: 'one-column', + style: { + marginTop: 'var(--nb-spacing)', + }, }, }, }, diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/__tests__/createFilterFormBlockSchema.test.ts b/packages/core/client/src/modules/blocks/filter-blocks/form/__tests__/createFilterFormBlockSchema.test.ts index 2b6ee20b5c..002c53c85d 100644 --- a/packages/core/client/src/modules/blocks/filter-blocks/form/__tests__/createFilterFormBlockSchema.test.ts +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/__tests__/createFilterFormBlockSchema.test.ts @@ -38,6 +38,7 @@ describe('createFilterFormBlockSchema', () => { "layout": "one-column", "style": { "float": "right", + "marginTop": "var(--nb-spacing)", }, }, "x-initializer": "filterForm:configureActions", @@ -86,6 +87,7 @@ describe('createFilterFormBlockSchema', () => { "layout": "one-column", "style": { "float": "right", + "marginTop": "var(--nb-spacing)", }, }, "x-initializer": "filterForm:configureActions", diff --git a/packages/core/client/src/modules/blocks/filter-blocks/form/createFilterFormBlockSchema.ts b/packages/core/client/src/modules/blocks/filter-blocks/form/createFilterFormBlockSchema.ts index 4f67888d83..4893fd617c 100644 --- a/packages/core/client/src/modules/blocks/filter-blocks/form/createFilterFormBlockSchema.ts +++ b/packages/core/client/src/modules/blocks/filter-blocks/form/createFilterFormBlockSchema.ts @@ -53,6 +53,7 @@ export const createFilterFormBlockSchema = (options: { layout: 'one-column', style: { float: 'right', + marginTop: 'var(--nb-spacing)', }, }, }, diff --git a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx index 398b2ea43e..6b59f3349f 100644 --- a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx +++ b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx @@ -9,7 +9,7 @@ import { cx } from '@emotion/css'; import { RecursionField, observer, useFieldSchema } from '@formily/react'; -import { Space, SpaceProps } from 'antd'; +import { Space, SpaceProps, theme } from 'antd'; import React, { CSSProperties, useContext } from 'react'; import { createPortal } from 'react-dom'; import { useSchemaInitializerRender } from '../../../application'; @@ -60,7 +60,7 @@ const Portal: React.FC = (props) => { export const ActionBar = withDynamicSchemaProps( observer((props: any) => { const { forceProps = {} } = useActionBarContext(); - + const { token } = theme.useToken(); // 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema const { layout = 'two-columns', style, spaceProps, ...others } = { ...useProps(props), ...forceProps } as any; @@ -73,7 +73,7 @@ export const ActionBar = withDynamicSchemaProps(
diff --git a/packages/core/client/src/schema-component/antd/form-v2/hook.ts b/packages/core/client/src/schema-component/antd/form-v2/hook.ts index 6a22646db8..4e536910c1 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/hook.ts +++ b/packages/core/client/src/schema-component/antd/form-v2/hook.ts @@ -30,18 +30,22 @@ export const useFormBlockHeight = () => { return buf; }); const isFilterForm = schema.parent?.['x-decorator'] === 'FilterFormBlockProvider'; + const isDetailForm = schema.parent?.['x-decorator'] === 'DetailsBlockProvider'; + const hasFormActions = Object.keys(actionSchema?.properties || {}).length > 0; + const unDesignableActionBar = () => { + return token.marginLG; + }; const actionBarHeight = hasFormActions || designable - ? token.controlHeight + (isFilterForm ? token.marginLG : 2 * token.marginLG) - : isFilterForm - ? token.marginLG - : 2 * token.marginLG; + ? token.controlHeight + + (isFilterForm || !isDetailForm ? (designable ? 2 : 1) * token.marginLG : 2 * token.marginLG) + : unDesignableActionBar(); const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0; const { data } = useDataBlockRequest() || {}; const { count, pageSize } = (data as any)?.meta || ({} as any); const hasPagination = count > pageSize; - const paginationHeight = hasPagination ? token.controlHeightSM + token.paddingLG : 0; + const paginationHeight = hasPagination ? token.controlHeightSM + (designable ? 1 : 0) * token.paddingLG : 0; const dataTemplateHeight = display && enabled ? token.controlHeight + 2 * token.padding + token.margin : 0; return height - actionBarHeight - token.paddingLG - blockTitleHeaderHeight - paginationHeight - dataTemplateHeight; }; 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 e3de5a7643..0a020a37b5 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 @@ -137,6 +137,9 @@ const InternalGridCard = (props: GridCardProps) => { height: ${height ? height + `px` : '100%'}; overflow-y: ${height ? 'auto' : null}; overflow-x: clip; + .nb-action-bar { + margin-top: 0px !important; + } } `, )} diff --git a/packages/core/client/src/schema-component/antd/grid-card/hooks.ts b/packages/core/client/src/schema-component/antd/grid-card/hooks.ts index ddcc72a179..5e16c0c24f 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/hooks.ts +++ b/packages/core/client/src/schema-component/antd/grid-card/hooks.ts @@ -8,9 +8,10 @@ */ import { SpaceProps, theme } from 'antd'; +import { useFieldSchema } from '@formily/react'; import { useDataBlockHeight } from '../../hooks/useBlockSize'; import { useDesignable } from '../../'; -import { useFieldSchema } from '@formily/react'; +import { useDataBlockRequest } from '../../../data-source'; const spaceProps: SpaceProps = { size: ['large', 'small'], @@ -29,11 +30,15 @@ export const useGridCardBodyHeight = () => { const height = useDataBlockHeight(); const schema = useFieldSchema(); const hasActions = Object.keys(schema.parent.properties.actionBar?.properties || {}).length > 0; + const { data } = useDataBlockRequest() || {}; + const { count, pageSize } = (data as any)?.meta || ({} as any); + const hasPagination = count > pageSize; if (!height) { return; } + const actionBarHeight = designable || hasActions ? token.controlHeight + 2 * token.paddingLG + token.marginLG : 0; - const paginationHeight = token.controlHeight + 2 * token.paddingLG + token.marginLG; + const paginationHeight = hasPagination ? token.controlHeight + 2 * token.paddingLG + token.marginLG : 0; return height - actionBarHeight - paginationHeight; }; diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/board/hook.ts b/packages/plugins/@nocobase/plugin-kanban/src/client/board/hook.ts index e58b78c237..3fe3f6645e 100644 --- a/packages/plugins/@nocobase/plugin-kanban/src/client/board/hook.ts +++ b/packages/plugins/@nocobase/plugin-kanban/src/client/board/hook.ts @@ -28,7 +28,6 @@ export const useKanbanBlockHeight = () => { const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0; - const footerheight = token.padding + 2 * token.marginSM + token.paddingLG + (designable ? 0 : 10); - + const footerheight = token.controlPaddingHorizontal + token.margin + token.paddingLG - token.marginXS; return height - actionBarHeight - kanbanHeaderHeight - footerheight - blockTitleHeaderHeight; }; diff --git a/packages/plugins/@nocobase/plugin-kanban/src/client/board/style.ts b/packages/plugins/@nocobase/plugin-kanban/src/client/board/style.ts index b7d713f433..c2c48c1302 100644 --- a/packages/plugins/@nocobase/plugin-kanban/src/client/board/style.ts +++ b/packages/plugins/@nocobase/plugin-kanban/src/client/board/style.ts @@ -63,8 +63,8 @@ export const useStyles = createStyles(({ css, token }) => { .react-kanban-column { background-color: ${token.colorFillQuaternary}; - margin-right: 15px; - padding-bottom: 15px; + margin-right: ${token.margin} + padding-bottom: ${token.margin} width: 300px; }