fix: form/detail/filter block height (#4652)

* fix: form/detail/filter block height

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

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",

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)',
+                  },
                 },
               },
             },

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",

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)',
               },
             },
           },

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(
         <Portal>
           <DndContext>
             <div
-              style={{ display: 'flex', alignItems: 'center', gap: 8, ...style }}
+              style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: token.marginLG, ...style }}
               {...others}
               className={cx(others.className, 'nb-action-bar')}
             >

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)
+      ? token.controlHeight +
-      : isFilterForm
+        (isFilterForm || !isDetailForm ? (designable ? 2 : 1) * token.marginLG : 2 * token.marginLG)
-        ? token.marginLG
+      : unDesignableActionBar();
-        : 2 * token.marginLG;
   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;
 };

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;
+              }
             }
           `,
         )}

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;
 };

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;
 };

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;
+        margin-right: ${token.margin}
-        padding-bottom: 15px;
+        padding-bottom: ${token.margin}
         width: 300px;
       }