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
2025-05-05 13:39:24 +08:00 · 2024-06-14 11:11:50 +08:00 · 2024-06-14 11:11:50 +08:00 · 8260cfc817
commit 8260cfc817
parent b9bc94e062
10 changed files with 34 additions and 14 deletions
--- 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",
--- 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)',
+                  },
                },
              },
            },
--- 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",
--- 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)',
              },
            },
          },
--- 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(
        <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')}
            >
--- 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;
 };
--- 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;
+              }
            }
          `,
        )}
--- 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;
 };
--- 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;
 };
--- 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;
      }